/*
 * Schließbarer Hinweistext vor den Feeds "/stories" und "/author". Fläche, Rahmen
 * und Schatten kommen 1:1 aus .btnPublishNow (site.css) — über dieselben Tokens aus
 * public/css/ui/tokens.css, nicht über kopierte Literale, damit der Hinweis als
 * Kachel derselben Optik erscheint.
 */
.feedNotice {
    position: relative;
    margin: 0 0 12px;
    background: var(--ws-theme-notice-surface);
    border: 1px solid var(--ws-theme-notice-edge);
    border-radius: var(--ws-radius);
    box-shadow: var(--ws-shadow);
    color: var(--ws-theme-notice-text);
    font-family: var(--ws-font-family);
    font-size: 13px;
    line-height: 1.5;
}

.feedNotice__item {
    position: relative;
    /* links: 14 Rand + 56 Icon-Spalte + 14 Abstand zum Text */
    padding: 12px 40px 12px 84px;
}

/* Läuft von Rahmen zu Rahmen über Icon- und Textspalte, wie die Kachel-Trennlinie
   (.componentInnerSpacerLine); erscheint nur zwischen zwei Bereichen. */
.feedNotice__item + .feedNotice__item {
    border-top: 1px solid var(--ws-theme-hairline);
}

/* top UND bottom gesetzt: erst dadurch ist die Höhe der Spalte definit und das
   height:100% des SVG löst auf. 56px ist zugleich die Deckelung — der Glyph ist
   quadratisch und wüchse sonst mit jeder zusätzlichen Textzeile auch in die Breite. */
.feedNotice__icon {
    position: absolute;
    left: 14px;
    top: 12px;
    bottom: 12px;
    width: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ws-color-accent);
}

.feedNotice__icon svg {
    display: block;
    height: 100%;
    width: auto;
    max-width: 100%;
}

/* Der Fragezeichen-Kreis füllt sein Viewbox bis an den Rand und wirkt dadurch neben dem
   Geschenk-Icon (dünnere Linienzeichnung mit mehr Weißraum im selben Viewbox) deutlich
   größer, obwohl beide dieselbe Spaltenbreite nutzen. Verkleinert auf dessen Größe; die
   Zentrierung übernimmt weiterhin der Flex-Container von .feedNotice__icon. */
.feedNotice__icon--classic svg {
    height: 70%;
}

.feedNotice__text {
    margin: 0;
}

/* Gefüllter Akzent-Kreis statt theme-gebundener Fläche: dasselbe Erkennbarkeits-Muster
   wie .ws-modal__close (public/css/ui/modal.css), damit der Knopf in allen drei Themes
   gleich aussieht. Über die globalen --ws-color-accent*-Tokens, nicht die modal-lokalen
   --ws-modal-accent*, die auf das Modal begrenzt bleiben. Das 16px/bold-"×" überragt den
   15px-Kreis bewusst — keine Verkleinerung der Schrift, kein overflow: hidden. */
.feedNotice__close {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 15px;
    height: 15px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--ws-color-accent);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: bold;
    line-height: 1;
    cursor: pointer;
}

.feedNotice__close:hover {
    background: var(--ws-color-accent-hover);
}

.feedNotice__close::before {
    content: '\00d7';
}

/* Nur im Nachtsicht-Theme in der Fließtextfarbe des Hinweisfelds statt Weiß — Normal und
   Retro behalten das weiße "×" auf dem Akzent-Kreis. */
html[data-ws-theme="nachtsicht"] .feedNotice__close {
    color: var(--ws-theme-notice-text);
}