.hn { font-family: inherit; }

.hn[data-state="hidden"] { display: none; }

.hn__backdrop,
.hn__dialog,
.hn__pennant {
    position: fixed;
    z-index: 9999;
}

/* --- Modal --- */
.hn__backdrop {
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    opacity: 0;
    transition: opacity .25s ease;
}

.hn__dialog {
    top: 50%;
    left: 50%;
    width: min(90vw, 480px);
    max-height: 85vh;
    overflow: auto;
    padding: 1.75rem;
    background: #fff;
    color: #222;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .35);
    transform: translate(-50%, -46%);
    opacity: 0;
    transition: opacity .25s ease, transform .25s ease;
}

.hn__dialog:focus { outline: none; }
.hn__title { margin: 0 0 .75rem; font-size: 1.4rem; }
.hn__text { margin: 0 0 1.5rem; line-height: 1.5; }

.hn__btn {
    padding: .65rem 1.25rem;
    border: 0;
    border-radius: 8px;
    background: #1a56db;
    color: #fff;
    font: inherit;
    cursor: pointer;
}
.hn__btn:hover { background: #1444b0; }

/* --- Wimpel unten rechts --- */
.hn__pennant {
    right: 0;
    bottom: 1.5rem;
    display: none;
    align-items: center;
    gap: .5rem;
    padding: .6rem 1.75rem .6rem 1rem;
    border: 0;
    background: #1a56db;
    color: #fff;
    font: inherit;
    font-size: .9rem;
    cursor: pointer;
    /* Wimpel-Form: rechts eingekerbt */
    clip-path: polygon(0 0, 100% 0, calc(100% - 14px) 50%, 100% 100%, 0 100%);
    box-shadow: 0 4px 14px rgba(0, 0, 0, .3);
    transform: translateX(100%);
    transition: transform .3s ease;
}
.hn__pennant:hover { background: #1444b0; }

/* --- Zustände --- */
.hn[data-state="open"] .hn__backdrop { opacity: 1; }
.hn[data-state="open"] .hn__dialog { opacity: 1; transform: translate(-50%, -50%); }

.hn[data-state="minimized"] .hn__backdrop,
.hn[data-state="minimized"] .hn__dialog { display: none; }
.hn[data-state="minimized"] .hn__pennant { display: inline-flex; transform: translateX(0); }

.hn[data-state="open"] .hn__pennant { display: none; }

html.hn-lock { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
    .hn__backdrop, .hn__dialog, .hn__pennant { transition: none; }
}