/* ── Radix Styles v1.0.0-alpha ───────────────────────── MK Mahr Konzept – Mahr Medien Agentur CSS-Variablen gesteuert, Theme-kompatibel ──────────────────────────────────────────────────────── */ /* ── CSS Variable Defaults (overridden by PHP in ) ─── */ :root { --radix-primary: #8060d0; --radix-accent: #c8b4ff; --radix-bg: #0a0812; --radix-bg2: #12103a; --radix-text: #f0eaff; --radix-text-muted: rgba(200,180,255,0.6); --radix-btn-bg: rgba(100,70,200,0.2); --radix-btn-border: rgba(150,120,255,0.35); --radix-btn-text: #e0d0ff; --radix-radius: 20px; --radix-anim-speed: 1; --radix-orbit-display: block; --radix-stars-display: block; } /* ── Google Fonts ────────────────────────────────────────── */ /* Google Fonts loaded via wp_enqueue_style for DSGVO compliance and performance */ /* ── Wrapper ─────────────────────────────────────────────── */ .radix-tool { /* Theme isolation - NOT using all:initial as it strips CSS custom properties */ display: block !important; box-sizing: border-box !important; /* Reset common inherited properties */ font-style: normal !important; font-variant: normal !important; font-stretch: normal !important; word-spacing: normal !important; /* Layout */ background: var(--radix-bg) !important; border-radius: var(--radix-radius) !important; padding: 44px 40px !important; max-width: 580px !important; margin: 0 auto !important; font-family: var(--radix-font-body, 'DM Sans'), sans-serif !important; font-size: 16px !important; line-height: 1.5 !important; color: var(--radix-text) !important; position: relative !important; overflow: hidden !important; border: 1px solid rgba(128,96,208,0.18) !important; box-shadow: 0 0 60px rgba(128,96,208,0.12) !important; -webkit-font-smoothing: antialiased !important; -moz-osx-font-smoothing: grayscale !important; /* Reset common theme overrides */ text-align: left !important; letter-spacing: normal !important; word-spacing: normal !important; text-transform: none !important; text-decoration: none !important; text-shadow: none !important; list-style: none !important; } /* Ensure all children inherit isolation */ .radix-tool *, .radix-tool *::before, .radix-tool *::after { box-sizing: border-box !important; } /* ── Logo ────────────────────────────────────────────────── */ .radix-logo-wrap { text-align: center; margin-bottom: 20px; position: relative; z-index: 2; } .radix-logo { height: 48px; width: auto; max-width: 200px; opacity: 0.9; transition: opacity 0.2s; object-fit: contain; } .radix-logo:hover { opacity: 1; } /* ── Radix Badge (Powered by Mahr Konzept) ───────────────── */ .radix-badge { position: absolute !important; bottom: 8px !important; right: 10px !important; display: inline-block !important; text-decoration: none !important; opacity: 0.35 !important; transition: opacity 0.2s !important; z-index: 10 !important; pointer-events: auto !important; line-height: 1 !important; } .radix-badge--hidden { display: none !important; } .radix-badge:hover { opacity: 0.75 !important; } .radix-badge-text { font-size: 8px !important; font-weight: 500 !important; letter-spacing: 0.05em !important; color: var(--radix-text-muted) !important; white-space: nowrap !important; font-family: var(--radix-font-body, 'DM Sans'), sans-serif !important; text-transform: uppercase !important; } /* ── Star canvas ─────────────────────────────────────────── */ .radix-stars-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; display: var(--radix-stars-display); } /* ── Orbit rings ─────────────────────────────────────────── */ .radix-orbit { position: absolute; border-radius: 50%; border: 1px solid rgba(128,96,208,0.08); top: 50%; left: 50%; transform: translate(-50%, -50%); pointer-events: none; z-index: 0; display: var(--radix-orbit-display); } .radix-orbit-1 { width: 420px; height: 420px; animation: radix-orbit-spin calc(40s / var(--radix-anim-speed)) linear infinite; } .radix-orbit-2 { width: 260px; height: 260px; animation: radix-orbit-spin calc(25s / var(--radix-anim-speed)) linear infinite reverse; } .radix-orbit-3 { width: 140px; height: 140px; animation: radix-orbit-spin calc(15s / var(--radix-anim-speed)) linear infinite; } @keyframes radix-orbit-spin { to { transform: translate(-50%,-50%) rotate(360deg); } } .radix-orbit::after { content: ''; position: absolute; width: 4px; height: 4px; border-radius: 50%; background: var(--radix-accent); top: -2px; left: 50%; transform: translateX(-50%); box-shadow: 0 0 6px var(--radix-accent); opacity: 0.6; } .radix-orbit-2::after { width: 3px; height: 3px; } .radix-orbit-3::after { width: 2px; height: 2px; } /* ── Content z-index ─────────────────────────────────────── */ .radix-step { position: relative; z-index: 2; } /* ── Step transitions ────────────────────────────────────── */ .radix-step-visible { animation: radix-step-in calc(0.5s / var(--radix-anim-speed)) cubic-bezier(0.22,1,0.36,1) both; } @keyframes radix-step-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } /* ── Typewriter cursor ───────────────────────────────────── */ .radix-cursor { display: inline-block; width: 2px; height: 1em; background: var(--radix-accent); margin-left: 2px; vertical-align: text-bottom; animation: radix-blink calc(0.8s / var(--radix-anim-speed)) step-end infinite; } @keyframes radix-blink { 50% { opacity: 0; } } /* ── Utility ─────────────────────────────────────────────── */ .radix-hidden { display: none !important; } .radix-sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important; } /* ── Eyebrow ─────────────────────────────────────────────── */ .radix-eyebrow { font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--radix-accent); opacity: 0.65; margin: 0 0 24px; text-align: center; } /* ── Form Layout ─────────────────────────────────────────── */ .radix-row { display: flex; gap: 12px; } .radix-field { display: flex; flex-direction: column; flex: 1; margin-bottom: 14px; } /* Email Gate: vertikal, Input über Button */ .radix-email-gate-form { display: flex; flex-direction: column; gap: 8px; } .radix-label { font-size: 11px; color: var(--radix-text-muted); letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 6px; } /* ── Inputs ──────────────────────────────────────────────── */ .radix-input { background: var(--radix-input-bg, rgba(240,234,255,0.05)) !important; border: 1px solid var(--radix-input-border, rgba(128,96,208,0.2)) !important; border-radius: calc(var(--radix-radius) / 2.5) !important; color: var(--radix-text) !important; font-size: 14px !important; padding: 10px 14px !important; width: 100% !important; box-sizing: border-box !important; outline: none !important; transition: border-color 0.2s !important; -webkit-appearance: none !important; } .radix-input::placeholder { color: var(--radix-input-placeholder, rgba(240,234,255,0.2)) !important; } .radix-input:focus { border-color: var(--radix-input-focus, rgba(128,96,208,0.5)) !important; } .radix-input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(0.7); } /* ── Button ──────────────────────────────────────────────── */ .radix-btn { background: var(--radix-btn-bg) !important; border: 1px solid var(--radix-btn-border) !important; border-radius: calc(var(--radix-radius) / 2) !important; color: var(--radix-btn-text) !important; font-size: 13px !important; letter-spacing: 0.06em !important; padding: 13px 20px !important; cursor: pointer !important; transition: all 0.2s !important; width: 100% !important; margin-top: 6px !important; white-space: nowrap !important; } .radix-btn:hover { background: rgba(128,96,208,0.35) !important; border-color: rgba(128,96,208,0.6) !important; } .radix-btn:disabled { opacity: 0.5 !important; cursor: not-allowed !important; } .radix-btn-submit { width: auto !important; margin-top: 0 !important; flex-shrink: 0 !important; } .radix-btn:focus-visible { outline: 2px solid var(--radix-accent) !important; outline-offset: 3px !important; } /* ── Error ───────────────────────────────────────────────── */ .radix-error { color: #f09595; font-size: 12px; margin: 4px 0 0; min-height: 16px; } .radix-input.radix-input-error { border-color: rgba(220,80,80,0.6) !important; } /* ── DSGVO Checkbox ──────────────────────────────────────── */ .radix-dsgvo-wrap { display: flex !important; align-items: flex-start !important; gap: 10px !important; margin: 14px 0 4px !important; cursor: pointer !important; } /* Hide native checkbox, replace with custom */ .radix-dsgvo-checkbox { position: absolute !important; opacity: 0 !important; width: 0 !important; height: 0 !important; pointer-events: none !important; } /* Custom checkbox via label ::before */ .radix-dsgvo-wrap .radix-dsgvo-label { position: relative !important; padding-left: 28px !important; font-size: 12px !important; color: var(--radix-text-muted) !important; line-height: 1.5 !important; cursor: pointer !important; display: block !important; } .radix-dsgvo-wrap .radix-dsgvo-label::before { content: '' !important; position: absolute !important; left: 0 !important; top: 1px !important; width: 17px !important; height: 17px !important; border: 2px solid var(--radix-primary) !important; border-radius: 4px !important; background: rgba(0,0,0,0.2) !important; transition: background 0.2s, border-color 0.2s !important; flex-shrink: 0 !important; } .radix-dsgvo-checkbox:checked + .radix-dsgvo-label::before { background: var(--radix-primary) !important; border-color: var(--radix-primary) !important; } .radix-dsgvo-checkbox:checked + .radix-dsgvo-label::after { content: '' !important; position: absolute !important; left: 4px !important; top: 4px !important; width: 5px !important; height: 9px !important; border: 2px solid #fff !important; border-top: none !important; border-left: none !important; transform: rotate(45deg) !important; pointer-events: none !important; } .radix-dsgvo-label a { color: var(--radix-accent) !important; text-decoration: underline !important; } /* ── Honeypot ────────────────────────────────────────────── */ .radix-honeypot-field { position: absolute !important; left: -9999px !important; opacity: 0 !important; pointer-events: none !important; } /* ── Solar System Loader ─────────────────────────────────── */ .radix-loader { text-align: center; padding: 50px 0; } .radix-solar-system { position: relative; width: 100px; height: 100px; margin: 0 auto 24px; } .radix-sun { position: absolute; top: 50%; left: 50%; width: 14px; height: 14px; border-radius: 50%; background: var(--radix-accent); transform: translate(-50%,-50%); box-shadow: 0 0 12px var(--radix-accent); } .radix-planet-ring { position: absolute; top: 50%; left: 50%; border-radius: 50%; border: 1px solid rgba(128,96,208,0.15); transform: translate(-50%,-50%); } .radix-pr-1 { width: 40px; height: 40px; animation: radix-spin calc(2s / var(--radix-anim-speed)) linear infinite; } .radix-pr-2 { width: 68px; height: 68px; animation: radix-spin calc(4s / var(--radix-anim-speed)) linear infinite reverse; } .radix-pr-3 { width: 100px; height: 100px; animation: radix-spin calc(7s / var(--radix-anim-speed)) linear infinite; } @keyframes radix-spin { to { transform: translate(-50%,-50%) rotate(360deg); } } .radix-planet { position: absolute; border-radius: 50%; top: -3px; left: 50%; transform: translateX(-50%); } .radix-p-1 { width: 6px; height: 6px; background: var(--radix-accent); box-shadow: 0 0 6px var(--radix-accent); opacity: 0.9; } .radix-p-2 { width: 5px; height: 5px; background: var(--radix-primary); box-shadow: 0 0 5px var(--radix-primary); opacity: 0.9; top: -2.5px; } .radix-p-3 { width: 4px; height: 4px; background: rgba(255,180,120,0.9); box-shadow: 0 0 4px rgba(255,180,120,0.8); top: -2px; } .radix-loading-text { font-size: 13px; color: var(--radix-text-muted); font-style: italic; margin: 0; transition: opacity 0.35s ease; } /* ── Chart ───────────────────────────────────────────────── */ .radix-chart-wrap { text-align: center; margin-bottom: 24px; animation: radix-fade 0.6s ease; } .radix-chart-img { width: 100%; max-width: 420px; border-radius: calc(var(--radix-radius) / 1.5); border: 1px solid rgba(128,96,208,0.15); } /* ── Result Box ──────────────────────────────────────────── */ .radix-result-box { background: rgba(128,96,208,0.1); border: 1px solid rgba(128,96,208,0.28); border-radius: calc(var(--radix-radius) / 1.5); padding: 28px; margin-bottom: 28px; position: relative; overflow: hidden; } .radix-result-glow { position: absolute; top: -40px; right: -40px; width: 160px; height: 160px; border-radius: 50%; background: radial-gradient(circle, rgba(128,96,208,0.12) 0%, transparent 70%); pointer-events: none; } @keyframes radix-fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } .radix-result-headline { font-family: var(--radix-font-heading, 'Cormorant Garamond'), serif !important; font-size: 1.35rem !important; font-weight: 300 !important; color: var(--radix-accent) !important; margin: 0 0 14px !important; line-height: 1.35 !important; } .radix-result-body { font-size: 14px !important; color: var(--radix-text-muted) !important; line-height: 1.75 !important; margin: 0 0 12px !important; } .radix-result-note { font-family: var(--radix-font-heading, 'Cormorant Garamond'), serif !important; font-style: italic !important; font-size: 0.95rem !important; color: rgba(240,234,255,0.4) !important; margin: 0 !important; } /* ── Email Gate ──────────────────────────────────────────── */ .radix-email-gate { border-top: 1px solid rgba(128,96,208,0.12); padding-top: 24px; } .radix-gate-heading { font-family: var(--radix-font-heading, 'Cormorant Garamond'), serif !important; font-size: 1.2rem !important; font-weight: 300 !important; color: var(--radix-text) !important; margin: 0 0 6px !important; } .radix-gate-sub { font-size: 13px !important; color: var(--radix-text-muted) !important; margin: 0 0 16px !important; line-height: 1.5 !important; } .radix-privacy { font-size: 11px !important; color: rgba(240,234,255,0.3) !important; margin: 10px 0 0 !important; text-align: center !important; } /* ── Thank You ───────────────────────────────────────────── */ .radix-thanks { text-align: center; padding: 30px 0; animation: radix-fade 0.5s ease; } .radix-thanks-stars { font-size: 1.4rem; color: var(--radix-accent); opacity: 0.5; margin-bottom: 16px; letter-spacing: 0.4em; animation: radix-star-pulse calc(2s / var(--radix-anim-speed)) ease-in-out infinite; } @keyframes radix-star-pulse { 0%,100%{opacity:0.5;} 50%{opacity:1;} } .radix-thanks-headline { font-family: var(--radix-font-heading,'Cormorant Garamond'),serif !important; font-size: 1.5rem !important; font-weight: 300 !important; color: var(--radix-text) !important; margin: 0 0 12px !important; } .radix-thanks-text { font-size: 14px !important; color: var(--radix-text-muted) !important; line-height: 1.7 !important; margin: 0 0 12px !important; } .radix-thanks-redirect { font-size: 12px !important; color: rgba(240,234,255,0.35) !important; font-style: italic !important; margin: 0 !important; } /* ── Focus styles ────────────────────────────────────────── */ .radix-input:focus-visible { outline: 2px solid var(--radix-accent) !important; outline-offset: 2px !important; } /* ── High Contrast ───────────────────────────────────────── */ @media (forced-colors: active) { .radix-tool { border: 2px solid ButtonText; } .radix-btn { border: 2px solid ButtonText !important; } .radix-input { border: 1px solid ButtonText !important; } .radix-orbit, .radix-stars-canvas { display: none; } } /* ── Reduced Motion ──────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { .radix-orbit-1,.radix-orbit-2,.radix-orbit-3, .radix-pr-1,.radix-pr-2,.radix-pr-3, .radix-thanks-stars { animation: none !important; } .radix-step-visible,.radix-result-box,.radix-chart-wrap { animation: none !important; } .radix-loading-text { transition: none !important; } } /* ══════════════════════════════════════════════════════════ MOBILE OPTIMIERUNG ══════════════════════════════════════════════════════════ */ /* Tablet (768px) */ @media (max-width: 768px) { .radix-tool { padding: 32px 24px !important; } .radix-chart-img { max-width: 100% !important; width: 100% !important; } .radix-orbit-1 { width: 320px !important; height: 320px !important; } .radix-orbit-2 { width: 200px !important; height: 200px !important; } .radix-orbit-3 { width: 110px !important; height: 110px !important; } .radix-result-box { padding: 20px !important; } } /* Mobil (480px) */ @media (max-width: 480px) { .radix-tool { padding: 24px 16px !important; border-radius: 12px !important; } .radix-eyebrow { font-size: 10px !important; letter-spacing: 0.10em !important; } .radix-row { flex-direction: column !important; gap: 0 !important; } .radix-field { margin-bottom: 10px !important; } .radix-btn { font-size: 14px !important; padding: 13px 16px !important; } .radix-btn-submit { width: 100% !important; margin-top: 8px !important; } .radix-input { font-size: 16px !important; padding: 10px 12px !important; } .radix-result-headline { font-size: 1.15rem !important; line-height: 1.35 !important; } .radix-result-body { font-size: 13px !important; line-height: 1.65 !important; } .radix-chart-img { max-width: 100% !important; width: 100% !important; } .radix-chart-wrap { margin-bottom: 16px !important; } .radix-result-box { padding: 18px 14px !important; margin-bottom: 16px !important; } .radix-result-avatar { width: 120px !important; height: 120px !important; } .radix-solar-system,.radix-pr-3 { width: 80px !important; height: 80px !important; } .radix-pr-2 { width: 54px !important; height: 54px !important; } .radix-pr-1 { width: 32px !important; height: 32px !important; } .radix-orbit-1 { width: 240px !important; height: 240px !important; } .radix-orbit-2 { width: 150px !important; height: 150px !important; } .radix-orbit-3 { width: 80px !important; height: 80px !important; } .radix-logo { max-height: 36px !important; } .radix-logo-wrap { margin-bottom: 14px !important; } } /* Klein-Mobil (360px) */ @media (max-width: 360px) { .radix-tool { padding: 18px 12px !important; border-radius: 8px !important; } .radix-result-headline { font-size: 1.05rem !important; } .radix-orbit-1 { width: 200px !important; height: 200px !important; } .radix-orbit-2 { width: 125px !important; height: 125px !important; } .radix-orbit-3 { width: 65px !important; height: 65px !important; } } /* iOS Zoom-Fix */ @supports (-webkit-touch-callout: none) { .radix-input { font-size: 16px !important; } } /* ── Powered by (Free only) ──────────────────────────────── */ .radix-powered-by { text-align: center; margin-top: 20px; padding-top: 12px; border-top: 1px solid rgba(128,96,208,0.1); position: relative; z-index: 2; } .radix-powered-by a { font-size: 11px !important; color: rgba(240,234,255,0.3) !important; text-decoration: none !important; letter-spacing: 0.05em !important; } .radix-powered-by a:hover { opacity: 0.7; } /* ── Pro teaser (Free only) ──────────────────────────────── */ .radix-pro-teaser { background: rgba(128,96,208,0.08); border: 1px solid rgba(128,96,208,0.2); border-radius: 8px; padding: 10px 14px; margin-bottom: 20px; display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--radix-text-muted); flex-wrap: wrap; } .radix-pro-teaser-badge { background: linear-gradient(135deg, #f0c040, #e0a020); color: #1a1030; font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 10px; white-space: nowrap; } .radix-pro-teaser a { color: var(--radix-accent) !important; text-decoration: underline !important; font-weight: 600 !important; margin-left: auto; white-space: nowrap; } /* ══════════════════════════════════════════════════════════ ANIMIERTE HINTERGRÜNDE (Pro) ══════════════════════════════════════════════════════════ */ /* Sternenhimmel-Canvas: immer über --radix-stars-display gesteuert */ .radix-stars-canvas { display: var(--radix-stars-display, none) !important; } /* ── Galaxie — via Canvas (rdxInitGalaxy) ────────────────── */ .radix-bg-galaxy::before, .radix-bg-galaxy::after { display: none !important; } /* ── Nordlicht ───────────────────────────────────────────── */ /* Aurora via Canvas (rdxInitAurora) — kein eigener Hintergrund, nutzt --radix-bg */ .radix-bg-aurora .radix-stars-canvas { display: var(--radix-stars-display, none); } .radix-bg-aurora::after { display: none !important; } /* ── Geometrisch ─────────────────────────────────────────── */ /* Blume des Lebens — via Canvas (rdxInitGeometric) */ .radix-bg-geometric::before, .radix-bg-geometric::after { display: none !important; } /* ── Nebel ───────────────────────────────────────────────── */ .radix-bg-nebula::before, .radix-bg-nebula::after { display: none !important; } /* Nebel-Divs werden via rdxInitNebula() JS eingefügt */ /* ── Kein Hintergrund ────────────────────────────────────── */ .radix-bg-none::before, .radix-bg-none::after { display: none !important; } /* ══════════════════════════════════════════════════════════ THEME COMPATIBILITY FIXES ══════════════════════════════════════════════════════════ */ /* ── Reset common inherited properties inside tool ─────── */ .radix-tool p, .radix-tool h1, .radix-tool h2, .radix-tool h3, .radix-tool h4, .radix-tool h5, .radix-tool h6 { margin: 0 !important; padding: 0 !important; border: none !important; background: none !important; box-shadow: none !important; text-shadow: none !important; font-weight: inherit !important; } .radix-tool a { text-decoration: none !important; box-shadow: none !important; border-bottom: none !important; background: none !important; } /* ── Twenty-family / Astra / OceanWP input resets ───────── */ .radix-tool input[type="text"], .radix-tool input[type="email"], .radix-tool input[type="date"], .radix-tool input[type="time"], .radix-tool select { background-color: var(--radix-input-bg, rgba(0,0,0,0.04)) !important; border: 1px solid var(--radix-input-border, rgba(128,96,208,0.2)) !important; border-radius: calc(var(--radix-radius) / 2.5) !important; color: var(--radix-text) !important; font-size: 14px !important; padding: 10px 14px !important; width: 100% !important; height: auto !important; line-height: normal !important; max-width: 100% !important; } /* ── Elementor font-size override ───────────────────────── */ .elementor .radix-tool input, .elementor .radix-tool button { font-size: 14px !important; } /* ── WooCommerce input reset ────────────────────────────── */ .woocommerce .radix-tool input[type="text"], .woocommerce .radix-tool input[type="email"] { background-color: var(--radix-input-bg) !important; color: var(--radix-text) !important; border: 1px solid var(--radix-input-border) !important; padding: 10px 14px !important; height: auto !important; } /* ── Fix canvas max-width from themes ───────────────────── */ .radix-tool canvas { max-width: 100% !important; display: block !important; } .radix-tool svg, .radix-tool img { max-width: 100% !important; height: auto !important; } /* ── RTL support ─────────────────────────────────────────── */ .rtl .radix-tool { direction: rtl; text-align: right; } /* ══ STERNSCHNUPPEN ═════════════════════════════════════════ */ .radix-bg-shooting_stars { overflow: hidden; } /* Shooting stars injected via JS canvas */ /* ══ STERNBILDER ════════════════════════════════════════════ */ .radix-bg-constellation { overflow: hidden; } /* Constellation lines injected via JS canvas */ /* ══ SCHWARZES LOCH ═════════════════════════════════════════ */ .radix-bg-blackhole { overflow: hidden; } .radix-bg-blackhole::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 50% 45%, #000000 0%, #050010 8%, rgba(60,0,120,0.9) 14%, rgba(100,0,200,0.6) 20%, rgba(180,60,255,0.4) 26%, rgba(255,120,0,0.3) 32%, rgba(255,200,0,0.2) 38%, transparent 50%); pointer-events: none; z-index: 0; animation: rdx-bh-pulse calc(3s / var(--radix-anim-speed)) ease-in-out infinite alternate; } .radix-bg-blackhole::after { content: ''; position: absolute; inset: -10%; background: conic-gradient(from 0deg at 52% 47%, transparent 0deg, rgba(80,0,160,0.15) 30deg, transparent 60deg, rgba(120,0,200,0.12) 90deg, transparent 120deg, rgba(60,0,120,0.1) 150deg, transparent 180deg, rgba(100,0,160,0.12) 210deg, transparent 240deg, rgba(80,0,140,0.1) 270deg, transparent 300deg, rgba(60,0,120,0.08) 330deg, transparent 360deg); pointer-events: none; z-index: 0; animation: rdx-bh-spin calc(12s / var(--radix-anim-speed)) linear infinite; } @keyframes rdx-bh-pulse { from { transform: scale(0.97); } to { transform: scale(1.03); } } @keyframes rdx-bh-spin { to { transform: rotate(360deg); } } /* ══ PORTAL ═════════════════════════════════════════════════ */ .radix-bg-portal { overflow: hidden; } .radix-bg-portal::before { content: ''; position: absolute; inset: -10%; background: conic-gradient(from 0deg at 50% 48%, rgba(0,200,255,0.5) 0deg, rgba(80,0,255,0.5) 60deg, rgba(255,0,200,0.5) 120deg, rgba(0,200,255,0.5) 180deg, rgba(80,0,255,0.4) 240deg, rgba(255,0,180,0.4) 300deg, rgba(0,200,255,0.5) 360deg); pointer-events: none; z-index: 0; filter: blur(4px); animation: rdx-portal-spin calc(5s / var(--radix-anim-speed)) linear infinite; mask-image: radial-gradient(ellipse 55% 55% at 50% 48%, transparent 30%, black 50%, transparent 80%); -webkit-mask-image: radial-gradient(ellipse 55% 55% at 50% 48%, transparent 30%, black 50%, transparent 80%); } .radix-bg-portal::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 55% at 50% 48%, rgba(0,0,20,0.95) 0%, rgba(20,0,60,0.8) 25%, rgba(60,0,150,0.4) 40%, transparent 55%), radial-gradient(ellipse 62% 57% at 50% 48%, transparent 42%, rgba(0,150,255,0.3) 48%, rgba(100,0,255,0.4) 52%, transparent 58%); pointer-events: none; z-index: 0; animation: rdx-portal-breathe calc(4s / var(--radix-anim-speed)) ease-in-out infinite alternate; } @keyframes rdx-portal-spin { to { transform: rotate(360deg); } } @keyframes rdx-portal-breathe { from { transform: scale(0.96); } to { transform: scale(1.04); } } /* ══ KIRSCHBLÜTEN ═══════════════════════════════════════════ */ .radix-bg-sakura { overflow: hidden; } .radix-bg-sakura .radix-stars-canvas { display: none !important; } .radix-bg-sakura::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 80% 60% at 50% 30%, rgba(255,200,220,0.25) 0%, transparent 60%), radial-gradient(ellipse 60% 40% at 20% 70%, rgba(255,180,200,0.15) 0%, transparent 50%), radial-gradient(ellipse 40% 40% at 80% 80%, rgba(255,210,230,0.15) 0%, transparent 40%); pointer-events: none; z-index: 0; animation: rdx-sakura-breeze calc(8s / var(--radix-anim-speed)) ease-in-out infinite alternate; } /* Petals via CSS particles */ .radix-bg-sakura::after { content: '🌸 ✿ 🌸 ✿ 🌸 ✿ 🌸 ✿ 🌸 ✿ 🌸'; position: absolute; top: -5%; left: -5%; right: -5%; font-size: 20px; line-height: 1; letter-spacing: 40px; pointer-events: none; z-index: 0; opacity: 0.35; animation: rdx-sakura-fall calc(8s / var(--radix-anim-speed)) linear infinite; white-space: nowrap; overflow: hidden; } @keyframes rdx-sakura-breeze { from { transform: translateX(-5px) rotate(-1deg); } to { transform: translateX(5px) rotate(1deg); } } @keyframes rdx-sakura-fall { 0% { transform: translateY(-10%) translateX(0px) rotate(0deg); opacity: 0; } 10% { opacity: 0.4; } 90% { opacity: 0.3; } 100% { transform: translateY(110%) translateX(60px) rotate(720deg); opacity: 0; } } /* ══ SCHNEEFALL ═════════════════════════════════════════════ */ .radix-bg-snow { overflow: hidden; } .radix-bg-snow .radix-stars-canvas { display: none !important; } .radix-bg-snow::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 80% 50% at 50% 0%, rgba(200,230,255,0.15) 0%, transparent 60%), radial-gradient(ellipse 100% 30% at 50% 100%, rgba(180,220,255,0.1) 0%, transparent 40%); pointer-events: none; z-index: 0; } /* Snow layer 1 - large flakes */ .radix-bg-snow::after { content: '❄ ❅ ❆ ❄ ❅ ❆ ❄ ❅ ❆ ❄ ❅ ❆ ❄ ❅ ❆ ❄'; position: absolute; top: -10%; left: -5%; right: -5%; font-size: 16px; letter-spacing: 30px; line-height: 1; color: rgba(200,230,255,0.7); pointer-events: none; z-index: 1; white-space: nowrap; overflow: hidden; text-shadow: 0 0 6px rgba(180,220,255,0.8); animation: rdx-snow-fall1 calc(7s / var(--radix-anim-speed)) linear infinite; } @keyframes rdx-snow-fall1 { 0% { transform: translateY(-15%) translateX(0px) rotate(0deg); opacity:0; } 5% { opacity: 1; } 95% { opacity: 0.8; } 100% { transform: translateY(115%) translateX(30px) rotate(360deg); opacity:0; } } /* ══════════════════════════════════════════════════════════ ORBIT STYLES – applied via class on orbit divs directly ══════════════════════════════════════════════════════════ */ /* ── Orbit sizes for counts 4 and 5 ─────────────────────── */ .radix-orbit-4 { width: 330px; height: 330px; animation: radix-orbit-spin calc(55s / var(--radix-anim-speed)) linear infinite; } .radix-orbit-5 { width: 380px; height: 380px; animation: radix-orbit-spin calc(70s / var(--radix-anim-speed)) linear infinite reverse; } /* ── Orbit: Normal (default, already styled in base) ──────── */ /* ── Orbit: Gestrichelt ──────────────────────────────────── */ .radix-orbit-style-dashed { border-style: dashed !important; border-color: rgba(128,96,208,0.3) !important; } /* ── Orbit: Gepunktet ────────────────────────────────────── */ .radix-orbit-style-dotted { border-style: dotted !important; border-color: rgba(128,96,208,0.35) !important; } /* ── Orbit: Leuchtend ────────────────────────────────────── */ .radix-orbit-style-glow { border-color: rgba(160,120,255,0.5) !important; box-shadow: 0 0 12px rgba(128,96,208,0.4), inset 0 0 8px rgba(128,96,208,0.15) !important; } .radix-orbit-style-glow::after { box-shadow: 0 0 14px rgba(200,180,255,1), 0 0 28px rgba(160,120,255,0.7) !important; opacity: 1 !important; } /* ── Orbit: Dick ─────────────────────────────────────────── */ .radix-orbit-style-thick { border-width: 2px !important; border-color: rgba(128,96,208,0.4) !important; } /* ══ FEUER ══════════════════════════════════════════════════ */ .radix-bg-fire { overflow: hidden; } /* Schicht 1: Haupt-Flammen */ .radix-bg-fire::before { content: ''; position: absolute; bottom: -10%; left: -5%; right: -5%; height: 45%; background: radial-gradient(ellipse 18% 90% at 22% 100%, rgba(255,55,0,0.85) 0%, rgba(255,100,0,0.40) 35%, rgba(255,60,0,0.08) 65%, transparent 80%), radial-gradient(ellipse 22% 95% at 50% 100%, rgba(255,200,20,0.70) 0%, rgba(255,90,0,0.38) 30%, rgba(255,50,0,0.10) 62%, transparent 78%), radial-gradient(ellipse 16% 85% at 78% 100%, rgba(255,45,0,0.80) 0%, rgba(255,90,0,0.38) 33%, rgba(200,40,0,0.08) 63%, transparent 80%), radial-gradient(ellipse 12% 75% at 35% 100%, rgba(255,180,10,0.55) 0%, rgba(255,80,0,0.25) 38%, transparent 68%), radial-gradient(ellipse 10% 70% at 65% 100%, rgba(255,160,0,0.50) 0%, rgba(255,70,0,0.22) 40%, transparent 70%); pointer-events: none; z-index: 1; filter: blur(6px); animation: rdx-fire1 2.4s ease-in-out infinite alternate; transform-origin: 50% 100%; } /* Schicht 2: Kern-Flammen */ .radix-bg-fire::after { content: ''; position: absolute; bottom: -5%; left: 10%; right: 10%; height: 28%; background: radial-gradient(ellipse 10% 75% at 35% 100%, rgba(255,240,100,0.65) 0%, rgba(255,160,10,0.28) 40%, transparent 68%), radial-gradient(ellipse 12% 80% at 50% 100%, rgba(255,255,180,0.60) 0%, rgba(255,180,20,0.30) 35%, transparent 65%), radial-gradient(ellipse 9% 72% at 65% 100%, rgba(255,230,80,0.58) 0%, rgba(255,140,10,0.25) 40%, transparent 68%), radial-gradient(ellipse 14% 80% at 30% 100%, rgba(255,140,0,0.55) 0%, rgba(255,65,0,0.25) 38%, transparent 65%), radial-gradient(ellipse 11% 72% at 72% 100%, rgba(255,120,0,0.50) 0%, rgba(255,55,0,0.22) 40%, transparent 65%); pointer-events: none; z-index: 1; filter: blur(5px); animation: rdx-fire2 1.9s ease-in-out infinite; transform-origin: 50% 100%; } @keyframes rdx-fire1 { 0% { transform: scaleX(1.00) scaleY(1.00) skewX(0deg); opacity:0.88; } 28% { transform: scaleX(1.05) scaleY(1.08) skewX(-4deg); opacity:1.00; } 58% { transform: scaleX(0.97) scaleY(1.05) skewX(3deg); opacity:0.93; } 100%{ transform: scaleX(1.03) scaleY(0.97) skewX(-2deg); opacity:0.82; } } @keyframes rdx-fire2 { 0% { transform: scaleX(0.95) scaleY(1.06) skewX(5deg); opacity:0.70; } 38% { transform: scaleX(1.06) scaleY(0.97) skewX(-4deg); opacity:0.95; } 72% { transform: scaleX(0.98) scaleY(1.05) skewX(2deg); opacity:0.82; } 100%{ transform: scaleX(1.04) scaleY(1.08) skewX(-3deg); opacity:0.75; } } /* ══ OZEAN ══════════════════════════════════════════════════ */ /* Kosmischer Ozean — via Canvas (rdxInitOcean) */ .radix-bg-ocean { overflow: hidden; } .radix-bg-ocean::before, .radix-bg-ocean::after { display: none !important; } /* ══ MATRIX ═════════════════════════════════════════════════ */ /* Kosmische Energie — via Canvas (rdxInitCosmicEnergy) */ .radix-bg-matrix::before, .radix-bg-matrix::after { display: none !important; } /* ══ BLITZ ══════════════════════════════════════════════════ */ /* Blitz — via Canvas (rdxInitLightning) */ .radix-bg-lightning::before, .radix-bg-lightning::after { display: none !important; } /* ══ KRISTALLE ══════════════════════════════════════════════ */ /* Kosmisches Auge — via Canvas (rdxInitCrystals) */ .radix-bg-crystals::before, .radix-bg-crystals::after { display: none !important; } /* ══ PLASMA ═════════════════════════════════════════════════ */ .radix-bg-plasma { overflow: hidden; } .radix-bg-plasma::before { content: ''; position: absolute; inset: -20%; background: radial-gradient(ellipse 50% 40% at 30% 40%, rgba(255,0,200,0.5) 0%, transparent 50%), radial-gradient(ellipse 40% 50% at 70% 60%, rgba(0,200,255,0.5) 0%, transparent 45%), radial-gradient(ellipse 60% 30% at 50% 20%, rgba(128,0,255,0.4) 0%, transparent 50%), radial-gradient(ellipse 30% 60% at 15% 70%, rgba(255,100,0,0.35) 0%, transparent 40%), radial-gradient(ellipse 35% 35% at 85% 30%, rgba(0,255,150,0.35) 0%, transparent 40%); pointer-events: none; z-index: 0; filter: blur(15px); animation: rdx-plasma1 calc(8s / var(--radix-anim-speed)) ease-in-out infinite; } .radix-bg-plasma::after { content: ''; position: absolute; inset: -15%; background: radial-gradient(ellipse 45% 35% at 60% 35%, rgba(255,50,150,0.4) 0%, transparent 45%), radial-gradient(ellipse 35% 45% at 35% 65%, rgba(50,200,255,0.4) 0%, transparent 40%), radial-gradient(ellipse 25% 25% at 75% 75%, rgba(200,0,255,0.35) 0%, transparent 35%); pointer-events: none; z-index: 0; filter: blur(20px); animation: rdx-plasma2 calc(10s / var(--radix-anim-speed)) ease-in-out infinite reverse; } @keyframes rdx-plasma1 { 0% { transform: translate(0%,0%) rotate(0deg) scale(1.0); } 25% { transform: translate(3%,-3%) rotate(90deg) scale(1.08); } 50% { transform: translate(-2%,4%) rotate(180deg) scale(0.95); } 75% { transform: translate(-4%,-2%) rotate(270deg) scale(1.05); } 100% { transform: translate(0%,0%) rotate(360deg) scale(1.0); } } @keyframes rdx-plasma2 { 0% { transform: translate(2%,2%) rotate(0deg) scale(1.05); } 33% { transform: translate(-3%,3%) rotate(120deg) scale(0.95); } 66% { transform: translate(4%,-2%) rotate(240deg) scale(1.08); } 100% { transform: translate(2%,2%) rotate(360deg) scale(1.05); } } /* ══ PDF UPSELL ═════════════════════════════════════════════ */ .radix-pdf-upsell { margin: 20px 0 0; background: linear-gradient(135deg, rgba(128,96,208,0.12), rgba(200,160,255,0.08)); border: 1px solid rgba(128,96,208,0.3); border-radius: 12px; padding: 16px; position: relative; z-index: 2; } .radix-pdf-upsell-inner { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .radix-pdf-upsell-icon { font-size: 2rem; flex-shrink: 0; } .radix-pdf-upsell-text { flex: 1; min-width: 150px; } .radix-pdf-upsell-text strong { display: block; font-size: 14px; color: var(--radix-text); margin-bottom: 3px; font-family: var(--radix-font-heading); } .radix-pdf-upsell-text span { font-size: 12px; color: var(--radix-text-muted); line-height: 1.4; } .radix-pdf-upsell-btn { display: inline-block; background: var(--radix-primary) !important; color: #fff !important; border: none !important; border-radius: 8px !important; padding: 10px 18px !important; font-size: 13px !important; font-weight: 600 !important; text-decoration: none !important; white-space: nowrap; cursor: pointer; transition: opacity 0.2s !important; } .radix-pdf-upsell-btn:hover { opacity: 0.85 !important; } @media (max-width: 480px) { .radix-pdf-upsell-inner { flex-direction: column; text-align: center; } .radix-pdf-upsell-btn { width: 100%; text-align: center; } }