/*
 * Drop-Hinweis (Bert 27.09.2026, Vorbild invictus-shisha.de): Karte unten rechts, mobil als Leiste über der
 * Tab-Leiste und dem Cookie-Band. Hell/dunkel über die Theme-Tokens, Akzent = Weltfarbe (--hk-welt).
 * Pixelzeichen immer 64 px aus der 128er-Datei (ganzzahlig, nie krumm skaliert). Formregel S5: Knopf 8 px (Handeln eckig), Schließen als runder Symbolknopf. Nur geladen, wenn der Hinweis
 * im Kanal aktiv ist (eigene Hashdatei, tools/build-drop-toast-assets.mjs).
 */
.hk-drop {
    position: fixed;
    right: var(--hk-space-4, 24px);
    bottom: calc(var(--hk-space-4, 24px) + var(--hk-mobile-nav-space, 0px) + var(--hk-cookie-hub, 0px));
    z-index: 1030;
    width: min(400px, calc(100vw - 2 * var(--hk-space-4, 24px)));
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    gap: var(--hk-space-3, 16px);
    align-items: center;
    padding: var(--hk-space-3, 16px) var(--hk-space-6, 40px) var(--hk-space-3, 16px) var(--hk-space-3, 16px);
    border: 1px solid var(--hk-line, rgba(0, 0, 0, .12));
    border-left: 4px solid var(--hk-welt, var(--hk-brand, #be1522));
    border-radius: var(--hk-radius-btn, 8px);
    background: var(--hk-surface, #fff);
    color: var(--hk-ink, #111);
    box-shadow: var(--hk-shadow-2, 0 12px 32px rgba(0, 0, 0, .18));
    font-family: var(--hk-font, inherit);
    opacity: 0;
    transform: translateY(16px);
    transition: opacity var(--hk-dur-3, .3s) var(--hk-ease-out, ease-out), transform var(--hk-dur-3, .3s) var(--hk-ease-out, ease-out);
}
.hk-drop[hidden] { display: none; }
.hk-drop.is-offen { opacity: 1; transform: none; }

.hk-drop__bild {
    width: 64px;
    height: 64px;
    padding: 4px;
    border-radius: var(--hk-radius-btn, 8px);
    background: var(--hk-white, #fff);
    box-sizing: content-box;
    margin: -4px;
}
.hk-drop__bild img {
    display: block;
    width: 64px;
    height: 64px;
    image-rendering: pixelated;
}

.hk-drop__text { min-width: 0; }
.hk-drop__titel {
    margin: 0 0 var(--hk-space-1, 8px);
    font: var(--hk-fw-bold, 700) var(--hk-fs-m, 16px)/var(--hk-lh-m, 22px) var(--hk-font, inherit);
    color: var(--hk-ink, #111);
}

.hk-drop__lauf {
    overflow: hidden;
    margin: 0 0 var(--hk-space-2, 12px);
    font: var(--hk-fw-regular, 400) var(--hk-fs-s, 14px)/var(--hk-lh-s, 20px) var(--hk-font, inherit);
    color: var(--hk-ink-2, #444);
    white-space: nowrap;
    -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent);
    mask-image: linear-gradient(90deg, #000 85%, transparent);
}
.hk-drop__bahn { display: inline-flex; gap: 2.5em; }
.hk-drop__kopie { display: none; }
.hk-drop__lauf.is-lauf .hk-drop__kopie { display: inline; }
.hk-drop__lauf.is-lauf .hk-drop__bahn { animation: hk-drop-lauf var(--hk-drop-dauer, 14s) linear infinite; }
.hk-drop:hover .hk-drop__lauf.is-lauf .hk-drop__bahn,
.hk-drop:focus-within .hk-drop__lauf.is-lauf .hk-drop__bahn { animation-play-state: paused; }
@keyframes hk-drop-lauf { to { transform: translateX(calc(-50% - 1.25em)); } }

/* Mit body.hk-relaunch: die globale Linkfarbe `body.hk-relaunch a:not(.btn)` (0,2,2) ginge sonst vor. */
body.hk-relaunch .hk-drop a.hk-drop__knopf,
body.hk-relaunch .hk-drop a.hk-drop__knopf:visited {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 0 var(--hk-space-3, 16px);
    border-radius: var(--hk-radius-btn, 8px);
    background: var(--hk-ink, #111);
    color: var(--hk-surface, #fff);
    font-family: var(--hk-font, inherit);
    font-size: var(--hk-fs-s, 14px);
    font-weight: var(--hk-fw-medium, 500);
    line-height: 1;
    text-decoration: none;
}
body.hk-relaunch .hk-drop a.hk-drop__knopf:hover { background: var(--hk-welt, var(--hk-brand, #be1522)); color: var(--hk-on-welt, #fff); text-decoration: none; }
.hk-drop__knopf:focus-visible,
.hk-drop__zu:focus-visible { outline: 2px solid var(--hk-focus, currentColor); outline-offset: 2px; }

.hk-drop__zu {
    position: absolute;
    top: var(--hk-space-1, 8px);
    right: var(--hk-space-1, 8px);
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: var(--hk-radius-pill, 999px);
    background: transparent;
    color: var(--hk-ink-2, #444);
    cursor: pointer;
}
.hk-drop__zu:hover { background: var(--hk-surface-2, rgba(0, 0, 0, .06)); color: var(--hk-ink, #111); }
.hk-drop__zu svg { width: 16px; height: 16px; }

@media (max-width: 575.98px) {
    .hk-drop {
        right: var(--hk-space-2, 12px);
        left: var(--hk-space-2, 12px);
        bottom: calc(var(--hk-space-2, 12px) + var(--hk-mobile-nav-space, 0px) + var(--hk-cookie-hub, 0px));
        width: auto;
        gap: var(--hk-space-2, 12px);
        padding: var(--hk-space-2, 12px) var(--hk-space-6, 40px) var(--hk-space-2, 12px) var(--hk-space-2, 12px);
    }
    .hk-drop__titel { font-size: var(--hk-fs-s, 14px); line-height: var(--hk-lh-s, 20px); }
}

@media (prefers-reduced-motion: reduce) {
    .hk-drop { transition: none; transform: none; }
    .hk-drop__lauf { white-space: normal; -webkit-mask-image: none; mask-image: none; }
    .hk-drop__lauf .hk-drop__bahn { animation: none !important; display: inline; }
    .hk-drop__lauf .hk-drop__kopie { display: none !important; }
}
@media print { .hk-drop { display: none !important; } }