/* ===================================================================
   True Legends - Golden Hour
   Grundlagen: Farben, Schriften, Grundelemente
   =================================================================== */

/* ===================================================================
   ELTERN-DESIGN — alles Gestaltbare steht hier als Variable.
   Ein Fandom-Kind überschreibt nur diesen Block (mit html:root, damit
   es unabhängig von der Stylesheet-Reihenfolge gewinnt) und muss kein
   einziges Stylesheet kopieren. Deshalb stehen unten auch die
   RGB-Tripel: alle halbtransparenten Flächen leiten sich daraus ab,
   sonst bliebe ein Kind trotz eigener Akzentfarbe an vielen Stellen
   golden.
   =================================================================== */
:root{
  /* --- Grundpalette (Design-Brief) --- */
  --bg:#10141f;
  --bg-panel:#161b29;
  --bg-panel-2:#1b2133;
  --bg-deep:#0b0e17;          /* Utility-Leiste, tiefste Fläche */
  --line:#2a3149;
  --gold:#ad7e35;
  --gold-soft:#8e692e;
  --gold-light:#d1a758;
  --gold-deep:#6b4f1f;
  --blue:#3c5691;
  --blue-soft:#2c4270;
  --text:#e8e4d8;
  --text-dim:#a9a6b8;
  --text-faint:#6f7086;

  /* --- Dieselben Töne als RGB-Tripel, für halbtransparente Flächen --- */
  --bg-rgb:16 20 31;
  --panel-rgb:22 27 41;
  --panel2-rgb:27 33 51;
  --line-rgb:42 49 73;
  --gold-rgb:173 126 53;
  --gold-light-rgb:209 167 88;
  --shadow-rgb:8 10 16;       /* Vignette, Abdunkler */

  /* --- Abgeleitete Flächen, die ein Kind einzeln kippen kann --- */
  --tile-1:#232a40;           /* Kachelverlauf hell (Avatare, Sisterboards) */
  --tile-2:#12151f;           /* Kachelverlauf dunkel */
  --tab-1:#1f2639;            /* Karteireiter oben */
  --tab-2:#151a28;            /* Karteireiter unten */
  --headline:var(--gold-light);  /* Überschriftenfarbe, von Kindern gern geändert */
  --symbol-rgb:18 15 9;       /* Grund der Spiegel-Symbole */

  /* --- Benutzergruppen --- */
  --u-admin:#c05f63;
  --u-mod:#7a9e5e;
  --u-member:#8fa8d8;
  --u-guest:var(--text-faint);
  --online:#7a9e5e;

  /* --- Gruppenfarben: bewusst designunabhängig, wie im alten Board.
     15 Gruppen, über den Farbkreis verteilt und durchgehend gedämpft —
     volle Sättigung würde neben dem Gold billig wirken. Innerhalb einer
     Farbfamilie trennt die Helligkeit (Dämonen hell / Vampire dunkel,
     Götter warm / Halbgötter blass). --- */
  --g-bewerber:#7a736b;      /* neutral und blass: noch nicht dabei */
  --g-mensch:#b5aa99;
  --g-andere:#8b93a8;
  --g-daemon:#b4474b;
  --g-vampir:#8a2f42;
  --g-engel:#cfd9ea;
  --g-gott:#c9873a;
  --g-halbgott:#d7b06b;
  --g-verlorene:#857a9c;
  --g-hexe:#9560b0;
  --g-schattenjaeger:#5580bb;
  --g-jaeger:#85894e;
  --g-werwesen:#74a05f;
  --g-anakim:#63b0bd;
  --g-fee:#45ac93;

  --metal:linear-gradient(180deg,var(--gold-light) 0%,var(--gold) 48%,var(--gold-deep) 100%);
  --shell:1200px;

  /* Bereichszeichen im Spiegel. Das Elterndesign zeigt keines — jedes
     Fandom-Theme setzt beide Werte und tauscht damit allein ueber CSS
     das Zeichen aus. Die Deckkraft haengt mit dran, damit ohne Zeichen
     keine leere Goldflaeche im Spiegel stehen bleibt. */
  --bereichssymbol:none;
  --symbol-deckkraft:0;

  /* --- Schriftrollen ---
     --display  große Titel: Boardname, Sektionstitel, Zahlen
     --caps     Versal-Labels: Forennamen, Schaltflächen, Meta
     --serif    Fließtext: Beschreibungen, Beiträge, Zitate
     Ein Fandom-Kind darf einzelne Rollen ersetzen — meist nur --display. */
  --display:'Cormorant Unicase',Georgia,serif;
  --caps:'Alegreya SC',Georgia,serif;
  --serif:'EB Garamond',Georgia,'Times New Roman',serif;
}

