/* ==========================================================================
   Hinweisblatt `.nj-notice` (Brand Guide „Hinweisblatt – eine Komponente für
   Zustimmungen, Hinweise und Rückfragen“, Betreibervorgabe 28.10.2026).
   Vorlage ist das iOS-Blatt „KI & Datenschutz“ (`AIConsentPane`). EIN Baustein
   für Einwilligungen, Rückfragen, Hinweise, Erfolgsmomente und leere Zustände;
   nie von Hand nachbauen. Skript: `js/nj-notice.js` (`window.NJNotice`),
   serverseitig: `includes/notice.php`.

   Aufbau von oben: Zeichen 55 im milchigen Glas-Kreis → 21 → Titel 27 fett →
   8 → kurzer Satz 17 → (21) Chips/Liste/Inhalt → (13) Fußsatz → „Details ⌄“
   → Rückmeldung; Knöpfe fest unten (50 hoch, Kapsel, halbfett).
   Nur System-Tokens: Abstand 8/13/21/34/55, Radius 13/21/34, Schrift
   10/13/17/21/27, Bewegung 180/220/320 ms + snappy.
   ========================================================================== */
:root {
    /* Grund einfarbig und deckend (kein Verlauf): hell Weiß, dunkel #1E252D. */
    --nj-notice-surface: #ffffff;
    /* Destruktiv (Löschen, Abmelden, Entfernen): Rot #C62828, Weiß 5,6:1. */
    --nj-notice-danger: #c62828;
    --nj-notice-danger-contrast: #ffffff;
    /* Leichter Schleier, damit das Blatt den Inhalt dahinter noch spürbar
       überdeckt (Apps: Schwarz 18 % hell / 32 % dunkel). */
    --nj-notice-scrim: rgba(16, 19, 26, 0.18);
    --nj-notice-shadow: 0 -8px 34px rgba(16, 19, 26, 0.12);
    /* Milchiges Glas auf weißem Grund: Glas-Glanz über der Sekundärfläche,
       damit Kreis und Kapseln auf Weiß nicht verschwinden. */
    --nj-notice-glass-base: var(--color-bg-secondary, #f5f6f8);
    --nj-notice-inner: var(--color-bg-secondary, #f5f6f8);
    --nj-notice-grip: rgba(16, 19, 26, 0.16);
    --nj-notice-switch-off: rgba(16, 19, 26, 0.16);
    --nj-notice-symbol-size: 55px;
    --nj-notice-btn-height: 50px;
    --nj-notice-ease: var(--motion-snappy, cubic-bezier(0.22, 1, 0.36, 1));
    /* Feder 0,6/0,82 der Apps als Kurve angenähert. */
    --nj-notice-spring: cubic-bezier(0.34, 1.32, 0.64, 1);
}

.dark-mode {
    --nj-notice-surface: #1e252d;
    --nj-notice-scrim: rgba(0, 0, 0, 0.32);
    --nj-notice-shadow: 0 -8px 34px rgba(0, 0, 0, 0.42);
    --nj-notice-glass-base: rgba(255, 255, 255, 0.06);
    --nj-notice-inner: rgba(255, 255, 255, 0.05);
    --nj-notice-grip: rgba(255, 255, 255, 0.22);
    --nj-notice-switch-off: rgba(255, 255, 255, 0.2);
}

/* ------------------------------------------------------------- Rahmen */
html.nj-notice-open,
html.nj-notice-open body {
    overflow: hidden;
}

dialog.nj-notice {
    position: fixed;
    inset: auto 0 0 0;
    box-sizing: border-box;
    width: 100%;
    max-width: none;
    height: auto;
    max-height: calc(100svh - max(34px, env(safe-area-inset-top, 0px) + 13px));
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 34px 34px 0 0;
    background: var(--nj-notice-surface);
    color: var(--color-text-primary);
    box-shadow: var(--nj-notice-shadow);
    font-family: var(--font-primary, system-ui, -apple-system, sans-serif);
    overflow: hidden;
    overscroll-behavior: contain;
    transform: translateY(100%);
    transition:
        transform var(--motion-slow, 320ms) var(--nj-notice-ease),
        opacity var(--motion-standard, 220ms) var(--nj-notice-ease);
}

dialog.nj-notice[open] {
    display: flex;
    flex-direction: column;
}

dialog.nj-notice.is-open {
    transform: none;
}

dialog.nj-notice::backdrop {
    background: transparent;
    transition: background-color var(--motion-standard, 220ms) var(--nj-notice-ease);
}

dialog.nj-notice.is-open::backdrop {
    background: var(--nj-notice-scrim);
}

/* Das Blatt selbst bekommt beim Öffnen den Fokus (Bedienhilfen lesen Titel
   und Satz); sichtbar markiert werden erst die Bedienelemente darin. */
dialog.nj-notice:focus,
dialog.nj-notice:focus-visible {
    outline: none;
}

/* Ziehgriff (optisch, wie das native Blatt der Apps). */
.nj-notice__grip {
    flex: none;
    width: 36px;
    height: 5px;
    margin: 8px auto 0;
    border-radius: 999px;
    background: var(--nj-notice-grip);
}

/* Ab 768: zentrierte Karte, höchstens 440 breit. */
@media (min-width: 768px) {
    dialog.nj-notice {
        inset: 0;
        width: min(440px, calc(100% - 42px));
        height: fit-content;
        max-height: calc(100svh - 68px);
        margin: auto;
        border-radius: 34px;
        box-shadow: 0 21px 55px rgba(16, 19, 26, 0.2);
        opacity: 0;
        transform: translateY(13px) scale(0.98);
    }

    .dark-mode dialog.nj-notice {
        box-shadow: 0 21px 55px rgba(0, 0, 0, 0.5);
    }

    dialog.nj-notice.is-open {
        opacity: 1;
        transform: none;
    }

    .nj-notice__grip {
        display: none;
    }
}

/* X nur, wenn die Knöpfe keinen Ausweg bieten: neutrales Glas 44. */
.nj-notice__close {
    position: absolute;
    top: 13px;
    right: 13px;
    z-index: 2;
    display: inline-grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--nj-ui-glass-hairline);
    border-radius: 50%;
    background: var(--nj-ui-glass-sheen), var(--nj-notice-glass-base);
    box-shadow: var(--nj-ui-glass-edge);
    color: var(--color-text-primary);
    cursor: pointer;
}

.nj-notice__close .nj-notice-glyph {
    width: 21px;
    height: 21px;
}

/* ------------------------------------------------------ Rollbereich */
/* Nur der Inhalt scrollt; Inhalt vertikal im Goldenen Schnitt (38,2 % des
   freien Raums darüber, mindestens 34). */
.nj-notice__scroll {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: 0 var(--space-3, 21px);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
}

.nj-notice__scroll::before,
.nj-notice__scroll::after {
    content: "";
    flex: 0.382 0 34px;
}

.nj-notice__scroll::after {
    flex: 0.618 0 21px;
}

/* Weich auslaufende Kanten, wenn Inhalt unter Griff bzw. Knöpfe läuft. */
.nj-notice__scroll.is-scrolled-top {
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 21px);
    mask-image: linear-gradient(to bottom, transparent 0, #000 21px);
}

.nj-notice__scroll.is-scrolled-bottom {
    -webkit-mask-image: linear-gradient(to top, transparent 0, #000 21px);
    mask-image: linear-gradient(to top, transparent 0, #000 21px);
}

.nj-notice__scroll.is-scrolled-top.is-scrolled-bottom {
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 21px, #000 calc(100% - 21px), transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0, #000 21px, #000 calc(100% - 21px), transparent 100%);
}

.nj-notice__body {
    flex: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    text-align: center;
}

/* --------------------------------------------------------- Bausteine */
.nj-notice__symbol {
    display: inline-grid;
    place-items: center;
    flex: none;
    width: var(--nj-notice-symbol-size);
    height: var(--nj-notice-symbol-size);
    margin: 0 0 var(--space-3, 21px);
    border: 1px solid var(--nj-ui-glass-hairline);
    border-radius: 50%;
    background: var(--nj-ui-glass-sheen), var(--nj-notice-glass-base);
    box-shadow: var(--nj-ui-glass-edge), 0 8px 21px rgba(16, 19, 26, 0.06);
    color: var(--color-text-primary);
}

dialog.nj-notice .nj-notice__symbol {
    opacity: 0;
    transform: scale(0.82);
    transition:
        opacity var(--motion-standard, 220ms) var(--nj-notice-ease) 80ms,
        transform 600ms var(--nj-notice-spring) 80ms;
}

dialog.nj-notice.is-open .nj-notice__symbol {
    opacity: 1;
    transform: none;
}

.nj-notice-glyph {
    display: block;
    flex: none;
    width: 27px;
    height: 27px;
    background-color: currentColor;
    -webkit-mask: var(--nj-notice-glyph) center / contain no-repeat;
    mask: var(--nj-notice-glyph) center / contain no-repeat;
    forced-color-adjust: none;
}

.nj-notice__title {
    margin: 0;
    max-width: 22ch;
    color: var(--color-text-primary);
    font-size: 1.6875rem; /* 27 */
    font-weight: 700;
    line-height: 1.19;
    letter-spacing: -0.01em;
    text-wrap: balance;
}

.nj-notice__text {
    margin: var(--space-1, 8px) 0 0;
    max-width: 36ch;
    color: var(--color-text-secondary);
    font-size: 1.0625rem; /* 17 */
    line-height: 1.272;
    text-wrap: pretty;
}

.nj-notice__chips-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-1, 8px);
    margin-top: var(--space-3, 21px);
}

.nj-notice__chips-label {
    margin: 0;
    color: var(--color-text-secondary);
    font-size: 0.625rem; /* 10 */
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.nj-notice__chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-1, 8px);
    margin: 0;
    padding: 0;
    list-style: none;
}

.nj-notice__chip {
    display: inline-flex;
    align-items: center;
    min-height: 29px;
    padding: 4px var(--space-2, 13px);
    box-sizing: border-box;
    border: 1px solid var(--chrome-pill-border, var(--nj-ui-glass-hairline));
    border-radius: 999px;
    background: var(--nj-notice-inner);
    color: var(--color-text-primary);
    font-size: 0.8125rem; /* 13 */
    font-weight: 500;
    line-height: 1.272;
}

.nj-notice__list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2, 13px);
    width: 100%;
    max-width: 36ch;
    margin: var(--space-3, 21px) 0 0;
    padding: 0;
    list-style: none;
    text-align: left;
}

.nj-notice__list li {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2, 13px);
    margin: 0;
    color: var(--color-text-primary);
    font-size: 1.0625rem;
    line-height: 1.272;
}

.nj-notice__list .nj-notice-glyph {
    width: 21px;
    height: 21px;
    color: var(--color-text-secondary);
}

.nj-notice__list-label {
    margin-top: var(--space-3, 21px);
}

.nj-notice__list-label + .nj-notice__list {
    margin-top: var(--space-2, 13px);
}

/* Eigener Inhalt (Schalterliste, Formularfelder): linksbündig, volle Breite. */
.nj-notice__content {
    width: 100%;
    margin-top: var(--space-3, 21px);
    text-align: left;
}

/* Auswahlfelder im Inhalt tragen das Markenorange statt Systemblau. */
.nj-notice__content input[type="radio"],
.nj-notice__content input[type="checkbox"]:not(.nj-notice-switch) {
    accent-color: var(--color-accent-primary);
}

/* Zeile mit Textknopf unter eigenem Inhalt (z. B. „Einstellungen“). */
.nj-notice__content-action {
    margin: var(--space-1, 8px) 0 0;
    text-align: center;
}

.nj-notice__footnote {
    margin: var(--space-2, 13px) 0 0;
    max-width: 40ch;
    color: var(--color-text-secondary);
    font-size: 0.8125rem; /* 13 */
    line-height: 1.272;
}

.nj-notice__footnote a,
.nj-notice__details-inner a,
.nj-notice__content a {
    color: var(--nj-link);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.18em;
}

/* „Details ⌄“: Meta halbfett in Textfarbe, 44 Bedienfläche. */
.nj-notice__details-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-1, 8px);
    min-height: 44px;
    margin-top: var(--space-2, 13px);
    padding: 0 var(--space-2, 13px);
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--color-text-primary);
    font: inherit;
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
}

.nj-notice__details-toggle .nj-notice-glyph {
    width: 13px;
    height: 13px;
    transition: transform var(--motion-standard, 220ms) var(--nj-notice-ease);
}

.nj-notice__details-toggle[aria-expanded="true"] .nj-notice-glyph {
    transform: rotate(180deg);
}

.nj-notice__details {
    display: grid;
    grid-template-rows: 0fr;
    width: 100%;
    opacity: 0;
    transition:
        grid-template-rows var(--motion-slow, 320ms) var(--nj-notice-ease),
        opacity var(--motion-standard, 220ms) var(--nj-notice-ease);
}

