/* ===================================================================
   True Legends - Golden Hour
   Startseite: Banner, Header-Tabelle, Forenzeilen, Bereiche
   =================================================================== */

/* ============ Kategorie-Banner ============
   Ein Motivstreifen für alle Kategorien; jede zeigt einen anderen Ausschnitt
   (--pos). Der Text liegt per CSS darüber, ist also jederzeit änderbar und
   muss nicht ins Bild gebrannt werden. */
.cat-banner{
  position:relative;
  min-height:152px;
  /* Kein Abstand — weder nach unten zur ersten Forenzeile noch nach oben
     zum letzten Forum der vorigen Kategorie. Alle Rahmen überlappen sich
     zu je einer Linie, die Übersicht liest sich als eine Tabelle. */
  margin:-1px 0;
  border:1px solid var(--line);
  background-image:url(/images/goldenhour/cat-banner.jpg);
  background-size:cover;
  background-position:var(--pos,center);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:4px;padding:18px 26px;overflow:hidden;
}
.cat-banner:first-child{margin-top:0;}
/* Abdunkler, damit die Schrift auf jedem Ausschnitt trägt */
.cat-banner::before{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgb(var(--shadow-rgb) / .30),rgb(var(--shadow-rgb) / .55)),
    radial-gradient(58% 100% at 50% 50%,rgb(var(--shadow-rgb) / .62),rgb(var(--shadow-rgb) / .12));
}
.cat-banner h2{
  position:relative;z-index:1;margin:0;
  font-family:var(--caps);
  font-size:clamp(1.6rem,2.6vw,2.15rem);letter-spacing:.2em;text-transform:uppercase;
  line-height:1.15;
  background:var(--metal);-webkit-background-clip:text;background-clip:text;color:transparent;
  text-align:center;
  filter:drop-shadow(0 2px 6px rgb(var(--shadow-rgb) / .95));
}
.cat-banner .motto{
  position:relative;z-index:1;
  font-family:var(--serif);font-style:italic;
  font-size:clamp(1.05rem,1.5vw,1.28rem);
  color:var(--text);text-align:center;
  text-shadow:0 1px 3px rgb(var(--shadow-rgb) / 1),0 2px 12px rgb(var(--shadow-rgb) / .95);
}

/* ============ Sektionstitel ============ */
.section-title{
  font-family:var(--caps);font-size:1.16rem;letter-spacing:.24em;text-transform:uppercase;
  background:var(--metal);-webkit-background-clip:text;background-clip:text;color:transparent;
  margin:40px 0 14px;padding-bottom:9px;border-bottom:1px solid var(--line);
  display:flex;align-items:baseline;justify-content:space-between;gap:16px;
}
.section-title:first-child{margin-top:0;}
.section-title .motto{
  font-family:var(--serif);font-style:italic;text-transform:none;letter-spacing:.02em;
  font-size:.92rem;color:var(--text-faint);-webkit-text-fill-color:var(--text-faint);
}

/* ============ Header-Tabelle ============
   Zwei große Reiter (Welcome / Tales of Immortals), darunter drei Spalten.
   Jede Spalte kann mehrere Inhalte tragen, umschaltbar über Icons. */
.htab{margin-bottom:8px;}
.htab-tabs{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:2px;}
.htab-tabs button{
  appearance:none;cursor:pointer;
  border:1px solid var(--line);border-bottom:0;
  background:linear-gradient(180deg,var(--tab-1),rgb(var(--bg-rgb) / .28));
  color:var(--text-dim);
  font-family:var(--caps);font-size:12px;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;
  padding:16px 20px;
  display:flex;align-items:center;justify-content:center;gap:10px;
  transition:color .16s ease,background .16s ease,border-color .16s ease;
}
.htab-tabs button svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.4;flex:none;}
.htab-tabs button:hover{color:var(--gold-light);background:linear-gradient(180deg,var(--tile-1),var(--bg-panel));}
.htab-tabs button[aria-selected="true"]{
  color:var(--gold-light);
  border-color:var(--gold-deep);
  background:linear-gradient(180deg,rgb(var(--gold-rgb) / .28),var(--bg-panel) 70%);
  box-shadow:inset 0 2px 0 var(--gold);
}
.htab-panel{
  border:1px solid var(--line);border-top-color:var(--gold-deep);
  background:rgb(var(--panel-rgb) / .55);
  padding:22px;
}

.hcols{display:grid;grid-template-columns:1.3fr 1.25fr 1.25fr;gap:18px;}
.hcol{display:flex;flex-direction:column;min-width:0;}
.hcol > h3{
  text-align:center;
  font-size:1.22rem;letter-spacing:.26em;text-transform:uppercase;
  background:var(--metal);-webkit-background-clip:text;background-clip:text;color:transparent;
  margin-bottom:12px;
}
.hcol-box{
  flex:1;display:flex;flex-direction:column;
  border:1px solid var(--line);background:var(--bg-panel);
  padding:16px 18px 18px;
}
/* Icon-Umschalter innerhalb einer Spalte */
.hcol-switch{display:flex;justify-content:center;gap:9px;margin-bottom:14px;}
.hcol-switch button{
  appearance:none;cursor:pointer;
  width:46px;height:46px;
  border:1px solid var(--line);border-radius:7px;background:rgb(var(--bg-rgb) / .6);
  display:flex;align-items:center;justify-content:center;
  transition:border-color .16s ease,background .16s ease;
}
.hcol-switch button svg{width:20px;height:20px;stroke:var(--text-faint);fill:none;stroke-width:1.35;
  stroke-linecap:round;stroke-linejoin:round;transition:stroke .16s ease;}
.hcol-switch button:hover{border-color:var(--gold-deep);}
.hcol-switch button:hover svg{stroke:var(--gold-soft);}
.hcol-switch button[aria-selected="true"]{
  border-color:var(--gold);background:rgb(var(--gold-rgb) / .14);
}
.hcol-switch button[aria-selected="true"] svg{stroke:var(--gold-light);}

.hcol-sub{
  text-align:center;
  font-family:var(--caps);font-size:.78rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--gold-soft);
  padding-bottom:9px;margin-bottom:13px;border-bottom:1px solid var(--line);
}
.hcol-body{font-size:.93rem;color:var(--text-dim);overflow:auto;max-height:250px;flex:1;}
.hcol-body p{margin:0 0 10px;}
.hcol-body p:last-child{margin-bottom:0;}
.hcol-body strong{color:var(--text);font-weight:600;}
.hcol-body a{color:var(--blue);}
.hcol-body a:hover{color:var(--gold);}

/* Vorstellungen der Bereiche */
.mb-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:14px;}
.mb-card{
  border:1px solid var(--line);background:var(--bg-panel);
  padding:16px 18px 15px;display:flex;flex-direction:column;gap:7px;
  transition:border-color .18s ease;
}
.mb-card:hover{border-color:var(--gold-deep);}
/* Die Vorstellungstexte sind lang — eigener Bildlauf, damit alle Karten
   gleich hoch bleiben und das Raster nicht auseinanderfällt. */
.mb-card .mb-text{
  max-height:184px;overflow-y:auto;overscroll-behavior:contain;
  font-size:.93rem;color:var(--text-dim);line-height:1.55;
  padding-right:6px;
}
.mb-card .mb-text p{margin:0 0 9px;}
.mb-card .mb-text p:last-child{margin-bottom:0;}
.mb-card .mb-links{display:flex;flex-wrap:wrap;gap:5px;margin-top:2px;}
.mb-card .mb-links a{
  flex:1 1 auto;text-align:center;
  padding:6px 10px;border:1px solid var(--line);
  background:linear-gradient(180deg,rgb(var(--line-rgb) / .55),rgb(var(--panel2-rgb) / .55));
  font-family:var(--caps);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--text-dim);white-space:nowrap;
  transition:border-color .16s ease,color .16s ease,background .16s ease;
}
.mb-card .mb-links a:hover{
  border-color:var(--gold-deep);color:var(--gold-light);
  background:linear-gradient(180deg,rgb(var(--gold-rgb) / .26),rgb(var(--panel2-rgb) / .7));
}
.mb-card .admin{
  font-family:var(--caps);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-faint);
}
.mb-card h4{
  font-size:1.26rem;letter-spacing:.06em;
  background:var(--metal);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.mb-card .fandom{
  font-family:var(--caps);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--text-faint);margin-top:-4px;
}
.mb-card .quote{font-style:italic;color:var(--gold-soft);font-size:.93rem;}
.mb-card p{margin:0;font-size:.9rem;color:var(--text-dim);line-height:1.5;}
.mb-card .when{
  margin-top:auto;padding-top:9px;border-top:1px solid var(--line);
  font-family:var(--caps);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--text-faint);display:flex;justify-content:space-between;gap:10px;
}
.mb-card .when b{color:var(--text-dim);font-weight:400;font-variant-numeric:tabular-nums;}

/* ============ Infobox-Reihe (Rest: News etc.) ============ */
.infogrid{display:grid;grid-template-columns:1.9fr 1fr 1.25fr;gap:16px;}
.infobox{
  background:var(--bg-panel);border:1px solid var(--line);
  display:flex;flex-direction:column;min-height:0;
}
.infobox > h3{
  font-size:.72rem;letter-spacing:.26em;text-transform:uppercase;
  padding:11px 18px;border-bottom:1px solid var(--line);
  background:var(--bg-panel-2);color:var(--gold-soft);
  display:flex;align-items:center;gap:10px;
}
.infobox > h3::before{content:"";width:5px;height:5px;background:var(--gold);transform:rotate(45deg);flex:none;}
.infobox .body{padding:16px 18px;font-size:.95rem;color:var(--text-dim);overflow:auto;max-height:260px;}
.infobox .body p{margin:0 0 10px;}
.infobox .body p:last-child{margin-bottom:0;}
.infobox .body strong{color:var(--text);font-weight:600;}

.teamlist{display:flex;flex-direction:column;gap:12px;}
.teamrow{display:flex;gap:11px;align-items:center;}
.teamrow .ava{
  width:40px;height:40px;flex:none;border:1px solid var(--gold-deep);
  background:linear-gradient(160deg,var(--tile-1),var(--tile-2));
  display:flex;align-items:center;justify-content:center;
  font-family:var(--display);font-size:.9rem;color:var(--gold-soft);
}
.teamrow > div:last-child{min-width:0;}
.teamrow .who{display:block;font-family:var(--display);font-size:.95rem;letter-spacing:.06em;color:var(--text);line-height:1.35;}
.teamrow .when{display:block;font-size:.9rem;color:var(--text-faint);line-height:1.35;}
.online-dot{width:7px;height:7px;border-radius:50%;background:var(--online);display:inline-block;box-shadow:0 0 7px var(--online);}

.inplay-list{list-style:none;margin:0;padding:0;font-size:.88rem;}
.inplay-list li{
  display:flex;justify-content:space-between;gap:12px;
  padding:5px 0;border-bottom:1px dashed rgb(var(--line-rgb) / .7);
}
.inplay-list li:last-child{border-bottom:0;}
.inplay-list .rpg{color:var(--text);letter-spacing:.02em;}
.inplay-list .span{color:var(--text-faint);font-variant-numeric:tabular-nums;white-space:nowrap;}

/* ============ News ============ */
.newsbox{margin-top:16px;}
.newsline{
  display:grid;grid-template-columns:64px 1fr;gap:14px;
  padding:7px 0;border-bottom:1px dashed rgb(var(--line-rgb) / .7);font-size:.92rem;
}
.newsline:last-child{border-bottom:0;}
.newsline .date{
  font-family:var(--display);font-size:.78rem;letter-spacing:.06em;
  color:var(--gold-soft);font-variant-numeric:tabular-nums;padding-top:3px;
}

/* ============ Board-Zeilen ============ */
.board{
  display:grid;
  grid-template-columns:104px minmax(0,1.55fr) minmax(0,.95fr) minmax(0,1.15fr);
  background:var(--bg-panel);
  border:1px solid var(--line);
  /* Kein Abstand: Kategorie und ihre Foren bilden einen Block, die Rahmen
     überlappen sich zu einer einzigen Trennlinie statt zu doppeln. */
  margin-bottom:-1px;
  overflow:hidden;
  transition:border-color .18s ease;
}
/* Beim Überfahren nach vorn, damit der goldene Rahmen nicht vom
   nachfolgenden Element überdeckt wird. */
.board:hover{border-color:var(--gold-deep);position:relative;z-index:1;}

/* Hinter den Mondphasen steht nur der Sternenhimmel — kein Garten, keine Mauer */
.board .thumb{
  position:relative;
  border-right:1px solid var(--line);
  background-image:url(/images/goldenhour/sky.jpg);
  background-size:cover;
  display:flex;align-items:center;justify-content:center;
}
.board .thumb::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgb(var(--shadow-rgb) / .30),rgb(var(--shadow-rgb) / .58));}

/* Mondphasen-Status: Vollmond = neue Beiträge, Sichel = gelesen */
.moon{
  position:relative;z-index:1;
  width:62px;height:62px;flex:none;
  background-repeat:no-repeat;background-position:center;background-size:contain;
}
.moon.new{
  background-image:url(/images/goldenhour/moon-new.png);
  filter:drop-shadow(0 0 10px rgb(var(--gold-light-rgb) / .5));
}
/* Die Sichel darf nicht heruntergedimmt werden — sie ist ohnehin die
   zurückhaltendere Grafik und war bei halber Deckkraft kaum zu erkennen.
   Der Unterschied kommt aus dem Motiv, nicht aus der Transparenz. */
.moon.read{
  background-image:url(/images/goldenhour/moon-read.png);
  opacity:.92;
}

.board .main{padding:15px 20px;border-right:1px solid var(--line);min-width:0;}
.board .main h3{font-size:1.34rem;letter-spacing:.04em;margin-bottom:5px;line-height:1.25;}
.board .main h3 a{
  color:var(--text);
  text-decoration:underline;
  text-decoration-color:var(--gold-deep);
  text-decoration-thickness:1px;
  text-underline-offset:6px;
  transition:color .16s ease,text-decoration-color .16s ease;
}
.board .main h3 a:hover{color:var(--gold-light);text-decoration-color:var(--gold);}
/* Der hervorgehobene Anfangsbuchstabe kommt aus dem Stylesheet, nicht aus
   dem Markup - ein MyBB-Template kann den Forennamen nicht aufteilen.
   Bewusst Goldton statt Verlauf: mit background-clip auf ::first-letter
   waere der Buchstabe unsichtbar, wo der Browser das nicht unterstuetzt. */
.board .main h3::first-letter{
  font-size:1.38em;
  color:var(--gold-light);
}
.board .main p{margin:0;font-size:.93rem;color:var(--text-dim);line-height:1.5;}
.board .main p a{color:var(--blue);border-bottom:1px solid transparent;}
.board .main p a:hover{color:var(--gold);border-bottom-color:var(--gold-deep);}
.board .main .admin{
  display:block;margin-top:7px;
  font-family:var(--caps);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--text-faint);
}

/* Unterforen als gestapelte Schaltflächen.
   Feste Maximalhöhe mit eigenem Bildlauf — sonst treibt ein Forum mit
   vierzehn Unterforen die ganze Zeile auseinander. */
.board .subs{
  padding:13px 14px;border-right:1px solid var(--line);
  background:rgb(var(--shadow-rgb) / .32);
  display:flex;flex-direction:column;gap:5px;justify-content:flex-start;min-width:0;
  max-height:146px;overflow-y:auto;overscroll-behavior:contain;
}
/* Passen alle hinein, stehen sie mittig statt oben */
.board .subs:not(:hover){scrollbar-color:var(--gold-deep) transparent;}
.board .subs a{
  display:block;text-align:center;
  padding:7px 9px;
  border:1px solid var(--line);
  background:linear-gradient(180deg,rgb(var(--line-rgb) / .55),rgb(var(--panel2-rgb) / .55));
  font-family:var(--caps);
  font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--text-dim);
  /* Lange Namen umbrechen statt abschneiden — abgeschnittene Forennamen
     sind wertlos, eine zweite Zeile kostet nichts. */
  white-space:normal;overflow-wrap:anywhere;line-height:1.25;
  transition:border-color .16s ease,color .16s ease,background .16s ease;
}
.board .subs a:hover{
  border-color:var(--gold-deep);color:var(--gold-light);
  background:linear-gradient(180deg,rgb(var(--gold-rgb) / .26),rgb(var(--panel2-rgb) / .7));
}
.board .subs .more{
  display:block;text-align:center;padding:5px 10px;
  color:var(--text-faint);font-family:var(--caps);
  font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;
}

.board .stats{padding:13px 18px;display:flex;flex-direction:column;justify-content:center;gap:9px;min-width:0;}
.board .counts{display:flex;gap:22px;}
.board .counts div{font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--text-faint);font-family:var(--caps);}
.board .counts b{
  display:block;font-family:var(--display);font-size:1.32rem;font-weight:600;letter-spacing:.02em;
  font-variant-numeric:tabular-nums;
  background:var(--metal);-webkit-background-clip:text;background-clip:text;color:transparent;
}
/* Letzter Beitrag: Titel + Zeile darunter, rechts das Avatar des Posters */
.lastpost{
  border-top:1px solid var(--line);padding-top:9px;
  display:grid;grid-template-columns:minmax(0,1fr) 96px;gap:14px;align-items:center;
}
.lastpost .lp-title{
  display:block;
  font-family:var(--display);font-size:1.18rem;letter-spacing:.03em;color:var(--text);
  line-height:1.25;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.lastpost .lp-title:hover{color:var(--gold-light);}
.lastpost .lp-title::first-letter{
  font-size:1.24em;
  color:var(--gold-light);
}
.lastpost .lp-meta{
  margin-top:6px;padding-top:6px;border-top:1px solid var(--line);
  text-align:center;
  font-family:var(--caps);font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--text-faint);line-height:1.6;
}
.lastpost .lp-meta a{color:var(--blue);}
.lastpost .lp-meta a:hover{color:var(--gold);}
.lastpost .lp-meta .when{display:block;font-variant-numeric:tabular-nums;}
.lastpost .lp-ava{
  width:96px;height:96px;flex:none;
  border:1px solid var(--gold-deep);
  background-image:url(/images/goldenhour/header-mittig.jpg);
  background-size:335px auto;
  position:relative;
  transition:border-color .16s ease;
}
.lastpost .lp-ava::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 14px rgb(var(--shadow-rgb) / .7);}
.lastpost .lp-ava:hover{border-color:var(--gold);}
.lastpost.empty{grid-template-columns:1fr;}
.lastpost .lp-empty{
  font-family:var(--caps);font-size:.66rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--text-faint);
}

/* ============ Miniboard-Kategorie (klappbar) ============ */
.mini{border:1px solid var(--line);background:var(--bg-panel);margin-bottom:-1px;}
/* Drei Spalten: Name des Bereichs, Beschreibung, letzter Inplay-Post */
.mini > header{
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1.05fr) minmax(0,.95fr) 44px;
  gap:0;border-bottom:1px solid var(--line);background:var(--bg-panel-2);
}
.mini .mini-last{
  padding:16px 20px;border-right:1px solid var(--line);min-width:0;
  display:flex;flex-direction:column;justify-content:center;
}
.mini .mini-last > h5{
  font-family:var(--caps);font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--text-faint);margin:0 0 8px;font-weight:400;
}
.mini .mini-last .lastpost{border-top:0;padding-top:0;}
.mini .mini-id{padding:18px 22px;border-right:1px solid var(--line);min-width:0;}
.mini .mini-id h2{
  font-size:1.62rem;letter-spacing:.1em;text-transform:lowercase;font-variant:small-caps;
  background:var(--metal);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.mini .mini-id .quote{
  margin-top:4px;font-style:italic;font-size:.95rem;color:var(--text-dim);
}
.mini .mini-id .quote cite{display:block;font-style:normal;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--text-faint);margin-top:5px;font-family:var(--caps);}
.mini .mini-desc{padding:18px 22px;font-size:.9rem;color:var(--text-dim);border-right:1px solid var(--line);min-width:0;}
.mini .mini-desc a{color:var(--blue);}
.mini .toggle{
  appearance:none;background:none;border:0;cursor:pointer;
  color:var(--gold-soft);font-family:var(--display);font-size:1.1rem;
  display:flex;align-items:center;justify-content:center;
}
.mini .toggle:hover{color:var(--gold-light);}
.mini .mini-body{padding:14px;}
.mini .mini-body .board:last-child{margin-bottom:0;}
.mini[data-collapsed="true"] .mini-body{display:none;}

