/* ============================================================ sleepArt · VARIANT THEMES (deep restructure edition) 4 komplette Design-Sprachen, umschaltbar per v0 = default (Neon Bold auf dunklem Grund — nichts überschreiben) v1 = Neon Editorial (cream + Neon-Akzente) v2 = Color Block Bold (Sektionen wechseln Farbe) v3 = Modernist Grid (off-white, IBM Plex, harte Kanten) ============================================================ */ @import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&family=Instrument+Serif:ital@0;1&display=swap"); /* ============================================================ V1 · NEON EDITORIAL Cream-Grund, Neon-Akzente. Fraunces bleibt. Layout-Änderungen: hellere Karten, dünnere Ränder, farbige Akzent-Bänder ============================================================ */ :root[data-variant="v1"] { --bg: #F5EFE4; --bg-2: #ECE4D2; --bg-3: #DFD4BC; --paper: #FFFFFF; --paper-2:#F5EFE4; --ink: #1B1B1A; --ink-70: rgba(27,27,26,0.72); --ink-50: rgba(27,27,26,0.55); --ink-30: rgba(27,27,26,0.28); --ink-10: rgba(27,27,26,0.10); --dark: #1B1B1A; --dark-70: rgba(27,27,26,0.72); --dark-50: rgba(27,27,26,0.55); --line: rgba(27,27,26,0.14); --line-strong: rgba(27,27,26,0.32); --line-dark: rgba(27,27,26,0.14); --accent: #FF3D9A; --accent-2: #C7FF3D; --accent-ink: #1B1B1A; --radius: 4px; --radius-lg: 16px; --radius-xl: 28px; } /* v1: Hero-Glows werden warm-neon */ :root[data-variant="v1"] .hero::before { background: radial-gradient(circle at 30% 30%, var(--accent) 0%, transparent 60%) !important; opacity: 0.22 !important; } :root[data-variant="v1"] .hero::after { background: radial-gradient(circle at 70% 70%, var(--accent-2) 0%, transparent 60%) !important; opacity: 0.20 !important; } /* v1: alle Karten weiß auf cremigem Grund */ :root[data-variant="v1"] .apt-card, :root[data-variant="v1"] .info-card, :root[data-variant="v1"] .usp-item, :root[data-variant="v1"] .review-portal-card, :root[data-variant="v1"] .testimonial-card, :root[data-variant="v1"] .apt-review-card, :root[data-variant="v1"] .apt-quote-card, :root[data-variant="v1"] .contact-block, :root[data-variant="v1"] .parking-card, :root[data-variant="v1"] .arrive-mode, :root[data-variant="v1"] .faq-item { background: #FFFFFF !important; border: 1px solid rgba(27,27,26,0.10) !important; } /* v1: Statement-Sektion bleibt dunkel (der eine schwarze Block als Kontrast) */ :root[data-variant="v1"] #bestpreis.statement { background: #1B1B1A !important; color: #F5EFE4; } :root[data-variant="v1"] #bestpreis.statement * { color: inherit; } :root[data-variant="v1"] #bestpreis .italic-serif, :root[data-variant="v1"] #bestpreis em { color: var(--accent-2) !important; } :root[data-variant="v1"] #bestpreis .btn-primary { background: var(--accent); color: #1B1B1A; } /* v1: Marquee-Streifen mit Border */ :root[data-variant="v1"] .marquee { background: #FFFFFF; border-block: 1px solid rgba(27,27,26,0.14); color: var(--ink); } :root[data-variant="v1"] .marquee-track em { color: var(--accent); } /* v1: Nav-Blur wird cream */ :root[data-variant="v1"] .nav { background: rgba(245,239,228,0.85) !important; } /* ============================================================ V2 · COLOR BLOCK BOLD Sektionsweise Farbwechsel. Grotesk statt Serif für UI. Fast wie ein Print-Magazin: jede Sektion eine eigene Bühne. ============================================================ */ :root[data-variant="v2"] { --bg: #F5EFE4; --bg-2: #FFFFFF; --bg-3: #F5EFE4; --paper: #F5EFE4; --paper-2:#FFFFFF; --ink: #0F0E12; --ink-70: rgba(15,14,18,0.72); --ink-50: rgba(15,14,18,0.55); --ink-30: rgba(15,14,18,0.28); --ink-10: rgba(15,14,18,0.10); --dark: #0F0E12; --dark-70: rgba(15,14,18,0.72); --dark-50: rgba(15,14,18,0.55); --line: rgba(15,14,18,0.20); --line-strong: rgba(15,14,18,0.50); --line-dark: rgba(15,14,18,0.20); --accent: #FF3D9A; --accent-2: #C7FF3D; --accent-ink: #0F0E12; --font-body: "Space Grotesk", -apple-system, BlinkMacSystemFont, sans-serif; --radius: 6px; --radius-lg: 20px; --radius-xl: 32px; } /* v2: alle Karten & Buttons mit dickem schwarzen Border */ :root[data-variant="v2"] .apt-card, :root[data-variant="v2"] .info-card, :root[data-variant="v2"] .usp-item, :root[data-variant="v2"] .review-portal-card, :root[data-variant="v2"] .testimonial-card, :root[data-variant="v2"] .apt-review-card, :root[data-variant="v2"] .apt-quote-card, :root[data-variant="v2"] .contact-block, :root[data-variant="v2"] .parking-card, :root[data-variant="v2"] .arrive-mode, :root[data-variant="v2"] .faq-item, :root[data-variant="v2"] .sj-card, :root[data-variant="v2"] .sj-home-card { border: 2px solid #0F0E12 !important; background: #FFFFFF !important; } :root[data-variant="v2"] .btn-primary { background: var(--accent) !important; color: #0F0E12 !important; border: 2px solid #0F0E12 !important; font-weight: 600 !important; } :root[data-variant="v2"] .btn-primary:hover { background: var(--accent-2) !important; transform: translateY(-2px); } /* v2: Sektions-Farbblöcke */ :root[data-variant="v2"] section#ueber-uns, :root[data-variant="v2"] section.about-section { background: #C7FF3D !important; color: #0F0E12; border-block: 2px solid #0F0E12; } :root[data-variant="v2"] section#warum { background: #0F0E12 !important; color: #F5F1E8; } :root[data-variant="v2"] section#warum .h-1, :root[data-variant="v2"] section#warum h2, :root[data-variant="v2"] section#warum p, :root[data-variant="v2"] section#warum .lead, :root[data-variant="v2"] section#warum .usp-title, :root[data-variant="v2"] section#warum .usp-body { color: inherit; } :root[data-variant="v2"] section#warum .eyebrow { color: var(--accent-2); } :root[data-variant="v2"] section#warum .italic-serif, :root[data-variant="v2"] section#warum em { color: var(--accent-2) !important; } :root[data-variant="v2"] section#warum .usp-item { background: transparent !important; border: 2px solid rgba(245,241,232,0.2) !important; color: #F5F1E8; } :root[data-variant="v2"] section#bestpreis.statement { background: var(--accent) !important; color: #0F0E12; border-block: 2px solid #0F0E12; } :root[data-variant="v2"] section#bestpreis * { color: inherit; } :root[data-variant="v2"] section#bestpreis .btn { background: #0F0E12; color: #F5F1E8; border: 2px solid #0F0E12; } :root[data-variant="v2"] section#celle-teaser { background: #3D8BFF !important; color: #0F0E12; border-block: 2px solid #0F0E12; } :root[data-variant="v2"] section#celle-teaser * { color: inherit; } :root[data-variant="v2"] section#reviews { background: #FFD84E !important; color: #0F0E12; border-block: 2px solid #0F0E12; } :root[data-variant="v2"] section#reviews * { color: inherit; } :root[data-variant="v2"] section#reviews .rpc, :root[data-variant="v2"] section#reviews .review-portal-card, :root[data-variant="v2"] section#reviews .apt-review-card, :root[data-variant="v2"] section#reviews .testimonial, :root[data-variant="v2"] section#reviews .testimonial-card, :root[data-variant="v2"] section#reviews .apt-quote-card { background: #FFFFFF !important; } /* v2: Sophie & Jason Sektion — cream + drop-shadow als Design */ :root[data-variant="v2"] section#sophie-jason-home { background: #F5EFE4 !important; } :root[data-variant="v2"] .sj-home-card, :root[data-variant="v2"] .sj-card { box-shadow: 8px 8px 0 var(--accent) !important; } /* v2: Nav bekommt eigenen Look */ :root[data-variant="v2"] .nav { background: rgba(245,239,228,0.9) !important; border-bottom: 2px solid #0F0E12; } :root[data-variant="v2"] .nav.scrolled { border-bottom-color: #0F0E12; } /* v2: Marquee auf Ink */ :root[data-variant="v2"] .marquee { background: #0F0E12 !important; color: #F5F1E8; border-block: 2px solid #0F0E12; } :root[data-variant="v2"] .marquee-track em { color: var(--accent) !important; } :root[data-variant="v2"] .marquee-track .dot { color: var(--accent-2) !important; } /* v2: Body Font wird Grotesk */ :root[data-variant="v2"] body, :root[data-variant="v2"] .btn, :root[data-variant="v2"] .lead, :root[data-variant="v2"] p { font-family: "Space Grotesk", -apple-system, sans-serif !important; } /* ============================================================ V3 · MODERNIST GRID Off-white, IBM Plex, harte Kanten (radius: 0-4px), Instrument Serif italic für Punchlines. Alles wirkt technischer, editorial, minimalistisch. ============================================================ */ :root[data-variant="v3"] { --bg: #FAF8F3; --bg-2: #F0EBE0; --bg-3: #E6E0D0; --paper: #FAF8F3; --paper-2:#F0EBE0; --ink: #111111; --ink-70: rgba(17,17,17,0.72); --ink-50: rgba(17,17,17,0.55); --ink-30: rgba(17,17,17,0.28); --ink-10: rgba(17,17,17,0.10); --dark: #111111; --dark-70: rgba(17,17,17,0.72); --dark-50: rgba(17,17,17,0.55); --line: rgba(17,17,17,0.14); --line-strong: rgba(17,17,17,0.30); --line-dark: rgba(17,17,17,0.14); --accent: #FF2E7E; --accent-2: #B8FF3D; --accent-ink: #111111; --font-body: "IBM Plex Sans", -apple-system, sans-serif; --font-mono: "IBM Plex Mono", Menlo, monospace; --radius: 0px; --radius-lg: 4px; --radius-xl: 8px; } /* v3: alle Radien deutlich schärfer */ :root[data-variant="v3"] .apt-card, :root[data-variant="v3"] .info-card, :root[data-variant="v3"] .usp-item, :root[data-variant="v3"] .review-portal-card, :root[data-variant="v3"] .testimonial-card, :root[data-variant="v3"] .apt-review-card, :root[data-variant="v3"] .apt-quote-card, :root[data-variant="v3"] .contact-block, :root[data-variant="v3"] .parking-card, :root[data-variant="v3"] .arrive-mode, :root[data-variant="v3"] .faq-item, :root[data-variant="v3"] .sj-card, :root[data-variant="v3"] .sj-home-card { border-radius: 4px !important; border: 1px solid rgba(17,17,17,0.30) !important; background: #FFFFFF !important; } :root[data-variant="v3"] .btn, :root[data-variant="v3"] .btn-primary, :root[data-variant="v3"] .btn-outline, :root[data-variant="v3"] .btn-ghost { border-radius: 4px !important; font-family: "IBM Plex Sans", sans-serif !important; font-weight: 500 !important; text-transform: none !important; letter-spacing: 0 !important; } :root[data-variant="v3"] .btn-primary { background: #111111 !important; color: #FAF8F3 !important; } :root[data-variant="v3"] .btn-primary:hover { background: var(--accent) !important; color: #111111 !important; } /* v3: Body-Font wird IBM Plex Sans */ :root[data-variant="v3"] body, :root[data-variant="v3"] p, :root[data-variant="v3"] .lead { font-family: "IBM Plex Sans", -apple-system, sans-serif !important; } :root[data-variant="v3"] .eyebrow { font-family: "IBM Plex Mono", monospace !important; letter-spacing: 0.14em !important; } /* v3: Sektions-Header bekommen die "Nummer + Titel" Optik über eine dünne Linie */ :root[data-variant="v3"] section { border-top: 1px solid rgba(17,17,17,0.14); } :root[data-variant="v3"] section#warum, :root[data-variant="v3"] section#apartments, :root[data-variant="v3"] section#reviews, :root[data-variant="v3"] section#faq-teaser { background: #FAF8F3 !important; } :root[data-variant="v3"] section#ueber-uns.about-section { background: #F0EBE0 !important; } :root[data-variant="v3"] section#bestpreis.statement { background: #111111 !important; color: #FAF8F3; } :root[data-variant="v3"] section#bestpreis .italic-serif, :root[data-variant="v3"] section#bestpreis em { font-family: "Instrument Serif", Georgia, serif !important; color: var(--accent-2) !important; } :root[data-variant="v3"] section#celle-teaser { background: #F0EBE0 !important; } /* v3: italic-serif = Instrument Serif */ :root[data-variant="v3"] .italic-serif, :root[data-variant="v3"] em.italic-serif, :root[data-variant="v3"] .hero-headline em, :root[data-variant="v3"] .h-1 em, :root[data-variant="v3"] h1 em, :root[data-variant="v3"] h2 em { font-family: "Instrument Serif", Georgia, serif !important; font-weight: 400 !important; font-style: italic !important; color: var(--accent) !important; } /* v3: Nav — off-white mit klarer bottom-line */ :root[data-variant="v3"] .nav { background: rgba(250,248,243,0.92) !important; border-bottom: 1px solid rgba(17,17,17,0.14); backdrop-filter: blur(20px); } /* v3: Marquee flach */ :root[data-variant="v3"] .marquee { background: #111111 !important; color: #FAF8F3; border-block: 1px solid #111111; } :root[data-variant="v3"] .marquee-track em { font-family: "Instrument Serif", Georgia, serif !important; color: var(--accent) !important; } /* v3: statement bekommt riesige Zahl als "-15%" Design-Element */ :root[data-variant="v3"] #bestpreis.statement { position: relative; } /* ============================================================ VARIANT-SWITCHER-WIDGET (DEAKTIVIERT — v4 ist der finale Design-Stand) ============================================================ */ .variant-switcher { display: none !important; } .variant-switcher-legacy-hidden { position: fixed; bottom: 20px; left: 20px; z-index: 200; font-family: system-ui, -apple-system, sans-serif; } @media print { .variant-switcher { display: none !important; } } .variant-switcher .vs-toggle { width: 40px; height: 40px; border-radius: 999px; background: rgba(15,14,18,0.85); color: #F5F1E8; border: 1px solid rgba(255,255,255,0.2); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 8px 24px -8px rgba(0,0,0,0.4); transition: transform 200ms ease, background 200ms ease; } .variant-switcher .vs-toggle:hover { transform: scale(1.05); background: #FF3D9A; color: #0F0E12; } .variant-switcher .vs-panel { position: absolute; bottom: calc(100% + 8px); left: 0; min-width: 260px; padding: 12px; background: #17161C; color: #F5F1E8; border-radius: 12px; box-shadow: 0 20px 60px -20px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.08); font-size: 13px; } .variant-switcher .vs-title { font-size: 10px; text-transform: uppercase; letter-spacing: 0.16em; color: rgba(245,241,232,0.5); padding: 4px 8px 12px; border-bottom: 1px solid rgba(255,255,255,0.08); margin-bottom: 8px; } .variant-switcher .vs-list { display: flex; flex-direction: column; gap: 2px; } .variant-switcher .vs-opt { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 8px; background: transparent; border: 0; border-radius: 8px; cursor: pointer; color: inherit; text-align: left; transition: background 150ms ease; } .variant-switcher .vs-opt:hover { background: rgba(255,255,255,0.06); } .variant-switcher .vs-opt.is-active { background: rgba(255,61,154,0.14); } .variant-switcher .vs-dot { flex-shrink: 0; width: 22px; height: 22px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.2); } .variant-switcher .vs-dot[data-vd="v0"] { background: linear-gradient(135deg, #0F0E12 50%, #FF3D9A 50%); } .variant-switcher .vs-dot[data-vd="v1"] { background: linear-gradient(135deg, #F5EFE4 50%, #FF3D9A 50%); } .variant-switcher .vs-dot[data-vd="v2"] { background: linear-gradient(135deg, #C7FF3D 33%, #FF3D9A 33% 66%, #3D8BFF 66%); } .variant-switcher .vs-dot[data-vd="v3"] { background: linear-gradient(135deg, #FAF8F3 50%, #FF2E7E 50%); } .variant-switcher .vs-dot[data-vd="v4"] { background: linear-gradient(135deg, #DEFF00 50%, #231B3B 50%); } .variant-switcher .vs-opt.is-active .vs-dot { border-color: #FF3D9A; box-shadow: 0 0 0 2px rgba(255,61,154,0.25); } .variant-switcher .vs-labels { display: flex; flex-direction: column; gap: 2px; } .variant-switcher .vs-name { font-weight: 500; font-size: 13px; line-height: 1.2; } .variant-switcher .vs-hint { font-size: 11px; color: rgba(245,241,232,0.55); } .variant-switcher .vs-foot { padding: 10px 8px 4px; margin-top: 8px; border-top: 1px solid rgba(255,255,255,0.08); font-size: 10px; text-transform: uppercase; letter-spacing: 0.14em; color: rgba(245,241,232,0.35); } /* ============================================================ V4 · SUNNY YELLOW EDITORIAL Weißer Grund + Neon-Gelb (#DEFF00) + tiefes Violett (#231B3B) als Text Angelehnt an die aktuelle Live-Wix-Website (Farb-Kompatibilität) Hot Pink als 2. Signalfarbe für italic-Punchlines ============================================================ */ :root[data-variant="v4"] { --bg: #FFFFFF; --bg-2: #FAFAF5; --bg-3: #F5F5EA; --paper: #FFFFFF; --paper-2:#FAFAF5; --ink: #231B3B; --ink-70: rgba(35,27,59,0.72); --ink-50: rgba(35,27,59,0.55); --ink-30: rgba(35,27,59,0.28); --ink-10: rgba(35,27,59,0.10); --dark: #231B3B; --dark-70: rgba(35,27,59,0.72); --dark-50: rgba(35,27,59,0.55); --line: rgba(35,27,59,0.14); --line-strong: rgba(35,27,59,0.28); --line-dark: rgba(35,27,59,0.14); /* Neon-Gelb als Hauptakzent, Hot Pink als Sekundär */ --accent: #DEFF00; --accent-2: #FF3D9A; --accent-ink: #231B3B; /* Neue Support-Farben (weniger dominant, für Nuancen) */ --support-pink: #FF7FE8; /* helles Pink · für Verläufe, Hover-Bloom, Highlights */ --support-violet: #6F658C; /* gedämpftes Violett · für Trennlinien, sekundären Text */ --radius: 6px; --radius-lg: 18px; --radius-xl: 28px; } /* v4 · Hero-Glows in Gelb+Pink */ :root[data-variant="v4"] .hero::before { background: radial-gradient(circle at 25% 25%, var(--accent) 0%, transparent 65%) !important; opacity: 0.35 !important; filter: blur(90px); } :root[data-variant="v4"] .hero::after { background: radial-gradient(circle at 75% 75%, var(--accent-2) 0%, transparent 65%) !important; opacity: 0.22 !important; filter: blur(90px); } /* v4 · alle Karten weiß auf leicht warmem Grund */ :root[data-variant="v4"] .apt-card, :root[data-variant="v4"] .info-card, :root[data-variant="v4"] .usp-item, :root[data-variant="v4"] .review-portal-card, :root[data-variant="v4"] .testimonial-card, :root[data-variant="v4"] .apt-review-card, :root[data-variant="v4"] .apt-quote-card, :root[data-variant="v4"] .contact-block, :root[data-variant="v4"] .parking-card, :root[data-variant="v4"] .arrive-mode, :root[data-variant="v4"] .faq-item, :root[data-variant="v4"] .sj-card, :root[data-variant="v4"] .sj-home-card { background: #FFFFFF !important; border: 1px solid rgba(35,27,59,0.14) !important; } /* v4 · italic-serif in Hot Pink (Sekundärakzent), damit sich Kursivwörter vom Gelb absetzen */ :root[data-variant="v4"] .italic-serif, :root[data-variant="v4"] em.italic-serif, :root[data-variant="v4"] .hero-headline em, :root[data-variant="v4"] .h-1 em, :root[data-variant="v4"] h1 em, :root[data-variant="v4"] h2 em, :root[data-variant="v4"] .statement-text em { color: var(--accent-2) !important; } /* v4 · Primary Button: Neon-Gelb mit tiefem Violett-Text */ :root[data-variant="v4"] .btn-primary { background: var(--accent) !important; color: var(--ink) !important; border: 1px solid var(--ink) !important; font-weight: 600 !important; } :root[data-variant="v4"] .btn-primary:hover { background: var(--accent-2) !important; color: #FFFFFF !important; border-color: var(--accent-2) !important; transform: translateY(-2px); box-shadow: 0 14px 30px -12px rgba(255,61,154,0.4); } :root[data-variant="v4"] .btn-outline { border: 1px solid var(--ink) !important; color: var(--ink) !important; } :root[data-variant="v4"] .btn-outline:hover { background: var(--ink) !important; color: #FFFFFF !important; } /* v4 · Marquee-Streifen: Neon-Gelb-Grund mit Violett-Text */ :root[data-variant="v4"] .marquee { background: var(--accent) !important; color: var(--ink); border-block: 1px solid var(--ink); } :root[data-variant="v4"] .marquee-track em { color: var(--accent-2) !important; } :root[data-variant="v4"] .marquee-track .dot { color: var(--ink) !important; opacity: 0.5; } /* v4 · Nav: weiß mit Bottom-Line */ :root[data-variant="v4"] .nav { background: rgba(255,255,255,0.9) !important; border-bottom: 1px solid rgba(35,27,59,0.08); } :root[data-variant="v4"] .nav.scrolled { border-bottom-color: rgba(35,27,59,0.14); } :root[data-variant="v4"] .nav-logo em { color: var(--accent-2); } /* v4 · Bestpreis-Sektion in Neon-Gelb als starker Blickfang */ :root[data-variant="v4"] #bestpreis.statement { background: var(--accent) !important; color: var(--ink); } :root[data-variant="v4"] #bestpreis.statement * { color: inherit; } :root[data-variant="v4"] #bestpreis .btn-primary { background: var(--ink) !important; color: #FFFFFF !important; border-color: var(--ink) !important; } :root[data-variant="v4"] #bestpreis .btn-primary:hover { background: var(--accent-2) !important; border-color: var(--accent-2) !important; } :root[data-variant="v4"] #bestpreis .italic-serif, :root[data-variant="v4"] #bestpreis em { color: var(--ink) !important; font-style: italic; } /* v4 · Apartment-Karten: KEIN Farb-Filter über den Fotos. Höhere Spezifität + display:none garantieren, dass keine Regel aus styles.css oder inline-JS-Styles (background:color) den Overlay noch sichtbar macht. */ html[data-variant="v4"] .apt-rail .apt-card-swatch, html[data-variant="v4"] .apt-card .apt-card-swatch, html[data-variant="v4"] .apt-card-swatch { display: none !important; opacity: 0 !important; mix-blend-mode: normal !important; } html[data-variant="v4"] .apt-card:hover .apt-card-swatch { display: none !important; opacity: 0 !important; } :root[data-variant="v4"] .apt-card { box-shadow: 0 4px 16px -8px rgba(35,27,59,0.15); } :root[data-variant="v4"] .apt-card:hover { transform: translateY(-6px); box-shadow: 0 24px 48px -20px rgba(35,27,59,0.28); } /* v4 · Eyebrow-Farbe: Violett auf hellem Grund */ :root[data-variant="v4"] .eyebrow { color: var(--ink-50); } /* ---- v4 · Kontrast-Fix ---- Neon-Gelb-Text auf weißem Grund ist unlesbar. Überall wo eine Textfarbe auf --accent (Neon-Gelb) gesetzt wurde, nutzen wir stattdessen --accent-2 (Hot Pink) — auch gut sichtbar auf weiß. */ html[data-variant="v4"] .extras-cta, html[data-variant="v4"] .prose a, html[data-variant="v4"] .breadcrumb a:hover, html[data-variant="v4"] .info-card .num, html[data-variant="v4"] .contact-block .c-value a:hover, html[data-variant="v4"] .review-sources a:hover, html[data-variant="v4"] .phone-line-num:hover, html[data-variant="v4"] .lang-switch:hover, html[data-variant="v4"] .faq-item.open .faq-q, html[data-variant="v4"] .parking-card.is-recommended .parking-card-tag, html[data-variant="v4"] .parking-card.is-free .parking-card-tag, html[data-variant="v4"] .parking-card.is-timeCapped .parking-card-tag, html[data-variant="v4"] .lz-compass-n, html[data-variant="v4"] .lz-info-row.is-highlight dd strong, html[data-variant="v4"] .partner-strip .p-body em, html[data-variant="v4"] .partner-strip .p-meta strong, html[data-variant="v4"] .landing-shell h1 em, html[data-variant="v4"] .prose h2 em, html[data-variant="v4"] .arrive-mode-icon, html[data-variant="v4"] .arrive-mode h3 em, html[data-variant="v4"] .arrive-mode .step-num, html[data-variant="v4"] .lz-title em { color: var(--accent-2) !important; } /* Nachtrag: weitere gefundene Stellen die noch neon-gelb waren */ html[data-variant="v4"] .btn-quiet, html[data-variant="v4"] .hero-meta strong, html[data-variant="v4"] .usp-num, html[data-variant="v4"] .arrive-steps li::marker, html[data-variant="v4"] .parking-card.is-recommended, html[data-variant="v4"] .parking-card.is-free .parking-card-tag, html[data-variant="v4"] .parking-card.is-timeCapped .parking-card-tag { color: var(--accent-2) !important; } html[data-variant="v4"] .parking-card.is-timeCapped .parking-card-tag { border-color: color-mix(in oklab, var(--accent-2) 40%, var(--line)) !important; } /* Marker in Listen können nicht per :color !important gefärbt werden — braucht direkte Regel */ html[data-variant="v4"] .arrive-steps li::marker { color: #FF3D9A !important; } /* Landing-Shell H1 → dass italic-serif Wörter Hot Pink werden (statt Neon-Gelb) */ html[data-variant="v4"] .landing-shell h1 em, html[data-variant="v4"] .landing-shell .lead-block h1 em { color: var(--accent-2) !important; } /* Bestpreis-Tabellen-Highlight in v4: der gelbe Badge auf --bg wird unsichtbar -> ersetze durch tiefes Violett-Badge */ html[data-variant="v4"] .about-eyebrow-badge { background: var(--ink) !important; color: var(--accent) !important; } /* ---- v4 · Nuancen mit den Support-Farben Pink #FF7FE8 + Muted Violet #6F658C ---- */ /* Hero-Verlauf: gedecktes Pink statt hartes Hot-Pink (weicher, editorial) */ html[data-variant="v4"] .hero::after { background: radial-gradient(circle at 75% 75%, var(--support-pink) 0%, transparent 65%) !important; opacity: 0.28 !important; } /* Sanfte Trennstreifen zwischen Sektionen — 1px muted violet, sehr dezent */ html[data-variant="v4"] main > section + section:not(#bestpreis):not(.statement) { border-top: 1px solid rgba(111, 101, 140, 0.14); } html[data-variant="v4"] main > section#bestpreis { border-top: 3px solid var(--ink); border-bottom: 3px solid var(--ink); } /* Trennlinien in Cards & Sektionen: Muted Violet statt neutralem Ink */ html[data-variant="v4"] .section-head { border-bottom-color: rgba(111, 101, 140, 0.16); } html[data-variant="v4"] hr, html[data-variant="v4"] .faq-item { border-color: rgba(111, 101, 140, 0.18) !important; } /* Sekundärer Text (Meta, Muted, Footnotes) in Muted Violet — subtiler als reines Ink */ html[data-variant="v4"] .muted, html[data-variant="v4"] .hero-meta, html[data-variant="v4"] .review-footnote, html[data-variant="v4"] .extras-eyebrow, html[data-variant="v4"] .sj-home-text-quiet, html[data-variant="v4"] .c-label { color: var(--support-violet) !important; } /* Ghost-Button in Muted Violet · setzt sich vom Neon-Gelb-Primary ab */ html[data-variant="v4"] .btn-ghost, html[data-variant="v4"] .btn-outline { border: 1px solid var(--support-violet) !important; color: var(--support-violet) !important; } html[data-variant="v4"] .btn-ghost:hover, html[data-variant="v4"] .btn-outline:hover { background: var(--support-violet) !important; color: #FFFFFF !important; border-color: var(--support-violet) !important; transform: translateY(-2px); } /* Extras-Cards: sanfter Pink-Hover-Glow */ html[data-variant="v4"] .extras-card:hover { border-color: var(--support-pink); box-shadow: 0 24px 40px -20px rgba(255, 127, 232, 0.35); } html[data-variant="v4"] .extras-card:hover .extras-cta { color: var(--support-pink); } html[data-variant="v4"] .extras-eyebrow { color: var(--support-violet); } /* ============================================================ v4 · Sanfte Neon-Gelb-Farbverläufe in Sektionen Die Seite soll nicht rein weiß wirken. Sehr dezente Radial-Gradients (5-8% Opacity) verleihen Wärme ohne den Editorial-Charakter zu brechen. ============================================================ */ html[data-variant="v4"] body { background: #FFFFFF; } html[data-variant="v4"] #apartments { background: radial-gradient(ellipse 800px 500px at 100% 10%, rgba(222, 255, 0, 0.10), transparent 65%), radial-gradient(circle 500px at 5% 90%, rgba(255, 127, 232, 0.06), transparent 65%), #FFFFFF; position: relative; } html[data-variant="v4"] #extras { background: radial-gradient(ellipse 700px 400px at 0% 50%, rgba(222, 255, 0, 0.08), transparent 60%), #FFFFFF; position: relative; } html[data-variant="v4"] #reviews { background: radial-gradient(circle 700px at 90% 40%, rgba(222, 255, 0, 0.09), transparent 60%), radial-gradient(circle 400px at 10% 90%, rgba(255, 127, 232, 0.05), transparent 60%), #FFFFFF; position: relative; } html[data-variant="v4"] main > section:first-of-type { /* Hero-Bereich: sanfter Wärme-Hauch, ohne die harten Radial-Glows zu überschreiben */ background: linear-gradient(180deg, rgba(222, 255, 0, 0.04) 0%, transparent 40%), #FFFFFF; } /* Landing-Pages (ueber, celle, fruehstueck, anfahrt, faq etc.) bekommen ebenfalls sanfte Verläufe. Kein Section-Selektor — wir nehmen main als Ganzes, damit alle Seiten profitieren ohne Section-IDs kennen zu müssen. */ html[data-variant="v4"] main { background: radial-gradient(ellipse 1200px 700px at 100% 0%, rgba(222, 255, 0, 0.06), transparent 60%), radial-gradient(ellipse 900px 600px at 0% 100%, rgba(255, 127, 232, 0.04), transparent 60%), #FFFFFF; } /* Homepage hat main mit Hero-Bereich, wo wir explizite Gradients wollen — überschreibe */ html[data-variant="v4"] body:has(#apartments) main { background: #FFFFFF; } /* Sanfte Farbverläufe in einzelnen Cards für mehr Wärme (Extras, Info-Cards) */ html[data-variant="v4"] .extras-card { background: linear-gradient(135deg, #FFFFFF 0%, #FFFDEE 100%); } html[data-variant="v4"] .extras-card:hover { background: linear-gradient(135deg, #FFFEF5 0%, #FEFACD 100%); } html[data-variant="v4"] .info-card { background: linear-gradient(135deg, #FFFFFF 0%, #FFFDEE 100%); } html[data-variant="v4"] .usp-item { background: linear-gradient(135deg, #FFFFFF 0%, #FFFDEE 100%); } /* Apartment-Cards Hover: dezenter Pink-Schatten statt Kartenfarbe */ html[data-variant="v4"] .apt-card:hover { box-shadow: 0 24px 48px -20px rgba(255, 127, 232, 0.40) !important; } /* Statement/Bestpreis-Sektion: Neon-Gelb bleibt, aber Muted-Violet für Footnote */ html[data-variant="v4"] #bestpreis .muted { color: rgba(35, 27, 59, 0.65) !important; } /* Marquee: Neon-Gelb-Grund mit Muted-Violet als Punkt-Trenner (statt hartes Ink) */ html[data-variant="v4"] .marquee-track .dot { color: var(--support-violet) !important; opacity: 0.7; } /* Nav-Logo-Tag (Hotel & Appartements) in Muted Violet — subtiler */ html[data-variant="v4"] .nav-logo-tag { color: var(--support-violet); border-left-color: rgba(111, 101, 140, 0.35); } /* Sanfter Pink-zu-Gelb-Verlauf in einem einzelnen Marker (Testimonials-Sternen) */ html[data-variant="v4"] .testimonial-card .stars, html[data-variant="v4"] .review-portal-card .stars { background: linear-gradient(135deg, var(--accent-2) 0%, var(--support-pink) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }