/* SchalkeTOTAL Forum – Königsblau, eckig, klassisch aufgeräumt */

.stf { --stf-card: var(--st-blue-deep, #003a7a); --stf-line: var(--st-line, rgba(255, 255, 255, .12)); --stf-soft: rgba(255, 255, 255, .7); padding-bottom: 32px; color: #fff; }
.stf * { box-sizing: border-box; }
.stf [hidden] { display: none !important; }
.st .stf a { color: inherit; text-decoration: none; }

/* Kopf */
/* Kopf der Übersicht: Titel und Knopf auf einer Linie (mittig), Einleitung darunter */
.stf-head { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px 16px; padding-bottom: 6px; }
.st .stf-head h1 { margin: 0; }
.stf-head .stf-btn { height: 38px; padding: 0 14px 0 12px; font-size: 13.5px; }
.st .stf-head .stf-intro { grid-column: 1 / -1; max-width: 34em; margin: 0; font-size: 15px; font-weight: 400; line-height: 1.5; letter-spacing: 0; text-transform: none; color: var(--stf-soft); }
.stf-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 42px; padding: 0 18px; border: 0; background: #fff; color: var(--st-blue, #004d9d) !important; font: inherit; font-size: 14px; font-weight: 800; white-space: nowrap; cursor: pointer; }
.stf-btn:hover { background: #e8f0fb; }
.stf-btn:disabled { opacity: .6; cursor: wait; }
.stf-btn--light { flex: none; }
.st .stf-link { padding: 0; border: 0; background: none; color: #fff; font: inherit; font-size: 13.5px; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

.stf-crumbs { margin: var(--st-page-top, 14px) var(--st-gutter, 16px) 0; font-size: 13px; color: var(--stf-soft); }
.st .stf-crumbs a { color: #fff; font-weight: 600; }
.st .stf-crumbs a:hover { text-decoration: underline; }
.stf-crumbs span { color: var(--stf-soft); }

.stf-section { margin-top: 26px; }
.stf-head + .stf-section { margin-top: 18px; }
.st .stf-section-title { margin: 0 var(--st-gutter, 16px) 10px; font-size: 20px; font-weight: 700; }
.st .stf-note { margin: 16px var(--st-gutter, 16px); font-size: 15px; color: var(--stf-soft); }
.st .stf-note a { color: #fff; text-decoration: underline; }
.st .stf-note--warn { padding: 12px 14px; background: rgba(255, 71, 87, .18); border-left: 4px solid #ff4757; color: #fff; }
.st .stf-note--empty { padding: 18px; background: var(--stf-card); margin: 0; }

/* Kategorien */
.stf-cats { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.stf-cat { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; padding: 16px var(--st-gutter, 16px); background: var(--stf-card); transition: background .15s; }
.stf-cat:hover { background: var(--st-blue-deeper, #002d60); }
.stf-cat-icon { display: grid; place-items: center; width: 46px; height: 46px; background: #fff; color: var(--st-blue, #004d9d); }
.stf-cat-text { min-width: 0; }
.stf-cat-text strong { display: block; font-size: 17px; font-weight: 800; }
.stf-cat-text small { display: block; margin-top: 2px; font-size: 13.5px; line-height: 1.4; color: var(--stf-soft); }
.stf-cat-text em { display: block; margin-top: 6px; font-size: 12.5px; font-style: normal; color: rgba(255, 255, 255, .85); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stf-cat-stats { grid-column: 2; display: flex; gap: 14px; font-size: 12.5px; color: var(--stf-soft); }
.stf-cat-stats b { color: #fff; font-size: 14px; }

/* Kategorie-Seite */
.stf-cathead { display: flex; align-items: center; gap: 14px; padding: 14px var(--st-gutter, 16px) 6px; }
.st .stf-cathead h1 { margin: 0; font-size: clamp(26px, 7vw, 36px); font-weight: 800; line-height: 1.1; }
.st .stf-cathead p { margin: 4px 0 0; font-size: 14.5px; color: var(--stf-soft); }
.stf-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 10px var(--st-gutter, 16px) 12px; font-size: 13.5px; color: var(--stf-soft); }

/* Themen-Liste */
.stf-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.stf-row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px 14px; padding: 14px var(--st-gutter, 16px); background: var(--stf-card); transition: background .15s; }
.stf-row:hover { background: var(--st-blue-deeper, #002d60); }
.stf-row.is-pinned { box-shadow: inset 4px 0 0 #fff; }
.stf-row-main { min-width: 0; }
.stf-row-main strong { display: block; font-size: 16px; font-weight: 700; line-height: 1.3; }
.stf-row-main small { display: block; margin-top: 4px; font-size: 12.5px; color: var(--stf-soft); }
.stf-row-count { display: grid; justify-items: center; min-width: 58px; }
.stf-row-count b { font-size: 18px; font-weight: 800; }
.stf-row-count small { font-size: 11px; color: var(--stf-soft); }
.stf-row-last { display: none; }

.stf-badges { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 6px; }
.stf-badge { padding: 1px 7px; border: 1px solid rgba(255, 255, 255, .45); font-size: 10.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.stf-badge--pin { background: #fff; border-color: #fff; color: var(--st-blue, #004d9d); }
.stf-badge--team { background: var(--st-blue-light, #2f74c8); border-color: var(--st-blue-light, #2f74c8); }
.stf-badge--lock { border-color: #ffb3ba; color: #ffb3ba; }

/* Seiten */
.stf-pages { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; margin: 18px var(--st-gutter, 16px) 0; }
.stf-pages a, .stf-pages span { display: grid; place-items: center; min-width: 38px; height: 38px; padding: 0 10px; border: 1.5px solid rgba(255, 255, 255, .3); font-size: 14px; font-weight: 700; }
.stf-pages a:hover { background: #fff; color: var(--st-blue, #004d9d); }
.stf-pages .is-current { background: #fff; border-color: #fff; color: var(--st-blue, #004d9d); }
.stf-pages .stf-pages-gap { border: 0; min-width: 20px; }

/* Thema */
.stf-thread { margin-top: 14px; padding: 18px var(--st-gutter, 16px); background: var(--stf-card); }
.st .stf-thread-head h1 { margin: 0; font-size: clamp(24px, 6.4vw, 34px); font-weight: 800; line-height: 1.15; }
.stf-thread-meta { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.stf-thread-meta strong { display: block; font-size: 15px; }
.stf-thread-meta small { display: block; font-size: 12.5px; color: var(--stf-soft); }
.stf-thread-body { margin-top: 16px; }
.stf-thread-body .stf-text { font-size: 17px; }

.stf-text { font-size: 16px; line-height: 1.6; overflow-wrap: anywhere; }
.st .stf-text p { margin: 0 0 .7em; font-size: inherit; color: inherit; }
.st .stf-text p:last-child { margin-bottom: 0; }
.st .stf-text a { text-decoration: underline; text-underline-offset: 2px; }
.stf-gif { display: block; max-width: min(100%, 320px); height: auto; margin-top: 10px; background: rgba(255, 255, 255, .06); }

/* Avatare */
.stf-av { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; overflow: hidden; background: hsl(var(--hue, 210) 55% 42%); color: #fff; font-size: 15px; font-weight: 800; }
.stf-av img { width: 100%; height: 100%; object-fit: cover; }
.stf-av--team { background: #fff; color: var(--st-blue, #004d9d); font-size: 12px; letter-spacing: -.02em; }
.stf-thread-meta .stf-av { width: 36px; height: 36px; }

/* Spielerkarten */
.stf-pcards { display: grid; gap: 8px; margin-top: 12px; }
.stf-pcard { display: grid; grid-template-columns: auto 1fr; gap: 10px 12px; align-items: center; padding: 12px; background: #fff; color: #0b1f3a !important; }
a.stf-pcard:hover { background: #eef3fb; }
.stf-pcard-img { position: relative; width: 64px; height: 64px; background: #e8eef7; overflow: hidden; }
.stf-pcard-img img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.stf-pcard-img b { position: absolute; left: 0; bottom: 0; padding: 1px 6px; background: var(--st-blue, #004d9d); color: #fff; font-size: 12px; }
.stf-pcard-head small { display: block; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--st-blue, #004d9d); }
.stf-pcard-head strong { display: block; font-size: 17px; font-weight: 800; line-height: 1.2; }
.stf-pcard-head em { display: block; margin-top: 2px; font-size: 12px; font-style: normal; color: #5b6b82; }
.stf-pcard-stats { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid #e3eaf4; padding-top: 10px; }
.stf-pcard-stats span { display: grid; justify-items: center; }
.stf-pcard-stats span + span { border-left: 1px solid #e3eaf4; }
.stf-pcard-stats b { font-size: 19px; font-weight: 800; color: var(--st-blue, #004d9d); }
.stf-pcard-stats small { font-size: 11px; color: #5b6b82; }

/* Umfrage */
.stf-poll { margin-top: 16px; padding: 14px; border: 1.5px solid rgba(255, 255, 255, .3); }
.st .stf-poll-q { display: flex; gap: 8px; align-items: center; margin: 0 0 10px; font-size: 16px; font-weight: 800; }
.stf-poll-opts { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.st .stf-poll-opts button { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 44px; padding: 8px 12px; border: 1.5px solid rgba(255, 255, 255, .5); background: none; color: #fff; font: inherit; font-size: 15px; font-weight: 600; text-align: left; cursor: pointer; overflow: hidden; }
.st .stf-poll:not(.is-results) .stf-poll-opts button:hover { background: #fff; color: var(--st-blue, #004d9d); }
.st .stf-poll-opts button:disabled { cursor: default; }
.stf-poll-bar { position: absolute; inset: 0 auto 0 0; background: rgba(255, 255, 255, .16); transition: width .5s ease; }
.stf-poll-label, .stf-poll-pct { position: relative; }
.stf-poll:not(.is-results) .stf-poll-bar, .stf-poll:not(.is-results) .stf-poll-pct { display: none; }
.st .stf-poll-opts button.is-mine { border-color: #fff; }
.stf-poll-opts button.is-mine .stf-poll-bar { background: rgba(255, 255, 255, .32); }
.stf-poll-opts button.is-mine .stf-poll-label::after { content: ' ✓'; }
.st .stf-poll-meta { margin: 10px 0 0; font-size: 12.5px; color: var(--stf-soft); }
.st .stf-poll-meta a { color: #fff; text-decoration: underline; }

/* Aktionen */
.stf-actions { position: relative; display: flex; align-items: center; gap: 4px; margin: 12px 0 0 -6px; }
.stf-vote { display: inline-flex; align-items: center; }
.st .stf-vote button, .st .stf-act { display: inline-flex; align-items: center; gap: 5px; height: 34px; padding: 0 6px; border: 0; background: none; color: var(--stf-soft); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.st .stf-vote button:hover:not(:disabled), .st .stf-act:hover { color: #fff; }
.st .stf-vote button:disabled { opacity: .35; cursor: default; }
.stf-vote b { min-width: 24px; font-size: 14px; text-align: center; }
.st .stf-vote.is-up [data-vote="1"], .stf-vote.is-up b { color: #6fe39a; }
.st .stf-vote.is-down [data-vote="-1"], .stf-vote.is-down b { color: #ff9aa4; }
.st .stf-act--more { margin-left: auto; }

/* Antworten */
.stf-replies { margin-top: 2px; }
.stf-posts { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.stf-post { display: flex; gap: 12px; padding: 16px var(--st-gutter, 16px) 12px; background: var(--stf-card); scroll-margin-top: 110px; }
.stf-post-main { flex: 1; min-width: 0; }
.stf-post-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; margin-bottom: 4px; }
.stf-post-head strong { font-size: 15px; }
.stf-op { padding: 0 6px; background: #fff; color: var(--st-blue, #004d9d); font-size: 10.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.st .stf-post-time { font-size: 12px; color: var(--stf-soft); }
.stf-post-nr { margin-left: auto; font-size: 12px; color: rgba(255, 255, 255, .45); }
.stf-quote { position: relative; margin: 4px 0 10px; padding: 8px 12px; border-left: 3px solid rgba(255, 255, 255, .55); background: rgba(255, 255, 255, .07); font-size: 14px; color: rgba(255, 255, 255, .85); }
.stf-quote > a, .stf-quote > span { display: block; margin-bottom: 2px; font-size: 12.5px; font-weight: 800; color: #fff; }
.st .stf-quote p { margin: 0; font-size: 14px; }
.st .stf-quote button { position: absolute; top: 4px; right: 4px; width: 26px; height: 26px; border: 0; background: none; color: #fff; font-size: 18px; cursor: pointer; }
.st .stf-gone, .st .stf-blocked-note { margin: 4px 0; font-size: 14px; font-style: italic; color: rgba(255, 255, 255, .55); }
.stf-post.is-blocked .stf-post-main > :not(.stf-post-head):not(.stf-blocked-note) { display: none; }
.stf-post.is-blocked .stf-av { opacity: .3; }
@keyframes stf-flash { 0%, 30% { background: var(--st-blue-light, #2f74c8); } 100% { background: var(--stf-card); } }
.stf-post.is-focus { animation: stf-flash 2.6s ease-out; }

/* Schreiben */
.stf-reply-box { margin-top: 18px; }
.stf-signin { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 18px; margin: 0 var(--st-gutter, 16px); padding: 16px 18px; background: var(--st-blue-deeper, #002d60); border-left: 4px solid #fff; }
.st .stf-signin p { margin: 0; flex: 1 1 240px; font-size: 15px; line-height: 1.45; color: rgba(255, 255, 255, .85); }
.stf-signin strong { color: #fff; }
.stf-composer { padding: 18px var(--st-gutter, 16px); background: var(--stf-card); }
.st .stf-composer-title { margin: 0 0 12px; font-size: 18px; font-weight: 800; }
.stf-composer-row { display: flex; gap: 12px; }
.stf-composer-main { flex: 1; min-width: 0; }
.st .stf textarea, .st .stf input[type="text"], .st .stf input[type="search"], .st .stf select {
	width: 100%;
	padding: 12px 14px;
	border: 1.5px solid rgba(255, 255, 255, .22);
	border-radius: 0;
	background: var(--st-blue-deeper, #002d60);
	color: #fff;
	font: inherit;
	font-size: 16px;
	line-height: 1.45;
	outline: none;
}
.st .stf textarea { resize: vertical; min-height: 110px; }
.st .stf textarea:focus, .st .stf input:focus, .st .stf select:focus { border-color: #fff; }
.stf textarea::placeholder, .stf input::placeholder { color: rgba(255, 255, 255, .5); }
.stf-composer-foot, .stf-form-foot { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin-top: 10px; }
.stf-counter { margin-right: auto; font-size: 12px; color: var(--stf-soft); }
.st .stf-error { margin: 8px 0 0; font-size: 14px; color: #ffb3ba; }
.st .stf-error:empty { display: none; }

.stf-tools { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.st .stf-tool { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; border: 1.5px solid rgba(255, 255, 255, .4); background: none; color: #fff; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.st .stf-tool:hover, .st .stf-tool[aria-expanded="true"], .st .stf-tool[aria-pressed="true"] { background: #fff; color: var(--st-blue, #004d9d); }
.stf-tool-gif { font-size: 12px; font-weight: 800; letter-spacing: .06em; }
.stf-attach { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.stf-chip { position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 4px 34px 4px 4px; background: #fff; color: #0b1f3a; font-size: 13.5px; font-weight: 700; }
.stf-chip img { width: 32px; height: 32px; object-fit: cover; object-position: top; }
.stf-chip--gif { padding: 0; }
.stf-chip--gif img { width: auto; height: 90px; }
.st .stf-chip button { position: absolute; top: 2px; right: 2px; width: 26px; height: 26px; border: 0; border-radius: 50%; background: rgba(0, 0, 0, .6); color: #fff; font-size: 17px; line-height: 1; cursor: pointer; }

.stf-players { margin-top: 8px; padding: 10px; background: var(--st-blue-deeper, #002d60); border: 1.5px solid rgba(255, 255, 255, .22); }
.st .stf-players input { height: 40px; background: #fff; color: #0b1f3a; border: 0; }
.stf-players ul { list-style: none; margin: 8px 0 0; padding: 0; max-height: 260px; overflow-y: auto; overscroll-behavior: contain; }
.st .stf-players li button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 6px 8px; border: 0; background: none; color: #fff; font: inherit; text-align: left; cursor: pointer; }
.stf-players li button:hover, .stf-players li button[aria-pressed="true"] { background: rgba(255, 255, 255, .14); }
.stf-players li button[aria-pressed="true"]::after { content: '✓'; margin-left: auto; font-weight: 800; }
.stf-players img { width: 34px; height: 34px; object-fit: cover; object-position: top; background: rgba(255, 255, 255, .1); }
.stf-players strong { display: block; font-size: 14px; }
.stf-players small { display: block; font-size: 12px; color: var(--stf-soft); }
.st .stf-players-note, .stf-players-empty { margin: 8px 0 0; font-size: 12px; color: var(--stf-soft); }
.stf .stc-gifs { margin-top: 8px; }

/* Neues Thema */
.stf-cathead--plain { padding-top: 8px; }
.stf-form { display: grid; gap: 14px; margin: 12px var(--st-gutter, 16px) 0; padding: 18px; background: var(--stf-card); }
.stf-field { display: grid; gap: 6px; }
.stf-field > span { font-size: 13px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; color: var(--stf-soft); }
.stf-field--inline { display: flex; align-items: center; gap: 10px; }
.stf-field--inline select { width: auto !important; }
.stf-pollform { display: grid; gap: 10px; margin: 0; padding: 14px; border: 1.5px solid rgba(255, 255, 255, .3); }
.stf-pollform legend { padding: 0 6px; font-weight: 800; }
.stf-pollform-opts { display: grid; gap: 8px; }
.stf-gate .stf-signin { margin-top: 12px; }

.stf-menu { right: 0; }

@media (min-width: 768px) {
	.stf-cats { grid-template-columns: 1fr 1fr; gap: 12px; margin: 0 var(--st-gutter, 16px); }
	.stf-cat { grid-template-columns: auto 1fr auto; align-items: center; padding: 18px; }
	.stf-cat-stats { grid-column: auto; flex-direction: column; gap: 2px; text-align: right; }
	.stf-rows, .stf-posts { margin: 0 var(--st-gutter, 16px); }
	.stf-row { grid-template-columns: 1fr 80px 150px; padding: 14px 18px; }
	.stf-row-last { display: block; font-size: 13px; text-align: right; color: var(--stf-soft); }
	.stf-row-last small { display: block; font-weight: 700; color: #fff; }
	.stf-thread, .stf-composer, .stf-note--empty, .stf-form { margin-left: var(--st-gutter, 16px); margin-right: var(--st-gutter, 16px); }
	.stf-thread { padding: 26px 30px; }
	.stf-post { padding: 18px 24px 14px; }
	.stf-pcards { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
	.stf-post.is-focus { animation: none; background: var(--st-blue-light, #2f74c8); }
}