/* SchalkeTOTAL Kommentare – passt zum Theme (Königsblau, eckig, weiße Schrift) */

.stc { margin: 18px 0 0; padding: 22px 18px; color: #fff; }
.stc * { box-sizing: border-box; }
.stc [hidden], .stc-blocked [hidden] { display: none !important; }

/* Kopf */
.stc-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; }
.st .stc-title { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 22px; font-weight: 700; color: #fff; }
.stc-title span { min-width: 30px; padding: 2px 9px; border-radius: 999px; background: #fff; color: var(--st-blue, #004d9d); font-size: 14px; text-align: center; }
.stc-sort { display: flex; border: 1.5px solid rgba(255, 255, 255, .35); }
.st .stc-sort button { padding: 6px 14px; border: 0; background: none; color: rgba(255, 255, 255, .78); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.st .stc-sort button[aria-selected="true"] { background: #fff; color: var(--st-blue, #004d9d); }

/* Anmelden / Hinweise */
.stc-signin { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 18px; margin: 18px 0 6px; padding: 16px 18px; background: var(--st-blue-deeper, #002d60); border-left: 4px solid #fff; }
.st .stc-signin p { margin: 0; flex: 1 1 260px; font-size: 15px; line-height: 1.45; color: rgba(255, 255, 255, .85); }
.stc-signin strong { color: #fff; }
.st a.stc-signin-btn { display: inline-flex; align-items: center; height: 42px; padding: 0 22px; background: #fff; color: var(--st-blue, #004d9d); font-size: 14px; font-weight: 800; letter-spacing: .02em; text-transform: uppercase; text-decoration: none; }
.st a.stc-signin-btn:hover { background: #e8f0fb; }
.st .stc-note { margin: 16px 0 4px; font-size: 15px; color: rgba(255, 255, 255, .75); }
.st .stc-note--warn { padding: 12px 14px; background: rgba(255, 71, 87, .18); border-left: 4px solid #ff4757; color: #fff; }

/* Avatare */
.stc-av { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; overflow: hidden; background: hsl(var(--hue, 210) 55% 42%); color: #fff; font-size: 15px; font-weight: 800; }
.stc-av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.stc-av--gone { background: rgba(255, 255, 255, .12); }
.stc-c--reply .stc-av, .stc-form--reply .stc-av { width: 30px; height: 30px; font-size: 13px; }

/* Formular */
.stc-form { display: flex; gap: 12px; margin: 18px 0 8px; }
.stc-form--reply { margin: 12px 0 4px; }
.stc-field { flex: 1; min-width: 0; }
.st .stc-field textarea {
	display: block;
	width: 100%;
	min-height: 52px;
	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; /* iOS zoomt sonst */
	line-height: 1.45;
	resize: none;
	outline: none;
}
.stc-field textarea::placeholder { color: rgba(255, 255, 255, .55); }
.st .stc-field textarea:focus { border-color: #fff; }
.stc-tools { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.stc-counter { margin-right: auto; font-size: 12px; color: rgba(255, 255, 255, .6); }
.st .stc-gifbtn { height: 34px; padding: 0 10px; border: 1.5px solid rgba(255, 255, 255, .5); background: none; color: #fff; font: inherit; font-size: 12px; font-weight: 800; letter-spacing: .06em; cursor: pointer; }
.st .stc-gifbtn[aria-expanded="true"], .st .stc-gifbtn:hover { background: #fff; color: var(--st-blue, #004d9d); }
.st .stc-cancel { height: 38px; padding: 0 12px; border: 0; background: none; color: rgba(255, 255, 255, .75); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.st .stc-send { height: 38px; padding: 0 20px; border: 0; background: #fff; color: var(--st-blue, #004d9d); font: inherit; font-size: 14px; font-weight: 800; cursor: pointer; }
.st .stc-send:disabled { opacity: .6; cursor: wait; }
.st .stc-error { margin: 6px 0 0; font-size: 13px; color: #ffb3ba; }
.st .stc-error:empty { display: none; }

.stc-chosen { position: relative; display: inline-block; margin-top: 8px; }
.stc-chosen img { display: block; max-height: 140px; max-width: 100%; }
.st .stc-chosen button { position: absolute; top: 4px; right: 4px; width: 26px; height: 26px; border: 0; border-radius: 50%; background: rgba(0, 0, 0, .65); color: #fff; font-size: 18px; line-height: 1; cursor: pointer; }

/* GIF-Auswahl */
.stc-gifs { margin-top: 10px; padding: 10px; background: var(--st-blue-deeper, #002d60); border: 1.5px solid rgba(255, 255, 255, .22); }
.st .stc-gifs input { width: 100%; height: 40px; padding: 0 12px; border: 0; border-radius: 0; background: #fff; color: #10233f; font: inherit; font-size: 16px; outline: none; }
.stc-gifs-grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 92px; gap: 6px; max-height: 300px; margin-top: 10px; overflow-y: auto; overscroll-behavior: contain; }
.st .stc-gifs-grid button { padding: 0; border: 0; background: rgba(255, 255, 255, .08); cursor: pointer; overflow: hidden; width: 100%; height: 100%; }
.stc-gifs-grid button:hover, .stc-gifs-grid button:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }
.stc-gifs-grid img { display: block; width: 100%; height: 100%; object-fit: cover; }
.st .stc-gifs-msg { grid-column: 1 / -1; margin: 10px 0; font-size: 14px; color: rgba(255, 255, 255, .7); }
.st .stc-gifs-more { display: block; width: 100%; margin-top: 8px; padding: 8px; border: 1.5px solid rgba(255, 255, 255, .35); background: none; color: #fff; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.st .stc-gifs-credit { margin: 8px 0 0; font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .5); text-align: right; }

/* Liste */
.stc-list, .stc-replies { list-style: none; margin: 0; padding: 0; }
.stc-list { margin-top: 12px; }
.stc-list > .stc-c + .stc-c { border-top: 1px solid var(--st-line, rgba(255, 255, 255, .12)); }
.stc-replies { margin: 0 0 6px 19px; padding-left: 16px; border-left: 2px solid rgba(255, 255, 255, .16); }
.stc-c-body { display: flex; gap: 12px; padding: 14px 0; }
.stc-c--reply > .stc-c-body { padding: 10px 0; }
.stc-c-main { position: relative; flex: 1; min-width: 0; }
.stc-c-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
.stc-name { font-size: 15px; font-weight: 700; color: #fff; overflow-wrap: anywhere; }
.stc-badge { padding: 0 6px; background: #fff; color: var(--st-blue, #004d9d); font-size: 10.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.stc-c-head time { font-size: 12px; color: rgba(255, 255, 255, .62); }
.st .stc-replyto { display: flex; align-items: center; gap: 4px; margin: 2px 0 0; font-size: 12.5px; font-weight: 600; color: rgba(255, 255, 255, .62); }
.stc-text { margin-top: 4px; font-size: 15.5px; line-height: 1.55; overflow-wrap: anywhere; }
.st .stc-text p { margin: 0 0 .6em; font-size: inherit; }
.st .stc-text p:last-child { margin: 0; }
.stc-text a { color: #fff; text-decoration: underline; text-underline-offset: 2px; }
.stc-gif { display: block; max-width: min(100%, 300px); height: auto; margin-top: 8px; background: rgba(255, 255, 255, .06); }
.st .stc-pending { margin: 6px 0 0; font-size: 13px; color: #ffd27a; }
.st .stc-gone { margin: 8px 0; font-size: 14px; font-style: italic; color: rgba(255, 255, 255, .55); }

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

.stc-menu { position: absolute; z-index: 30; top: 100%; right: 0; min-width: 230px; padding: 6px; background: #fff; color: #10233f; box-shadow: 0 12px 30px rgba(0, 20, 50, .35); }
.st .stc-menu button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border: 0; background: none; color: #10233f; font: inherit; font-size: 14px; font-weight: 600; text-align: left; cursor: pointer; }
.st .stc-menu button:hover, .st .stc-menu button:focus-visible { background: #eef3fa; outline: none; }
.st .stc-menu button[data-do="delete"], .st .stc-menu button[data-do="block"] { color: #b42332; }
.st .stc-menu-title { margin: 4px 12px 6px; font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: #5a6b85; }

.stc-expand { padding: 4px 0 8px; }
.st .stc-expand button, .st .stc-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; }

.st .stc-more { display: block; width: 100%; height: 46px; margin-top: 10px; border: 1.5px solid rgba(255, 255, 255, .6); background: none; color: #fff; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.st .stc-more:hover { background: #fff; color: var(--st-blue, #004d9d); }
.stc-empty { padding: 18px 0 6px; color: rgba(255, 255, 255, .72); }

/* Hervorhebung (Sprung aus der Glocke) und neue Kommentare */
@keyframes stc-flash { 0%, 30% { background: rgba(255, 255, 255, .16); } 100% { background: transparent; } }
.stc-c.is-focus > .stc-c-body, .stc-c.is-new > .stc-c-body { animation: stc-flash 2.6s ease-out; box-shadow: -10px 0 0 transparent; }
.stc-c { scroll-margin-top: 120px; }

/* Ladeanzeige */
.stc-loading { display: grid; gap: 14px; padding: 16px 0; }
.stc-loading span { display: block; height: 54px; background: linear-gradient(90deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .12), rgba(255, 255, 255, .06)); background-size: 200% 100%; animation: stc-shimmer 1.2s linear infinite; }
@keyframes stc-shimmer { to { background-position: -200% 0; } }

/* Hinweis unten */
.stc-toast { position: fixed; z-index: 1000; left: 50%; bottom: calc(var(--st-appnav-h, 0px) + 18px + env(safe-area-inset-bottom)); max-width: calc(100vw - 32px); padding: 12px 18px; background: #fff; color: #10233f; font-size: 14px; font-weight: 600; box-shadow: 0 10px 30px rgba(0, 20, 50, .35); transform: translate(-50%, 20px); opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; }
.stc-toast.is-on { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.stc-toast a { color: var(--st-blue, #004d9d); font-weight: 800; text-decoration: underline; }

/* Profil: blockierte Nutzer */
.stc-blocked-card { padding: 8px 20px; }
.st .stc-blocked-empty { margin: 10px 0; font-size: 14px; }
.stc-blocked-list { list-style: none; margin: 0; padding: 0; }
.stc-blocked-list li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; }
.stc-blocked-list li + li { border-top: 1px solid var(--st-line, rgba(255, 255, 255, .12)); }
.stc-blocked-list strong { font-size: 15px; }
.st .stc-blocked-list button { height: 34px; padding: 0 14px; border: 1.5px solid rgba(255, 255, 255, .6); background: none; color: #fff; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.st .stc-blocked-list button:hover { background: #fff; color: var(--st-blue, #004d9d); }

@media (min-width: 768px) {
	.stc { padding: 28px 32px; }
	.stc-gifs-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 767px) {
	.stc { margin-top: 6px; padding: 22px var(--st-gutter, 16px); }
	.stc-form > .stc-av { display: none; }
	.stc-replies { margin-left: 4px; padding-left: 12px; }
}
@media (prefers-reduced-motion: reduce) {
	.stc-c.is-focus > .stc-c-body, .stc-c.is-new > .stc-c-body, .stc-loading span { animation: none; }
	.stc-c.is-focus > .stc-c-body { background: rgba(255, 255, 255, .12); }
}