.nj-notice__details.is-expanded {
    grid-template-rows: 1fr;
    opacity: 1;
}

.nj-notice__details-clip {
    min-height: 0;
    overflow: hidden;
}

.nj-notice__details-inner {
    margin-top: var(--space-1, 8px);
    padding: var(--space-2, 13px);
    border-radius: var(--radius-md, 13px);
    background: var(--nj-notice-inner);
    color: var(--color-text-secondary);
    font-size: 0.8125rem;
    line-height: 1.618;
    text-align: left;
}

.nj-notice__details-inner > :first-child {
    margin-top: 0;
}

.nj-notice__details-inner > :last-child {
    margin-bottom: 0;
}

.nj-notice__details-inner p {
    margin: 0 0 var(--space-1, 8px);
    color: inherit;
    font-size: inherit;
    line-height: inherit;
}

.nj-notice__details-inner h3,
.nj-notice__details-inner h4 {
    margin: var(--space-2, 13px) 0 4px;
    color: var(--color-text-primary);
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.272;
}

.nj-notice__message {
    margin: var(--space-2, 13px) 0 0;
    color: var(--color-text-secondary);
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.272;
}

.nj-notice__message.is-error {
    color: var(--color-error, #b83e3a);
}

/* ------------------------------------------------------------ Knöpfe */
/* Fest unten an der Safe Area: seitlich 21, oben/unten 13. */
.nj-notice__bar {
    flex: none;
    display: flex;
    flex-direction: column;
    gap: var(--space-2, 13px);
    padding:
        var(--space-2, 13px)
        max(var(--space-3, 21px), env(safe-area-inset-right, 0px))
        calc(var(--space-2, 13px) + env(safe-area-inset-bottom, 0px))
        max(var(--space-3, 21px), env(safe-area-inset-left, 0px));
}

@media (min-width: 768px) {
    .nj-notice__bar {
        padding-bottom: var(--space-3, 21px);
    }
}

/* Zwei gleich breite Kapseln nebeneinander; passt eine Beschriftung nicht
   einzeilig, stehen beide gleich breit untereinander (nie Wortumbruch). */
.nj-notice__pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2, 13px);
}

.nj-notice__pair.is-stacked {
    grid-template-columns: 1fr;
}

.nj-notice-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-1, 8px);
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    min-height: var(--nj-notice-btn-height);
    margin: 0;
    padding: 0 var(--space-2, 13px);
    border: 1px solid var(--nj-ui-glass-hairline);
    border-radius: 999px;
    background: var(--nj-ui-glass-sheen), var(--nj-notice-glass-base);
    box-shadow: var(--nj-ui-glass-edge);
    color: var(--color-text-primary);
    font: inherit;
    font-size: 1.0625rem; /* 17 */
    font-weight: 600;
    line-height: 1.272;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition:
        transform var(--motion-fast, 180ms) var(--nj-notice-ease),
        box-shadow var(--motion-standard, 220ms) var(--nj-notice-ease),
        opacity var(--motion-fast, 180ms) var(--nj-notice-ease);
}

.nj-notice__pair.is-stacked .nj-notice-btn,
.nj-notice__bar.is-stacked .nj-notice-btn {
    white-space: normal;
    overflow-wrap: normal;
    hyphens: none;
}

.nj-notice-btn:hover {
    color: var(--color-text-primary);
    box-shadow: var(--nj-ui-glass-edge), 0 8px 21px rgba(16, 19, 26, 0.08);
}

.nj-notice-btn:active {
    transform: scale(0.96);
}

.nj-notice-btn:focus-visible,
.nj-notice__details-toggle:focus-visible,
.nj-notice__close:focus-visible {
    outline: 2px solid var(--nj-focus-ring, var(--color-accent-primary));
    outline-offset: 2px;
}

