/*
 * fussball-news.de – Artikel-Kommentare (assets/comments.js). Aufbau 1:1 wie bei FCBinside (fcbinside-kommentare/assets/fcbk.css),
 * Farben, Schrift und Kanten aus dem Designsystem der App.
 */

.fnc {  margin: 18px 15px 0; padding-bottom: 20px; color: var(--fn-ink); font-family: var(--fn-font); font-size: 16px; }
.has-fnc.fnc-floating { padding-bottom: 76px; } /* Platz für die mitlaufende Leiste */

.fnc-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0 12px; border-bottom: 1px solid var(--fn-line-strong); }
.fnc-head h2 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 14.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.fnc-write { padding: 6px 0; border: 0; background: none; color: var(--fnc-pink); cursor: pointer; font-family: inherit; font-size: 13.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }

.fnc-list, .fnc-replies { margin: 0; padding: 0; list-style: none; }
.fnc-showall { list-style: none; padding: 16px 0 4px; }
.fnc-showall button { display: block; width: 100%; height: 46px; border: 1px solid var(--fnc-line, var(--fn-line)); background: none; color: var(--fnc-pink); cursor: pointer; font-family: inherit; font-size: 13.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; transition: border-color .15s, background .15s; }
.fnc-showall button:hover { border-color: var(--fnc-pink); background: color-mix(in srgb, var(--fn-accent) 8%, transparent); }
.fnc-empty { padding: 24px 0; color: var(--fnc-muted); text-align: center; list-style: none; }
.fnc-c { padding: 16px 0 12px; border-bottom: 1px solid var(--fn-line); }
.fnc-replies { margin: 10px 0 0 22px; padding-left: 14px; border-left: 2px solid var(--fn-line); }
.fnc-replies .fnc-c { padding: 10px 0 8px; border-bottom: 0; }
.fnc-c-top { display: flex; align-items: center; gap: 12px; }
.fnc-c-avatar { display: grid; place-items: end center; flex: none; width: 38px; height: 38px; overflow: hidden; background: var(--fn-shot); color: var(--fn-muted); }
.fnc-c-avatar img { width: 100%; height: 100%; object-fit: cover; }
.is-reply .fnc-c-avatar { width: 30px; height: 30px; }
.fnc-c-who { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.fnc-c-who b { overflow: hidden; font-size: 16px; font-weight: 800; letter-spacing: -.01em; text-overflow: ellipsis; white-space: nowrap; }
.fnc-c-who small { color: var(--fnc-muted); font-size: 13px; font-weight: 600; }
.fnc-c-more { display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; background: none; color: var(--fn-muted); cursor: pointer; }
.fnc-c-text { margin: 10px 0 0; font-size: 16px; line-height: 1.5; overflow-wrap: anywhere; }
.fnc-c-actions { display: flex; align-items: center; gap: 18px; margin-top: 10px; }
.fnc-c-reply, .fnc-c-count { display: flex; align-items: center; gap: 6px; padding: 4px 0; border: 0; background: none; cursor: pointer; font-family: inherit; font-size: 13px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.fnc-c-reply { color: var(--fnc-pink); }
.fnc-c-count { color: var(--fn-ink); }
.fnc-vote { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.fnc-vote button { display: flex; align-items: center; gap: 3px; min-width: 44px; height: 32px; padding: 0 6px; border: 0; background: none; color: var(--fn-muted); cursor: pointer; font-family: inherit; font-size: 13.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.fnc-up[aria-pressed="true"] { color: #1e9e57; }
.fnc-down[aria-pressed="true"] { color: #d6283b; }

/* Mitreden-Leiste unten */
.fnc-bar-slot { margin: 12px -15px 0; }
.fnc-bar { background: var(--fn-bg); border-top: 1px solid var(--fnc-line, var(--fn-line)); border-bottom: 1px solid var(--fnc-line, var(--fn-line)); } /* eingerastet am Ende der Kommentare */
.fnc-bar.is-floating { position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; max-width: 640px; margin: 0 auto; padding-bottom: env(safe-area-inset-bottom); border-bottom: 0; box-shadow: 0 -2px 10px rgba(0, 0, 0, .04); }
/* Antworten/Bearbeiten: Eingabe direkt am Kommentar */
.fnc-bar.is-inline { position: static; margin: 12px 0 2px; border: 1px solid var(--fnc-line, var(--fn-line)); box-shadow: none; }
.fnc-bar.is-inline.is-replymode { margin: 10px 0 0 22px; border-left: 2px solid var(--fn-accent); }
.fnc-bar.is-inline .fnc-reply { background: color-mix(in srgb, var(--fn-accent) 10%, var(--fn-bg)); }
.fnc-bar-row { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 8px 15px; }
.fnc-me { display: grid; place-items: center; flex: none; width: 38px; height: 38px; overflow: hidden; border: 1px solid var(--fn-line); background: var(--fn-surface); color: var(--fn-muted); }
.fnc-me img { width: 100%; height: 100%; object-fit: cover; }
.fnc-me i { display: grid; place-items: center; width: 100%; height: 100%; background: var(--fn-accent); color: var(--fn-bg); font-size: 16px; font-style: normal; font-weight: 800; }
.fnc-bar textarea { flex: 1; min-width: 0; max-height: 140px; padding: 9px 0; border: 0; background: none; color: var(--fn-ink); font-family: inherit; font-size: 16px; line-height: 1.35; resize: none; }
.fnc-bar textarea:focus { outline: none; }
.fnc-bar textarea::placeholder { color: var(--fn-muted); }
.fnc-send { flex: none; padding: 8px 0; border: 0; background: none; color: var(--fn-accent); cursor: pointer; font-family: inherit; font-size: 14.5px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.fnc-send:disabled { color: color-mix(in srgb, var(--fn-accent) 45%, var(--fn-bg)); cursor: default; }
.fnc-bar.is-saving { opacity: .6; pointer-events: none; }
.fnc-reply { display: flex; align-items: center; justify-content: space-between; height: 36px; padding: 0 8px 0 15px; background: var(--fn-surface); color: var(--fn-muted); font-size: 13.5px; }
.fnc-reply[hidden] { display: none; }
.fnc-reply b { color: var(--fn-ink); }
.fnc-reply i { font-style: normal; }
.fnc-reply button { width: 34px; height: 34px; border: 0; background: none; color: var(--fn-muted); cursor: pointer; font-size: 16px; }

/* Blatt von unten */
.fnc-sheet { position: fixed; inset: 0; z-index: 100020; } /* über dem Kommentar-Fenster */
.fnc-sheet[hidden] { display: none; }
.fnc-sheet-bg { position: absolute; inset: 0; background: rgba(0, 0, 0, .45); }
.fnc-sheet-panel { position: absolute; left: 0; right: 0; bottom: 0; max-width: 640px; max-height: 92dvh; margin: 0 auto; padding: 10px 0 calc(18px + env(safe-area-inset-bottom)); overflow-y: auto; background: var(--fn-bg); color: var(--fn-ink); animation: fnc-in .2s ease-out; }
@keyframes fnc-in { from { transform: translateY(40px); } }
.fnc-sheet-handle { display: block; width: 34px; height: 4px; margin: 0 auto 10px; border-radius: 2px; background: var(--fn-shot); }
.fnc-opt { display: flex; align-items: center; gap: 20px; width: 100%; height: 56px; padding: 0 20px; border: 0; background: none; color: var(--fn-ink); cursor: pointer; font-family: inherit; font-size: 17px; text-align: left; }
.fnc-opt.is-red { color: #e5364f; }
.fnc-opt:hover { background: var(--fn-surface); }
.fnc-rep-title { margin: 4px 20px 2px; font-size: 18px; font-weight: 800; text-align: center; }
.fnc-rep-sub { margin: 0 20px 10px; color: var(--fn-muted); font-size: 14px; text-align: center; }
.fnc-rep-reason { display: flex; align-items: center; width: 100%; min-height: 48px; padding: 0 20px; border: 0; border-bottom: 1px solid var(--fn-line); background: none; color: var(--fn-ink); cursor: pointer; font-family: inherit; font-size: 15.5px; text-align: left; }
.fnc-rep-reason::after { content: ""; flex: none; width: 18px; height: 18px; margin-left: auto; border: 2px solid var(--fn-line-strong); border-radius: 50%; }
.fnc-rep-reason[aria-pressed="true"]::after { border: 6px solid var(--fn-accent); }
.fnc-rep-note { margin: 12px 20px; color: var(--fn-muted); font-size: 12.5px; line-height: 1.4; text-align: center; }
.fnc-rep-send { display: block; width: calc(100% - 40px); height: 48px; margin: 0 20px; border: 0; background: var(--fn-accent); color: var(--fn-bg); cursor: pointer; font-family: inherit; font-size: 15px; font-weight: 700; }
.fnc-rep-send:disabled { background: var(--fn-shot); color: var(--fn-muted); cursor: default; }

.fnc-toast { position: fixed; left: 50%; bottom: calc(84px + env(safe-area-inset-bottom)); z-index: 100030; max-width: calc(100% - 32px); margin: 0; padding: 12px 16px; transform: translateX(-50%); background: var(--fn-ink); color: var(--fn-bg); font-size: 14px; box-shadow: 0 4px 16px rgba(0, 0, 0, .3); }
.fnc-toast[hidden] { display: none; }
.fnc-head h2, .fnc-write { white-space: nowrap; }
.fnc-head h2 { font-size: 13.5px; letter-spacing: .1em; }
.fnc-write { font-size: 12.5px; letter-spacing: .08em; }
.fnc-c-reply, .fnc-c-count { white-space: nowrap; }
.fnc-c-actions { gap: 14px; }

/* Aus der Glocke angesprungener Kommentar */
.fnc-c { transition: background-color .6s; }
.fnc-c.is-target { margin: 0 -15px; padding-left: 15px; padding-right: 15px; background: color-mix(in srgb, var(--fn-accent) 12%, var(--fn-bg)); }
.fnc-at { color: var(--fn-accent); font-weight: 700; }

@media (min-width: 1024px) {
	/* Menü, Melden, Anmelden: eckiges Fenster in der Mitte statt Blatt von unten */
	.fnc-sheet { z-index: 100020; }
	.fnc-sheet-panel { top: 50%; left: 50%; right: auto; bottom: auto; width: min(520px, calc(100vw - 48px)); max-height: 86vh; margin: 0; padding: 14px 0 16px; border-radius: 0; transform: translate(-50%, -50%); box-shadow: 0 24px 64px rgba(0, 0, 0, .28); animation: none; }
	.fnc-sheet-handle { display: none; }
}

/* Sortierung */
.fnc-head { flex-wrap: wrap; }
/* Sortierung als Leiste (statt Auswahlliste) + Aktualisieren */
.fnc-sort { display: inline-flex; border: 1px solid var(--fn-line-strong); }
.fnc-sort button { height: 32px; padding: 0 12px; border: 0; background: var(--fn-bg); color: var(--fn-muted); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; transition: background .15s, color .15s; }
.fnc-sort button + button { border-left: 1px solid var(--fn-line-strong); }
.fnc-sort button:hover { color: var(--fn-ink); }
.fnc-sort button[aria-pressed="true"] { background: var(--fn-ink); color: var(--fn-bg); }
.fnc-refresh { display: grid; place-items: center; flex: none; width: 34px; height: 34px; padding: 0; border: 1px solid var(--fn-line-strong); background: var(--fn-bg); color: var(--fn-ink); cursor: pointer; }
.fnc-refresh:hover { border-color: var(--fn-ink); }
.fnc-refresh.is-spinning svg { animation: fnc-spin .6s linear infinite; }
@keyframes fnc-spin { to { transform: rotate(360deg); } }
/* Live: Hinweis auf neue Kommentare */
.fnc-newpill { display: block; flex: none; width: calc(100% - 32px); margin: 8px auto; padding: 10px 14px; border: 0; background: var(--fn-accent); color: var(--fn-bg); font: inherit; font-size: 14px; font-weight: 800; cursor: pointer; box-shadow: 0 6px 18px rgba(0, 0, 0, .15); }
.fnc-newpill[hidden] { display: none; }
.fnc:not(.is-sheet) .fnc-newpill { position: sticky; top: 72px; z-index: 5; width: 100%; }
.fnc-c.is-new { animation: fnc-new 6s ease-out; }
@keyframes fnc-new { 0%, 40% { background: color-mix(in srgb, var(--fn-accent) 12%, var(--fn-bg)); } 100% { background: transparent; } }

/* Emojis */
.fnc-emojibtn { display: grid; place-items: center; flex: none; width: 36px; height: 36px; padding: 0; border: 0; background: none; color: var(--fn-muted); cursor: pointer; transition: color .15s; }
.fnc-emojibtn:hover, .fnc-emojibtn[aria-expanded="true"] { color: var(--fn-accent); }
.fnc-emojis { display: grid; grid-template-columns: repeat(auto-fill, minmax(40px, 1fr)); gap: 2px; padding: 8px 10px; border-bottom: 1px solid var(--fn-line); background: var(--fn-surface); }
.fnc-emojis[hidden] { display: none; }
.fnc-emojis button { height: 40px; padding: 0; border: 0; background: none; font-size: 22px; line-height: 1; cursor: pointer; }
.fnc-emojis button:hover { background: var(--fn-bg); }

/* Kommentar-Fenster (Kommentar-Symbol oben): Handy von unten, Computer schwebend in der Mitte */
.fnc-shead, .fnc-backdrop { display: none; }
body.fnc-sheet-open { overflow: hidden; }
body.fnc-sheet-open .fnc-backdrop:not([hidden]) { display: block; position: fixed; inset: 0; z-index: 100009; background: rgba(0, 0, 0, .5); }
.fnc.is-sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 100010; display: flex; flex-direction: column; height: 88dvh; margin: 0; padding: 0; background: var(--fn-bg); box-shadow: 0 -10px 40px rgba(0, 0, 0, .25); animation: fnc-sheet-up .22s ease-out; }
@keyframes fnc-sheet-up { from { transform: translateY(40px); opacity: .6; } }
.fnc.is-sheet .fnc-shead { position: relative; display: flex; align-items: center; gap: 10px 16px; flex: none; padding: 18px 16px 14px; border-bottom: 1px solid var(--fn-line-strong); }
.fnc-shead-handle { position: absolute; top: 7px; left: 50%; width: 40px; height: 4px; margin-left: -20px; border-radius: 2px; background: var(--fn-shot); }
.fnc-shead h2 { margin: 0; font-size: 21px; font-weight: 900; letter-spacing: -.01em; }
.fnc-shead-x, .fnc-shead .fnc-refresh { display: grid; place-items: center; flex: none; width: 40px; height: 40px; margin: 0; padding: 0; border: 1px solid var(--fnc-line, var(--fn-line)); background: none; color: var(--fn-ink); cursor: pointer; }
.fnc-shead-x:hover, .fnc-shead .fnc-refresh:hover { border-color: var(--fn-ink); }
.fnc-shead-sort { flex: 1; min-width: 0; display: flex; }
.fnc-shead-tools { display: flex; flex: none; }
.fnc-shead-tools + .fnc-shead-x { margin-left: -8px; } /* Aktualisieren und × dicht nebeneinander */
.fnc-shead .fnc-sort button { height: 36px; }
/* Filter-Knopf: unter dem Artikel immer, im Fenster nur auf dem Handy (Computer-Fenster: Leiste) */
.fnc-sortwrap { position: relative; display: inline-flex; }
.fnc-filter { display: none; align-items: center; gap: 7px; height: 40px; padding: 0 12px; border: 1px solid var(--fnc-line, var(--fn-line)); background: var(--fn-bg); color: var(--fn-ink); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.fnc-filter:hover { border-color: var(--fn-ink); }
.fnc-filter-chev { transition: transform .15s; }
.fnc-sortwrap.is-open .fnc-filter { border-color: var(--fn-ink); }
.fnc-sortwrap.is-open .fnc-filter-chev { transform: rotate(180deg); }
.fnc-head .fnc-filter { display: inline-flex; }
.fnc-head .fnc-sortwrap .fnc-sort { position: absolute; top: calc(100% + 6px); right: 0; z-index: 20; display: none; flex-direction: column; min-width: 170px; border: 0; background: var(--fn-bg); box-shadow: 0 12px 30px rgba(0, 0, 0, .18); }
.fnc-head .fnc-sortwrap.is-open .fnc-sort { display: flex; }
.fnc-head .fnc-sortwrap .fnc-sort button, .fnc-shead .fnc-sortwrap.is-open .fnc-sort button { height: 44px; padding: 0 16px; text-align: left; font-size: 15px; }
.fnc-head .fnc-sortwrap .fnc-sort button + button { border-left: 0; border-top: 1px solid var(--fn-line); }
.fnc-head .fnc-sortwrap .fnc-sort button[aria-pressed="true"] { background: color-mix(in srgb, var(--fn-accent) 12%, var(--fn-bg)); color: var(--fn-accent); }
/* Kopf unter dem Artikel: links Überschrift, rechts Filter und Aktualisieren – eine Zeile, gleiche Höhe */
.fnc-head { flex-wrap: nowrap; gap: 8px; }
.fnc-head h2 { flex: 1; min-width: 0; white-space: nowrap; }
.fnc-head .fnc-sortwrap { margin-left: auto; }
.fnc-head .fnc-refresh { width: 40px; height: 40px; margin-left: 0; }
.fnc-head .fnc-write { display: none; } /* „Mitreden …“ steht direkt darunter */
@media (max-width: 559px) {
	.fnc-head h2 { gap: 6px; font-size: 13px; letter-spacing: .1em; }
	.fnc-head .fnc-filter { padding: 0 10px; font-size: 13.5px; }
}
@media (max-width: 559px) {
	.fnc-shead .fnc-filter { display: inline-flex; }
	.fnc-shead .fnc-sortwrap .fnc-sort { position: absolute; top: calc(100% + 6px); left: 0; z-index: 20; display: none; flex-direction: column; min-width: 170px; background: var(--fn-bg); box-shadow: 0 12px 30px rgba(0, 0, 0, .18); }
	.fnc-shead .fnc-sortwrap.is-open .fnc-sort { display: flex; }
	.fnc-shead .fnc-sortwrap .fnc-sort button { height: 44px; padding: 0 16px; text-align: left; font-size: 15px; }
	.fnc-shead .fnc-sortwrap .fnc-sort button + button { border-left: 0; border-top: 1px solid var(--fn-line); }
	.fnc-shead .fnc-sortwrap .fnc-sort button[aria-pressed="true"] { background: color-mix(in srgb, var(--fn-accent) 12%, var(--fn-bg)); color: var(--fn-accent); }
	/* Fenster-Kopf: Überschrift mittig oben, darunter Filter links, Aktualisieren und × rechts */
	.fnc.is-sheet .fnc-shead { flex-wrap: wrap; row-gap: 12px; column-gap: 8px; padding-top: 22px; }
	.fnc-shead h2 { flex-basis: 100%; font-size: 19px; text-align: center; }
	.fnc-shead-sort { flex: 1; }
	.fnc-shead-tools + .fnc-shead-x { margin-left: 0; }
}
.fnc.is-sheet .fnc-head { display: none; }
.fnc.is-sheet .fnc-head h2, .fnc.is-sheet .fnc-write { display: none; }
.fnc.is-sheet .fnc-sort { margin-left: 0; }
.fnc.is-sheet .fnc-list { flex: 1; min-height: 0; padding: 0 16px 12px; overflow-y: auto; overscroll-behavior: contain; }
.fnc.is-sheet .fnc-bar-slot { flex: none; min-height: 0 !important; margin: 0; }
.fnc.is-sheet .fnc-bar-slot .fnc-bar { position: static; max-width: none; border-bottom: 0; box-shadow: 0 -2px 10px rgba(0, 0, 0, .04); padding-bottom: env(safe-area-inset-bottom); }
@media (min-width: 1024px) {
	.fnc.is-sheet { top: 7vh; bottom: auto; left: 50%; right: auto; width: min(680px, calc(100vw - 48px)); height: 86vh; transform: translateX(-50%); box-shadow: 0 30px 80px rgba(0, 0, 0, .3); animation: none; }
	.fnc-shead-handle { display: none; }
	.fnc.is-sheet .fnc-shead { padding-top: 16px; }
}

@media (max-width: 1023px) {
	/* Handy: eine Zeile – Wappen, Feld, Emoji, Senden */
	.fnc-bar-row { gap: 8px; padding: 8px 12px 8px 15px; }
	.fnc-bar-row .fnc-me { width: 34px; height: 34px; }
	.fnc-bar-row .fnc-emojibtn { width: 34px; height: 34px; }
	.fnc-bar-row .fnc-send { padding: 8px 0 8px 4px; font-size: 13px; letter-spacing: .12em; }
}

/* ---------- fussball-news.de ---------- */
.fnc { margin: 28px var(--fn-pad) 0; }
@media (min-width: 1100px) { .fnc { margin: 36px 0 0; } }
.fnc-head { border-top: 2px solid var(--fn-line-strong); border-bottom-color: var(--fn-line); }
.fnc-head h2 { letter-spacing: .1em; }
/* Kopf: Kicker-Optik der App */
.fnc-c-avatar { border-radius: 0; }
.fnc-c-avatar i, .fnc-me i { display: grid; place-items: center; width: 100%; height: 100%; background: var(--fn-accent); color: var(--fn-accent-ink); font-size: 16px; font-style: normal; font-weight: 800; }
.fnc-c-avatar { place-items: center; }
.fnc-c-name { overflow: hidden; font-size: 16px; font-weight: 800; letter-spacing: -.01em; text-overflow: ellipsis; white-space: nowrap; }
.fnc-c-line { display: flex; align-items: center; gap: 4px; min-width: 0; }
.fnc-c-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 3px; }
.fnc-club { display: inline-flex; align-items: center; gap: 5px; font: 800 11px/1.2 var(--fn-font); letter-spacing: .06em; text-transform: uppercase; color: var(--fn-accent-text); }
.fnc-club img { width: 16px; height: 16px; object-fit: contain; }
.fnc-c-reply { color: var(--fn-accent-text); }
.fnc-up[aria-pressed="true"] { color: var(--fn-accent-text); }
.fnc-send { color: var(--fn-accent-text); }
.fnc-at { color: var(--fn-accent-text); }
.fnc-rep-reason[aria-pressed="true"]::after { border-color: var(--fn-accent); }
.fnc-rep-send { color: var(--fn-accent-ink); }
.fnc-sort button[aria-pressed="true"] { background: var(--fn-ink); color: var(--fn-bg); }
.fnc-head .fnc-sortwrap .fnc-sort button[aria-pressed="true"],
.fnc-shead .fnc-sortwrap.is-open .fnc-sort button[aria-pressed="true"] { color: var(--fn-accent-text); }
.fnc-empty { font-size: 15px; }
/* Mitlaufende Leiste am Handy über der Tab-Leiste; Platz für beide */
.fnc-bar.is-floating { bottom: calc(var(--fn-tabbar-h) + env(safe-area-inset-bottom)); padding-bottom: 0; border-top: 2px solid var(--fn-line-strong); }
/* Ohne Tab-Leiste (Artikel): ganz unten andocken, Abstand zum Home-Balken als Innenabstand – sonst entsteht beim
   Scrollen (Safari blendet seine Leiste aus) ein Spalt unter der Leiste, durch den der Text scheint */
body.single-post .fnc-bar.is-floating { bottom: 0; padding-bottom: env(safe-area-inset-bottom); }
@media (min-width: 1100px) { .fnc-bar.is-floating { bottom: 0; padding-bottom: env(safe-area-inset-bottom); } }
.has-fnc.fnc-floating { padding-bottom: calc(76px + var(--fn-tabbar-h) + env(safe-area-inset-bottom)); }
.fnc-bar-slot { margin: 12px calc(var(--fn-pad) * -1) 0; }
@media (min-width: 1100px) { .fnc-bar-slot { margin: 12px 0 0; } }
.fnc-toast { bottom: calc(var(--fn-tabbar-h) + 84px + env(safe-area-inset-bottom)); }
/* Kommentar-Symbol im Artikelkopf */
.fn-article-comments [data-fnc-count] { font-variant-numeric: tabular-nums; }

/* Eingabe: Vereinswappen statt Profilbild */
.fnc-me.is-crest { border-color: transparent; background: none; }
.fnc-me.is-crest img { object-fit: contain; }

/* Wappen des Lieblingsvereins als Profilbild, darunter die Zeit */
.fnc-c-avatar.is-crest { background: none; }
.fnc-c-avatar.is-crest img { object-fit: contain; }
.fnc-c-time { display: block; margin-top: 3px; font: 600 13px var(--fn-font); color: var(--fn-muted); }

/* @Erwähnungen: Vorschläge über dem Eingabefeld */
.fnc-mention { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 8px 15px 0; list-style: none; }
.fnc-mention[hidden] { display: none; }
.fnc-mention button { height: 32px; padding: 0 12px; border: 1px solid var(--fn-line); background: var(--fn-bg); color: var(--fn-accent-text); font: 800 13px var(--fn-font); cursor: pointer; }
.fnc-mention button:hover { border-color: var(--fn-accent); }