/* ===================================================================
   True Legends - Golden Hour
   Themenliste und Beitraege
   =================================================================== */

/* ============ Themenliste (Forenansicht) ============ */
.crumb{
  font-family:var(--caps);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-faint);margin-bottom:16px;display:flex;gap:9px;flex-wrap:wrap;align-items:center;
}
.crumb a{color:var(--text-dim);}
.crumb .sep{color:var(--gold-deep);}

.toolbar{
  display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;
  margin-bottom:14px;
}
.btn{
  font-family:var(--caps);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  padding:10px 20px;border:1px solid var(--gold-deep);color:var(--gold-light);
  background:linear-gradient(180deg,rgb(var(--gold-rgb) / .15),rgb(var(--gold-rgb) / .05));
  cursor:pointer;transition:background .18s ease,border-color .18s ease;
  display:inline-block;
}
.btn:hover{background:linear-gradient(180deg,rgb(var(--gold-rgb) / .3),rgb(var(--gold-rgb) / .12));border-color:var(--gold);color:var(--gold-light);}
.btn.quiet{border-color:var(--line);color:var(--text-dim);background:none;}
.btn.quiet:hover{border-color:var(--gold-deep);color:var(--gold);background:none;}

.pager{display:flex;gap:5px;align-items:center;font-size:.85rem;}
.pager a,.pager span{
  min-width:30px;height:30px;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--line);color:var(--text-dim);font-variant-numeric:tabular-nums;
  font-family:var(--display);font-size:.76rem;padding:0 8px;
}
.pager .cur{border-color:var(--gold-deep);color:var(--gold-light);background:rgb(var(--gold-rgb) / .12);}
.pager a:hover{border-color:var(--gold-deep);color:var(--gold);}

.tlist{border:1px solid var(--line);background:var(--bg-panel);}
.tlist .head{
  display:grid;grid-template-columns:62px minmax(0,1fr) 92px 92px minmax(0,230px);
  background:var(--bg-panel-2);border-bottom:1px solid var(--line);
}
.tlist .head span{
  font-family:var(--caps);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold-soft);padding:11px 14px;
}
.tlist .head span:nth-child(3),.tlist .head span:nth-child(4){text-align:center;}
.trow{
  display:grid;grid-template-columns:62px minmax(0,1fr) 92px 92px minmax(0,230px);
  border-bottom:1px solid rgb(var(--line-rgb) / .6);align-items:center;
  transition:background .15s ease;
}
.trow:last-child{border-bottom:0;}
.trow:hover{background:rgb(var(--panel2-rgb) / .6);}
.trow .st{display:flex;align-items:center;justify-content:center;padding:12px 0;}
.trow .st .moon{width:38px;height:38px;}
.trow .subject{padding:12px 14px;min-width:0;}
.trow .subject .prefix{
  font-family:var(--caps);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;
  border:1px solid var(--gold-deep);color:var(--gold-light);padding:2px 7px;margin-right:8px;
  display:inline-block;vertical-align:1px;
}
.trow .subject .prefix.sticky{border-color:var(--blue-soft);color:var(--u-member);}
.trow .subject a.title{color:var(--text);font-size:1.12rem;}
.trow .subject a.title:hover{color:var(--gold-light);}
.trow .subject .by{display:block;font-size:.82rem;color:var(--text-faint);margin-top:2px;}
.trow .subject .by a{color:var(--blue);}
.trow .num{
  text-align:center;font-variant-numeric:tabular-nums;font-size:.92rem;color:var(--text-dim);
  font-family:var(--display);padding:12px 6px;
}
.trow .last{padding:10px 14px;min-width:0;}
.trow .last .lastpost{border-top:0;padding-top:0;grid-template-columns:minmax(0,1fr) 76px;gap:12px;}
.trow .last .lp-ava{width:76px;height:76px;background-size:265px auto;}
.trow .last .lp-title{font-size:1.08rem;}

/* ============ Postbit ============
   Aufbau nach der Vorlage: Kopfbalken mit Name und Gruppe, darunter der
   Beitrag mit dem Avatar rechts, dann eine Fußzeile mit den Steckbrief-
   Feldern und zuletzt die Schaltflächen. */
.thread-head{margin-bottom:18px;}
.thread-head h1{
  font-size:1.95rem;letter-spacing:.05em;
  background:var(--metal);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.thread-head .meta{font-size:.86rem;color:var(--text-faint);margin-top:4px;}

/* Die Benutzergruppe färbt den Beitrag mit — über eine Variable je Beitrag,
   so wie im Live-Forum über --mclt. Gold bleibt der Leitakzent, die
   Gruppenfarbe übernimmt Kanten und einen Hauch im Kopfbalken. */
.post{
  --gruppe:var(--line);
  border:1px solid var(--line);
  background:var(--bg-panel);
  margin-bottom:18px;display:flex;flex-direction:column;
}

/* Kopfbalken: Charaktername und Benutzergruppe */
.post .kopf{
  display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding:12px 20px;
  border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,var(--bg-panel-2),rgb(var(--panel-rgb) / .6));
}
.post .kopf .name{
  font-family:var(--display);font-size:1.85rem;letter-spacing:.06em;line-height:1.15;
  background:var(--metal);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.post .kopf .rolle{
  font-family:var(--caps);font-size:1.12rem;letter-spacing:.16em;text-transform:uppercase;
  white-space:nowrap;
}

/* Beitrag mit Avatar rechts */
.post .mitte{display:grid;grid-template-columns:minmax(0,1fr) 256px;}
.post .body{display:flex;flex-direction:column;min-width:0;}
.post .body .postmeta{
  display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;
  padding:9px 20px;border-bottom:1px solid rgb(var(--line-rgb) / .6);
  font-size:.8rem;color:var(--text-faint);font-variant-numeric:tabular-nums;
}
.post .body .postmeta .no{font-family:var(--caps);letter-spacing:.12em;color:var(--gold-soft);}
.post .body .content{padding:22px;font-size:1.02rem;line-height:1.72;flex:1;}
.post .body .content p{margin:0 0 15px;}
.post .body .content p:last-child{margin-bottom:0;}
.post .body .content .drop::first-letter{
  font-family:var(--display);font-size:3.1rem;line-height:.85;float:left;
  padding:4px 10px 0 0;
  background:var(--metal);-webkit-background-clip:text;background-clip:text;color:transparent;
}
blockquote{
  margin:0 0 15px;padding:14px 20px;
  border-left:2px solid var(--gold-deep);
  background:rgb(var(--panel2-rgb) / .7);
  font-style:italic;color:var(--text-dim);font-size:.97rem;
}
blockquote .src{
  display:block;font-style:normal;font-family:var(--caps);
  font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--text-faint);margin-bottom:6px;
}
.post .body .signature{
  border-top:1px solid var(--line);padding:14px 22px;
  font-size:.88rem;font-style:italic;color:var(--text-faint);
}

/* Avatarspalte */
/* Die Avatarspalte trägt denselben Verlauf in der Gruppenfarbe wie der
   Kopfbalken — statt Rahmen und Linien färbt die Fläche. */