/* ===================================================================
   BEISPIEL FÜR EIN KIND-DESIGN
   So sähe ein Fandom-Stylesheet aus: ein einziger Block, kein
   kopiertes Stylesheet. Im echten Theme steht hier html:root statt
   :root[data-fandom=…], damit es die Reihenfolge unabhängig gewinnt.
   =================================================================== */
:root[data-fandom="lucifer"]{     /* Lucifer Rising — Supernatural, Altrosa */
  --bg:#12100f; --bg-panel:#191514; --bg-panel-2:#211b19; --bg-deep:#0a0807;
  --line:#3a2c28;
  --gold:#9d5760; --gold-soft:#7d444c; --gold-light:#c47b84; --gold-deep:#5c3138;
  --blue:#6b4f52; --blue-soft:#4a3639;
  --text:#e6dedb; --text-dim:#b09f9c; --text-faint:#7a6a68;
  --bg-rgb:18 16 15; --panel-rgb:25 21 20; --panel2-rgb:33 27 25;
  --line-rgb:58 44 40; --gold-rgb:157 87 96; --gold-light-rgb:196 123 132;
  --shadow-rgb:8 6 5; --symbol-rgb:20 12 12;
  --tile-1:#2b2220; --tile-2:#151110; --tab-1:#241d1b; --tab-2:#1a1513;
}
:root[data-fandom="mystic"]{      /* Mystic Falls World — Vampire Diaries, Blutrot */
  --bg:#0f0d10; --bg-panel:#171317; --bg-panel-2:#1f191e; --bg-deep:#080609;
  --line:#3a2a30;
  --gold:#b52d3a; --gold-soft:#8e232d; --gold-light:#d95a65; --gold-deep:#6a1a22;
  --blue:#6a4a52; --blue-soft:#4a3339;
  --text:#e6dcdd; --text-dim:#ab9a9e; --text-faint:#77666b;
  --bg-rgb:15 13 16; --panel-rgb:23 19 23; --panel2-rgb:31 25 30;
  --line-rgb:58 42 48; --gold-rgb:181 45 58; --gold-light-rgb:217 90 101;
  --shadow-rgb:7 5 8; --symbol-rgb:20 10 12;
  --tile-1:#2c2126; --tile-2:#161114; --tab-1:#251c21; --tab-2:#1a1418;
}

*{box-sizing:border-box;}

body{
  margin:0;
  background-color:var(--bg);
  background-image:
    linear-gradient(180deg,rgb(var(--bg-rgb) / .90),rgb(var(--bg-rgb) / .95)),
    url(/images/goldenhour/bg-pattern.jpg);
  background-repeat:no-repeat,repeat;
  background-size:cover,480px auto;
  background-attachment:fixed,fixed;
  color:var(--text);
  font-family:var(--serif);
  font-size:17px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}

/* Bildlaufleisten in die Palette holen — sonst reißen helle Systembalken den Look auf */
*{scrollbar-width:thin;scrollbar-color:var(--gold-deep) transparent;}
::-webkit-scrollbar{width:9px;height:9px;}
::-webkit-scrollbar-track{background:rgb(var(--shadow-rgb) / .6);}
::-webkit-scrollbar-thumb{background:var(--gold-deep);border:2px solid transparent;background-clip:padding-box;}
::-webkit-scrollbar-thumb:hover{background:var(--gold-soft);background-clip:padding-box;}

