.icon-button {

    width: 48px;
    height: 48px;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    padding: 0;

    flex-shrink: 0;

}

.memory-card {

    background: #f8f9fa;

    border: none;

    overflow: hidden;

    transition: .25s;

}

.info-card {

    border: 1px solid #dee2e6;

    border-radius: .75rem;

    padding: 1rem;

    text-align: center;

}

.dashboard-card {

    transition: .2s;

    border: none;

}

.dashboard-card:hover {

    transform: translateY(-4px);

    box-shadow: 0 .6rem 1.2rem rgba(0,0,0,.08);

}

/* Nächster Termin */

.dashboard-next-appointment {
    border: none;
    border-radius: 1rem;
    background: #ffffff;
    box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .06);
}

/* Letzte Erinnerung */

.dashboard-latest-memory {
    border: none;
    border-radius: 1rem;
    background: #ffffff;
    box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .06);
}

.dashboard-memory-image {
    width: 100%;
    height: 180px;
    object-fit: cover;
    border-radius: .75rem;
}

/* Letztes Foto */

.dashboard-latest-photo {
    border: none;
    border-radius: 1rem;
    background: #ffffff;
    box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .06);
}

.dashboard-latest-photo-image {
    width: 100%;
    height: 260px;
    object-fit: cover;
    border-radius: .75rem;
    display: block;
}

.dashboard-countdown {
    padding: .75rem 1rem;
    background: #f8f9fa;
    border-radius: .75rem;
}

.quick-action {

    transition: .2s;

    border: none;

}

.quick-action:hover {

    transform: translateY(-4px);

    box-shadow: 0 .6rem 1.2rem rgba(0,0,0,.08);

}

@media (max-width: 768px) {

    .display-3 {

        font-size: 3rem;

    }

    .display-5 {

        font-size: 2.3rem;

    }

    .memory-image {

        max-height: 180px;

    }

}

/* ===========================
   Navigation
=========================== */

.navbar {

    border: 1px solid #ececec;

}

.nav-link {

    transition: .2s;

    font-weight: 500;

}

.nav-link:hover {

    background: #f5f5f5;

}

.nav-link.active {

    background: #0d6efd;

    color: white !important;

}

.navbar-brand {

    transition: .2s;

}

.navbar-brand:hover {

    transform: scale(1.03);

}

/* ===========================
   Memory Gallery
=========================== */

.memory-image {

    width: 100%;
    height: 260px;

    object-fit: cover;

    border-radius: .75rem;

    margin-bottom: 1rem;

    transition: .3s;

    cursor: default;

}

.memory-placeholder {

    min-height: 320px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: linear-gradient(
        180deg,
        #fafafa,
        #f3f3f3
    );

    border-radius: .75rem;

    padding: 2rem;

}

.modal-body {

    padding: 2rem;

}

.modal-body img {

    box-shadow: 0 1rem 2rem rgba(0,0,0,.18);

}

/* ===========================
   Memory Modal
=========================== */

.modal-content {

    border: none;

    border-radius: 1.25rem;

    overflow: hidden;

}

.modal-header {

    border-bottom: none;

    padding: 1.25rem 1.5rem;

}

.modal-body {

    padding: 2rem;

}

.modal-body img {

    max-height: 80vh;

    width: auto;

    border-radius: 1rem;

    box-shadow: 0 1rem 2rem rgba(0,0,0,.18);

}

.modal-title {

    font-weight: 700;

}

.card {

    transition:
        transform .2s ease,
        box-shadow .2s ease;

}

.btn {

    transition: all .2s ease;

}

.btn:hover {

    transform: translateY(-2px);

}

/* ===========================
   Buttons
=========================== */

.btn {

    border-radius: .85rem;

    font-weight: 600;

    transition: all .2s ease;

}

.btn:hover {

    transform: translateY(-2px);

}

.btn-primary,
.btn-success,
.btn-outline-primary,
.btn-outline-danger,
.btn-outline-secondary {

    padding: .7rem 1.3rem;

}

.btn-sm {

    border-radius: .7rem;

}

.btn-lg {

    border-radius: 1rem;

}

/* ===== Modal ohne Hover-Effekte ===== */

.modal,
.modal *,
.modal-dialog,
.modal-content,
.modal-body {

    transform: none !important;
    transition: none !important;
    animation: none !important;

}

.modal img {

    transform: none !important;
    transition: none !important;
    animation: none !important;

}

.modal .btn:hover {

    transform: none !important;

}

.modal .card:hover {

    transform: none !important;
    box-shadow: inherit !important;

}

/* Termin-Karten */

.appointment-card {
    border: none;
    border-radius: 1rem;
    background: #ffffff;
    box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .06);
}

/* Erinnerungsbereich */

.memories-section {
    padding: 1rem;
    background: #f8f9fa;
    border-radius: 1rem;
}

.memory-card {
    border-radius: .9rem;
}

/* Keine Erinnerungen */

.empty-memories {
    padding: 1.5rem;
}

.empty-memories-icon {
    font-size: 2rem;
    opacity: .8;
}

/* Admin-Aktionsbuttons */

.admin-action-btn {
    border-radius: .6rem;
}

/* Admin – mobile Darstellung */

@media (max-width: 576px) {

    .appointment-card .card-body {
        padding: 1.25rem;
    }

    .memories-section {
        padding: .75rem;
    }

    .memory-card .card-body {
        padding: .75rem;
    }

    .appointment-card > .card-body > .d-flex.gap-2 > .admin-action-btn {
        width: auto;
    }

}

.rating-stars {
    display: flex;
    width: fit-content;
    justify-content: flex-start;
    align-items: center;
    gap: .15rem;
}

.rating-star {
    border: none;
    background: none;
    padding: 0;
    font-size: 2rem;
    line-height: 1;
    color: #ced4da;
    cursor: pointer;
    transition: color .15s ease;
}

.rating-star.active {
    color: #ffc107;
}

.rating-stars input {
    display: none;
}

.rating-stars label {
    font-size: 2rem;
    color: #ced4da;
    cursor: pointer;
    transition: color .15s ease;
}

.rating-stars label:hover,
.rating-stars label:hover ~ label,
.rating-stars input:checked ~ label {
    color: #ffc107;
}

.moment-form-card:hover {
    transform: none;
    box-shadow: var(--bs-box-shadow-sm) !important;
}

.time-selection {
    display: grid;
    grid-template-columns: repeat(4, 140px);
    gap: 10px;
}

.appointment-time-btn {
    height: 48px;
    border-radius: 12px;
    font-weight: 500;
}