/* Hauptaktion: das eine Orange, Schrift Weiß fett. */
.nj-notice-btn--primary {
    border-color: transparent;
    background: var(--color-accent-primary);
    box-shadow: none;
    color: var(--color-accent-primary-contrast, #ffffff);
    font-weight: 700;
}

.nj-notice-btn--primary:hover {
    color: var(--color-accent-primary-contrast, #ffffff);
    box-shadow: 0 8px 21px color-mix(in srgb, var(--color-accent-primary) 32%, transparent);
}

.nj-notice-btn--danger {
    border-color: transparent;
    background: var(--nj-notice-danger);
    box-shadow: none;
    color: var(--nj-notice-danger-contrast);
    font-weight: 700;
}

.nj-notice-btn--danger:hover {
    color: var(--nj-notice-danger-contrast);
    box-shadow: 0 8px 21px color-mix(in srgb, var(--nj-notice-danger) 32%, transparent);
}

.nj-notice-btn[disabled],
.nj-notice-btn[aria-disabled="true"] {
    cursor: default;
    opacity: 0.6;
}

.nj-notice-btn.is-busy {
    opacity: 1;
    color: transparent;
}

.nj-notice-btn.is-busy::after {
    content: "";
    position: absolute;
    inset: 0;
    width: 21px;
    height: 21px;
    margin: auto;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    color: var(--color-text-primary);
    animation: nj-notice-spin 0.8s linear infinite;
}

.nj-notice-btn--primary.is-busy::after,
.nj-notice-btn--danger.is-busy::after {
    color: #ffffff;
}

@keyframes nj-notice-spin {
    to {
        transform: rotate(360deg);
    }
}

/* ------------------------------------------------------ Schalterliste */
/* Granulare Einwilligungen: alle Einzelzwecke auf derselben Ebene, nichts
   vorbelegt; Schalter tragen Orange (Brand Guide, Einstellungslisten). */
.nj-notice-toggles {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0 var(--space-2, 13px);
    border: 1px solid var(--nj-ui-glass-hairline);
    border-radius: var(--radius-lg, 21px);
    background: var(--nj-notice-inner);
    list-style: none;
}

.nj-notice-toggle {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: var(--space-2, 13px) 0;
}

.nj-notice-toggle + .nj-notice-toggle {
    border-top: 1px solid var(--nj-ui-glass-hairline);
}

.nj-notice-toggle__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2, 13px);
    min-height: 44px;
}

.nj-notice-toggle__title {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    color: var(--color-text-primary);
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.272;
}

.nj-notice-toggle__title label {
    display: block;
    cursor: pointer;
}

.nj-notice-toggle__text {
    margin: 0;
    color: var(--color-text-secondary);
    font-size: 0.8125rem;
    line-height: 1.618;
}

.nj-notice-switch {
    flex: none;
    position: relative;
    width: 51px;
    height: 31px;
    margin: 0;
    border-radius: 999px;
    background: var(--nj-notice-switch-off);
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    transition: background-color var(--motion-standard, 220ms) var(--nj-notice-ease);
}

.nj-notice-switch::before {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 27px;
    height: 27px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 2px 6px rgba(16, 19, 26, 0.2);
    transition: transform var(--motion-standard, 220ms) var(--nj-notice-spring);
}

.nj-notice-switch:checked {
    background: var(--color-accent-primary);
}

.nj-notice-switch:checked::before {
    transform: translateX(20px);
}

.nj-notice-switch:disabled {
    cursor: default;
    opacity: 0.55;
}

.nj-notice-switch:focus-visible {
    outline: 2px solid var(--nj-focus-ring, var(--color-accent-primary));
    outline-offset: 2px;
}

@media (forced-colors: active) {
    .nj-notice-switch {
        border: 1px solid CanvasText;
    }

    .nj-notice-switch:checked {
        background: Highlight;
    }
}

/* Textknopf im Inhalt (z. B. „Einstellungen“): wie „Details“. */
.nj-notice-textbtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 var(--space-2, 13px);
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--color-text-primary);
    font: inherit;
    font-size: 0.8125rem;
    font-weight: 600;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
    cursor: pointer;
}

.nj-notice-textbtn:focus-visible {
    outline: 2px solid var(--nj-focus-ring, var(--color-accent-primary));
    outline-offset: 2px;
}

/* ------------------------------------------------------ Kopf im Formular */
/* Formulare mit mehreren Eingaben behalten ihr Gerüst und tragen nur Kopf
   (Zeichen, Titel, Satz) und Knöpfe des Hinweisblatts. */
.nj-notice-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.nj-notice-head .nj-notice__symbol {
    opacity: 1;
    transform: none;
}

/* ----------------------------------------------- Leerer Zustand (Fläche) */
/* Gleiche Bausteine ohne Blatt: eigenständig mit gestrichelter Haarlinie
   (Brand Guide „Leser-Bausteine“ → Zustände). Titel in der Leerzustandsrolle
   21 halbfett. `.no-posts` ist der bestehende Leerzustand der Feeds. */