.post .avaspalte{
  position:relative;
  border-left:1px solid var(--line);
  padding:18px;display:flex;flex-direction:column;gap:10px;
  background:rgb(var(--shadow-rgb) / .22);
}
.post .avaspalte::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(200deg,transparent 30%,var(--gruppe));
  opacity:.2;
}
.post .avaspalte > *{position:relative;z-index:1;}
/* Maße wie im Live-Forum: Avatar 220 x 370 Pixel */
.post .avatar{
  position:relative;overflow:hidden;
  width:220px;height:370px;
  background-image:url(/images/goldenhour/header-mittig.jpg);
  background-size:520px auto;background-position:52% 30%;
}
/* Beim Überfahren erscheinen die Steckbrief-Felder über dem Avatar */
.post .avatar .felder{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgb(var(--shadow-rgb) / .88),rgb(var(--shadow-rgb) / .96));
  padding:14px 13px;
  display:flex;flex-direction:column;justify-content:flex-start;gap:6px;
  opacity:0;transition:opacity .22s ease;
  /* Bei vielen gefüllten Feldern eigener Bildlauf, statt überzulaufen */
  overflow-y:auto;overscroll-behavior:contain;
}
/* Zwischenüberschrift für die bereichseigenen Felder */
.post .avatar .felder h6{
  margin:6px 0 1px;font-family:var(--caps);font-weight:400;
  font-size:.56rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold-soft);
  border-bottom:1px solid rgb(var(--gold-rgb) / .35);padding-bottom:3px;
}
.post .avatar .felder h6:first-child{margin-top:0;}
.post .avatar:hover .felder,.post .avatar:focus-within .felder{opacity:1;}
.post .avatar .felder div{display:flex;align-items:baseline;justify-content:space-between;gap:8px;}
.post .avatar .felder .wert{
  font-family:var(--serif);font-style:italic;font-size:.94rem;color:var(--text);
  min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.post .avatar .felder .was{
  font-family:var(--caps);font-size:.54rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-faint);flex:none;
}
.post .status{
  text-align:center;padding:6px;border:1px solid var(--line);
  font-family:var(--caps);font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--text-faint);
}
.post .status.online{color:var(--online);border-color:rgb(var(--line-rgb) / .9);}
.post .status.online::before{
  content:"";display:inline-block;width:7px;height:7px;border-radius:50%;
  background:var(--online);box-shadow:0 0 7px var(--online);margin-right:7px;
}

/* Fußzeile mit den Steckbrief-Feldern */
.post .fuss{
  border-top:1px solid var(--line);
  /* Felder links, das große Bild rechts. */
  display:grid;grid-template-columns:minmax(0,1fr) 236px;gap:0;
}
.post .fuss .gif{
  display:flex;align-items:center;justify-content:center;padding:22px;
}
.post .fuss .gif.gross{border-left:1px solid var(--line);}

/* Signatur: eigene Zeile über die ganze Breite, mittig, 500 x 250 */
.post .signatur{
  border-top:1px solid var(--line);
  padding:20px;
  display:flex;flex-direction:column;align-items:center;gap:11px;
}
.post .signatur .bild{
  display:block;width:500px;height:250px;max-width:100%;
  box-shadow:inset 0 0 0 1px var(--gold-deep);
  background-image:url(/images/goldenhour/cat-banner.jpg);
  background-size:cover;background-position:30% 50%;
}
.post .signatur .text{
  font-family:var(--serif);font-style:italic;font-size:.95rem;
  color:var(--text-faint);text-align:center;line-height:1.5;
}

/* Das kleine Bild sitzt im Kopfbalken, links neben dem Namen */
.post .kopf{
  position:relative;
  display:grid;grid-template-columns:167px minmax(0,1fr);align-items:stretch;gap:0;
  padding:0;
}
/* Hauch der Gruppenfarbe, von rechts einlaufend */
.post .kopf::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,transparent 35%,var(--gruppe));
  opacity:.18;
}
.post .kopf > *{position:relative;z-index:1;}
.post .kopf .gif-klein{
  width:167px;height:184px;display:block;
  box-shadow:inset 0 0 0 1px var(--gold-deep);
  background-image:url(/images/goldenhour/cat-bg.jpg);
  background-size:cover;background-position:22% 52%;
}
/* Name links, Benutzergruppe rechts — auf einer Zeile */
.post .kopf .wer{
  display:flex;flex-direction:row;align-items:baseline;justify-content:space-between;
  gap:18px;padding:16px 24px;min-width:0;
}
.post .fuss .gif span{
  display:block;
  /* Rahmen nach innen, damit die Maße exakt denen im Live-Forum entsprechen */
  box-shadow:inset 0 0 0 1px var(--gold-deep);
  background-image:url(/images/goldenhour/cat-bg.jpg);
  background-size:cover;
}
.post .fuss .gif.klein span{width:167px;height:184px;background-position:22% 52%;}
.post .fuss .gif.gross span{width:191px;height:191px;background-position:38% 46%;}
.post .fuss .felder{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));
  gap:1px 22px;padding:14px 20px;
}
.post .fuss .felder div{
  display:flex;align-items:baseline;gap:9px;
  padding:4px 0;border-bottom:1px dashed rgb(var(--line-rgb) / .5);
}
.post .fuss .felder svg{
  width:15px;height:15px;flex:none;fill:var(--gold-soft);stroke:none;align-self:center;
}
.post .fuss .felder .was{
  font-family:var(--caps);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-faint);flex:none;
}
.post .fuss .felder .wert{
  font-size:.92rem;color:var(--text-dim);margin-left:auto;text-align:right;
  min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
/* Awards stehen jetzt unter dem Avatar — die Fußzeile gehört den
   Bildern und den fünf Feldern, die immer sichtbar sein sollen. */
.post .avaspalte .awards{
  display:flex;flex-wrap:wrap;gap:5px;justify-content:center;
  padding-top:9px;border-top:1px solid var(--line);
}
.post .awards i{
  width:22px;height:22px;border:1px solid var(--gold-deep);border-radius:50%;
  background:radial-gradient(circle at 40% 35%,rgb(var(--gold-light-rgb) / .5),rgb(var(--gold-rgb) / .22));
  display:block;
}

.post .actions{
  border-top:1px solid var(--line);padding:9px 20px;
  display:flex;gap:8px;align-items:center;flex-wrap:wrap;
}
/* Wer den Charakter spielt — steht links, die Schaltflächen rechts */
.post .actions .written{
  margin-right:auto;
  font-family:var(--caps);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-faint);
}
.post .actions .written b{
  font-weight:400;color:var(--gold-soft);
}
.post .actions a{
  font-family:var(--caps);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-dim);
  border:1px solid var(--line);padding:6px 14px;
  transition:border-color .16s ease,color .16s ease,background .16s ease;
}
.post .actions a:hover{
  color:var(--gold-light);border-color:var(--gold-deep);
  background:rgb(var(--gold-rgb) / .16);
}

/* ===================================================================
   Forenansicht: Themenliste
   Die Zeilen sehen aus wie die Forenzeilen auf der Startseite - so
   wollte es der User, und im alten Design ist es ebenso.
   =================================================================== */

.cat-banner.forum-kopf{height:152px;}

/* Kopf- und Fusszeile der Liste: Schaltflaeche links, Blaetterung rechts */
.toolbar{
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;flex-wrap:wrap;margin:14px 0 10px;
}
.toolbar.unten{margin:10px 0 14px;}
.toolbar .pager{margin:0;}
.toolbar a.button,
.toolbar .newthread,
.toolbar > a{
  font-family:var(--caps);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  padding:10px 22px;
  border:1px solid var(--gold-deep);color:var(--gold-light);
  background:linear-gradient(180deg,rgb(var(--gold-rgb) / .18),rgb(var(--gold-rgb) / .06));
}
.toolbar > a:hover{background:linear-gradient(180deg,rgb(var(--gold-rgb) / .34),rgb(var(--gold-rgb) / .14));border-color:var(--gold);}
.toolbar img{max-height:34px;width:auto;}

.hinweiszeile{
  display:flex;flex-wrap:wrap;gap:6px 18px;
  font-size:.84rem;color:var(--text-faint);margin:10px 0;
}
.hinweiszeile:empty{display:none;}

.themenliste{margin:0;}

/* Die Themenzeile teilt sich das Raster der Forenzeile, hat aber keine
   Unterforenspalte - dafuer mehr Platz fuer Titel und Beschreibung. */
.board.thema{
  grid-template-columns:104px minmax(0,1.9fr) minmax(0,1.15fr);
  height:auto;min-height:120px;
}
.board.thema .main{grid-column:2;border-right:1px solid var(--line);}
.board.thema .stats{grid-column:3;}
.board.thema .main h3{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px;}
.board.thema .main p{margin:4px 0 0;font-size:.9rem;}
.board.thema .main p:empty{display:none;}

/* Wer das Thema eroeffnet hat, steht klein unter dem Titel */
.board.thema .von{
  display:block;margin-top:8px;
  font-family:var(--caps);font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--text-faint);
}
.board.thema .von a{color:var(--blue);}
.board.thema .von a:hover{color:var(--gold);}
.board.thema .von .wann{margin-left:8px;font-variant-numeric:tabular-nums;}