/* Themenzeilen sind wie die Forenzeilen am Index aufgebaut, nur ohne die
   Spalte für Unterforen — dafür mit Präfix und Ersteller. */
.board.thema{grid-template-columns:104px minmax(0,1.9fr) minmax(0,1.15fr);}
.board.thema .main{display:flex;flex-direction:column;justify-content:center;gap:5px;}
.board.thema .main h3{margin-bottom:0;}
.board.thema .prefix{
  display:inline-block;vertical-align:2px;margin-right:9px;
  font-family:var(--caps);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  border:1px solid var(--gold-deep);color:var(--gold-light);padding:2px 9px;
}
.board.thema .prefix.wichtig{border-color:var(--blue-soft);color:#8fa8d8;}
.board.thema .von{
  font-family:var(--caps);font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--text-faint);
}
.board.thema .von a{color:var(--blue);}

/* ---- Mondphasen an MyBBs Zustandsnamen koppeln ----
   MyBB liefert im Forenbit "on" (neue Beitraege), "off" (gelesen),
   "offlock"/"offlink" (geschlossen bzw. Weiterleitung). Die Klassen
   "new"/"read" bleiben zusaetzlich gueltig, damit die Legende im
   index-Template dieselben Namen benutzen kann wie der Prototyp. */
.moon.on{
  background-image:url(/images/goldenhour/moon-new.png);
  filter:drop-shadow(0 0 10px rgb(var(--gold-light-rgb) / .5));
}
.moon.off,
.moon.offlock,
.moon.offlink,
.moon.zu{
  background-image:url(/images/goldenhour/moon-read.png);
  opacity:.92;
}
/* Geschlossene Foren und Weiterleitungen treten zusaetzlich zurueck */
.moon.offlock,
.moon.zu{opacity:.6;}
.moon.ajax_mark_read{cursor:pointer;}

/* Der Avatar des letzten Posters kommt als <img> aus dem Board und nicht
   mehr als Hintergrundbild wie im Entwurf. */
.lastpost .lp-ava{background-image:none;display:block;overflow:hidden;}
.lastpost .lp-ava img{width:100%;height:100%;object-fit:cover;display:block;}
/* Ohne letzten Beitrag bleibt die Avatarspalte leer statt zu klaffen */
.lastpost.leer{grid-template-columns:1fr;}
.lastpost.leer .lp-title{color:var(--text-faint);font-style:italic;font-size:1rem;}

/* ---- Feste Spaltenzuweisung ----
   Die Unterforen-Ausgabe schiebt gelegentlich ein leeres <a> als
   direktes Kind in die Zeile; ohne feste Zuweisung rutscht dadurch
   alles eine Spalte weiter und die Zahlen fallen in die naechste Zeile. */
.board > a{display:none;}
.board .thumb{grid-column:1;}
.board .main {grid-column:2;}
.board .subs {grid-column:3;}
.board .stats{grid-column:4;}

/* ---- Kategorienamen ----
   Der Forenname bleibt unveraendert, weil das Miniboard-Plugin ihn
   braucht. Angezeigt wird er nur ueberschrieben: der Originaltext haelt
   unsichtbar den Platz, die Beschriftung liegt zentriert darueber. */
#cat-1 h2 a, #cat-14 h2 a, #cat-33 h2 a, #cat-71 h2 a,
#cat-876 h2 a, #cat-81 h2 a, #cat-96 h2 a{visibility:hidden;position:relative;}
#cat-1 h2 a::after, #cat-14 h2 a::after, #cat-33 h2 a::after, #cat-71 h2 a::after,
#cat-876 h2 a::after, #cat-81 h2 a::after, #cat-96 h2 a::after{
  visibility:visible;position:absolute;left:50%;top:0;transform:translateX(-50%);
  white-space:nowrap;
}
#cat-1   h2 a::after{content:"Mythos & Lore";}
#cat-14  h2 a::after{content:"Ascend Your Fate";}
#cat-33  h2 a::after{content:"Tales of Immortals";}
#cat-71  h2 a::after{content:"Tales of Immortals";}
#cat-876 h2 a::after{content:"Tales of Immortals";}
#cat-81  h2 a::after{content:"Friends all around the World";}
#cat-96  h2 a::after{content:"Guardians of Order";}

/* ---- Ein- und Ausklappen ----
   Nur die Inplay-Kategorien lassen sich klappen. Das weisse Bild von
   MyBB bleibt im Markup, damit dessen Skript weiter greift, wird aber
   durch ein Plus- bzw. Minuszeichen ersetzt. */
.cat-banner .klapp img{display:none;}
.cat-banner .klapp{display:none;}
#cat-33 .klapp, #cat-71 .klapp, #cat-876 .klapp{
  display:flex;align-items:center;justify-content:center;
  position:absolute;right:16px;top:50%;transform:translateY(-50%);
  width:30px;height:30px;cursor:pointer;z-index:3;
  border:1px solid var(--gold-deep);
  background:rgb(var(--shadow-rgb) / .55);
  color:var(--gold-light);
  font-family:var(--display);font-size:1.5rem;line-height:1;
  transition:background .16s ease,border-color .16s ease;
}
#cat-33 .klapp:hover, #cat-71 .klapp:hover, #cat-876 .klapp:hover{
  background:rgb(var(--gold-rgb) / .3);border-color:var(--gold);
}
.cat-banner .klapp::after{content:"\2212";}          /* Minus: offen */
.cat-banner._collapsed .klapp::after{content:"+";}    /* Plus: zugeklappt */

/* ---- Vorstellung des Miniboards ----
   Bekommt einen eigenen Bildlauf, damit die Startseite nicht waechst,
   wenn weitere Bereiche dazukommen. */
.mb-vorstellung:not(:empty){
  max-height:300px;overflow-y:auto;
  border:1px solid var(--line);border-bottom:0;
  background:rgb(var(--shadow-rgb) / .25);
  padding:16px 20px;
}
.mb-vorstellung table{width:100%;}