.nj-notice-inline,
.no-posts {
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
    width: 100%;
    margin: var(--space-3, 21px) 0;
    padding: var(--space-4, 34px) var(--space-3, 21px);
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-lg, 21px);
    color: var(--color-text-primary);
    text-align: center;
    grid-column: 1 / -1;
}

.nj-notice-inline .nj-notice__title,
.no-posts > h2 {
    margin: 0;
    max-width: 26ch;
    color: var(--color-text-primary);
    font-size: 1.3125rem; /* 21 */
    font-weight: 600;
    line-height: 1.19;
    text-wrap: balance;
}

.no-posts > p {
    margin: var(--space-1, 8px) 0 0;
    max-width: 40ch;
    color: var(--color-text-secondary);
    font-size: 1.0625rem;
    line-height: 1.272;
}

/* `.no-posts` kommt ohne Zeichen-Markup (Server und Feed-Skript); Kreis und
   Liniensymbol entstehen hier, damit kein Leerzustand eigenes Markup braucht. */
.no-posts {
    position: relative;
    --nj-notice-glyph: var(--nj-icon-news);
}

.no-posts[data-feed-load-error] {
    --nj-notice-glyph: var(--nj-icon-refresh);
}

.no-posts::before {
    content: "";
    flex: none;
    width: var(--nj-notice-symbol-size);
    height: var(--nj-notice-symbol-size);
    margin-bottom: var(--space-3, 21px);
    box-sizing: border-box;
    border: 1px solid var(--nj-ui-glass-hairline);
    border-radius: 50%;
    background: var(--nj-ui-glass-sheen), var(--nj-notice-glass-base);
    box-shadow: var(--nj-ui-glass-edge);
}

.no-posts::after {
    content: "";
    position: absolute;
    top: calc(var(--space-4, 34px) + (var(--nj-notice-symbol-size) - 27px) / 2);
    left: 50%;
    width: 27px;
    height: 27px;
    margin-left: -13.5px;
    background-color: var(--color-text-primary);
    -webkit-mask: var(--nj-notice-glyph) center / contain no-repeat;
    mask: var(--nj-notice-glyph) center / contain no-repeat;
}

.nj-notice-inline__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-2, 13px);
    margin-top: var(--space-3, 21px);
}

.nj-notice-inline__actions .nj-notice-btn {
    width: auto;
    min-width: 13rem;
    padding: 0 var(--space-3, 21px);
}

/* --------------------------------------------- reduzierte Bewegung */
@media (prefers-reduced-motion: reduce) {
    dialog.nj-notice,
    dialog.nj-notice.is-open {
        transform: none;
        transition: opacity 160ms linear;
    }

    dialog.nj-notice:not(.is-open) {
        opacity: 0;
    }

    dialog.nj-notice .nj-notice__symbol,
    dialog.nj-notice.is-open .nj-notice__symbol {
        transform: none;
        transition: opacity 160ms linear;
    }

    .nj-notice__details,
    .nj-notice__details-toggle .nj-notice-glyph,
    .nj-notice-switch,
    .nj-notice-switch::before,
    .nj-notice-btn {
        transition: none;
    }

    .nj-notice-btn:active {
        transform: none;
    }
}

/* ------------------------------------------------------------ Symbole */
/* Ruhige Liniensymbole (24er Raster, Strich 1,6), eine Quelle für Skript und
   Server: `<span class="nj-notice-glyph" data-icon="…">`. */