/* Praefixe wie "Wichtig" oder "Szene" */
.board.thema .prefix,
.board.thema .main h3 > span:first-child:not(.cap){
  font-family:var(--caps);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;
  padding:3px 9px;border:1px solid var(--gold-deep);color:var(--gold-soft);
  background:rgb(var(--gold-rgb) / .1);
}

/* Angeheftete und geschlossene Themen treten leicht hervor bzw. zurueck */
.board.thema.sticky{background:rgb(var(--gold-rgb) / .06);}
.board.thema.closed .main h3 a{color:var(--text-faint);}

.board.thema .lastpost{grid-template-columns:minmax(0,1fr);}

/* ---- Mondphasen in der Themenliste ----
   MyBB benennt die Zustaende hier anders als in der Forenliste:
   newfolder = ungelesen, folder = gelesen, hot = viel besucht,
   close = geschlossen, dot = man hat selbst geschrieben. */
.moon.newfolder,
.moon.newhotfolder,
.moon.dot_newfolder,
.moon.dot_newhotfolder{
  background-image:url(/images/goldenhour/moon-new.png);
  filter:drop-shadow(0 0 10px rgb(var(--gold-light-rgb) / .5));
}
.moon.folder,
.moon.hotfolder,
.moon.dot_folder,
.moon.dot_hotfolder{
  background-image:url(/images/goldenhour/moon-read.png);
  opacity:.92;
}
.moon.closefolder,
.moon.closenewfolder,
.moon.dot_closefolder,
.moon.dot_closenewfolder{
  background-image:url(/images/goldenhour/moon-read.png);
  opacity:.55;
}
/* Wo man selbst geschrieben hat, sitzt ein kleiner goldener Punkt */
.moon[class*="dot_"]::after{
  content:"";position:absolute;right:6px;bottom:6px;
  width:8px;height:8px;border-radius:50%;
  background:var(--gold-light);
  box-shadow:0 0 6px rgb(var(--gold-light-rgb) / .8);
}
.board.thema .thumb .moon{position:relative;}

/* Der letzte Beitrag zeigt hier das Datum als Ueberschrift - der Betreff
   waere der Thementitel und stuende damit zweimal in derselben Zeile. */
.board.thema .lastpost .lp-title{
  font-size:1rem;letter-spacing:.02em;
  font-variant-numeric:tabular-nums;white-space:normal;
}
.board.thema .lastpost .lp-title::first-letter{font-size:1em;color:inherit;}
.board.thema .lp-meta{border-top:0;padding-top:2px;margin-top:2px;text-align:left;}

/* Das Kaestchen der Sammelmoderation landete im Mondfeld. Es sitzt jetzt
   unauffaellig in der Ecke der Zeile und stoert das Raster nicht mehr. */
.board.thema > input[type=checkbox],
.board.thema .modbit,
.board.thema > .inline_mod_check{
  position:absolute;right:8px;top:8px;z-index:2;
  margin:0;opacity:.35;transition:opacity .15s ease;
}
.board.thema:hover > input[type=checkbox],
.board.thema:hover .modbit{opacity:1;}
.board.thema{position:relative;}

/* ===================================================================
   Unterforen und Inplay-Kalender in der Forenansicht
   =================================================================== */

.unterforen{margin:14px 0 0;}
.unterforen > h4{
  font-family:var(--caps);font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold-soft);padding:9px 14px;
  background:var(--bg-panel-2);border:1px solid var(--line);border-bottom:0;
}
.unterforen-liste{border:1px solid var(--line);}
.unterforen-liste .board{margin-bottom:0;}

/* ---- Inplay-Kalender ----
   Die Klassen des Plugins tragen den Bereichsnamen (inplaykalender_spn_tag,
   _fate_tag und so weiter), deshalb wird ueber das Namensmuster gewaehlt
   statt ueber feste Klassen - so gilt es fuer alle zehn Bereiche. */
.inplay-kalender:empty{display:none;}
.inplay-kalender{
  margin:16px 0;
  border:1px solid var(--line);
  background:rgb(var(--shadow-rgb) / .25);
  padding:16px 18px;
  overflow-x:auto;
}
.inplay-kalender table{
  border-collapse:separate;border-spacing:3px;
  background:none;border:0;margin:0 auto;
}
.inplay-kalender td{border:0;padding:0;background:none;}

/* Monatsname */
.inplay-kalender td.tcat{
  font-family:var(--display);font-size:1.2rem;letter-spacing:.05em;
  color:var(--gold-light);text-align:center;padding:6px 0 10px;
  background:none;border:0;text-transform:none;
}
/* Wochentage */
.inplay-kalender td.thead{
  font-family:var(--caps);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--text-faint);text-align:center;padding:4px 0;
  background:none;border:0;border-bottom:1px solid var(--line);
}
/* Einzelne Tage */
.inplay-kalender td[class*="_tag"]{
  width:30px;height:30px;text-align:center;vertical-align:middle;
  font-size:.8rem;font-variant-numeric:tabular-nums;color:var(--text-dim);
  border:1px solid transparent;
}
.inplay-kalender td[class*="_tag"].trow2{background:rgb(var(--panel2-rgb) / .5);}
/* Tage mit Szene heben sich golden hervor */
.inplay-kalender td[class*="_tag"].szenen{
  border-color:var(--gold-deep);
  background:rgb(var(--gold-rgb) / .18);
}
.inplay-kalender td[class*="_tag"].szenen a{color:var(--gold-light);display:block;}
.inplay-kalender td[class*="_tag"].szenen:hover{background:rgb(var(--gold-rgb) / .32);}
/* Geburtstage bekommen einen eigenen Ton */
.inplay-kalender td[class*="_tag"][class*="geburtstag"]{
  border-color:#6fb3c9;background:rgb(111 179 201 / .2);
}
.inplay-kalender td[class*="_tag"][class*="geburtstag"] a{color:#8ecbdd;}
.inplay-kalender a{text-decoration:none;}

/* Die drei Monate sollen nebeneinander stehen, nicht uebereinander:
   das Plugin legt sie in .mbh-calendar-wrap ab, und ohne feste
   Tabellenbreite dehnen sich die Tageszellen auf die volle Spaltenbreite. */
.inplay-kalender .mbh-calendar-wrap{
  display:flex;flex-wrap:wrap;gap:10px 26px;justify-content:center;align-items:flex-start;
}
.inplay-kalender table{
  width:auto;table-layout:fixed;
}
.inplay-kalender td[class*="_tag"]{
  width:32px;min-width:32px;max-width:32px;
  height:30px;padding:0;
}
.inplay-kalender td.thead{width:32px;min-width:32px;}

/* ---- Tagesdetails im Kalender ----
   Jede Tageszelle bringt ein Aufklappfeld (.calpop) mit Szenen, Plots,
   Events und Geburtstagen mit. Ohne das Plugin-Stylesheet des alten
   Designs stand es dauerhaft offen und blies die Zellen auf ueber 400 px
   auf. Es erscheint jetzt beim Ueberfahren als Karte ueber dem Tag. */
.inplay-kalender td[class*="_tag"]{position:relative;}
.inplay-kalender .calpop{
  display:none;
  position:absolute;left:50%;top:calc(100% + 6px);transform:translateX(-50%);
  z-index:60;width:230px;text-align:left;
}
.inplay-kalender td[class*="_tag"]:hover .calpop,
.inplay-kalender td[class*="_tag"]:focus-within .calpop{display:block;}

.inplay-kalender .calpop .pop{
  background:var(--bg-panel);border:1px solid var(--gold-deep);
  box-shadow:0 10px 28px rgb(var(--shadow-rgb) / .75);
  padding:12px 14px;font-size:.82rem;color:var(--text-dim);
  max-height:260px;overflow-y:auto;
}
.inplay-kalender .calpop .tcat{
  font-family:var(--caps);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold-light);padding:0 0 6px;background:none;border:0;
  border-bottom:1px solid var(--line);margin-bottom:8px;text-align:left;
}
.inplay-kalender .calpop .thead{
  font-family:var(--caps);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--gold-soft);background:none;border:0;padding:6px 0 2px;text-align:left;
}
.inplay-kalender .calpop a{color:var(--blue);}
.inplay-kalender .calpop a:hover{color:var(--gold-light);}
/* Der Schliessen-Knopf des Aufklappfelds wird beim Ueberfahren nicht gebraucht */
.inplay-kalender .calpop .closepop{display:none;}
/* Leere Abschnitte brauchen keinen Platz */
.inplay-kalender .calpop br + br{display:none;}

