/* forum.css — nur das Forum: Uebersicht, Thema, neues Thema.
   Alles andere kommt aus tokens/base/ui/web.css. Hier steht keine Farbe, die nicht
   entweder ein Token ist oder oben einmal als Ton definiert wird. */

/* ================================================================== Uebersicht */


.fo-bar { display: flex; align-items: center; gap: 14px; margin: 26px 0 22px; }
.fo-bar .btn { flex: none; }
.fo-search { flex: 1 1 auto; min-width: 0; }

.fo-main-grid { display: grid; grid-template-columns: minmax(0, 1fr) 316px; gap: 22px; align-items: start; }

/* Nur wenn eine Kategorie gewaehlt ist: welche, und der Weg zurueck zu allen Themen */
.fo-filter { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 20px;
             border-bottom: 1px solid var(--line-soft); font-size: 13.5px; color: var(--txt-2); }
.fo-filter span { display: inline-flex; align-items: center; gap: 8px; }
.fo-filter b { color: var(--txt); }
.fo-filter svg { width: 15px; height: 15px; color: var(--blue); }
.fo-filter a { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--blue-lite); }
.fo-filter a svg { width: 13px; height: 13px; color: currentColor; }
.fo-filter a:hover { color: #fff; }

/* Bewusst kein <table>: die Zeilen sind ganze Verweise mit Symbol, Abzeichen und zwei
   Textzeilen — im Raster bleiben sie frei gestaltbar, in einer Tabelle nicht. */
.fo-grid { display: grid; grid-template-columns: minmax(0, 1fr) 90px 90px 180px; align-items: center; gap: 14px; }

.fo-th { padding: 15px 20px 12px; font-size: 11.5px; font-weight: 700; letter-spacing: .06em;
         text-transform: uppercase; color: var(--txt-4); }
.fo-th .c { text-align: center; }

.fo-row { padding: 13px 20px; border-top: 1px solid var(--line-soft); transition: background var(--t); }
.fo-row:hover { background: rgba(255, 255, 255, .025); }

.fo-main { display: flex; align-items: center; gap: 13px; min-width: 0; }

/* Der Kategoriewuerfel nimmt seine Farbe aus --c, das die Seite als var(--blau|gruen|...)
   setzt. Dadurch kennt das CSS die Kategorien nicht und muss bei einer neuen nichts lernen. */
.fo-cat { width: 40px; height: 40px; border-radius: 10px; flex: none; display: grid; place-items: center;
          background: color-mix(in srgb, var(--c) 16%, transparent);
          border: 1px solid color-mix(in srgb, var(--c) 32%, transparent);
          color: var(--c); }
.fo-cat svg { width: 19px; height: 19px; }

.fo-txt { min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.fo-title { display: flex; align-items: center; gap: 7px; font-size: 14.5px; font-weight: 700;
            line-height: 1.3; transition: color var(--t); }
.fo-row:hover .fo-title { color: var(--blue-lite); }

.fo-pin, .fo-lock { display: inline-flex; flex: none; }
.fo-pin svg, .fo-lock svg { width: 14px; height: 14px; }
.fo-pin  { color: var(--gold); }
.fo-lock { color: var(--txt-3); }

.fo-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
           font-size: 12px; color: var(--txt-3); }
.fo-sep { color: var(--txt-4); }

.fo-n { text-align: center; font-size: 13.5px; font-weight: 700; color: var(--txt-2); }

.fo-last { min-width: 0; font-size: 12.5px; }
.fo-who { display: flex; align-items: center; gap: 9px; min-width: 0; }
.fo-who-t { min-width: 0; display: flex; flex-direction: column; line-height: 1.35; }
.fo-who-t b { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fo-who-t i { font-style: normal; font-size: 11.5px; color: var(--txt-4); }
.fo-leer { color: var(--txt-4); }

.fo-pager { padding: 18px 20px 20px; border-top: 1px solid var(--line-soft); }

/* ---------------------------------------------------------------- Rechte Spalte */

.fo-side { display: flex; flex-direction: column; gap: 22px; }
.fo-body { padding: 8px 16px 14px; display: flex; flex-direction: column; }

.fo-gold .card-head h3, .fo-gold .card-head h3 svg { color: var(--gold); }

.fo-hot, .fo-tp { display: flex; align-items: center; gap: 11px; padding: 9px 6px; }
.fo-hot + .fo-hot, .fo-tp + .fo-tp { border-top: 1px solid var(--line-soft); }

.fo-hot-ico { width: 30px; height: 30px; border-radius: var(--r-xs); flex: none; display: grid; place-items: center;
              background: color-mix(in srgb, var(--c) 16%, transparent);
              border: 1px solid color-mix(in srgb, var(--c) 32%, transparent);
              color: var(--c); }
.fo-hot-ico svg { width: 15px; height: 15px; }
.fo-hot-n { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 600; overflow: hidden;
            text-overflow: ellipsis; white-space: nowrap; transition: color var(--t); }
.fo-hot:hover .fo-hot-n, .fo-hot.on .fo-hot-n { color: var(--blue-lite); }
.fo-hot.on { background: var(--blue-ghost); border-radius: var(--r-sm); }
.fo-hot b { font-size: 13px; font-weight: 700; color: var(--txt-3); }

.fo-tp-platz { width: 22px; flex: none; display: grid; place-items: center;
               font-size: 13px; font-weight: 800; color: var(--txt-3); }
.fo-tp-platz.is-1 { color: var(--gold); }
.fo-tp-platz svg { width: 17px; height: 17px; }
.fo-tp-name { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 600; overflow: hidden;
              text-overflow: ellipsis; white-space: nowrap; transition: color var(--t); }
.fo-tp-name:hover { color: var(--blue-lite); }
.fo-tp b { font-size: 13.5px; font-weight: 800; }

/* Zwei getoente Werbekarten. Der Discord-Blau gehoert Discord und ist deshalb kein Token —
   es steht hier EINMAL als Zahlentripel und wird unten nur noch durchgereicht. */
.fo-promo { padding: 18px; }
.fo-promo-top { display: flex; align-items: flex-start; gap: 13px; margin-bottom: 15px; }
.fo-promo-ico { width: 44px; height: 44px; border-radius: var(--r-sm); flex: none; display: grid; place-items: center; }
.fo-promo-ico svg { width: 24px; height: 24px; }
.fo-promo h4 { font-size: 15px; font-weight: 800; line-height: 1.3; margin-bottom: 4px; }
.fo-promo p { font-size: 13px; color: var(--txt-2); line-height: 1.5; }

.fo-dc { --dc: 88, 101, 242;
         background: linear-gradient(160deg, rgba(var(--dc), .16), transparent 72%);
         border-color: rgba(var(--dc), .34); }
.fo-dc .fo-promo-ico { background: rgba(var(--dc), .22); border: 1px solid rgba(var(--dc), .38);
                       color: rgb(var(--dc)); }

.fo-fb { background: linear-gradient(160deg, color-mix(in srgb, var(--purple) 16%, transparent), transparent 72%);
         border-color: color-mix(in srgb, var(--pink) 34%, transparent); }
.fo-fb .fo-promo-ico { background: color-mix(in srgb, var(--purple) 20%, transparent);
                       border: 1px solid color-mix(in srgb, var(--pink) 38%, transparent);
                       color: var(--purple); }

/* ================================================================== Ein Thema */

.th-head { border-bottom: 1px solid var(--line-soft);
           background: linear-gradient(180deg, var(--bg-soft), transparent); }
.th-head-in { display: flex; align-items: flex-start; gap: 16px; padding: 26px 0 24px; }

.th-back { width: 40px; height: 40px; border-radius: var(--r-sm); flex: none; display: grid; place-items: center;
           background: var(--card-hi); border: 1px solid var(--line-soft); color: var(--txt-2);
           margin-top: 4px; transition: border-color var(--t), color var(--t); }
.th-back svg { width: 18px; height: 18px; }
.th-back:hover { border-color: var(--line-strong); color: var(--txt); }

.th-head-txt { min-width: 0; }
.th-head-txt h1 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
                  font-size: 34px; line-height: 1.2; margin: 11px 0 9px; overflow-wrap: anywhere; }
.th-head-txt p { font-size: 13.5px; color: var(--txt-3); }
.th-head-txt p a { color: var(--txt-2); font-weight: 600; transition: color var(--t); }
.th-head-txt p a:hover { color: var(--blue-lite); }

.th-wrap { display: flex; flex-direction: column; gap: 16px; padding: 24px 0 10px; }

/* overflow:hidden, weil die Autorenspalte einen eigenen Grund hat — ohne das laeuft der
   ueber die abgerundete Ecke der Karte hinaus. */
.th-post { display: grid; grid-template-columns: 150px minmax(0, 1fr); overflow: hidden; }
.th-post:not(.is-first) { grid-template-columns: 132px minmax(0, 1fr); }

.th-autor { background: var(--inset); border-right: 1px solid var(--line-soft);
            padding: 20px 12px; display: flex; flex-direction: column; align-items: center;
            gap: 8px; text-align: center; }
.th-av { width: 64px; height: 64px; border-radius: var(--r-sm); }
.th-post:not(.is-first) .th-av { width: 52px; height: 52px; }
.th-autor-name { font-size: 13.5px; font-weight: 700; overflow-wrap: anywhere; transition: color var(--t); }
.th-autor-name:hover { color: var(--blue-lite); }
.th-autor .rank { height: 26px; padding: 0 11px; font-size: 12px; }
.th-autor-z { font-size: 11.5px; color: var(--txt-3); }

.th-inhalt { min-width: 0; padding: 16px 22px 22px; }
.th-wann { display: flex; align-items: center; justify-content: flex-end; gap: 6px;
           font-size: 11.5px; color: var(--txt-4); padding-bottom: 11px;
           border-bottom: 1px solid var(--line-soft); margin-bottom: 15px; }
.th-wann svg { width: 13px; height: 13px; }
/* pre-line: der Text kommt escaped aus der Datenbank, seine Absaetze sind echte
   Zeilenumbrueche — die muessen stehen bleiben, ohne dass HTML erlaubt wird. */
.th-text { white-space: pre-line; font-size: 14.5px; line-height: 1.72; overflow-wrap: anywhere; }
/* Gesetzte Beiträge (fett, Listen, Zwischenüberschriften) — Absätze kommen als <p>, also kein pre-line mehr */
.th-text.th-rich { white-space: normal; }
/* @Name im Beitrag (thread.js mitErwaehnungen) */
.th-at { padding: 0 3px; border-radius: 4px; font-weight: 700; color: var(--blue-lite); background: var(--blue-ghost); }
.th-at:hover { color: #fff; background: rgba(47,144,255,.22); }
.th-rich p { margin: 0 0 12px; }
.th-rich p:last-child, .th-rich ul:last-child { margin-bottom: 0; }
.th-rich h3 { margin: 18px 0 8px; font-size: 15.5px; font-weight: 800; color: var(--txt); letter-spacing: -.01em; }
.th-rich h3:first-child { margin-top: 0; }
.th-rich ul { margin: 0 0 12px; padding-left: 20px; }
.th-rich li { margin: 5px 0; }
.th-rich b { color: var(--txt); font-weight: 700; }

.th-unten { margin-top: 8px; scroll-margin-top: calc(var(--head-h) + 16px); }

.th-zu { display: flex; align-items: center; gap: 11px; padding: 18px 20px; border-radius: var(--r-lg);
         background: var(--card-hi); border: 1px dashed var(--line-strong);
         color: var(--txt-2); font-size: 14px; font-weight: 600; }
.th-zu svg { width: 19px; height: 19px; color: var(--txt-3); flex: none; }

.th-form .form-err { margin-bottom: 14px; }
.th-form-top { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.th-form-top b { display: block; font-size: 14px; }
.th-form-top span { display: block; }
.th-ta { min-height: 150px; }
.th-form-btns { display: flex; justify-content: flex-end; margin-top: 14px; }

.th-gast { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.th-gast p { font-size: 14.5px; font-weight: 600; }

/* ================================================================== Neues Thema */

.nt-wrap { max-width: 760px; margin: 0 auto; padding: 28px 0 20px; }
.nt-back { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 16px;
           font-size: 13px; font-weight: 600; color: var(--txt-3); transition: color var(--t); }
.nt-back svg { width: 15px; height: 15px; }
.nt-back:hover { color: var(--blue-lite); }

.nt-h1 { display: flex; align-items: center; gap: 11px; font-size: 26px; }
.nt-h1 svg { width: 23px; height: 23px; color: var(--blue); }
.nt-sub { font-size: 14px; color: var(--txt-2); margin: 7px 0 22px; }

.nt-form { display: flex; flex-direction: column; gap: 17px; }
.nt-ta { min-height: 260px; }

.nt-regeln { padding: 14px 16px; border-radius: var(--r-sm);
             background: var(--blue-ghost); border: 1px solid var(--blue-line); }
.nt-regeln b { display: flex; align-items: center; gap: 8px; margin-bottom: 9px;
               font-size: 13px; color: var(--blue-lite); }
.nt-regeln b svg { width: 15px; height: 15px; }
.nt-regeln li { display: flex; gap: 9px; padding: 3px 0; font-size: 13px; color: var(--txt-2); line-height: 1.55; }
.nt-regeln li svg { width: 14px; height: 14px; flex: none; margin-top: 3px; color: var(--green); }

.nt-btns { display: flex; gap: 12px; }

/* ================================================================== Schmale Fenster */

@media (max-width: 1180px) {
  .fo-main-grid { grid-template-columns: 1fr; }
  .fo-side { display: grid; grid-template-columns: 1fr 1fr; align-items: start; }
}
@media (max-width: 860px) {
  /* Aufrufe und "Letzte Antwort" fliegen zuerst raus — der Titel ist das, wonach man sucht. */
  .fo-grid { grid-template-columns: minmax(0, 1fr) 72px; }
  .fo-grid > :nth-child(3), .fo-grid > :nth-child(4) { display: none; }
  .fo-bar { flex-direction: column; align-items: stretch; }
  .fo-side { grid-template-columns: 1fr; }
  .th-head-txt h1 { font-size: 26px; }
  .th-post, .th-post:not(.is-first) { grid-template-columns: 1fr; }
  .th-autor { flex-direction: row; justify-content: flex-start; flex-wrap: wrap; text-align: left;
              border-right: 0; border-bottom: 1px solid var(--line-soft); padding: 14px 16px; }
  .th-av, .th-post:not(.is-first) .th-av { width: 40px; height: 40px; }
  .th-inhalt { padding: 14px 16px 18px; }
}

/* ================================================================== ⋯-Menues (Melden, Team) */

/* Der Punkte-Knopf: bewusst leise — er darf den Beitrag nicht ueberstrahlen. */
.fo-dots { width: 30px; height: 30px; border-radius: var(--r-xs); color: var(--txt-4);
           transition: background var(--t), color var(--t); }
.fo-dots svg { width: 17px; height: 17px; }
.fo-dots:hover, .menu.open > .fo-dots { background: var(--card-hi); color: var(--txt); }
.fo-menu .menu-pop { min-width: 214px; }
.menu-pop .fo-danger, .menu-pop .fo-danger svg { color: var(--red); }
.menu-pop .fo-danger:hover { background: color-mix(in srgb, var(--red) 12%, transparent); color: var(--red); }

/* Beitrag und Themenliste schneiden ihren Inhalt ab (abgerundete Ecken). Solange ein Menue
   offen ist, darf das aufgeklappte Feld darueber hinaus — sonst waere es bei einer kurzen
   Antwort oder in der letzten Zeile unten abgeschnitten. */
.th-post:has(.menu.open), .fo-list:has(.menu.open) { overflow: visible; }
/* Die Autorenspalte rundet sich selbst, damit sie ohne den Abschnitt nicht ueber die Ecke laeuft. */
.th-autor { border-radius: var(--r-lg) 0 0 var(--r-lg); }

.th-wann { gap: 10px; min-height: 30px; }
.th-wann-t { display: inline-flex; align-items: center; gap: 6px; }
.th-head-menu { margin-left: auto; margin-top: 4px; flex: none; }

/* Themenliste fuer das Team: fuenfte Spalte mit dem Menue. Die Zeile ist dann ein <div>,
   der Titel-Link wird ueber die ganze Zeile gestreckt (ein Knopf darf nicht in einem <a> liegen). */
.fo-team .fo-grid { grid-template-columns: minmax(0, 1fr) 90px 90px 180px 40px; }
.fo-row-team { position: relative; }
.fo-stretch { display: inline-flex; align-items: center; gap: 7px; min-width: 0; }
.fo-stretch::after { content: ""; position: absolute; inset: 0; }
.fo-act { position: relative; z-index: 2; display: flex; justify-content: flex-end; }

@media (max-width: 860px) {
  .fo-team .fo-grid { grid-template-columns: minmax(0, 1fr) 72px 40px; }
  .th-autor { border-radius: var(--r-lg) var(--r-lg) 0 0; }
}

/* ---------------------------------------------------------------- Beitrag bearbeiten
   Das Formular ersetzt den Text an Ort und Stelle. Eine eigene Seite dafuer wuerde den
   Zusammenhang wegnehmen — man bearbeitet, was man sieht. */
.th-post.wird-bearbeitet { border-color: var(--blue-line); box-shadow: 0 0 0 1px var(--blue-line); }
.th-edit { display: flex; flex-direction: column; gap: 10px; }
.th-edit-titel { font-family: var(--f-head); font-weight: 800; font-size: 17px; }
.th-edit-text { min-height: 180px; font-family: inherit; line-height: 1.65; }
.th-edit-knoepfe { display: flex; gap: 10px; }
@media (max-width: 560px) { .th-edit-knoepfe { flex-direction: column; } .th-edit-knoepfe .btn { width: 100%; } }

/* ---------------------------------------------------------------- Team in der Seitenleiste */
.fo-tm { display: flex; align-items: center; gap: 9px; padding: 8px 0; }
.fo-tm + .fo-tm { border-top: 1px solid var(--line-soft); }
.fo-tm-n { font-size: 13.5px; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fo-tm .rank { height: 20px; padding: 0 7px; font-size: 10.5px; flex: none; }
.fo-tm-z { margin-left: auto; display: inline-flex; align-items: center; gap: 5px;
           font-size: 11.5px; color: var(--txt-4); white-space: nowrap; }
.fo-tm:hover .fo-tm-n { color: var(--blue-lite); }
.fo-tm-fuss { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line-soft);
              font-size: 12px; color: var(--txt-3); }
.fo-tm-fuss a { color: var(--blue-lite); font-weight: 600; }

/* ---------------------------------------------------------------- Konto-Hinweis fuer Gaeste
   Steht ueber der Themenliste, nicht darunter: wer mitreden will, soll es lesen, bevor er
   sich durch zehn Themen klickt und erst am Antwortfeld merkt, dass er ein Konto braucht. */
.fo-konto { display: flex; align-items: center; gap: 16px; padding: 16px 20px; margin-bottom: 18px;
            background: linear-gradient(180deg, color-mix(in srgb, var(--amber) 10%, var(--card-top)), var(--card-bottom));
            border-color: color-mix(in srgb, var(--amber) 32%, transparent); }
.fo-konto .sq { width: 42px; height: 42px; border-radius: var(--r-sm); display: grid; place-items: center; flex: none;
                background: color-mix(in srgb, var(--amber) 16%, transparent); color: var(--amber);
                border: 1px solid color-mix(in srgb, var(--amber) 34%, transparent); }
.fo-konto .sq svg { width: 20px; height: 20px; }
.fo-konto b { display: block; font-size: 14.5px; }
.fo-konto p { font-size: 13px; color: var(--txt-2); line-height: 1.55; margin-top: 3px; }
/* Das fette /register steht IM Satz — die Block-Regel oben gilt nur fuer die Ueberschrift */
.fo-konto p b { display: inline; font-size: inherit; font-family: var(--f-mono); color: var(--txt); }
.fo-konto .btn { margin-left: auto; flex: none; }
@media (max-width: 720px) { .fo-konto { flex-direction: column; align-items: flex-start; }
                            .fo-konto .btn { margin-left: 0; width: 100%; } }

/* Anträge & Hilfe (23.09.2026): die Wege zu Entbannung, Bewerbung, Fehler und Frage */
.fo-antrag { display: flex; align-items: center; gap: 11px; padding: 9px 8px; margin: 0 -8px; border-radius: 8px; color: inherit; text-decoration: none; transition: background-color .15s ease; }
.fo-antrag:hover { background: color-mix(in srgb, var(--c) 10%, transparent); }
.fo-antrag-ico { width: 34px; height: 34px; flex: none; display: grid; place-items: center; border-radius: 9px; color: var(--c);
  background: color-mix(in srgb, var(--c) 14%, transparent); border: 1px solid color-mix(in srgb, var(--c) 35%, transparent); }
.fo-antrag-ico svg { width: 17px; height: 17px; }
.fo-antrag-t { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.fo-antrag-t b { font-size: 13px; font-weight: 700; color: var(--txt); }
.fo-antrag-t i { font-style: normal; font-size: 11.5px; color: var(--txt-3); }
.fo-antrag > svg { width: 15px; height: 15px; color: var(--txt-3); transition: transform .2s ease; }
.fo-antrag:hover > svg { transform: translateX(3px); color: var(--c); }
.fo-antrag-fuss { margin: 10px 0 0; padding-top: 10px; border-top: 1px solid var(--line-soft); font-size: 11.5px; color: var(--txt-3); }