/* ---- Kategorien: vollstaendige Liste fuer Live und Testforum ----
   Die fids weichen zwischen beiden Foren ab, deshalb stehen hier beide
   Saetze. Inplay sind im Live zehn Kategorien (1002-1012 plus 33), im
   Testforum 33, 71 und 876. */
#cat-1 h2 a, #cat-14 h2 a, #cat-33 h2 a, #cat-71 h2 a, #cat-81 h2 a, #cat-96 h2 a,
#cat-876 h2 a, #cat-1002 h2 a, #cat-1003 h2 a, #cat-1004 h2 a, #cat-1005 h2 a,
#cat-1006 h2 a, #cat-1007 h2 a, #cat-1009 h2 a, #cat-1011 h2 a, #cat-1012 h2 a{
  visibility:hidden;position:relative;
}
#cat-1 h2 a::after, #cat-14 h2 a::after, #cat-33 h2 a::after, #cat-71 h2 a::after,
#cat-81 h2 a::after, #cat-96 h2 a::after, #cat-876 h2 a::after,
#cat-1002 h2 a::after, #cat-1003 h2 a::after, #cat-1004 h2 a::after, #cat-1005 h2 a::after,
#cat-1006 h2 a::after, #cat-1007 h2 a::after, #cat-1009 h2 a::after,
#cat-1011 h2 a::after, #cat-1012 h2 a::after{
  visibility:visible;position:absolute;left:50%;top:0;transform:translateX(-50%);
  white-space:nowrap;
}
#cat-1    h2 a::after{content:"Mythos & Lore";}
#cat-14   h2 a::after{content:"Ascend Your Fate";}
#cat-81   h2 a::after{content:"Friends all around the World";}
#cat-96   h2 a::after{content:"Guardians of Order";}
#cat-33   h2 a::after,
#cat-71   h2 a::after,
#cat-876  h2 a::after,
#cat-1002 h2 a::after,
#cat-1003 h2 a::after,
#cat-1004 h2 a::after,
#cat-1005 h2 a::after,
#cat-1006 h2 a::after,
#cat-1007 h2 a::after,
#cat-1009 h2 a::after,
#cat-1011 h2 a::after,
#cat-1012 h2 a::after{content:"Tales of Immortals";}

/* Klappschalter an allen Inplay-Kategorien beider Foren */
#cat-33 .klapp, #cat-71 .klapp, #cat-876 .klapp,
#cat-1002 .klapp, #cat-1003 .klapp, #cat-1004 .klapp, #cat-1005 .klapp,
#cat-1006 .klapp, #cat-1007 .klapp, #cat-1009 .klapp, #cat-1011 .klapp, #cat-1012 .klapp{
  display:flex;align-items:center;justify-content:center;
  position:absolute;right:16px;top:50%;transform:translateY(-50%);
  width:30px;height:30px;cursor:pointer;z-index:3;
  border:1px solid var(--gold-deep);
  background:rgb(var(--shadow-rgb) / .55);
  color:var(--gold-light);
  font-family:var(--display);font-size:1.5rem;line-height:1;
  transition:background .16s ease,border-color .16s ease;
}
#cat-33 .klapp:hover, #cat-71 .klapp:hover, #cat-876 .klapp:hover,
#cat-1002 .klapp:hover, #cat-1003 .klapp:hover, #cat-1004 .klapp:hover, #cat-1005 .klapp:hover,
#cat-1006 .klapp:hover, #cat-1007 .klapp:hover, #cat-1009 .klapp:hover,
#cat-1011 .klapp:hover, #cat-1012 .klapp:hover{
  background:rgb(var(--gold-rgb) / .3);border-color:var(--gold);
}

/* ---- Vorstellung des Miniboards: Plugin-Ausgabe einkleiden ----
   Der Miniboard Hub liefert eine Tabelle mit drei Spalten:
   Name (.box3-tit), Beschreibung (.box3-txt), letzter Beitrag
   (.box3-last). Das Plugin bringt kein eigenes Aussehen mit, es erbt
   sonst die dunkle Standardschrift auf dunklem Grund. */
.mb-vorstellung table,
.mb-vorstellung tbody,
.mb-vorstellung tr{background:none;border:0;}
.mb-vorstellung td{
  background:none;border:0;border-right:1px solid var(--line);
  padding:4px 18px;vertical-align:top;color:var(--text-dim);
}
.mb-vorstellung td:last-child{border-right:0;}
.mb-vorstellung tr:hover td{background:none;}

.mb-vorstellung .box3-tit{
  font-family:var(--display);font-size:1.32rem;letter-spacing:.03em;
  color:var(--gold-light);line-height:1.25;margin-bottom:6px;
}
.mb-vorstellung .box3-txt{font-size:.93rem;line-height:1.55;color:var(--text-dim);}
.mb-vorstellung .box3-txt strong{color:var(--text);font-weight:400;}
.mb-vorstellung .box3-txt small{color:var(--text-faint);font-size:.82rem;}

/* Letzter Beitrag: Bild links, Angaben rechts */
.mb-vorstellung .box3-last{
  display:grid;grid-template-columns:52px minmax(0,1fr);gap:12px;align-items:center;
  font-size:.88rem;
}
.mb-vorstellung .box3-last img{
  width:52px;height:52px;object-fit:cover;display:block;
  box-shadow:inset 0 0 0 1px rgb(var(--gold-rgb) / .45);
}
.mb-vorstellung .box3-last a{color:var(--gold-light);}
.mb-vorstellung .box3-last a:hover{color:var(--gold);}
.mb-vorstellung .box3-last .smalltext{color:var(--text-faint);font-size:.8rem;}

/* ---- Nachtrag: Kategoriebanner ---- */

/* Alle Banner gleich hoch, unabhaengig von der Laenge des Zitats */
.cat-banner{height:152px;min-height:0;}

/* Der Titel ist ein Link und zog sich die blaue Linkfarbe. Transparent
   gesetzt, damit der metallische Verlauf des h2 wieder durchscheint. */
.cat-banner h2 a{
  color:transparent;-webkit-text-fill-color:transparent;
  background:none;text-decoration:none;
}

/* Das Zitat steht im Stylesheet, nicht in den Forendaten: die
   Kategoriebeschreibung ist die Vorstellung des Miniboards und gehoert
   in die Tabelle darunter, nicht auf das Bild. */