a{color:var(--text-dim);text-decoration:none;transition:color .15s ease;}
a:hover{color:var(--gold);}
a:focus-visible,button:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:2px;}

h1,h2,h3,h4{font-family:var(--display);margin:0;letter-spacing:.05em;font-weight:600;text-wrap:balance;}

.metal{
  background:var(--metal);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.shell{max-width:var(--shell);margin:0 auto;padding:0 24px;}


/* ============ Schmale Fenster ============ */
@media (max-width:1000px){
  .infogrid{grid-template-columns:1fr;}
  .htab-panel{padding:14px;}
  .htab-tabs button{padding:13px 14px;font-size:11px;letter-spacing:.14em;}
  /* Die drei Spalten bleiben nebeneinander, werden nur kompakter */
  .hcols{grid-template-columns:1.45fr 1fr 1.25fr;gap:10px;}
  .hcol > h3{font-size:.86rem;letter-spacing:.18em;margin-bottom:9px;}
  .hcol-box{padding:12px 12px 14px;}
  .hcol-switch{gap:6px;margin-bottom:11px;}
  .hcol-switch button{width:38px;height:38px;}
  .hcol-switch button svg{width:17px;height:17px;}
  .hcol-sub{font-size:.68rem;letter-spacing:.14em;padding-bottom:7px;margin-bottom:10px;}
  .hcol-body{font-size:.87rem;}
  .inplay-list{font-size:.8rem;}
  .inplay-list li{flex-direction:column;gap:0;}
  .mb-grid{grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:10px;}
  /* Umgebrochene Statistikzeilen sollen mittig stehen, nicht auseinandergezogen */
  .footer-stats{justify-content:center;gap:22px 28px;}
  .stat svg{width:26px;height:26px;}
  .stat .num{font-size:1.5rem;}
  .board{grid-template-columns:74px minmax(0,1fr);}
  .board .subs,.board .stats{grid-column:1/-1;border-right:0;border-top:1px solid var(--line);}
  .board .subs{flex-direction:row;flex-wrap:wrap;gap:5px;}
  .board .subs a{flex:1 1 130px;}
  .board .subs .more{flex:1 1 100%;}
  .tlist .head{display:none;}
  .trow{grid-template-columns:52px minmax(0,1fr);}
  .trow .num,.trow .last{grid-column:2;padding-top:0;text-align:left;}
  .trow .num{display:inline-block;}
  .post{grid-template-columns:1fr;}
  .post .author{border-right:0;border-bottom:1px solid var(--line);}
  .mini > header{grid-template-columns:minmax(0,1fr) 44px;}
  .mini .mini-desc{grid-column:1/-1;border-right:0;border-top:1px solid var(--line);}
  /* Reiter werden kompakter, sobald sie umbrechen müssen */
  .tabnav{gap:2px;}
  .tabnav a{--notch:11px;min-width:0;padding:11px 16px 10px;font-size:10.5px;letter-spacing:.11em;}
  .tabnav a[aria-current="page"]{padding-top:12px;margin-top:-1px;}
}
/* Erst im Handyformat stapeln sich die drei Spalten */
@media (max-width:600px){
  .hcols{grid-template-columns:1fr;gap:14px;}
  .hcol > h3{font-size:.95rem;}
  .hcol-body{max-height:none;}
  .inplay-list li{flex-direction:row;gap:12px;}
}

@media (prefers-reduced-motion:reduce){
  *{transition:none !important;animation:none !important;}
}

/* ---- MyBB-Grundgeruest neutralisieren ----
   global.css des MyBB-Masters faerbt #container und #content weiss.
   Das schien ueberall dort durch, wo unsere Bausteine keinen eigenen
   Grund mitbringen - etwa hinter der Miniboard-Vorstellung. */
#container,
#content,
#content > .shell,
#header,
#panel{background:none;border:0;box-shadow:none;padding:0;margin:0;}
#content{width:auto;}
#content > .shell{padding:0 24px;}

/* Die Neutralisierung oben nahm .shell das "margin:0 auto" — der Inhalt
   klebte dadurch am linken Rand. Zentrierung wiederhergestellt. */
#content > .shell{margin-left:auto;margin-right:auto;max-width:var(--shell);}

/* ---- Gruppenfarben ----
   Das Board umschliesst Charakternamen mit Tags wie <g14>. Die Werte
   sind aus dem bestehenden Design uebernommen, damit die Farben im
   ganzen Forum dieselben bleiben - Verlauf von hell nach Gruppenton,
   wie gewohnt. Gilt fuer Beitraege, Onlinelisten und den Kontenwechsler
   gleichermassen. */
g1,g2,g4,g8,g9,g10,g11,g12,g13,g14,g15,g16,g17,g18,g19,g20,g21,g22,g23,g25,g26,g27,g28{
  --mre:255,255,255;
  background:linear-gradient(to bottom,rgba(var(--mre),1) 0%,rgba(var(--mclt),1) 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  font-weight:inherit;
}
g2 {--mclt:118,3,48;}
g4 {--mclt:177,20,81;}
g8 {--mclt:70,110,91;}
g9 {--mclt:179,121,191;}
g10{--mclt:167,175,179;}
g11{--mclt:128,147,195;}
g12{--mclt:83,118,207;}
g13{--mclt:110,50,50;}
g14{--mclt:179,142,66;}
g15{--mclt:113,191,164;}
g16{--mclt:43,89,207;}
g17{--mclt:49,126,97;}
g18{--mclt:94,173,106;}
g19{--mclt:0,160,165;}
g20{--mclt:165,0,0;}
g21{--mclt:241,139,71;}
g22{--mclt:151,112,67;}
g23{--mclt:138,68,153;}
g25{--mclt:184,176,24;}
g26{--mclt:138,80,165;}
g27{--mclt:190,100,60;}
g28{--mclt:0,160,165;}
/* Nur g1 hat im bestehenden Design keinen eigenen Ton - Gold als
   Rueckfall. Die uebrigen behalten ihre Farbe: die Regel stand vorher
   hinter ihnen und hat sie ueberschrieben. */
g1{--mclt:173,126,53;}

/* ---- Linkfarbe ueberall ---------------------------------------------
   MyBBs eigenes global.css setzt "a:link" auf ein kraeftiges Blau. Eine
   Regel auf "a" allein ist weniger spezifisch und verliert - auf allen
   Seiten, fuer die dieses Design keine eigene Regel mitbringt, blieben
   die Links darum blau. */
a:link,
a:visited{color:var(--text-dim);text-decoration:none;}
a:hover,
a:focus,
a:active{color:var(--gold-light);}

/* Krone vor den Namen der Administration */
.tl-krone{
  margin-right:5px;font-size:.78em;vertical-align:.05em;
  /* Farbe kommt vom umgebenden Gruppen-Tag */
}

/* Steht der Name ohne Gruppen-Tag da, hat die Krone keine Gruppenfarbe
   zum Erben - dann bleibt sie golden. */
a > .tl-krone{color:var(--gold-light);}

/* MyBB setzt fuer Mitglieder ohne eigenes Bild "images/noava.png" ein -
   die Datei liegt hier nicht, es blieb ein leerer Rahmen. Das Bild wird
   durch das Platzhalterbild des Designs ersetzt. */
img[src$="noava.png"]{
  content:url(/images/goldenhour/header-mittig.jpg);
  object-fit:cover;
}

		

/* Fliesstexte im Blocksatz - so stehen sie auch im alten Design. */
article.post .content,
.hcol-body p,
.htab-panel p,
.mb-card p,
.panel p,
.mbh-intro-txt{
	text-align:justify;
	hyphens:auto;
}