/* Die Tageszahl bleibt der eigentliche Inhalt der Zelle */
.inplay-kalender td[class*="_tag"] > a{display:block;line-height:30px;color:inherit;}
.inplay-kalender td[class*="_tag"] strong{font-weight:400;}

/* Die Monate liegen nicht direkt im Wrapper, sondern eine Ebene tiefer
   in .box11-txt - dort muss die Aufreihung ansetzen. */
.inplay-kalender .box11-txt{
  display:flex;flex-wrap:wrap;gap:14px 26px;
  justify-content:center;align-items:flex-start;
}
.inplay-kalender .box11-txt > table{flex:0 0 auto;}

/* ===================================================================
   Beitrag: Anpassungen an die echten Board-Daten
   =================================================================== */

/* Die Gruppenfarbe kommt aus dem g-Tag, das das Board um den Namen legt.
   Ein Inline-Stil ist im Template nicht moeglich, deshalb wird die Farbe
   ueber :has() vom Tag auf den ganzen Beitrag gezogen. */
.post:has(.kopf g1){--gruppe:rgb(173,126,53);}
.post:has(.kopf g2){--gruppe:rgb(118,3,48);}
.post:has(.kopf g4){--gruppe:rgb(177,20,81);}
.post:has(.kopf g8){--gruppe:rgb(70,110,91);}
.post:has(.kopf g9){--gruppe:rgb(179,121,191);}
.post:has(.kopf g10){--gruppe:rgb(167,175,179);}
.post:has(.kopf g11){--gruppe:rgb(128,147,195);}
.post:has(.kopf g12){--gruppe:rgb(83,118,207);}
.post:has(.kopf g13){--gruppe:rgb(110,50,50);}
.post:has(.kopf g14){--gruppe:rgb(179,142,66);}
.post:has(.kopf g15){--gruppe:rgb(113,191,164);}
.post:has(.kopf g16){--gruppe:rgb(43,89,207);}
.post:has(.kopf g17){--gruppe:rgb(49,126,97);}
.post:has(.kopf g18){--gruppe:rgb(94,173,106);}
.post:has(.kopf g19){--gruppe:rgb(0,160,165);}
.post:has(.kopf g20){--gruppe:rgb(165,0,0);}
.post:has(.kopf g21){--gruppe:rgb(241,139,71);}
.post:has(.kopf g22){--gruppe:rgb(151,112,67);}
.post:has(.kopf g23){--gruppe:rgb(138,68,153);}
.post:has(.kopf g25){--gruppe:rgb(184,176,24);}
.post:has(.kopf g26){--gruppe:rgb(138,80,165);}
.post:has(.kopf g27){--gruppe:rgb(190,100,60);}
.post:has(.kopf g28){--gruppe:rgb(0,160,165);}

/* Die Bilder kommen als <img> aus den Profilfeldern, nicht mehr als
   Hintergrundausschnitt wie im Entwurf. */
.post .kopf .gif-klein{background:none;overflow:hidden;}
.post .kopf .gif-klein img{width:100%;height:100%;object-fit:cover;display:block;}
.post .kopf .gif-klein:empty{display:none;}
.post .fuss .gif.gross span,
.post .fuss .gif.gross img{width:100%;height:100%;object-fit:cover;display:block;}
.post .fuss .gif.gross{background:none;overflow:hidden;}
.post .fuss .gif.gross:empty{display:none;}
.post .avatar img{width:100%;height:100%;object-fit:cover;display:block;}

/* Leere Profilfelder sollen keinen Platz beanspruchen - das Board gibt
   sie mit, auch wenn der Charakter sie nicht ausgefuellt hat. */
.post .avatar .felder div:not(:has(.wert:not(:empty))){display:none;}
.post .fuss .felder div:not(:has(.wert:not(:empty))){display:none;}
/* Eine Abschnittsueberschrift ohne Eintraege darunter faellt ebenfalls weg */
.post .avatar .felder h6:has(+ h6){display:none;}
.post .avatar .felder h6:last-child{display:none;}

/* Die Schaltflaechen liefert MyBB als <img> oder <a> - beides wird zu
   einer schlichten Textschaltflaeche. */
.post .actions .knoepfe{display:flex;flex-wrap:wrap;gap:6px;align-items:center;}
.post .actions .knoepfe a{
  font-family:var(--caps);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;
  padding:6px 12px;border:1px solid var(--line);color:var(--text-dim);
}
.post .actions .knoepfe a:hover{border-color:var(--gold-deep);color:var(--gold-light);}
.post .actions .knoepfe img{display:none;}
.post .actions .written b{color:var(--gold-soft);font-weight:400;}
.post .actions .written:not(:has(b:not(:empty))){visibility:hidden;}

/* Signatur: das Board liefert Bild und Text in einem Block */
.post .signatur:empty{display:none;}
.post .signatur img{max-width:500px;max-height:250px;height:auto;display:block;margin:0 auto;}

/* Ein Bildfeld ohne Inhalt liefert ein <img> mit leerer Adresse - das
   zeigt der Browser als Platzhalter mit Rahmen. Solche Bilder fallen weg. */
.post .gif-klein img[src=""],
.post .gif.gross img[src=""],
.post .gif-klein:has(img[src=""]),
.post .gif.gross:has(img[src=""]){display:none;}

/* ===================================================================
   Themenansicht: Kopf, Werkzeugleisten, Fussbereich
   =================================================================== */

.szenenkopf{
  display:flex;align-items:baseline;justify-content:space-between;gap:18px;
  flex-wrap:wrap;margin:16px 0 4px;
}
.szenenname{
  margin:0;
  font-family:var(--display);
  font-size:clamp(1.7rem,3vw,2.4rem);letter-spacing:.03em;line-height:1.2;
  background:var(--metal);-webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
}
/* Ein Praefix vor dem Namen bleibt eigenstaendig lesbar */
.szenenname > span:first-child,
.szenenname .prefix{
  -webkit-text-fill-color:initial;background:rgb(var(--gold-rgb) / .12);
  font-family:var(--caps);font-size:.42em;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold-soft);border:1px solid var(--gold-deep);
  padding:4px 10px;margin-right:12px;vertical-align:middle;
}
.szenenkopf a{font-size:.8rem;color:var(--text-faint);}
.szenenkopf a:hover{color:var(--gold-light);}

.beitraege{margin:0;}

/* Vor- und zurueckblaettern zwischen Szenen */
.szenen-nachbarn{
  display:flex;justify-content:space-between;gap:16px;
  margin:12px 0;font-size:.8rem;
}
.szenen-nachbarn a{color:var(--text-faint);}
.szenen-nachbarn a:hover{color:var(--gold-light);}
.szenen-nachbarn a:empty{display:none;}

/* ---- Fussbereich der Listen ----
   MyBB liefert hier mehrere kleine Formulare (Moderation, Sortierung,
   Suche, Forensprung). Ohne Zutun stehen sie alle untereinander und
   zerreissen die Seite - hier stehen sie nebeneinander in einer Leiste. */
.listen-fuss{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;
  margin:16px 0;padding:14px 18px;
  border:1px solid var(--line);background:rgb(var(--shadow-rgb) / .25);
  font-size:.8rem;color:var(--text-faint);
}
.listen-fuss form,
.listen-fuss > div,
.listen-fuss > span{
  display:inline-flex;align-items:center;gap:8px;margin:0;flex-wrap:wrap;
}
.listen-fuss table,
.listen-fuss tbody,
.listen-fuss tr,
.listen-fuss td{display:inline;background:none;border:0;padding:0;}
.listen-fuss select{
  padding:5px 9px;font-family:var(--serif);font-size:.8rem;max-width:200px;
  background:rgb(var(--shadow-rgb) / .5);border:1px solid var(--line);color:var(--text-dim);
}
.listen-fuss input[type=text]{
  padding:5px 9px;font-size:.8rem;max-width:180px;
  background:rgb(var(--shadow-rgb) / .5);border:1px solid var(--line);color:var(--text);
}
.listen-fuss input[type=submit],
.listen-fuss input[type=button]{
  padding:5px 12px;font-family:var(--caps);font-size:.62rem;letter-spacing:.12em;
}
.listen-fuss br{display:none;}