#cat-1    .motto::after{content:"\201EKnow the rules before you break them.\201C";}
#cat-14   .motto::after{content:"\201EEvery legend begins with a name.\201C";}
#cat-81   .motto::after{content:"\201ENo story stands alone.\201C";}
#cat-96   .motto::after{content:"\201EBehind every world, someone holds the thread.\201C";}
#cat-33   .motto::after{content:"\201EFamily don\2019t end with blood, boy.\201C \2014 Bobby Singer";}
#cat-71   .motto::after,
#cat-1002 .motto::after{content:"\201EAll the legends are true.\201C";}
#cat-876  .motto::after,
#cat-1003 .motto::after{content:"\201EMagic can be dangerous, as you well know.\201C";}
#cat-1004 .motto::after{content:"\201EThe power of three will set us free\201C";}
#cat-1005 .motto::after{content:"\201EChoices define who we are.\201C";}
#cat-1006 .motto::after{content:"\201EEvery ending is a new beginning.\201C";}
#cat-1007 .motto::after{content:"\201EThe wild does not forget its own.\201C";}
#cat-1009 .motto::after{content:"\201EEven gods must fall sometime.\201C";}
#cat-1011 .motto::after{content:"\201EFate wears many masks.\201C";}
#cat-1012 .motto::after{content:"\201EWhere every story finds its place.\201C";}

/* MyBBs Skript haengt am Bild, nicht am Rahmen. Es bleibt deshalb
   klickbar - unsichtbar ueber die ganze Schalterflaeche gezogen. */
.cat-banner .klapp img{
  display:block;opacity:0;cursor:pointer;
  position:absolute;inset:0;width:100%;height:100%;
}

/* ---- Nachtrag 2 ---- */

/* Der Titel war unsichtbar: durch background:none fehlte der Verlauf,
   auf den die transparente Schrift zeigt. Der Verlauf gehoert deshalb
   auf den Link selbst, nicht nur auf das h2. */
.cat-banner h2 a{
  background:var(--metal);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
  text-decoration:none;
}

/* Die deutschen Anfuehrungszeichen fehlen in der Schrift und erschienen
   als Fragezeichen - hier stehen die englischen, die jede Schrift hat. */
#cat-1    .motto::after{content:"\201CKnow the rules before you break them.\201D";}
#cat-14   .motto::after{content:"\201CEvery legend begins with a name.\201D";}
#cat-81   .motto::after{content:"\201CNo story stands alone.\201D";}
#cat-96   .motto::after{content:"\201CBehind every world, someone holds the thread.\201D";}
#cat-33   .motto::after{content:"\201CFamily don\2019t end with blood, boy.\201D \2014 Bobby Singer";}
#cat-71   .motto::after,
#cat-1002 .motto::after{content:"\201CAll the legends are true.\201D";}
#cat-876  .motto::after,
#cat-1003 .motto::after{content:"\201CMagic can be dangerous, as you well know.\201D";}
#cat-1004 .motto::after{content:"\201CThe power of three will set us free\201D";}
#cat-1005 .motto::after{content:"\201CChoices define who we are.\201D";}
#cat-1006 .motto::after{content:"\201CEvery ending is a new beginning.\201D";}
#cat-1007 .motto::after{content:"\201CThe wild does not forget its own.\201D";}
#cat-1009 .motto::after{content:"\201CEven gods must fall sometime.\201D";}
#cat-1011 .motto::after{content:"\201CFate wears many masks.\201D";}
#cat-1012 .motto::after{content:"\201CWhere every story finds its place.\201D";}

/* Die Unterforen-Ausgabe liefert einen leeren Link mit, der als
   namenloser Balken ueber dem ersten Unterforum stand. */
.board .subs a:empty{display:none;}

/* ---- Alle Forenzeilen gleich hoch ----
   Bisher bestimmte die Laenge der Beschreibung die Hoehe; besonders
   Inplay-Orte mit vielen Unterforen fielen aus der Reihe. Jetzt gilt ein
   festes Mass, und was nicht hineinpasst, bekommt seinen eigenen
   Bildlauf statt die Zeile zu dehnen. */
.board{height:190px;}
.board .main{display:flex;flex-direction:column;min-height:0;}
.board .main p{overflow-y:auto;min-height:0;}
.board .subs{overflow-y:auto;min-height:0;align-content:flex-start;}
.board .stats{overflow:hidden;}
/* Der Bildlauf soll nur auffallen, wenn er gebraucht wird */
.board .main p::-webkit-scrollbar,
.board .subs::-webkit-scrollbar{width:6px;}
.board .main p::-webkit-scrollbar-thumb,
.board .subs::-webkit-scrollbar-thumb{background:var(--gold-deep);}
.board .main p,
.board .subs{scrollbar-width:thin;scrollbar-color:var(--gold-deep) transparent;}

/* Der namenlose Balken ueber dem ersten Unterforum: Die Ausgabe schiebt
   ein <a> ohne Adresse ein, das eine HTML-Marke enthaelt - deshalb greift
   :empty nicht. Ueber das fehlende href ist es sicher zu fassen. */
.board .subs a:not([href]){display:none;}

/* Escapes wie \201CFamily verschluckten die ersten Buchstaben: CSS liest
   201CFA als eine einzige Hexzahl. Die Zeichen stehen deshalb direkt. */
#cat-1    .motto::after{content:"“Know the rules before you break them.”";}
#cat-14   .motto::after{content:"“Every legend begins with a name.”";}
#cat-81   .motto::after{content:"“No story stands alone.”";}
#cat-96   .motto::after{content:"“Behind every world, someone holds the thread.”";}
#cat-33   .motto::after{content:"“Family don’t end with blood, boy.” — Bobby Singer";}
#cat-71   .motto::after,
#cat-1002 .motto::after{content:"“All the legends are true.”";}
#cat-876  .motto::after,
#cat-1003 .motto::after{content:"“Magic can be dangerous, as you well know.”";}
#cat-1004 .motto::after{content:"“The power of three will set us free”";}
#cat-1005 .motto::after{content:"“Choices define who we are.”";}
#cat-1006 .motto::after{content:"“Every ending is a new beginning.”";}
#cat-1007 .motto::after{content:"“The wild does not forget its own.”";}
#cat-1009 .motto::after{content:"“Even gods must fall sometime.”";}
#cat-1011 .motto::after{content:"“Fate wears many masks.”";}
#cat-1012 .motto::after{content:"“Where every story finds its place.”";}

/* Der eingeblendete Kategoriename ist ein ::after. Er erbt zwar die
   transparente Schriftfarbe vom Link, nicht aber dessen Verlauf - ohne
   eigenen Hintergrund bliebe er unsichtbar. */
.cat-banner h2 a::after{
  background:var(--metal);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
}

/* ---- Miniboard-Vorstellung: Titel mittig, letzter Beitrag wie sonst ---- */
.mb-vorstellung td:first-child{vertical-align:middle;}
.mb-vorstellung .box3-tit{text-align:center;margin-bottom:0;}

