/* GDMM v1.3-clean · forum.css
 * Community / Forum.
 *   forum-    Bausteine des Forums (Profil, Abzeichen, Antworten, Glocke …)
 *   thread-   Beitragskarte in der Liste und ihre aufgeklappte Diskussion
 *
 * Einbindung (Reihenfolge ist Teil der Kaskade, siehe index.html):
 *   tokens → base → layout → modals → forum → tnt → live-participant → trainer → presenter → ux → trainer-workspace → awards
 *
 * Mobile First: Die Regeln ohne Media Query beschreiben die Smartphone-Ansicht,
 * @media (min-width: …) ergänzt größere Bildschirme. Die Werte enden auf .02px (z. B. 750.02px),
 * damit sie lückenlos an die früheren Grenzen (max-width: 750px) anschließen – auch bei gebrochenen
 * Fensterbreiten durch Zoom. Verbliebene @media (max-width: …)-Blöcke enthalten Deklarationen, die es
 * nur auf kleinen Bildschirmen gibt (die Regel setzt dafür auf großen Bildschirmen keinen eigenen Wert).
 */

.thread-list {
  display: grid;
  gap: var(--space-11);
}

.thread {
  display: grid;
  grid-template-columns: 36px minmax(0,1fr);
  gap: var(--space-11);
  padding: var(--space-15);
  border: 1px solid var(--border);
  border-radius: var(--radius-19);
  background: white;
}

.thread h3 {
  font-size: var(--fs-100);
  line-height: 1.4;
  margin: var(--space-4) 0 var(--space-7);
}

.thread p {
  color: var(--muted);
  font-size: var(--fs-085);
  line-height: 1.5;
}

.thread.thread-action {
  display: block;
  padding: var(--space-16) var(--space-18);
  cursor: pointer;
  transition: border-color .15s,box-shadow .15s;
  position: relative;
  border: 1px solid var(--border);
  outline-offset: -3px;
  border-width: 1px;
  outline: 0;
  box-shadow: none;
}

.thread.thread-action:hover {
  border-color: #bccdff;
}

.thread.thread-action:focus-visible {
  outline-offset: 2px;
  border-color: var(--blue);
}

.thread.thread-action h3 {
  margin: var(--space-7) 0 var(--space-6);
}

.thread.thread-action[aria-expanded="true"] {
  padding: var(--space-14) var(--space-16);
  border: 1px solid var(--border);
  outline-offset: -3px;
  box-shadow: none;
  background: #F3F7FF;
}

.thread.thread-action[aria-expanded="true"]:hover,
.thread.thread-action[aria-expanded="true"]:focus-visible {
  border-color: var(--blue);
  box-shadow: none;
}

.thread.thread-action:focus-visible:not([aria-expanded="true"]) {
  border-color: var(--blue);
}

.thread.thread-action .thread-top {
  justify-content: space-between;
  gap: var(--space-12);
  position: static;
  min-height: 34px;
  padding-right: 39px;
  display: flex;
  align-items: center;
}

.thread.thread-action[aria-expanded="true"] .thread-discussion {
  background: transparent;
}

.thread.thread-action .thread-main {
  position: static;
}

.thread .forum-subscribe:hover,
.thread .forum-subscribe:focus-visible {
  border: 1px solid var(--blue);
  background: var(--blue-soft);
  outline: none;
}

.thread.thread-action.is-expanded {
  box-shadow: none;
  outline: none;
}

.thread-meta {
  color: #738094;
  font-size: var(--fs-076);
  display: flex;
  gap: var(--space-12);
  flex-wrap: wrap;
  margin-top: var(--space-12);
}

.thread-stats {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  align-self: center;
  white-space: nowrap;
  color: var(--muted);
  font-size: var(--fs-080);
}

.thread-stats svg {
  width: 17px;
  height: 17px;
}

.thread-detail {
  border-radius: var(--r);
  background: var(--slate-98);
  border: 1px solid var(--slate-94);
  padding: var(--space-18);
  margin-top: var(--space-12);
}

.forum-page {
  display: flex;
  flex-direction: column;
  gap: var(--space-13);
}

.forum-page .search-box {
  width: 100%;
  max-width: none;
}

.forum-page .thread-list {
  margin-top: var(--space-2);
}

.forum-controls {
  display: flex;
  justify-content: space-between;
  gap: var(--space-14);
  align-items: stretch;
}

.forum-controls .tabs {
  margin: 0;
  min-width: 0;
}

.forum-new-post {
  white-space: nowrap;
  flex-shrink: 0;
}

.thread-main {
  min-width: 0;
}

