/* ============================================ Atlas Tarot – Cookie Consent Banner Styles Einbinden im : ============================================ */ #cookie-consent-banner { position: fixed; bottom: 0; left: 0; right: 0; z-index: 9999; background: rgba(20, 10, 35, 0.97); color: #f5f0ff; padding: 16px 20px; border-top: 1px solid #6a3fb5; box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.4); font-family: inherit; animation: cc-slide-up 0.4s ease-out; } @keyframes cc-slide-up { from { transform: translateY(100%); } to { transform: translateY(0); } } .cc-content { max-width: 900px; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; } .cc-content p { margin: 0; font-size: 0.95rem; flex: 1 1 300px; } .cc-content a { color: #c9a6ff; text-decoration: underline; } .cc-buttons { display: flex; gap: 10px; flex-shrink: 0; } .cc-btn { padding: 10px 18px; border-radius: 8px; border: none; font-size: 0.9rem; font-weight: 600; cursor: pointer; transition: opacity 0.2s ease; } .cc-btn:hover { opacity: 0.85; } .cc-accept { background: linear-gradient(135deg, #8a4fff, #5e2bb8); color: #fff; } .cc-decline { background: transparent; color: #f5f0ff; border: 1px solid #6a3fb5; } @media (max-width: 600px) { .cc-content { flex-direction: column; text-align: center; } .cc-buttons { width: 100%; justify-content: center; } }