/* Moment mal: vertrauter Aufbau mit den Creme-, Grün- und Goldtönen der Website. */
.moment-page {
    --moment-charcoal: var(--rl-brown);
    --moment-gold: var(--rl-gold-deep);
    --moment-sage: #e9ece3;
    --moment-sage-line: #cdd3c2;
    --moment-sand: #f0e7d3;
    background: var(--rl-page);
}

.moment-page .intro-text {
    background: var(--moment-sage);
    border-color: var(--moment-sage-line);
}

.moment-page .intro-text p {
    color: #414838;
    text-align: left;
}

.moment-page .audio-available-hint {
    background: var(--rl-green-dark);
    color: #fff;
    line-height: 1.5;
}

.moment-page .audio-available-hint i { flex-shrink: 0; }

.moment-page .moment-card {
    border-color: #dfd7c9;
}

.moment-page .moment-month-badge,
.moment-page .archive-card-badge {
    background: var(--rl-green-dark);
    box-shadow: none;
}

.moment-page .moment-month,
.moment-page .archive-card-month { color: #fff; }

.moment-page .moment-year,
.moment-page .archive-card-year { color: #eee3c9; }

.moment-page .neue-ausgabe-badge {
    background: var(--moment-sand);
    color: var(--rl-brown-dark);
    box-shadow: none;
}

.moment-page .moment-spruch {
    background: var(--moment-sand);
    border-bottom-color: #e0d4b9;
}

.moment-page .spruch-icon { opacity: 1; }

.moment-page .audio-player-section {
    background: var(--moment-sage);
    border: 1px solid var(--moment-sage-line);
    box-shadow: none;
}

.moment-page .audio-player-section::before {
    content: 'Geschichte zum Anhören';
    background: var(--rl-green-dark);
    color: #fff;
}

.moment-page .play-btn {
    background: var(--rl-green-dark);
    color: #fff;
}

.moment-page .play-btn:hover { background: #424936; box-shadow: none; }

.moment-page .skip-btn {
    min-width: 44px;
    min-height: 44px;
    background: var(--moment-sage);
    color: var(--rl-green-dark);
}

.moment-page .skip-btn:hover { background: #d9dfcf; }
.moment-page .volume-btn { min-width: 44px; min-height: 44px; color: var(--rl-green-dark); }
.moment-page .progress-bar-fill { background: var(--rl-green-dark); }

.moment-page .archive-card {
    background: #fffdf8;
    border-color: #dfd7c9;
}

.moment-page .archive-card:hover {
    background: #f5f0e5;
    border-color: var(--rl-gold);
    box-shadow: none;
}

.moment-page .archive-card-link { color: var(--rl-green-dark); }

/* Der Abstand kommt bereits vom unteren Rand des Archivs. */
.moment-page .archive-hint { padding-top: 0; }

.moment-page .archive-hint-box {
    background: var(--moment-sage);
    border-color: var(--moment-sage-line);
}

.moment-page .archive-hint-title,
.moment-page .archive-hint-next .next-date { color: var(--rl-green-dark); }

.moment-page .moment-container button:focus-visible,
.moment-page .archive-overlay button:focus-visible,
.moment-page .volume-slider:focus-visible {
    outline: 3px solid var(--rl-green-dark);
    outline-offset: 4px;
}

@media (max-width: 768px) {
    .moment-page .custom-audio-player { gap: 16px; }
    .moment-page .progress-container { flex-basis: 100%; min-width: 0; }
    .moment-page .audio-controls { margin-inline: auto; }
    .moment-page .play-btn { min-width: 48px; min-height: 48px; }
    .moment-page .audio-player-section::before { left: 16px; }
}

@media (max-width: 480px) {
    .moment-page .moment-month-badge { top: 14px; left: 14px; padding: 10px 14px; }
    .moment-page .neue-ausgabe-badge { top: auto; bottom: 14px; right: 14px; }
}