/* TELACY ESPORTS — Kommentare und Reaktionen unter einer News
   (Orchestrator-Lauf 02.10.2026, Segment kommentare)

   Nur auf article.html eingebunden. Farben und Abstaende aus site.css
   (--line, --s1, --brand, --gap, --pad). Ecken eckig wie der Rest der
   Seite, Symbole im selben Strich wie die Kopfzeile.

   Der Abschnitt steht in der Spalte des Artikeltexts: rechts neben der
   Verfasserspalte (186 px plus Luecke, wie .artgrid), gleich breit wie
   der Text. Unter 900 px liegt alles uebereinander, wie beim Artikel. */

.kmt{padding-top:8px}
.kmt[hidden]{display:none}
.kmt-in{max-width:68ch;margin-left:calc(186px + clamp(24px,4vw,44px))}
@media (max-width:900px){ .kmt-in{margin-left:0;max-width:none} }

.kmt .kmt-i{display:inline-grid;place-items:center;width:18px;height:18px;flex:none}
.kmt .kmt-i svg{width:100%;height:100%}

/* ── Reaktionen auf die Meldung ──────────────────────────────── */
.kmt-rx{display:flex;flex-wrap:wrap;gap:8px;padding:22px 0 0;border-top:1px solid var(--line)}
.kmt-r{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 13px;
  border:1px solid var(--line);background:var(--s1);color:var(--dim);
  font:500 13px/1 Barlow,sans-serif;cursor:pointer;
  transition:border-color .18s,color .18s,background .18s,transform .2s var(--e)}
.kmt-r:hover{border-color:var(--line2);color:var(--white)}
.kmt-r:active .kmt-i{transform:scale(.88)}
.kmt-r .kmt-i{transition:transform .2s var(--e)}
.kmt-r .kmt-rz{font:600 12.5px/1 'Chakra Petch',sans-serif;letter-spacing:.04em;color:var(--txt);
  min-width:1ch;text-align:right}
.kmt-r.an{border-color:var(--brand);background:rgba(120,64,224,.16);color:var(--white)}
.kmt-r.an .kmt-i{color:var(--brand-l)}
.kmt-r.an[data-art="hype"] .kmt-i,
.kmt-r.an[data-art="gg"] .kmt-i{color:var(--gold)}
.kmt-r.an[data-art="love"] .kmt-i{color:var(--red)}
.kmt-r.an[data-art="love"] .kmt-i svg path,
.kmt-r.an[data-art="like"] .kmt-i svg path{fill:currentColor;fill-opacity:.22}

/* ── Kopf: Titel, Zahl, Sortierung ───────────────────────────── */
.kmt-sh{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding:34px 0 18px}
.kmt-sh h2{display:flex;align-items:center;gap:12px;font-size:clamp(1.15rem,1.9vw,1.45rem);
  color:var(--white);text-transform:uppercase}
.kmt-z{display:inline-grid;place-items:center;min-width:28px;height:24px;padding:0 7px;
  border:1px solid var(--line2);font:600 12px/1 'Chakra Petch',sans-serif;color:var(--txt)}
.kmt-sort{display:flex;border:1px solid var(--line)}
.kmt-s{min-height:34px;padding:0 13px;background:none;color:var(--dim);cursor:pointer;
  font:600 11px/1 'Chakra Petch',sans-serif;letter-spacing:.12em;text-transform:uppercase;
  transition:color .18s,background .18s}
.kmt-s + .kmt-s{border-left:1px solid var(--line)}
.kmt-s:hover{color:var(--white)}
.kmt-s.an{background:var(--s2);color:var(--white)}

/* ── Schreiben ───────────────────────────────────────────────── */
.kmt-neu{display:flex;gap:14px;align-items:flex-start;margin-bottom:26px}
.kmt-f{flex:1;min-width:0;display:flex;flex-direction:column;gap:10px}
.kmt-ta{width:100%;min-height:92px;resize:vertical;padding:12px 13px;
  background:var(--black);border:1px solid var(--line);color:var(--txt);
  font:400 14.5px/1.55 Barlow,sans-serif;transition:border-color .18s,background .18s}