/* ---- Antworten- und Neues-Thema-Schaltflaeche ----
   MyBB liefert sie als Bild in einem Link; das Bild wird ausgeblendet
   und der Link bekommt die Gestalt der uebrigen Schaltflaechen. */
.toolbar a img,
.toolbar img{display:none;}
.toolbar a{
  display:inline-flex;align-items:center;
  font-family:var(--caps);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  padding:11px 24px;
  border:1px solid var(--gold-deep);color:var(--gold-light);
  background:linear-gradient(180deg,rgb(var(--gold-rgb) / .18),rgb(var(--gold-rgb) / .06));
  transition:background .16s ease,border-color .16s ease;
}
.toolbar a:hover{
  background:linear-gradient(180deg,rgb(var(--gold-rgb) / .34),rgb(var(--gold-rgb) / .14));
  border-color:var(--gold);
}

/* Beitragsautor wechseln: das Board liefert einen kleinen Aufklapper.
   Er sitzt rechts im Kopfbalken neben der Gruppenbezeichnung. */
/* MyBB rechnet die Lage des Aufklappmenues selbst aus und schreibt sie
   als Inline-Stil. Im neuen Aufbau landet es dabei weit neben dem
   Beitrag, deshalb wird die Lage hier fest vorgegeben - das erfordert
   !important, weil ein Inline-Stil sonst staerker waere. */
.post .kopf .autorwechsel{
  display:inline-flex;align-items:center;position:relative;
  margin-left:10px;
}
.post .kopf .autorwechsel:empty{display:none;}
.post .kopf .autorwechsel a{color:var(--gold-soft);font-size:.8rem;line-height:1;}
.post .kopf .autorwechsel a:hover{color:var(--gold-light);}
.post .kopf .autorwechsel img{max-height:14px;width:auto;opacity:.75;}
.post .kopf .autorwechsel img:hover{opacity:1;}
.post .kopf .autorwechsel ul,
.post .kopf .autorwechsel .popup_menu{
  position:absolute !important;
  left:auto !important;right:0 !important;
  top:calc(100% + 6px) !important;
  width:auto !important;min-width:190px;
  z-index:70;max-height:320px;overflow-y:auto;
  background:var(--bg-panel);border:1px solid var(--gold-deep);
  box-shadow:0 10px 28px rgb(var(--shadow-rgb) / .75);
  list-style:none;margin:0;padding:6px 0;text-align:left;
}
.post .kopf .autorwechsel li{padding:0;border:0;}
.post .kopf .autorwechsel li a{
  display:block;padding:7px 14px;font-family:var(--serif);font-size:.9rem;
  letter-spacing:0;text-transform:none;color:var(--text-dim);white-space:nowrap;
}
.post .kopf .autorwechsel li a:hover{background:rgb(var(--gold-rgb) / .16);color:var(--gold-light);}

/* MyBB faerbt die Eintraege des Aufklappmenues hell und setzt die
   Schriftfarbe als Inline-Stil - beides wird hier ueberschrieben. */
.post .kopf .autorwechsel .popup_item_container,
.post .kopf .autorwechsel .popup_item{
  background:none !important;color:var(--text-dim) !important;
  border:0;padding:0;
}
.post .kopf .autorwechsel .popup_item{
  display:block;padding:8px 15px !important;
  font-family:var(--serif);font-size:.9rem;letter-spacing:0;text-transform:none;
  white-space:nowrap;
}
.post .kopf .autorwechsel .popup_item:hover{
  background:rgb(var(--gold-rgb) / .16) !important;color:var(--gold-light) !important;
}
.post .kopf .autorwechsel .popup_item_container + .popup_item_container{
  border-top:1px solid rgb(var(--line-rgb) / .6);
}

/* ---- Korrekturen ---- */

/* Im Forum selbst braucht der Kopf kein Motiv - der Name genuegt.
   Das Bild bleibt den Kategorien auf der Startseite vorbehalten. */
.cat-banner.forum-kopf{
  background-image:none;
  background:linear-gradient(180deg,var(--bg-panel-2),var(--bg-panel));
  height:auto;min-height:0;padding:20px 26px;
}
.cat-banner.forum-kopf::before{display:none;}
.cat-banner.forum-kopf h2{font-size:clamp(1.5rem,2.4vw,2rem);}

/* MyBB faerbt den Beitragstext dunkelgrau - auf dunklem Grund unlesbar. */
.post .content,
.post .content .post_body,
.post .content p,
.post .content div,
.post .content span:not([style*="color"]),
.post .content li,
.post .content td{color:var(--text);}
.post .content a{color:var(--blue);}
.post .content a:hover{color:var(--gold-light);}

/* Anwesenheit als Wort statt als Punkt. Das Board liefert ein Bildchen
   mit dem Zustand im Titel - daran laesst sich der Text festmachen. */
.post .status img{display:none;}
.post .status::after{content:"offline";}
.post .status:has(img[title*="nline"]:not([title*="ffline"]))::after{content:"online";}
.post .status:has(img[title*="ffline"])::after{content:"offline";}
.post .status:has(img[title*="way"])::after,
.post .status:has(img[title*="bwesend"])::after{content:"abwesend";}
.post .status:has(img[title*="nline"]:not([title*="ffline"])){color:var(--online);}
.post .status::before{display:none;}

/* Code- und Zitatkaesten im Beitrag */
.post .content .codeblock,
.post .content pre,
.post .content code{
  display:block;
  background:rgb(var(--shadow-rgb) / .55);
  border:1px solid var(--line);border-left:3px solid var(--gold-deep);
  font-family:Consolas,'Courier New',monospace;font-size:.88rem;line-height:1.55;
  padding:14px 16px;margin:14px 0;overflow-x:auto;color:var(--text-dim);
  white-space:pre-wrap;word-break:break-word;
}
.post .content .codeblock .title,
.post .content .codeblock_header{
  display:block;background:none;border:0;border-bottom:1px solid var(--line);
  font-family:var(--caps);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold-soft);padding:0 0 8px;margin:0 0 10px;
}
.post .content .codeblock code{
  background:none;border:0;padding:0;margin:0;display:block;
}

/* ---- Hervorhebungen im Beitrag tragen die Gruppenfarbe ----
   So ist es im bestehenden Design: fett, kursiv und unterstrichen
   erscheinen im Ton der Benutzergruppe des Verfassers, nicht neutral. */
.post .content b,
.post .content strong,
.post .content i,
.post .content em,
.post .content u,
.post .content .mycode_b,
.post .content .mycode_i,
.post .content .mycode_u{color:var(--gruppe);}
/* Innerhalb eines Zitats gilt die Farbe des Zitierten nicht weiter */
.post .content blockquote b,
.post .content blockquote strong,
.post .content blockquote i,
.post .content blockquote em,
.post .content blockquote u,
.post .content blockquote .mycode_b,
.post .content blockquote .mycode_i,
.post .content blockquote .mycode_u{color:var(--text);}
/* Eine im Beitrag selbst gesetzte Farbe geht immer vor */
.post .content [style*="color"]{color:inherit;}

/* Codekaesten duerfen den Beitrag nicht sprengen: der Textbereich ist
   eine Rasterspalte, die ohne min-width:0 mit ihrem Inhalt mitwaechst. */
.post .body,
.post .content{min-width:0;max-width:100%;}
.post .content .codeblock,
.post .content pre,
.post .content code{
  max-width:100%;box-sizing:border-box;
}
.post .content pre,
.post .content .codeblock{white-space:pre-wrap;overflow-wrap:anywhere;}
/* Auch breite Bilder und Tabellen bleiben im Rahmen */
.post .content img{max-width:100%;height:auto;}
.post .content table{max-width:100%;display:block;overflow-x:auto;}

/* ===================================================================
   Schreibmaske: Antworten und Bearbeiten
   =================================================================== */

