/* ============================================================
   Dialoge im Kundenbereich

   Ein eigenes Fenster statt eines Seitenwechsels: der Kunde verliert nicht
   den Zusammenhang, in dem er gerade steht. Der Hintergrund wird unscharf
   gezeichnet, damit klar ist, dass er gerade nicht bedienbar ist.

   Bewusst ohne Bootstrap-Modal: <dialog> kann das Gleiche, bringt
   Tastaturbedienung und Escape von Haus aus mit und braucht kein JavaScript,
   um überhaupt zu erscheinen.
   ============================================================ */

.gwr-dialog {
    width: min(30rem, calc(100vw - 2rem));
    max-height: calc(100vh - 3rem);
    padding: 0;
    border: 0;
    border-radius: 14px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .22);
    color: var(--gwr-dark);
    background: #fff;
    overflow: visible;
}

.gwr-dialog::backdrop {
    background: rgba(28, 32, 30, .45);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

/* Ohne Bewegung, wenn der Nutzer das so eingestellt hat */
@media (prefers-reduced-motion: no-preference) {
    .gwr-dialog[open] {
        animation: gwr-dialog-auf .18s ease-out;
    }
    .gwr-dialog[open]::backdrop {
        animation: gwr-backdrop-auf .18s ease-out;
    }
}
@keyframes gwr-dialog-auf {
    from { opacity: 0; transform: translateY(10px) scale(.98); }
    to   { opacity: 1; transform: none; }
}
@keyframes gwr-backdrop-auf {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.gwr-dialog-kopf {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    padding: 1.15rem 1.35rem .85rem;
    border-bottom: 1px solid #f1f3f5;
}
.gwr-dialog-kopf h5 {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 600;
    flex: 1;
}
.gwr-dialog-kopf .gwr-dialog-symbol {
    font-size: 1.3rem;
    line-height: 1.2;
    color: var(--gwr-primary);
}
.gwr-dialog-warnung .gwr-dialog-symbol { color: #b0413e; }

.gwr-dialog-zu {
    border: 0;
    background: transparent;
    font-size: 1.15rem;
    line-height: 1;
    padding: .15rem .3rem;
    color: var(--gwr-muted);
    cursor: pointer;
    border-radius: 6px;
}
.gwr-dialog-zu:hover { background: #f1f3f5; color: var(--gwr-dark); }

.gwr-dialog-koerper {
    padding: 1.1rem 1.35rem;
    font-size: .92rem;
    line-height: 1.55;
    overflow-y: auto;
    max-height: min(60vh, 32rem);
}
.gwr-dialog-koerper p:last-child { margin-bottom: 0; }

.gwr-dialog-fuss {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    padding: .85rem 1.35rem 1.15rem;
    border-top: 1px solid #f1f3f5;
}
.gwr-dialog-fuss .gwr-dialog-haupt { margin-left: auto; }

/* Rückmeldung im Dialog */
.gwr-dialog-hinweis {
    margin: 0 0 .85rem;
    padding: .55rem .75rem;
    border-radius: 8px;
    font-size: .87rem;
}
.gwr-dialog-hinweis-fehler { background: #fdf0ef; color: #8a2f2d; }
.gwr-dialog-hinweis-ok     { background: #eef6f1; color: #1B5B3F; }

/* Während eine Anfrage läuft */
.gwr-dialog[data-laeuft] .gwr-dialog-koerper,
.gwr-dialog[data-laeuft] .gwr-dialog-fuss { opacity: .6; pointer-events: none; }

@media (max-width: 575.98px) {
    .gwr-dialog { width: calc(100vw - 1.5rem); }
    .gwr-dialog-fuss { flex-direction: column-reverse; }
    .gwr-dialog-fuss .btn { width: 100%; }
    .gwr-dialog-fuss .gwr-dialog-haupt { margin-left: 0; }
}