/* Lichtmomente: Tagesverlauf der Lichtstimmungen als Bild aus CSS (Smart-Home-Projekt) */
.momente { position: absolute; inset: 0; display: grid; grid-template-rows: repeat(5, 1fr); background: #0b0d10; }
.moment { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0 clamp(1rem, 3vw, 2.2rem); border-bottom: 1px solid rgba(255,255,255,0.06); }
.moment:last-child { border-bottom: none; }
.m-text b { display: block; font-stretch: var(--breit); font-size: clamp(0.95rem, 1.4vw, 1.1rem); font-weight: 650; }
.m-text span { font-size: 0.88rem; color: rgba(238,241,244,0.72); }
.m-spots { display: flex; gap: clamp(0.7rem, 2.2vw, 1.5rem); flex-shrink: 0; }
.m-spots i { width: 13px; height: 13px; border-radius: 50%; background: var(--c, #2a2e35); box-shadow: 0 0 16px 5px var(--g, transparent); }

.m-morgen { background: linear-gradient(90deg, #15100b, #3a2411); }
.m-morgen i { --c: #ffb46b; --g: rgba(255,150,70,0.45); opacity: 0.75; }

.m-mittag { background: linear-gradient(90deg, #a9b8c5, #e4ebf1); color: #1c2026; }
.m-mittag .m-text span { color: rgba(28,32,38,0.75); }
.m-mittag i { --c: #ffffff; --g: rgba(255,255,255,0.9); }

.m-abend { background: linear-gradient(90deg, #1a0f2b, #2b1236 55%, #0f1a3a); }
.m-abend i:nth-child(1) { --c: #ff4fa3; --g: rgba(255,79,163,0.55); }
.m-abend i:nth-child(2) { --c: #a05bff; --g: rgba(160,91,255,0.55); }
.m-abend i:nth-child(3) { --c: #4a9eff; --g: rgba(74,158,255,0.55); }
.m-abend i:nth-child(4) { --c: #ff8a3d; --g: rgba(255,138,61,0.55); }
.m-abend i:nth-child(5) { --c: #3dd6c6; --g: rgba(61,214,198,0.55); }

.m-tv { background: #0e1014; }
.m-tv i:nth-child(2) { --c: #ffa65a; --g: rgba(255,166,90,0.4); }
.m-tv i:nth-child(5) { --c: #4a9eff; --g: rgba(74,158,255,0.4); }

.m-nacht { background: #07080a; }
.m-nacht i { --c: #1a1d22; }
.m-nacht i:nth-child(3) { --c: #c81e10; --g: rgba(220,30,15,0.3); }

@media (max-width: 420px) {
    .m-spots { gap: 0.55rem; }
    .m-spots i { width: 10px; height: 10px; }
}