.schreibmaske{
  border:1px solid var(--line);background:var(--bg-panel);
  padding:20px 22px;margin:14px 0;
}
.schreibmaske .feldzeile{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:14px;
}
.schreibmaske label,
.schreibmaske .feldzeile > strong{
  font-family:var(--caps);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold-soft);min-width:110px;
}
.schreibmaske input[type=text],
.schreibmaske input[type=password],
.schreibmaske select,
.schreibmaske textarea{
  flex:1;min-width:200px;
  background:rgb(var(--shadow-rgb) / .5);border:1px solid var(--line);color:var(--text);
  font-family:var(--serif);font-size:1rem;padding:9px 12px;
}
.schreibmaske textarea{width:100%;min-height:320px;line-height:1.65;}

/* MyBB gibt Beschriftungen und Hinweiszeilen in Tabellen aus, die sonst
   die helle Standardfarbe behalten - etwa "Benutzername" oder
   "Bearbeitungsgrund". */
.schreibmaske table,
.schreibmaske tbody,
.schreibmaske tr,
.schreibmaske td,
.schreibmaske .tborder,
.schreibmaske .thead,
.schreibmaske .tcat,
.schreibmaske .trow1,
.schreibmaske .trow2{
  background:none !important;border-color:var(--line);color:var(--text-dim);
}
.schreibmaske .thead,
.schreibmaske .tcat{
  font-family:var(--caps);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold-soft) !important;padding:8px 0;
}
.schreibmaske .smalltext{color:var(--text-faint);}

/* Werkzeugleiste des Editors und Smilies */
.schreibfeld{margin:0 0 16px;}
.schreibfeld .sceditor-container,
.schreibfeld .sceditor-container iframe,
.schreibfeld .sceditor-container textarea{width:100% !important;max-width:100%;}
/* Die Smilie-Auswahl gehoert unter das Schreibfeld, nicht an den Rand */
.schreibfeld .smilie_list,
.schreibmaske .smilie_list{
  display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-start;
  margin:10px 0 0;padding:10px 12px;
  border:1px solid var(--line);background:rgb(var(--shadow-rgb) / .3);
}
.schreibmaske .smilie_list img{margin:0;}
.schreibmaske .smilie_list td,
.schreibmaske .smilie_list table{display:inline;}

.schreibknoepfe{
  display:flex;flex-wrap:wrap;gap:10px;align-items:center;
  margin-top:18px;padding-top:16px;border-top:1px solid var(--line);
}
.schreibknoepfe input[type=submit],
.schreibknoepfe .button{
  font-family:var(--caps);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  padding:11px 24px;cursor:pointer;
  border:1px solid var(--gold-deep);color:var(--gold-light);
  background:linear-gradient(180deg,rgb(var(--gold-rgb) / .18),rgb(var(--gold-rgb) / .06));
}
.schreibknoepfe input[type=submit]:hover{
  background:linear-gradient(180deg,rgb(var(--gold-rgb) / .34),rgb(var(--gold-rgb) / .14));
  border-color:var(--gold);
}

/* ===================================================================
   Schreibmaske nach dem Aufbau des Live-Forums (tlm-fw-*)
   Reihenfolge wie dort: Kontenwechsel, Betreff, Smilies, Schreibfeld,
   Werkzeugleiste, Optionen, Schaltflaechen.
   =================================================================== */

.tlm-fw{margin:16px 0;}
.tlm-fw-title{
  margin:0 0 14px;
  font-family:var(--display);font-size:clamp(1.5rem,2.4vw,2rem);letter-spacing:.03em;
  background:var(--metal);-webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
}

/* Zeile fuer den Kontenwechsel ueber dem Formular */
.tlm-fw-as{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  margin:0 0 12px;padding:12px 16px;
  border:1px solid var(--line);background:rgb(var(--shadow-rgb) / .3);
}
.tlm-fw-as-lbl{
  font-family:var(--caps);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold-soft);
}
.tlm-fw-as select{
  background:rgb(var(--shadow-rgb) / .5);border:1px solid var(--line);color:var(--text);
  font-family:var(--serif);font-size:.95rem;padding:7px 11px;
}

/* Der Rahmen des Formulars */
.tlm-fw-tbl{
  width:100%;border:1px solid var(--line);background:var(--bg-panel);
  border-collapse:separate;border-spacing:0;margin:0;
}
.tlm-fw-tbl > tbody > tr > td{
  padding:16px 18px;border:0;border-bottom:1px solid rgb(var(--line-rgb) / .5);
  background:none;vertical-align:top;
}
.tlm-fw-tbl > tbody > tr:last-child > td{border-bottom:0;}
.tlm-fw-tbl label,
.tlm-fw-tbl > tbody > tr > td > strong{
  display:block;margin-bottom:7px;
  font-family:var(--caps);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold-soft);
}
.tlm-fw-tbl input.textbox,
.tlm-fw-tbl input[type=text],
.tlm-fw-tbl select{
  width:100%;max-width:100%;box-sizing:border-box;
  background:rgb(var(--shadow-rgb) / .5);border:1px solid var(--line);color:var(--text);
  font-family:var(--serif);font-size:1rem;padding:9px 12px;
}
.tlm-fw-tbl textarea{
  width:100%;box-sizing:border-box;min-height:0;
  background:rgb(var(--shadow-rgb) / .5);border:1px solid var(--line);color:var(--text);
  font-family:var(--serif);font-size:1rem;line-height:1.65;padding:12px 14px;
  resize:vertical;
}
.tlm-fw-tbl .smalltext{color:var(--text-faint);font-size:.82rem;}
.tlm-fw-tbl input[type=checkbox],
.tlm-fw-tbl input[type=radio]{accent-color:var(--gold);margin-right:7px;}

/* Smilie-Auswahl: sitzt ueber dem Schreibfeld und bleibt in der Spalte */
.tlm-fw-tbl .smilie_list,
.tlm-fw-tbl #smilie_list{
  display:flex;flex-wrap:wrap;gap:6px;align-items:center;
  margin:0 0 10px;padding:9px 11px;max-width:100%;
  border:1px solid var(--line);background:rgb(var(--shadow-rgb) / .3);
}
.tlm-fw-tbl .smilie_list table,
.tlm-fw-tbl .smilie_list tbody,
.tlm-fw-tbl .smilie_list tr,
.tlm-fw-tbl .smilie_list td{display:inline;background:none;border:0;padding:0;}
.tlm-fw-tbl .smilie_list img{margin:2px;vertical-align:middle;}

/* Schaltflaechenzeile */
.tlm-fw-actions{
  display:flex;flex-wrap:wrap;gap:10px;align-items:center;
  margin:16px 0 0;padding:16px 18px;
  border:1px solid var(--line);border-top:0;background:rgb(var(--shadow-rgb) / .25);
}
.tlm-fw-actions input[type=submit],
.tlm-fw-actions .button{
  font-family:var(--caps);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  padding:11px 24px;cursor:pointer;
  border:1px solid var(--line);color:var(--text-dim);background:rgb(var(--shadow-rgb) / .4);
  transition:background .16s ease,border-color .16s ease,color .16s ease;
}
.tlm-fw-actions input[type=submit]:hover{border-color:var(--gold-deep);color:var(--gold-light);}
.tlm-fw-actions .tlm-fw-primary{
  border-color:var(--gold-deep);color:var(--gold-light);
  background:linear-gradient(180deg,rgb(var(--gold-rgb) / .18),rgb(var(--gold-rgb) / .06));
}
.tlm-fw-actions .tlm-fw-primary:hover{
  background:linear-gradient(180deg,rgb(var(--gold-rgb) / .34),rgb(var(--gold-rgb) / .14));
  border-color:var(--gold);
}

/* Forenregeln und Themenrueckblick unter dem Formular */
.tlm-fw-rules:not(:empty),
.tlm-fw-review{
  margin:16px 0 0;padding:14px 18px;
  border:1px solid var(--line);background:rgb(var(--shadow-rgb) / .25);
  font-size:.9rem;color:var(--text-dim);
}
.tlm-fw-review > summary{
  cursor:pointer;
  font-family:var(--caps);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold-soft);
}
.tlm-fw-review[open] > summary{margin-bottom:12px;}

/* Tracker und Zaehler, die Plugins in das Formular einhaengen */
.tlm-fw-tbl [id*="tracker"],
.tlm-fw-tbl [class*="tracker"],
.tlm-fw-tbl [id*="counter"],
.tlm-fw-tbl [class*="counter"]{color:var(--text-dim);}