.kmt-f.klein .kmt-ta{min-height:64px}
.kmt-ta:focus{outline:none;border-color:var(--brand)}
.kmt-ta::placeholder{color:#5C5C68}
.kmt-fz{display:flex;align-items:center;justify-content:flex-end;gap:10px;flex-wrap:wrap}
.kmt-fz .btn{min-height:38px;padding:0 16px}
.kmt-rest{margin-right:auto;font-size:12px;color:var(--dim)}
.kmt-hin{margin:0 0 26px;padding:16px 18px;border:1px solid var(--line);background:var(--s1);
  color:var(--txt);font-size:14px;line-height:1.5}
.kmt-an{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.kmt-an .btn{min-height:38px}
.kmt-leer{color:var(--dim);font-size:14px;margin:4px 0 0}
.kmt-in > .kmt-leer + .btn{margin-top:12px}

/* ── Liste ───────────────────────────────────────────────────── */
.kmt-l{list-style:none;margin:0;padding:0}
.kmt-l > .kmt-k{padding:18px 0;border-top:1px solid var(--line)}
.kmt-l > .kmt-k:last-child{border-bottom:1px solid var(--line)}
.kmt-ant{margin:14px 0 0 50px;padding-left:16px;border-left:1px solid var(--line)}
.kmt-ant > .kmt-k{padding:10px 0;border:0}
.kmt-ant > .kmt-k:last-child{border:0}
.kmt-antw{margin:14px 0 0 66px}

.kmt-kk{display:flex;gap:14px;align-items:flex-start}
.kmt-km{flex:1;min-width:0}
.kmt-av{width:36px;height:36px;flex:none;display:grid;place-items:center;
  border:1px solid var(--line2);background:var(--s2);
  font:600 14px/1 'Chakra Petch',sans-serif;color:var(--txt)}
.kmt-av.bild{padding:0;overflow:hidden}
.kmt-av.bild img{width:100%;height:100%;object-fit:cover;display:block}
.kmt-av.leer{background:none;border-style:dashed}
.kmt-ant .kmt-av{width:30px;height:30px;font-size:12px}

.kmt-kopf{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px;margin-bottom:5px;
  font-size:12px;color:var(--dim)}
.kmt-n{font:600 14px/1.3 Barlow,sans-serif;color:var(--white)}
a.kmt-n{text-decoration:underline;text-decoration-color:transparent;text-underline-offset:3px;
  transition:color .18s,text-decoration-color .18s}
a.kmt-n:hover{color:var(--brand-l);text-decoration-color:currentColor}
.kmt-ed{font-style:italic}
.kmt-tag{padding:3px 7px;border:1px solid var(--line2);font:600 10px/1 'Chakra Petch',sans-serif;
  letter-spacing:.1em;text-transform:uppercase;color:var(--txt)}
.kmt-tag.rot{border-color:rgba(255,75,92,.55);color:#FF8A96}

/* Text, wie geschrieben: Zeilenumbrueche bleiben, lange Woerter und
   Links brechen, statt die Seite seitlich zu schieben. */
.kmt-t{margin:0;color:var(--txt);font-size:15px;line-height:1.6;white-space:pre-wrap;
  overflow-wrap:anywhere;word-break:break-word}
.kmt-weg{margin:7px 0 0;color:var(--dim);font-size:13.5px;font-style:italic}
.kmt-k.verborgen > .kmt-kk .kmt-t{opacity:.55}

/* ── Aktionen unter einem Kommentar ──────────────────────────── */
.kmt-ak{display:flex;align-items:center;flex-wrap:wrap;gap:2px 4px;margin:8px 0 0 -8px}
.kmt-ak:empty{display:none}
.kmt-a{display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:0 8px;
  background:none;border:0;color:var(--dim);cursor:pointer;
  font:500 12.5px/1 Barlow,sans-serif;transition:color .18s}
.kmt-a .kmt-i{width:15px;height:15px}
.kmt-a:hover{color:var(--white)}
.kmt-a.still{cursor:default}
.kmt-a.still:hover{color:var(--dim)}
.kmt-a.rot:hover{color:var(--red)}
.kmt-like.an{color:var(--brand-l)}
.kmt-like.an svg path{fill:currentColor;fill-opacity:.22}
.kmt-lz{font:600 12px/1 'Chakra Petch',sans-serif}
.kmt-lz:empty{display:none}
.kmt-mod{display:inline-flex;flex-wrap:wrap;gap:2px 4px;margin-left:auto;padding-left:8px;
  border-left:1px solid var(--line)}

.kmt-a:focus-visible,.kmt-r:focus-visible,.kmt-s:focus-visible{outline:2px solid var(--brand-l);outline-offset:2px}

/* Kurz aufleuchten, wenn ein Link direkt auf einen Kommentar zeigt. */
.kmt-k:target > .kmt-kk{animation:kmt-ziel 2.4s var(--e)}
@keyframes kmt-ziel{0%,30%{background:rgba(120,64,224,.18)}100%{background:transparent}}

@media (max-width:620px){
  .kmt-neu{gap:10px}
  .kmt-neu > .kmt-av{display:none}
  .kmt-kk{gap:11px}
  .kmt-av{width:32px;height:32px}
  .kmt-ant{margin-left:20px;padding-left:12px}
  .kmt-antw{margin-left:0}
  .kmt-r{padding:0 11px}
  .kmt-mod{margin-left:0;padding-left:0;border-left:0}
}
@media (prefers-reduced-motion:reduce){
  .kmt-k:target > .kmt-kk{animation:none}
  .kmt-r,.kmt-r .kmt-i{transition:none}
}

/* Verweis auf die Verhaltensregeln am Kommentarfeld (02.10.2026) */
.kmt-regeln{font-size:12px;color:var(--dim);text-decoration:underline;text-underline-offset:3px}
.kmt-regeln:hover{color:var(--white)}

/* Rollen-Tag neben dem Alias (T2, 02.10.2026): kompakt wie in der
   Bearbeiten-Leiste der Teamseite, Alias und Tag brechen gemeinsam um. */
.kmt-wr{display:inline-flex;align-items:center;flex-wrap:wrap;gap:4px 8px;min-width:0;max-width:100%}
.kmt-rolle{display:inline-flex;max-width:100%}
.kmt-rolle .tier{padding:3px 7px;font-size:9px;letter-spacing:.14em;max-width:100%;align-self:center}