@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap'); html, body { height: 100%; margin: 0; background: rgb(22,22,22); font-family: 'Poppins', sans-serif; color: rgb(214,214,214); /* wenn du willst, kannst du hier auch gleich .custom-light-text reinziehen */ } .card-hover:hover { transform: translateY(-5px); box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); } /* Wrapper abdunkeln, wenn .modal-open auf gesetzt ist */ body.modal-open #mainContent { filter: brightness(50%); transition: filter 0.2s ease; } .modal-overlay { position: fixed; inset: 0; background-color: rgba(0,0,0,0.5); backdrop-filter: blur(4px); /* vom .modal-backdrop übernommen */ display: flex; align-items: center; justify-content: center; z-index: 50; } .modal-content { position: relative; z-index: 60; animation: modalSlideIn 0.3s ease-out; } .card-hover:hover { transform: translateY(-5px); box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); } .bg-pattern-radial { background-image: radial-gradient(circle, rgba(245,158,11,0.1) 1px, transparent 1px); background-size: 20px 20px; } .bg-section { background-color: rgb(22,22,22); } .bg-header { background-color: rgba(22,22,22,0.85); } .header-darkened { background-color: rgba(37,37,39,0.95) !important; } .custom-light-text { color: rgb(214, 214, 214); } .hover-text { color: rgb(170, 94, 95); } .min-height-screen { min-height: 100vh; } .border-border { border-color: rgb(56, 55, 61); } .bg-button { background-color: rgb(170,94,95); } .modal-backdrop { background-color: rgba(0, 0, 0, 0.5); backdrop-filter: blur(4px); } .modal-content { animation: modalSlideIn 0.3s ease-out; } @keyframes modalSlideIn { from { opacity: 0; transform: translateY(-20px) scale(0.95); } to { opacity: 1; transform: translateY(0) scale(1); } } .input-glow:focus { box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.1); } /* Basis-Glow-Animation */ @keyframes glow-pulse { from { box-shadow: 0 0 8px rgba(245,143,124,0.7), 0 0 16px rgba(245,143,124,0.5); } to { box-shadow: 0 0 16px rgba(245,143,124,0.9), 0 0 32px rgba(245,143,124,0.7); } } /* 1) Immer-Glow */ .always-glow { box-shadow: 0 0 8px rgba(245,143,124,0.7), 0 0 16px rgba(245,143,124,0.5); transition: box-shadow 0.3s ease; } /* 2) Nur-Hover-Glow */ .hover-glow-only { transition: box-shadow 0.3s ease; } .hover-glow-only:hover { box-shadow: 0 0 16px rgba(245,143,124,0.7), 0 0 32px rgba(245,143,124,0.5); } .hover-glow-box { transition: box-shadow 0.3s ease; } .hover-glow-box:hover { box-shadow: 0 0 8px rgba(245,143,124,0.4), 0 0 32px rgba(245,143,124,0.2); } canvas { display: block; width: 100%; height: 100%; } /* Optional: kleine Hilfe oben links */ .hint { position: fixed; top: 12px; left: 12px; font: 13px/1.2 system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; color: #c9c9cf; opacity: .85; user-select: none; letter-spacing: .2px; background: rgb(22,22,22); padding: 8px 10px; border-radius: 10px; backdrop-filter: blur(4px); } .hint code { color: #fff; }