/* ---- Auswahlfelder und Editor-Werkzeugleiste im Formular ----
   Der Inplaytracker nutzt select2 fuer die Mitspielerwahl, der Editor
   markItUp fuer seine Knopfleiste. Beide bringen helle Standardfarben
   mit, die auf dunklem Grund blenden. */
.tlm-fw .select2-container,
.tlm-fw .select2-choices,
.tlm-fw .select2-choice,
.select2-drop{
  background:rgb(var(--shadow-rgb) / .5) !important;
  border-color:var(--line) !important;
  color:var(--text) !important;
}
.tlm-fw .select2-choices li,
.select2-drop li,
.select2-results li{background:none !important;color:var(--text-dim) !important;}
.tlm-fw .select2-search-choice{
  background:rgb(var(--gold-rgb) / .16) !important;
  border:1px solid var(--gold-deep) !important;
  color:var(--gold-light) !important;
}
.select2-results .select2-highlighted{
  background:rgb(var(--gold-rgb) / .22) !important;color:var(--gold-light) !important;
}
.select2-no-results,
.select2-searching{
  background:none !important;color:var(--text-faint) !important;font-style:italic;
}
.select2-drop{border:1px solid var(--gold-deep) !important;box-shadow:0 10px 28px rgb(var(--shadow-rgb) / .75);}
.tlm-fw .select2-input,
.select2-drop input{
  background:rgb(var(--shadow-rgb) / .6) !important;
  border:1px solid var(--line) !important;color:var(--text) !important;
}

/* Knopfleiste des Editors */
.tlm-fw .markItUpHeader,
.tlm-fw .markItUpHeader ul{
  background:rgb(var(--shadow-rgb) / .35);border:0;margin:0;padding:0;
  display:flex;flex-wrap:wrap;gap:2px;align-items:center;list-style:none;
}
.tlm-fw .markItUpHeader ul li{background:none;border:0;margin:0;}
.tlm-fw .markItUpSeparator{
  background:none !important;border:0 !important;
  width:1px;height:20px;margin:0 6px !important;
  border-left:1px solid var(--line) !important;
}
.tlm-fw .markItUpHeader a{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:28px;height:28px;color:var(--text-dim);
  border:1px solid transparent;
}
.tlm-fw .markItUpHeader a:hover{border-color:var(--gold-deep);color:var(--gold-light);background:rgb(var(--gold-rgb) / .12);}
.tlm-fw .markItUpHeader ul ul{
  position:absolute;z-index:60;flex-direction:column;
  background:var(--bg-panel);border:1px solid var(--gold-deep);
  box-shadow:0 10px 28px rgb(var(--shadow-rgb) / .75);
}

/* Der Zeichenzaehler des Inplaytrackers */
.tlm-fw [id*="zaehler"],
.tlm-fw [class*="zaehler"],
.tlm-fw [id*="counter"]{
  font-family:var(--caps);font-size:.7rem;letter-spacing:.1em;color:var(--text-faint);
}

/* ---- Nachbesserungen an der Schreibmaske ----------------------------- */

/* Schreibfeld rechts, Smilies links - siehe Block weiter unten */
.tlm-fw-tbl #message{min-height:340px;}

/* Kleine Textfelder wie die Szenenbeschreibung richten sich nach ihren
   Zeilen, statt die Hoehe des Schreibfelds zu erben */
.tlm-fw-tbl textarea.textarea{height:auto;min-height:0;}

/* Ankreuzfelder in einer Zeile statt untereinander:
   Beitrags-, Moderations- und Umfrageoptionen werden dadurch flach */
.tlm-fw-tbl > tbody > tr:has(span.smalltext > label > input.checkbox) > td{padding:10px 18px;}
.tlm-fw-tbl span.smalltext:has(> label > input.checkbox) > br{display:none;}
.tlm-fw-tbl span.smalltext:has(> label > input.checkbox) > label{
  display:inline-flex;align-items:baseline;gap:6px;margin:0 20px 0 0;
  font-family:var(--serif);font-size:.88rem;letter-spacing:0;text-transform:none;
  color:var(--text-dim);
}
.tlm-fw-tbl span.smalltext:has(> label > input.checkbox) > label b,
.tlm-fw-tbl span.smalltext:has(> label > input.checkbox) > label strong{
  font-weight:600;color:var(--gold-soft);
}
.tlm-fw-tbl span.smalltext:has(> label > input.checkbox) > input.textbox{
  display:block;margin-top:9px;max-width:340px;
}
/* ---- Beitragskopf, Profilfelder und Hervorhebungen ------------------- */

/* Fett, kursiv und unterstrichen tragen den Ton der Benutzergruppe.
   MyBB gibt dafuer span.mycode_b/_i/_u aus; die allgemeine Textfarbe des
   Beitrags setzt sich sonst durch, darum hier ausdruecklich. */
.post .content b,
.post .content strong,
.post .content i,
.post .content em,
.post .content u,
.post .content .mycode_b,
.post .content .mycode_i,
.post .content .mycode_u{color:var(--gruppe) !important;}
/* Im Zitat gilt die Farbe des Zitierten nicht weiter */
.post .content blockquote b,
.post .content blockquote strong,
.post .content blockquote i,
.post .content blockquote em,
.post .content blockquote u,
.post .content blockquote .mycode_b,
.post .content blockquote .mycode_i,
.post .content blockquote .mycode_u{color:var(--text) !important;}
/* Eine im Beitrag selbst gewaehlte Farbe geht immer vor */
.post .content [style*="color"] .mycode_b,
.post .content [style*="color"] .mycode_i,
.post .content [style*="color"] .mycode_u,
.post .content [style*="color"] b,
.post .content [style*="color"] i,
.post .content [style*="color"] u{color:inherit !important;}

/* Die Rasse neben dem Namen erbte MyBBs dunkles Grau und war auf dem
   dunklen Grund kaum zu lesen. Sie bekommt den Gruppenton, aufgehellt,
   damit auch tiefe Toene wie Weinrot noch tragen. */