.thread-top {
  justify-content: space-between;
  align-items: center;
  gap: var(--space-8);
  min-height: 0;
  position: relative;
  display: block;
  padding-right: 33px;
}

.thread-top .eyebrow {
  line-height: 1.2;
  min-width: 0;
}

.thread-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-8);
  margin-top: var(--space-12);
}

.thread-bottom .thread-meta {
  margin-top: 0;
}

.thread-bottom .thread-stats {
  grid-column: auto;
  justify-self: auto;
  align-self: center;
}

.thread-discussion {
  margin-top: var(--space-19);
  border-top: 1px solid #e1e7ef;
  padding-top: var(--space-16);
  display: grid;
  gap: var(--space-9);
  cursor: default;
}

.discussion-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-10);
  margin-bottom: var(--space-7);
  flex-wrap: wrap;
}

.forum-answer {
  padding: var(--space-14) 0;
  border-bottom: 1px solid #e8edf4;
  scroll-margin-top: 80px;
}

.forum-answer p {
  font-size: var(--fs-086);
  line-height: 1.58;
  margin: var(--space-8) 0;
  color: #1d2939;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.forum-answer-head {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  min-width: 0;
  flex-wrap: wrap;
  font-size: var(--fs-083);
}

.forum-answer-head small {
  color: #6c778b;
  margin-left: auto;
  font-size: var(--fs-073);
}

.forum-answer-head .forum-answer-date {
  margin-left: auto;
}

.forum-mini-avatar {
  display: inline-grid;
  place-items: center;
  background: #e8eeff;
  color: var(--blue);
  font-weight: 900;
  font-size: var(--fs-072);
  flex: 0 0 28px;
  width: 28px;
  min-width: 28px;
  height: 28px;
  min-height: 28px;
  aspect-ratio: 1;
  border-radius: var(--radius-round);
  box-sizing: border-box;
}

.forum-trainer-mark {
  font-size: var(--fs-064);
  font-weight: 900;
  letter-spacing: .04em;
  color: var(--blue);
}

.forum-reference {
  display: inline-flex;
  align-items: center;
  gap: var(--space-5);
  margin: var(--space-9) 0 0;
  color: var(--slate-47);
  font-size: var(--fs-073);
}

.forum-reply-tools {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-10);
  flex-wrap: wrap;
}

.forum-link-button {
  display: inline-flex;
  align-items: center;
  gap: var(--space-5);
  border: 0;
  background: none;
  color: var(--blue);
  font-weight: 800;
  padding: var(--space-7) var(--space-2);
  cursor: pointer;
  font-size: var(--fs-078);
}

.forum-more {
  width: 100%;
  margin: var(--space-10) 0;
}

.forum-compose {
  background: var(--gray-97);
  border: 1px solid #dfe6f1;
  border-radius: var(--radius-16);
  padding: var(--space-13);
  display: grid;
  gap: var(--space-10);
  margin-top: var(--space-12);
  position: static;
  inset: auto;
  transform: none;
  box-shadow: none;
  z-index: auto;
}

.forum-compose textarea {
  min-height: 95px;
}

.forum-compose-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-7);
  flex-wrap: wrap;
}

.forum-trainer-avatar {
  background: var(--lime);
  color: #142100;
}

.forum-trainer-avatar svg {
  display: block;
}

.forum-thread-author {
  flex-wrap: wrap;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: var(--space-7);
}

.forum-thread-author .forum-author-link {
  font-weight: 800;
}

/* Vorlage derzeit nicht eingebaut (forumBadgeRow()) – Regel bewusst behalten */
.forum-achievements {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
  vertical-align: middle;
  max-width: 100%;
}

/* Vorlage derzeit nicht eingebaut (forumBadgeRow()) – Regel bewusst behalten */
.forum-achievement {
  border: 1px solid transparent;
  cursor: pointer;
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  min-width: 26px;
  padding: 0;
  border-radius: var(--radius-10);
  transition: border-color .12s,background-color .12s;
}

/* Vorlage derzeit nicht eingebaut (forumBadgeRow()) – Regel bewusst behalten */
.forum-achievement:focus-visible {
  outline: none;
  border-color: var(--blue);
}

/* Vorlage derzeit nicht eingebaut (forumBadgeRow()) – Regel bewusst behalten */
.forum-achievement.course {
  background: var(--lime-80);
  color: var(--lime-15);
}

/* Vorlage derzeit nicht eingebaut (forumBadgeRow()) – Regel bewusst behalten */
.forum-achievement.topic {
  background: var(--slate-94b);
  color: var(--blue-33);
}

/* Vorlage derzeit nicht eingebaut (forumBadgeRow()) – Regel bewusst behalten */
.forum-achievement.community {
  background: var(--purple-92);
  color: var(--purple-33);
}