/* Der letzte Beitrag soll aussehen wie in den uebrigen Bereichen:
   Titel gross, darunter die Zeile mit Verfasser und Datum, rechts das
   Avatar in derselben Groesse wie in der Forenzeile. */
.mb-vorstellung .box3-last{
  grid-template-columns:minmax(0,1fr) 96px;gap:14px;
  border-top:1px solid var(--line);padding-top:9px;
}
.mb-vorstellung .box3-last img{
  width:96px;height:96px;order:2;
  box-shadow:none;border:1px solid var(--gold-deep);
}
.mb-vorstellung .box3-last a{
  display:block;order:1;
  font-family:var(--display);font-size:1.18rem;letter-spacing:.03em;
  color:var(--text);line-height:1.25;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.mb-vorstellung .box3-last a:hover{color:var(--gold-light);}
.mb-vorstellung .box3-last a::first-letter{font-size:1.24em;color:var(--gold-light);}
.mb-vorstellung .box3-last .smalltext{
  display:block;order:1;
  margin-top:6px;padding-top:6px;border-top:1px solid var(--line);
  text-align:center;
  font-family:var(--caps);font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--text-faint);line-height:1.6;
}

/* ---- Nachtrag 3 ---- */

/* Keine Trennlinie ueber dem Szenentitel in der Miniboard-Vorstellung.
   In der Forenzeile bleibt sie, dort trennt sie die Zahlen ab. */
.mb-vorstellung .box3-last{border-top:0;padding-top:0;}

/* Kategoriebild und die Vorstellung darunter sind gleich hoch, wie im
   Live-Forum. Was nicht hineinpasst, bekommt seinen Bildlauf. */
.cat-banner{height:200px;}
.mb-vorstellung:not(:empty){height:200px;max-height:200px;overflow-y:auto;}

/* Die Kopftabelle sitzt im Header und damit ausserhalb der Inhaltshuelle -
   sie braucht die Seitenbreite deshalb selbst. */
.htab{max-width:var(--shell);margin:0 auto 8px;padding:0 24px;}

/* Die Team-Ausgabe bringt eine eigene Ueberschrift "Unsere Teammitglieder"
   mit - daneben steht schon "Online" ueber der Spalte. */
[data-pane-body="t1"] .hcol-body .tcat{display:none;}
[data-pane-body="t1"] .hcol-body table.tborder{border:0;margin:0;background:none;}

/* Der Rahmen um die Teamliste bleibt, nur die eigene Ueberschriftszeile
   des Plugins faellt weg - "Online" steht ja schon darueber. */
[data-pane-body="t1"] .hcol-body table.tborder{
  border:1px solid var(--line);background:rgb(var(--shadow-rgb) / .22);margin:0;
}

/* Die Bereichsvorstellungen bekommen einen eigenen Bildlauf, damit die
   Seite nicht waechst, wenn Bereiche dazukommen. */
.htab-panel[data-htab-panel="bereiche"] .mb-grid{
  max-height:420px;overflow-y:auto;padding-right:6px;
  scrollbar-width:thin;scrollbar-color:var(--gold-deep) transparent;
}
.htab-panel[data-htab-panel="bereiche"] .mb-grid::-webkit-scrollbar{width:6px;}
.htab-panel[data-htab-panel="bereiche"] .mb-grid::-webkit-scrollbar-thumb{background:var(--gold-deep);}

/* ---- Hinweisbanner oberhalb der Startseite ----
   Das Board liefert Bewerberfristen und Eiszeiten unter derselben Klasse
   .red_alert. Damit sie sich farblich trennen lassen, umschliesst das
   header-Template sie mit einer benannten Huelle. */
.tl-hinweis:empty{display:none;}
.tl-hinweis .red_alert,
.tl-hinweis .pm_alert,
.pm_alert{
  border:1px solid var(--line);border-left-width:3px;
  background:rgb(var(--shadow-rgb) / .4);
  padding:12px 18px;margin:0 0 10px;
  font-family:var(--caps);font-size:.8rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--text-dim);
}
.tl-hinweis a,
.pm_alert a{color:var(--gold-light);}

/* Private Nachrichten: der ruhige Blauton des Designs */
.pm_alert,
.tl-hinweis-pm .pm_alert{
  border-left-color:var(--blue);
  background:linear-gradient(90deg,rgb(60 86 145 / .22),rgb(var(--shadow-rgb) / .4) 55%);
}
/* Bewerberfristen: Gold, wie alles was Aufmerksamkeit des Teams braucht */
.tl-hinweis-bewerber .red_alert{
  border-left-color:var(--gold);
  background:linear-gradient(90deg,rgb(var(--gold-rgb) / .2),rgb(var(--shadow-rgb) / .4) 55%);
  color:var(--text);
}
/* Eiszeiten: kühler Ton, der zum Begriff passt */
.tl-hinweis-eis .red_alert{
  border-left-color:#6fb3c9;
  background:linear-gradient(90deg,rgb(111 179 201 / .18),rgb(var(--shadow-rgb) / .4) 55%);
}

/* Die Links in den Hinweisbannern trugen noch das Signalrot des alten
   Designs. Hoehere Spezifitaet, weil das Plugin-Stylesheet nach unserem
   geladen wird. */
.tl-hinweis .red_alert a,
.tl-hinweis .pm_alert a,
.tl-hinweis-eis .red_alert a{color:var(--gold-light);border-bottom:1px solid var(--gold-deep);}
.tl-hinweis .red_alert a:hover,
.tl-hinweis .pm_alert a:hover{color:var(--gold);}

/* ---- Letzte Themen (ProStats) ----------------------------------------
   Das Plugin bringt eigene Klassen mit; die beiden Ueberschriften darin
   sagen zweimal dasselbe, darum bleibt nur die Liste stehen. */
.foot-row.letzte .fbody{padding:0;}
.recentmaintitle,
.recentbox > .recentmaintitle{display:none;}
.recentbox{border:0;background:none;width:100%;}
.recentbox table,
.recentbox .tableborder{width:100%;border:0;background:none;border-collapse:collapse;}
.recentbox .maintitle{display:none;}
.recentbox td,
.recentbox .row4{
  border:0;border-bottom:1px dashed rgb(var(--line-rgb) / .45);
  padding:8px 12px;background:none;font-size:.92rem;vertical-align:middle;
}
.recentbox tr:last-child td{border-bottom:0;}
.recentbox td:first-child{color:var(--text);}
.recentbox td:first-child strong,
.recentbox td:first-child b{font-weight:600;color:var(--text);}
.recentbox td + td{
  text-align:right;white-space:nowrap;
  font-family:var(--caps);font-size:.68rem;letter-spacing:.1em;color:var(--text-faint);
}
.recentbox a{color:var(--text-dim);}
.recentbox a:hover{color:var(--gold-light);}
.recentbox img{vertical-align:middle;max-height:18px;width:auto;}
.recent-topics-info{color:var(--text-faint);}