.post .kopf .rolle{
  color:var(--gold-soft);
  color:color-mix(in srgb,var(--gruppe) 55%,#fff8ec);
  text-shadow:0 1px 3px rgb(var(--shadow-rgb) / .85);
}
.post .kopf .rolle a{color:inherit;}

/* Das Dreieck zum Wechseln des Beitragsautors war ebenso dunkel */
.post .kopf .autorwechsel,
.post .kopf .autorwechsel a{
  color:var(--gold-light);font-size:.8rem;line-height:1;text-decoration:none;
}
.post .kopf .autorwechsel a:hover{color:#fff;}

/* Die sichtbaren Profilfelder im Fuss: eigene Kacheln statt einer Liste,
   mit Symbol vorweg und einem Streifen in der Gruppenfarbe an der Kante. */
.post .fuss .felder{gap:8px 12px;}
.post .fuss .felder div{
  position:relative;align-items:center;gap:10px;
  padding:8px 12px 8px 14px;border-bottom:0;
  border:1px solid rgb(var(--line-rgb) / .55);
  background:linear-gradient(180deg,rgb(var(--panel-rgb) / .5),rgb(var(--shadow-rgb) / .28));
}
.post .fuss .felder div::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:2px;
  background:var(--gruppe);opacity:.6;
}
/* Die Symbole sind unterschiedlich breit; eine feste Spalte haelt die
   Beschriftungen in einer Flucht. */
.post .fuss .felder i{
  flex:none;width:19px;text-align:center;align-self:center;
  font-size:1rem;color:var(--gold-soft);
}
.post .fuss .felder .was{color:var(--gold-soft);opacity:.85;}
.post .fuss .felder .wert{color:var(--text);}

/* Die Kacheln der Profilfelder bleiben flach: der Wert steht einzeilig,
   und das Raster streckt keine Kachel auf die Hoehe ihrer Nachbarin. */
.post .fuss .felder{align-items:start;}
.post .fuss .felder div{min-width:0;}
.post .fuss .felder .wert{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.post .fuss .felder .wert *{white-space:nowrap;}
.post .fuss .felder .wert br{display:none;}

/* ---- Gesuche, Archivierung und Szenenverwaltung ---------------------- */

/* Gesuch-Erweiterung: Art des Gesuchs und ob es noch frei ist.
   Steht als Marke ueber dem Titel, in der Themenliste wie im Thema. */
.gesuch{display:flex;flex-wrap:wrap;gap:7px;margin:0 0 7px;}
.gesuch .marke,
.gesuch span,
.tlm-wanted{
  display:inline-flex;align-items:center;gap:6px;
  padding:3px 11px;
  border:1px solid var(--gold-deep);
  background:linear-gradient(180deg,rgb(var(--gold-rgb) / .18),rgb(var(--gold-rgb) / .05));
  font-family:var(--caps);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold-light);white-space:nowrap;
}
.gesuch .marke:empty{display:none;}

/* Die Kurzangaben zum Gesuch: Avatarperson, Familie, Freunde ... */
.shortfacts,
.thema .main .shortfacts,
.szenenkopf .shortfacts{
  display:flex;flex-wrap:wrap;gap:5px 14px;margin:5px 0 0;
  font-size:.84rem;color:var(--text-dim);
}

/* Untertitel des Themas - bei Gesuchen steht dort, worum es geht */
.untertitel{
  margin:4px 0 0;font-family:var(--serif);font-style:italic;
  font-size:.92rem;color:var(--text-dim);
}
.szenenkopf .untertitel{
  font-size:1.02rem;text-align:center;color:var(--text-dim);margin:8px 0 0;
}

/* Archivierung, Korrekturhinweis und "erledigt" in der Themenliste */
.thema .themenknoepfe{
  grid-column:1 / -1;
  display:flex;flex-wrap:wrap;gap:8px;align-items:center;
  margin:0;padding:0 0 0 2px;
}
.thema .themenknoepfe:not(:has(*)){display:none;}

/* Die Knoepfe der Plugins in der Werkzeugleiste des Themas: der
   Inplaytracker liefert ein nacktes <li>, die Archivierung einen Link. */
.toolbar li,
.toolbar li.sendthread{
  list-style:none;display:inline-flex;margin:0;
}
.toolbar li > a,
.toolbar li.sendthread > a,
.toolbar .archivierung a,
.toolbar [id*="archiv"] a,
.toolbar [class*="archiv"] a,
.toolbar [class*="solved"] a{
  display:inline-flex;align-items:center;gap:8px;
  padding:9px 20px;text-decoration:none;
  border:1px solid var(--line);background:rgb(var(--shadow-rgb) / .4);
  font-family:var(--caps);font-size:.7rem;letter-spacing:.15em;text-transform:uppercase;
  color:var(--text-dim);
  transition:border-color .16s ease,color .16s ease,background .16s ease;
}
.toolbar li > a:hover,
.toolbar li.sendthread > a:hover,
.toolbar .archivierung a:hover,
.toolbar [class*="archiv"] a:hover,
.toolbar [class*="solved"] a:hover{
  border-color:var(--gold-deep);color:var(--gold-light);
  background:rgb(var(--gold-rgb) / .12);
}

/* Marke "erledigt" direkt am Szenennamen */
.szenenname [class*="solved"],
h3 [class*="solved"]{
  font-family:var(--caps);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold-light);border:1px solid var(--gold-deep);
  padding:2px 8px;margin-right:9px;vertical-align:middle;
  background:none;-webkit-text-fill-color:var(--gold-light);
}

/* Nicht jeder Charakter hat die beiden Gifs hinterlegt. Fehlen sie, ist
   das Bild-Element zwar leer, seine Spalte im Raster bliebe aber stehen
   und draengte den Namen in eine viel zu schmale Spalte. */
.post .kopf:not(:has(.gif-klein img[src]:not([src=""]))){grid-template-columns:minmax(0,1fr);}
.post .kopf .gif-klein:not(:has(img[src]:not([src=""]))){display:none;}
.post .fuss .gif.gross:not(:has(img[src]:not([src=""]))){display:none;}

/* ---- Schreibfeld und Smilies nebeneinander --------------------------- */
/* Wie im bestehenden Design: links eine schmale Spalte mit den Smilies,
   rechts das Schreibfeld ueber die ganze verbleibende Breite. */
.tlm-fw-tbl .tlm-fw-smilies{width:212px;vertical-align:top;}
.tlm-fw-tbl .tlm-fw-smilies > div,
.tlm-fw-tbl .tlm-fw-smilies .smilie_list{
  max-height:352px;overflow-y:auto;margin:0;
  border:1px solid var(--line);background:rgb(var(--shadow-rgb) / .3);
}
.tlm-fw-tbl .tlm-fw-smilies table{width:100%;background:none;border:0;}

/* MyBB setzt dem Editor eine feste Breite aus der Spaltenzahl der
   textarea; hier soll er die Zelle ausfuellen. */
.tlm-fw-tbl .tlm-fw-schreib{width:auto;}
.tlm-fw-tbl .tlm-fw-schreib .mybbeditor,
.tlm-fw-tbl .tlm-fw-schreib .markItUp,
.tlm-fw-tbl .tlm-fw-schreib .markItUpContainer,
.tlm-fw-tbl .tlm-fw-schreib textarea{width:100% !important;max-width:100%;box-sizing:border-box;}

/* Die Knopfleiste bricht auf mehrere Reihen um. Ihre feste Hoehe liess
   die zweite Reihe hinter der ersten verschwinden. Umgestellt wird sie
   nicht: markItUp setzt die Knoepfe mit float und haengt die Untermenues
   absolut darunter - beides muss so bleiben. */
.tlm-fw-tbl .markItUpHeader,
.tlm-fw-tbl .markItUpHeader > ul{
  height:auto !important;min-height:0 !important;overflow:visible !important;
}
.tlm-fw-tbl .markItUpHeader > ul::after{content:"";display:block;clear:both;}

/* Die Untermenues der Knopfleiste (Schriftart, Farbe, Videoanbieter)
   waren nur durch den beschnittenen Rand der Leiste verborgen. Da die
   Leiste jetzt ueberstehen darf, werden sie ausdruecklich eingeklappt
   und erst beim Ueberfahren gezeigt. */
.tlm-fw-tbl .markItUpHeader > ul > li{position:relative;}
.tlm-fw-tbl .markItUpHeader > ul > li > ul{
  display:none;position:absolute;top:100%;left:0;z-index:60;
  min-width:150px;padding:4px 0;
  border:1px solid var(--line);background:var(--bg-panel-2);
  box-shadow:0 12px 28px rgb(var(--shadow-rgb) / .7);
}
.tlm-fw-tbl .markItUpHeader > ul > li:hover > ul,
.tlm-fw-tbl .markItUpHeader > ul > li:focus-within > ul{display:block;}
.tlm-fw-tbl .markItUpHeader > ul > li > ul li{float:none;width:auto;}
.tlm-fw-tbl .markItUpHeader > ul > li > ul a{
  display:block;padding:5px 14px;color:var(--text-dim);text-decoration:none;
}
.tlm-fw-tbl .markItUpHeader > ul > li > ul a:hover{
  background:rgb(var(--gold-rgb) / .14);color:var(--gold-light);
}

/* Beschriftungsspalte der Schreibmaske: gleiche Breite wie die
   Smilie-Spalte, damit alle Eingabefelder in einer Flucht beginnen. */
.tlm-fw-tbl .tlm-fw-lbl{width:212px;vertical-align:top;}

/* Die Symbole der Knopfleiste liegen in einem Streifenbild mit 22 Pixel
   Raster. Die Knoepfe waren 28 Pixel hoch, weshalb vom naechsten Symbol
   ein Streifen unten hereinschaute. */
.tlm-fw-tbl .markItUpHeader > ul > li > a{
  box-sizing:content-box;
  width:22px;height:22px;padding:0;margin:0;
  overflow:hidden;display:block;
}
.tlm-fw-tbl .markItUpHeader > ul > li{height:22px;line-height:22px;}

/* Gaeste sehen statt der eigenen Signatur ein Standardbanner */
.signatur.gast img{max-width:500px;width:100%;height:auto;opacity:.5;display:block;margin:0 auto;}
.avatar-gast{width:100%;height:100%;object-fit:cover;display:block;}