/* ===================================================================
   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{ --red:#d0453f; --green:#2f9e83; 
  /* --- Grundpalette (Design-Brief) --- */
  --bg:#10141f;
  --bg-panel:#161b29;
  --bg-panel-2:#1b2133;
  --bg-deep:#0b0e17;          /* Utility-Leiste, tiefste Fläche */
  --line:#2a3149;
  --gold:#c0392f;
  --gold-soft:#a02f27;
  --gold-light:#ee6b61;
  --gold-deep:#6e1f1a;
  --blue:#35bfa5;
  --blue-soft:#1f8a77;
  --text:#e8ecf3;
  --text-dim:#a3adc2;
  --text-faint:#6b768d;

  /* --- 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:192 57 47;
  --gold-light-rgb:238 107 97;
  --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:'Barlow Condensed','Arial Narrow',sans-serif;
  --caps:'Barlow Condensed','Arial Narrow',sans-serif;
  --serif:'Barlow',Arial,sans-serif;
  --mono:'Share Tech Mono',Consolas,monospace;
}

/* ===================================================================
   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)),
    linear-gradient(180deg,#10141f,#10141f);
  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;
}
/* 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. */
/* ---- 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/CityOfSirens/NoAva.webp" 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/CityOfSirens/header-band.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;
}

		
{
	

}


/* Gruppenfarben City of Sirens */
g1 {--mclt:140,148,168;}
g2 {--mclt:154,166,180;}
g3 {--mclt:190,150,70;}
g4 {--mclt:214,170,80;}
g5 {--mclt:120,126,145;}
g6 {--mclt:200,160,75;}
g7 {--mclt:90,90,100;}
g8 {--mclt:224,107,99;}
g9 {--mclt:111,159,216;}
g10 {--mclt:79,194,180;}
g11 {--mclt:159,224,210;}
g12 {--mclt:205,176,136;}


/* Sirenen statt Mondphasen: neu = Sirene mit Strahlen (blau), gelesen = Sirene (grau), geschlossen = Sirene mit Schloss */
.moon{background-image:none !important;filter:none !important;opacity:1 !important;display:inline-flex;align-items:center;justify-content:center;position:relative;font-family:"Font Awesome 6 Pro";font-weight:900;font-size:48px;line-height:1;color:#6b768d;font-style:normal}
.moon::before{content:"\e02d"}
.moon.new,.moon.on,.moon[class*="new"]{color:#4a84c4;text-shadow:0 0 12px rgba(74,132,196,.8);animation:cos-sirene 2.4s ease-in-out infinite}
.moon.new::before,.moon.on::before,.moon[class*="new"]::before{content:"\e02e"}
.moon.offlock,.moon.zu,.moon[class*="lock"]{color:#4a5368;animation:none;text-shadow:none}
.moon.offlock::before,.moon.zu::before,.moon[class*="lock"]::before{content:"\e02d"}
.moon.offlock::after,.moon.zu::after,.moon[class*="lock"]::after{content:"\f023";position:absolute;right:-2px;bottom:-2px;font-size:.5em;color:#a3adc2;background:#161b29;border-radius:50%;padding:3px;line-height:1}
.trow .st .moon{font-size:30px}
.moon-legend .moon{width:56px;height:56px;font-size:40px}
@keyframes cos-sirene{0%,100%{opacity:1}50%{opacity:.65}}

/* Hintergrund: sechs Skylines (cityback (1).jpg, 2688x6336), volle Breite, wiederholt nach unten */
body{background-color:#0b111c;background-image:url(/images/CityOfSirens/cityback%20%281%29.jpg);background-size:100% auto;background-repeat:repeat-y;background-position:center top;background-attachment:scroll}

/* Schrift: Zahlen und Zeiten in Mono */
.counts,.counts *,.moon-legend em,.ipt-tab-badge,time{font-family:var(--mono)}
body{font-size:16px}