/** * Dynamische Gebetszeit-Farbschemata * Diese Datei steuert alle Farbübergänge je nach aktiver Gebetszeit. * JavaScript setzt die entsprechende Klasse auf . */ /* === BASIS-TRANSITION für alle farbigen Elemente === */ .navbar, .topbar, .btn--primary, .btn--outline, .prayer-section, .prayer-card__time, .prayer-card--current, .prayer-countdown-banner, .prayer-sticky__toggle, .section-eyebrow, .news-card__cat, .event-card__date-block, .hero-slider__dot.is-active, .page-hero, .widget__title, .single-post__cat { transition-property: background, background-color, border-color, color, fill; transition-duration: var(--transition-prayer); transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); } /* === FAJR — Türkis/Cyan === */ body.prayer-fajr .prayer-card--fajr { border-color: var(--fajr-color); } body.prayer-fajr .prayer-card--fajr .prayer-card__time { color: var(--fajr-color); } body.prayer-fajr .topbar { background: linear-gradient(90deg, rgba(14,116,144,0.05), var(--color-bg-secondary)); } /* === DHUHR — Gold/Amber === */ body.prayer-dhuhr .prayer-card--dhuhr { border-color: var(--dhuhr-color); } body.prayer-dhuhr .prayer-card--dhuhr .prayer-card__time { color: var(--dhuhr-color); } body.prayer-dhuhr .topbar { background: linear-gradient(90deg, rgba(180,83,9,0.05), var(--color-bg-secondary)); } /* === ASR — Orange === */ body.prayer-asr .prayer-card--asr { border-color: var(--asr-color); } body.prayer-asr .prayer-card--asr .prayer-card__time { color: var(--asr-color); } body.prayer-asr .topbar { background: linear-gradient(90deg, rgba(194,65,12,0.05), var(--color-bg-secondary)); } /* === MAGHRIB — Violett/Rot === */ body.prayer-maghrib .prayer-card--maghrib { border-color: var(--maghrib-color); } body.prayer-maghrib .prayer-card--maghrib .prayer-card__time { color: var(--maghrib-color); } body.prayer-maghrib .topbar { background: linear-gradient(90deg, rgba(124,58,237,0.05), var(--color-bg-secondary)); } /* === ISHA — Dunkelblau === */ body.prayer-isha .prayer-card--isha { border-color: var(--isha-color); } body.prayer-isha .prayer-card--isha .prayer-card__time { color: var(--isha-color); } /* === FREITAG — Gold === */ body.is-friday .navbar { border-bottom-color: rgba(180,83,9,0.3); } body.is-friday .btn--primary { background: var(--friday-color); border-color: var(--friday-color); } body.is-friday .btn--primary:hover { background: var(--friday-color-light); border-color: var(--friday-color-light); } body.is-friday .section-eyebrow { color: var(--friday-color); } body.is-friday .prayer-card--current { border-color: var(--friday-color); } body.is-friday .prayer-countdown-banner { background: linear-gradient(135deg, var(--friday-color), var(--friday-color-light)); } /* === DARK MODE Gebetszeiten-Karten Anpassungen === */ [data-theme="dark"] .prayer-card { background: #1e2130; border-color: #2d3248; } [data-theme="dark"] .prayer-card--current { background: rgba(var(--prayer-color-rgb), 0.08); } [data-theme="dark"] .prayer-countdown-banner { box-shadow: 0 0 60px rgba(var(--prayer-color-rgb), 0.3); } [data-theme="dark"] .bank-card { background: #1a1d25; } [data-theme="dark"] .bank-field { background: #0f1117; border-color: #2d3248; } [data-theme="dark"] .footer { background: #070a0f; } [data-theme="dark"] .prayer-section { background: #0d1018; } [data-theme="dark"] .events-section { background: #0d1018; } [data-theme="dark"] .contact-strip { background: #0d1018; }