/* ============================================================
   BUTTONS – Pastell-Flächen mit Glanz beim Hover (ohne Balken)
   Wird zuletzt geladen (nach light.css). Farben pro Rolle:
     gelb  = Hauptaktion   grün = Speichern   rot = Löschen   blau = Zurück
   ============================================================ */
:root {
    --pb-y: #cdb878; --pb-y-ink: #1c1809;
    --pb-g: #86c4ad; --pb-g-ink: #0d1c17;
    --pb-r: #cf8e88; --pb-r-ink: #2a0e0c;
    --pb-b: #8fabd6; --pb-b-ink: #0e1a2e;
}

/* Gemeinsame Form */
:root .btn--confirm, :root .btn.btn-primary, :root .avatar-edit-btn, :root .btn-danger-subtle, :root .pagination-bar-with-jump .pagination-jump-latest,
:root .gal-story-more, :root .btn-save, :root .avatar-save-btn, :root .btn--danger, :root .btn.btn-danger, :root #backToProfile {
    position: relative; overflow: hidden; isolation: isolate;
    border: 1px solid transparent; border-radius: 2px;
    box-shadow: 2px 2px 0 rgba(0, 0, 0, .5);
    font-weight: 600; text-decoration: none;
    transition: filter .2s ease, background-color .2s ease;
}
:root[data-theme="light"] .btn--confirm, :root[data-theme="light"] .btn.btn-primary, :root[data-theme="light"] .avatar-edit-btn, :root[data-theme="light"] .btn-danger-subtle,
:root[data-theme="light"] .pagination-bar-with-jump .pagination-jump-latest, :root[data-theme="light"] .gal-story-more, :root[data-theme="light"] .btn-save,
:root[data-theme="light"] .avatar-save-btn, :root[data-theme="light"] .btn--danger, :root[data-theme="light"] .btn.btn-danger, :root[data-theme="light"] #backToProfile {
    box-shadow: 2px 2px 0 rgba(0, 0, 0, .15);
}

/* Farben */
:root .btn--confirm, :root .btn.btn-primary, :root .avatar-edit-btn, :root .btn-danger-subtle--neutral, :root .pagination-bar-with-jump .pagination-jump-latest, :root .gal-story-more {
    background: var(--pb-y); border-color: var(--pb-y); color: var(--pb-y-ink);
}
:root .btn-save, :root .avatar-save-btn { background: var(--pb-g); border-color: var(--pb-g); color: var(--pb-g-ink); }
:root .btn--danger, :root .btn.btn-danger, :root .btn-danger-subtle:not(.btn-danger-subtle--neutral) { background: var(--pb-r); border-color: var(--pb-r); color: var(--pb-r-ink); }
:root #backToProfile { background: var(--pb-b); border-color: var(--pb-b); color: var(--pb-b-ink); }

/* Hover: Farbe bleibt, Glanzstreifen läuft durch */
:root .btn--confirm:hover, :root .btn.btn-primary:hover, :root .avatar-edit-btn:hover, :root .btn-danger-subtle:hover, :root .pagination-bar-with-jump .pagination-jump-latest:hover,
:root .gal-story-more:hover, :root .btn-save:hover, :root .avatar-save-btn:hover:not(:disabled), :root .btn--danger:hover, :root .btn.btn-danger:hover, :root #backToProfile:hover {
    filter: brightness(1.05);
}
:root .btn--confirm:hover { background: var(--pb-y); }
:root .btn--danger:hover { background: var(--pb-r); }
:root .btn--confirm::after, :root .btn.btn-primary::after, :root .avatar-edit-btn::after, :root .btn-danger-subtle::after, :root .pagination-bar-with-jump .pagination-jump-latest::after,
:root .gal-story-more::after, :root .btn-save::after, :root .avatar-save-btn::after, :root .btn--danger::after, :root .btn.btn-danger::after, :root #backToProfile::after {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .5) 50%, transparent 65%);
    transform: translateX(-120%); transition: transform .55s ease;
}
:root .btn--confirm:hover::after, :root .btn.btn-primary:hover::after, :root .avatar-edit-btn:hover::after, :root .btn-danger-subtle:hover::after,
:root .pagination-bar-with-jump .pagination-jump-latest:hover::after, :root .gal-story-more:hover::after, :root .btn-save:hover::after,
:root .avatar-save-btn:hover:not(:disabled)::after, :root .btn--danger:hover::after, :root .btn.btn-danger:hover::after, :root #backToProfile:hover::after,
:root .btn--confirm:focus-visible::after, :root .btn-save:focus-visible::after, :root .btn--danger:focus-visible::after, :root .avatar-edit-btn:focus-visible::after { transform: translateX(120%); }

:root .btn--confirm:disabled, :root .btn-save:disabled, :root .avatar-save-btn:disabled, :root .btn--danger:disabled { opacity: .45; }

@media (prefers-reduced-motion: reduce) {
    :root .btn--confirm::after, :root .btn.btn-primary::after, :root .avatar-edit-btn::after, :root .btn-danger-subtle::after, :root .pagination-bar-with-jump .pagination-jump-latest::after,
    :root .gal-story-more::after, :root .btn-save::after, :root .avatar-save-btn::after, :root .btn--danger::after, :root .btn.btn-danger::after, :root #backToProfile::after { transition: none; }
}

/* light.css setzt bei Speichern weiße Schrift – auf der Pastellfläche bleibt sie dunkel */
:root[data-theme="light"] .btn-save, :root[data-theme="light"] .avatar-save-btn { color: var(--pb-g-ink); }
:root[data-theme="light"] .btn--confirm, :root[data-theme="light"] .btn.btn-primary, :root[data-theme="light"] .avatar-edit-btn, :root[data-theme="light"] .btn-danger-subtle--neutral { color: var(--pb-y-ink); }
:root[data-theme="light"] .btn--danger, :root[data-theme="light"] .btn.btn-danger, :root[data-theme="light"] .btn-danger-subtle:not(.btn-danger-subtle--neutral) { color: var(--pb-r-ink); }