/* Vorlage derzeit nicht eingebaut (forumBadgeRow()) – Regel bewusst behalten */
.forum-achievement.activity {
  background: var(--orange-89);
  color: var(--orange-32);
}

/* Vorlage derzeit nicht eingebaut (forumBadgeRow()) – Regel bewusst behalten */
.forum-achievement-more {
  border: 1px solid transparent;
  cursor: pointer;
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  min-width: 26px;
  padding: 0;
  border-radius: var(--radius-10);
  transition: border-color .12s,background-color .12s;
  background: #EEF1F7;
  color: #30415D;
  font-size: var(--fs-070);
  font-weight: 900;
}

/* Vorlage derzeit nicht eingebaut (forumBadgeRow()) – Regel bewusst behalten */
.forum-achievement-more:focus-visible {
  outline: none;
  border-color: var(--blue);
}

.forum-badge-list-item:focus-visible {
  outline: none;
  border-color: var(--blue);
}

.forum-badge-list-item {
  display: flex;
  align-items: center;
  text-align: left;
  gap: var(--space-12);
  border: 1px solid var(--slate-91);
  border-radius: var(--radius-13);
  padding: var(--space-10);
  background: var(--white);
  color: var(--slate-14);
  min-width: 0;
  cursor: default;
}

.forum-badge-list-item>.forum-badge-detail-emblem {
  width: 39px;
  height: 39px;
  border-radius: var(--radius-11);
}

.forum-badge-list-item>span:nth-child(2) {
  display: grid;
  gap: var(--space-3);
  flex: 1;
  min-width: 0;
}

.forum-badge-list-item small {
  color: #60708B;
  font-size: var(--fs-073);
}

.forum-badge-list-item:hover {
  border-color: var(--slate-91);
}

/* Vorlage derzeit nicht eingebaut (forumBadgeIcon()) – Regel bewusst behalten */
.forum-achievement-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.forum-badge-detail-emblem.course {
  background: var(--lime-80);
  color: var(--lime-15);
}

.forum-badge-detail-emblem.topic {
  background: var(--slate-94b);
  color: var(--blue-33);
}

.forum-badge-detail-emblem.community {
  background: var(--purple-92);
  color: var(--purple-33);
}

.forum-badge-detail-emblem.activity {
  background: var(--orange-89);
  color: var(--orange-32);
}

.forum-badge-detail-emblem {
  flex: none;
  display: grid;
  place-items: center;
  width: 55px;
  height: 55px;
  border-radius: var(--radius-16);
}

.forum-sort-hint {
  color: #62718A;
  font-size: var(--fs-072);
  white-space: nowrap;
}

.discussion-title {
  display: flex;
  gap: var(--space-10);
  flex-wrap: wrap;
  align-items: center;
  min-height: 27px;
}

.forum-badge-detail-top {
  display: flex;
  align-items: center;
  gap: var(--space-13);
  margin: var(--space-15) 0 var(--space-18);
}

.forum-badge-detail-top>strong {
  font-size: 1.03rem;
}

.forum-badge-detail-data {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-10);
  margin: var(--space-12) 0;
}

.forum-badge-detail-data>div {
  background: var(--gray-97);
  border-radius: var(--radius-12);
  padding: var(--space-13);
  display: grid;
  gap: var(--space-4);
}

.forum-badge-detail-data span {
  font-size: var(--fs-075);
  color: #63718B;
}

.forum-badge-detail-data strong {
  color: #131B2B;
  font-size: 1.02rem;
}

.forum-all-badges {
  display: grid;
  gap: var(--space-8);
  margin-top: var(--space-15);
}

.forum-subscribe {

  border: 0;
  background: transparent;
  width: 36px;
  height: 36px;
  padding: var(--space-6);
  display: grid;
  place-items: center;
  border-radius: var(--radius-10);
  flex: none;
  cursor: pointer;
}


.forum-subscribe:hover,
.forum-subscribe:focus-visible {
  background: var(--blue-soft);
  outline: none;
  border: 1px solid var(--blue);
}

.thread .forum-subscribe {
  position: absolute;
  right: 19px;
  top: 18px;
  width: 38px;
  height: 38px;
  padding: var(--space-6);
  border-radius: var(--radius-10);
  z-index: 2;
  display: grid;
  place-items: center;
  border: 1px solid transparent;
}

.forum-nav-wrap {
  position: relative;
  display: inline-grid;
  place-items: center;
  flex: none;
}