:root {
    --nj-icon-shield: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5 5 6.2v5.3c0 4.3 2.9 7.6 7 9 4.1-1.4 7-4.7 7-9V6.2L12 3.5Z'/%3E%3Cpath d='m9 12 2.2 2.2L15.5 10'/%3E%3C/svg%3E");
    --nj-icon-person: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8.5' r='3.5'/%3E%3Cpath d='M5 20c.8-3.6 3.6-5.5 7-5.5s6.2 1.9 7 5.5'/%3E%3C/svg%3E");
    --nj-icon-bookmark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 4h10a1 1 0 0 1 1 1v15l-6-4-6 4V5a1 1 0 0 1 1-1Z'/%3E%3C/svg%3E");
    --nj-icon-flag: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 21V4M6 4h11l-2 4 2 4H6'/%3E%3C/svg%3E");
    --nj-icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='m8.5 12.2 2.4 2.4 4.8-5'/%3E%3C/svg%3E");
    --nj-icon-trash: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 7h15M10 7V5h4v2M6.5 7l.8 12a1.5 1.5 0 0 0 1.5 1.4h6.4a1.5 1.5 0 0 0 1.5-1.4l.8-12M10 11v6M14 11v6'/%3E%3C/svg%3E");
    --nj-icon-info: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 11v5.5M12 7.8v.1'/%3E%3C/svg%3E");
    --nj-icon-alert: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4 3 19.5h18L12 4Z'/%3E%3Cpath d='M12 10v4.5M12 17.2v.1'/%3E%3C/svg%3E");
    --nj-icon-block: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='m6 6 12 12'/%3E%3C/svg%3E");
    --nj-icon-phone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='7' y='3' width='10' height='18' rx='2.5'/%3E%3Cpath d='M11 18h2'/%3E%3C/svg%3E");
    --nj-icon-news: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='5' width='16' height='14' rx='2'/%3E%3Cpath d='M8 9h8M8 12.5h8M8 16h5'/%3E%3C/svg%3E");
    --nj-icon-refresh: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12a7 7 0 1 1-2.1-5'/%3E%3Cpath d='M19 4.5V8h-3.5'/%3E%3C/svg%3E");
    --nj-icon-mail: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5.5' width='17' height='13' rx='2'/%3E%3Cpath d='m4 7 8 6 8-6'/%3E%3C/svg%3E");
    --nj-icon-lock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5.5' y='10.5' width='13' height='9.5' rx='2'/%3E%3Cpath d='M8.5 10.5V8a3.5 3.5 0 0 1 7 0v2.5'/%3E%3C/svg%3E");
    --nj-icon-logout: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4h4a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1h-4M10 16l4-4-4-4M14 12H4'/%3E%3C/svg%3E");
    --nj-icon-photo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='17' height='14' rx='2'/%3E%3Ccircle cx='9' cy='10' r='1.6'/%3E%3Cpath d='m4 17 5-4.5 3.5 3 3-2.5 4.5 4'/%3E%3C/svg%3E");
    --nj-icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    --nj-icon-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E");
}

.nj-notice-glyph[data-icon="shield"] { --nj-notice-glyph: var(--nj-icon-shield); }
.nj-notice-glyph[data-icon="person"] { --nj-notice-glyph: var(--nj-icon-person); }
.nj-notice-glyph[data-icon="bookmark"] { --nj-notice-glyph: var(--nj-icon-bookmark); }
.nj-notice-glyph[data-icon="flag"] { --nj-notice-glyph: var(--nj-icon-flag); }
.nj-notice-glyph[data-icon="check"] { --nj-notice-glyph: var(--nj-icon-check); }
.nj-notice-glyph[data-icon="trash"] { --nj-notice-glyph: var(--nj-icon-trash); }
.nj-notice-glyph[data-icon="info"] { --nj-notice-glyph: var(--nj-icon-info); }
.nj-notice-glyph[data-icon="alert"] { --nj-notice-glyph: var(--nj-icon-alert); }
.nj-notice-glyph[data-icon="block"] { --nj-notice-glyph: var(--nj-icon-block); }
.nj-notice-glyph[data-icon="phone"] { --nj-notice-glyph: var(--nj-icon-phone); }
.nj-notice-glyph[data-icon="news"] { --nj-notice-glyph: var(--nj-icon-news); }
.nj-notice-glyph[data-icon="refresh"] { --nj-notice-glyph: var(--nj-icon-refresh); }
.nj-notice-glyph[data-icon="mail"] { --nj-notice-glyph: var(--nj-icon-mail); }
.nj-notice-glyph[data-icon="lock"] { --nj-notice-glyph: var(--nj-icon-lock); }
.nj-notice-glyph[data-icon="logout"] { --nj-notice-glyph: var(--nj-icon-logout); }
.nj-notice-glyph[data-icon="photo"] { --nj-notice-glyph: var(--nj-icon-photo); }
.nj-notice-glyph[data-icon="chevron"] { --nj-notice-glyph: var(--nj-icon-chevron); }
.nj-notice-glyph[data-icon="close"] { --nj-notice-glyph: var(--nj-icon-close); }