/* Die Ueberschrift des Recent-Topics-Kastens steht links wie bei den
   uebrigen Kaesten des Fussbereichs. */
.foot-row.letzte > .fbox > h4{text-align:left;}

/* Fusszeile der Plugin-Kaesten: der Link zu allen Geruechten bzw. Zitaten
   stand in MyBBs dunklem Grau und war auf dem dunklen Grund unsichtbar. */
.foot-row .tfoot,
.foot-row .tfoot a,
.foot-row td.tfoot a:link,
.foot-row td.tfoot a:visited{
  color:var(--gold-light);
  font-family:var(--caps);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
}
.foot-row td.tfoot a:hover{color:#fff;}

/* Die Anfuehrungszeichen um Zitat und Geruecht in Gold - ein kleines
   Skript im Fussbereich fasst sie dafuer in ein eigenes Element. */
/* Zeichengroesse siehe unten */

/* Der Kasten mit den letzten Themen soll genauso breit sein wie die
   Kaesten darueber - der Rollbereich hatte ihn um ein paar Pixel verengt. */
.foot-row.letzte .fbody{padding:0;}
.recentbox{padding-right:0;}
.foot-row.letzte table{width:100% !important;}

/* Wer keinen Avatar hinterlegt hat, hinterliess in der Forenliste einen
   leeren Bildrahmen. Ohne Quelle bleibt das Bild aussen vor, und das
   Platzhalterbild des Designs scheint durch. */
.lastpost .lp-ava img[src=""],
.lastpost .lp-ava img:not([src]),
.lp-ava img[src=""]{display:none;}

/* Der Kasten mit den letzten Themen reicht bis an den Rahmen des
   Fussbereichs - die uebrigen Kaesten stehen paarweise und behalten
   ihren Einzug. */
.foot-row.letzte{margin-left:-24px;margin-right:-24px;}
.foot-row.letzte > .fbox{border-left:0;border-right:0;}

/* Die Anfuehrungszeichen um Zitat und Geruecht als grosses Schmuckzeichen */
.anf{
  color:var(--gold);
  font-family:var(--display);
  font-size:2.6em;line-height:0;
  vertical-align:-.34em;
  margin:0 .04em;
  opacity:.85;
}

/* Die kleinen Bilder in Zitat und Geruecht kommen aus hochkantigen
   Charakterbildern; quadratisch und mittig beschnitten war davon kaum
   etwas zu erkennen. Groesser, und der Ausschnitt sitzt oben. */
.foot-row.quotes img{
  width:38px;height:38px;
  object-fit:cover;object-position:50% 18%;
  border:1px solid var(--gold-deep);
  vertical-align:middle;
}

/* Zitat und Geruecht liegen in Tabellenzeilen, die MyBB abwechselnd
   trow1 und trow2 nennt - dadurch hatte der Zitattext eine andere
   Flaeche als der Geruechttext. Beide bekommen denselben Ton. */
.foot-row.quotes td.trow1,
.foot-row.quotes td.trow2,
.foot-row.quotes .trow1,
.foot-row.quotes .trow2{background:rgb(var(--shadow-rgb) / .3);}

/* ===================================================================
   Mitgliederliste — Karten statt Tabellenzeilen
   =================================================================== */
.ml-kopf{
  display:flex;flex-wrap:wrap;gap:6px 22px;align-items:center;
  padding:10px 16px;margin:0 0 14px;
  border:1px solid var(--line);background:var(--bg-panel-2);
}
.ml-kopf .ml-spalte{
  font-family:var(--caps);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-faint);
}
.ml-kopf a{color:var(--gold-soft);}
.ml-kopf a:hover{color:var(--gold-light);}

.ml-raster{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));
  gap:14px;align-items:start;
}
.ml-karte{
  --gruppe:var(--line);
  display:grid;grid-template-columns:96px minmax(0,1fr);
  border:1px solid var(--line);background:var(--bg-panel);
  overflow:hidden;position:relative;
}
.ml-karte::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(200deg,transparent 45%,var(--gruppe));opacity:.16;
}
.ml-karte > *{position:relative;z-index:1;}
.ml-bild{
  width:96px;height:120px;overflow:hidden;
  box-shadow:inset 0 0 0 1px var(--gold-deep);
  background-image:url(/images/goldenhour/header-mittig.jpg);
  background-size:cover;background-position:50% 30%;
}
.ml-bild img{width:100%;height:100%;object-fit:cover;display:block;}
.ml-text{padding:11px 14px;display:flex;flex-direction:column;gap:5px;min-width:0;}
.ml-name{
  font-family:var(--display);font-size:1.16rem;letter-spacing:.03em;line-height:1.2;
  margin:0;overflow:hidden;text-overflow:ellipsis;
}
.ml-titel{
  margin:0;font-size:.84rem;color:var(--text-faint);font-style:italic;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.ml-titel:empty{display:none;}
.ml-zahlen{display:flex;gap:16px;align-items:baseline;margin-top:2px;}
.ml-zahlen div{display:flex;align-items:baseline;gap:5px;}
.ml-zahlen b{
  font-family:var(--display);font-size:1.02rem;font-weight:600;
  font-variant-numeric:tabular-nums;color:var(--gold-light);
}
.ml-zahlen span{
  font-family:var(--caps);font-size:.58rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--text-faint);
}
.ml-empf:empty{display:none;}
.ml-wann{
  margin:auto 0 0;padding-top:7px;border-top:1px solid rgb(var(--line-rgb) / .55);
  font-size:.78rem;color:var(--text-faint);line-height:1.5;
}

@media (max-width:700px){
  .ml-raster{grid-template-columns:1fr;}
}

/* Sortierung der Mitgliederliste */
.ml-sortierung{
  display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;margin:0 0 14px;
  font-family:var(--caps);font-size:.66rem;letter-spacing:.13em;text-transform:uppercase;
}
.ml-sortierung > span{color:var(--text-faint);}
.ml-sortierung a{
  border:1px solid var(--line);padding:5px 11px;color:var(--text-dim);
  background:rgb(var(--shadow-rgb) / .35);
}
.ml-sortierung a:hover{border-color:var(--gold-deep);color:var(--gold-light);}

		

/* Abwesenheitsliste: unter dem Namen steht, von wann bis wann jemand
   fort ist - kleiner und ruhiger als der Name selbst. */
.userlist span em{
	display:block;
	font-style:normal;
	font-size:.88rem;
	letter-spacing:.05em;
	color:var(--gold-light);
	opacity:.85;
	margin-top:2px;
}
.userlist span{margin-bottom:6px;}