.forum-nav-badge {
  position: absolute;
  right: -11px;
  top: -9px;
  background: var(--blue);
  color: white;
  border: 2px solid white;
  border-radius: var(--radius-50);
  min-width: 19px;
  height: 19px;
  padding: 0 var(--space-3);
  display: grid;
  place-items: center;
  font-size: var(--fs-10px);
  line-height: 1;
  font-weight: 900;
  font-family: var(--font);
  font-variant-numeric: tabular-nums;
}

.forum-sim-new {
  border: 0;
  background: var(--slate-96c);
  color: var(--blue);
  font-weight: 750;
  cursor: pointer;
  min-height: 22px;
  padding: var(--space-2) var(--space-6);
  font-size: var(--fs-064);
  line-height: 1.1;
  border-radius: var(--radius-7);
}

.forum-author-link {
  display: inline;
  border: 0;
  background: none;
  color: #142a4d;
  font-weight: 850;
  font-size: inherit;
  padding: var(--space-2) 0;
  cursor: pointer;
  text-underline-offset: 3px;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  text-decoration: none;
}

.forum-author-link:hover,
.forum-author-link:focus-visible {
  color: var(--blue);
}

.forum-profile-head {
  display: flex;
  align-items: center;
  border-bottom: 1px solid #e3e8f0;
  padding: var(--space-7) 0 var(--space-12);
  gap: var(--space-10);
  min-height: 0;
}

.forum-profile-head strong {
  display: block;
  color: var(--gray-08);
  font-size: var(--fs-18px);
}

.forum-profile-head .forum-mini-avatar {
  flex: 0 0 42px;
  width: 42px;
  min-width: 42px;
  height: 42px;
  min-height: 42px;
  font-size: 17px;
}

.forum-profile-metrics {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: var(--space-4);
  margin: var(--space-11) 0;
}

.forum-profile-metrics>div {
  border: 1px solid #e0e5eb;
  border-radius: var(--radius-12);
  text-align: center;
  padding: var(--space-8) var(--space-5);
}

.forum-profile-metrics b {
  display: block;
  font-size: var(--fs-22px);
  color: var(--blue);
}

.forum-profile-metrics span {
  display: block;
  color: var(--slate-47);
  font-size: var(--fs-10px);
}

.forum-profile-label {
  font-size: var(--fs-16px);
  font-weight: 900;
  margin: var(--space-12) 0 var(--space-8);
}

.compact-profile-title {
  margin-bottom: 0;
}

.compact-profile-title .eyebrow {
  font-size: var(--fs-075);
}

.forum-sim-slot {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  min-height: 24px;
}

.forum-sim-slot.is-hidden {
  visibility: hidden;
  pointer-events: none;
}

.forum-profile-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  min-width: 28px;
  min-height: 28px;
  aspect-ratio: 1;
  border: 0;
  border-radius: var(--radius-round);
  background: var(--blue-soft);
  color: var(--blue);
  font-weight: 850;
  font-size: var(--fs-13px);
  cursor: pointer;
  line-height: 1;
}

.forum-profile-avatar.trainer {
  background: var(--lime);
  color: #101728;
}

@media (min-width: 470.02px) {
  .thread {
    grid-template-columns: 45px minmax(0,1fr) auto;
    gap: var(--space-15);
    padding: var(--space-20);
  }

  .forum-answer-head {
    gap: var(--space-8);
  }

  /* Vorlage derzeit nicht eingebaut (forumBadgeRow()) – Regel bewusst behalten */
  .forum-achievement,
  .forum-achievement-more {
    width: 27px;
    height: 27px;
    min-width: 27px;
  }

}

@media (min-width: 580.02px) {
  .forum-profile-metrics {
    gap: var(--space-9);
  }

  .forum-profile-metrics span {
    font-size: var(--fs-11px);
  }

}

@media (min-width: 900.02px) {
  .forum-controls {
    align-items: flex-start;
  }

}

@media (max-width: 900px) {
  .forum-controls {
    flex-direction: column;
  }

}

@media (max-width: 470px) {
  .thread-stats {
    grid-column: 2;
    justify-self: start;
  }

  .forum-answer-head .forum-answer-date {
    font-size: var(--fs-069);
  }

}

/* One reply level keeps conversation groups readable on narrow screens. */
.forum-nested-replies { margin-inline-start: 20px; padding-inline-start: 12px; border-inline-start: 1px solid var(--border, #e5e7eb); min-width: 0; }
.forum-nested-replies[hidden] { display: none; }
.forum-replies-toggle { margin: 8px 0 12px; }

@media (hover: hover) and (pointer: fine) {
  .forum-subscribe:hover:not(:focus-visible),
  .thread .forum-subscribe:hover:not(:focus-visible) {
    border-color: transparent;
    background: transparent;
    outline: none;
    box-shadow: none;
  }
}