/* =========================================================================
   FinalXIV — Schrift- & Feinschliff-Layer für Element Web
   Ergänzt das Farb-Theme "FinalXIV" (config.json) um die WoltLab-Fonts
   (Cinzel für Überschriften, Marcellus als Akzent) + dezente Politur.
   Same-origin ausgeliefert unter /fx-assets/ (wegen CSP font-src 'self').
   ========================================================================= */

@font-face{font-family:'FXCinzel';src:url('/fx-assets/cinzel-700.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'FXCinzel';src:url('/fx-assets/cinzel-600.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'FXMarcellus';src:url('/fx-assets/marcellus-400.woff2') format('woff2');font-weight:400;font-display:swap}

/* --- Überschriften in Cinzel (Raumkopf, Raumlisten-Sektionen, Space-Namen,
       Dialog-Titel, Auth-/Willkommensseite). Defensiv über mehrere Element-
       Versionen; nicht-passende Selektoren sind harmlose No-Ops. --- */
.mx_RoomHeader_heading,
.mx_RoomHeader_nametext,
.mx_RoomHeader_name,
.mx_RoomSublist_headerText,
.mx_SpacePanel .mx_SpaceButton_name,
.mx_SpaceRoomView_landing > h1,
.mx_SpaceRoomView_landing .mx_SpaceRoomView_description,
.mx_Heading_h1,
.mx_Heading_h2,
.mx_Heading_h3,
.mx_AuthBody h1,
.mx_AuthBody h2,
.mx_Welcome h1 {
  font-family:'FXCinzel', Georgia, 'Times New Roman', serif !important;
  letter-spacing:.4px;
}

/* Marcellus als edler Akzent für das große Auth-/Willkommens-Branding */
.mx_AuthHeader_logo + *,
.mx_Welcome .mx_Welcome_title {
  font-family:'FXMarcellus','FXCinzel',serif !important;
  letter-spacing:.6px;
}

/* --- Scrollbars in Palette-Tönen (dezent, wie die Seite) --- */
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-thumb{background:#2b3556;border-radius:8px}
*::-webkit-scrollbar-thumb:hover{background:#3a4670}
*::-webkit-scrollbar-track{background:transparent}
* {scrollbar-color:#2b3556 transparent}

/* --- Gold-Fokusrahmen statt Element-Standardgrün an Eingaben (Feinschliff) --- */
.mx_BasicMessageComposer_input:focus,
.mx_Field input:focus,
.mx_Field textarea:focus {
  outline:none;
}

/* =========================================================================
   Kanal-Header-Banner (per fx-banner.js oben im Raum eingefügt)
   ========================================================================= */
#fx-banner{
  position:relative;flex:0 0 auto;width:100%;height:180px;
  background-size:cover;background-position:center;background-color:#0e1428;
  display:flex;align-items:flex-end;border-bottom:1px solid #2b3556;overflow:hidden;
}
#fx-banner::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(11,15,30,0) 34%,rgba(11,15,30,.86) 100%),
    linear-gradient(90deg,rgba(11,15,30,.5),rgba(11,15,30,0) 55%);
}
.fx-banner-cap{position:relative;z-index:1;padding:14px 20px}
.fx-banner-nm{
  font-family:'FXCinzel',Georgia,serif;font-size:26px;font-weight:700;line-height:1.1;
  color:#fff;letter-spacing:.5px;text-shadow:0 2px 12px rgba(0,0,0,.75);
}
.fx-banner-tp{color:#dbe2f4;font-size:13px;margin-top:2px;text-shadow:0 1px 6px rgba(0,0,0,.85)}
.fx-banner-legal{
  position:absolute;z-index:1;right:12px;bottom:8px;font-size:9.5px;color:#c4cbe0;
  opacity:.7;text-shadow:0 1px 4px rgba(0,0,0,.9);text-align:right;max-width:55%;
}
.fx-banner-gold{
  position:absolute;left:0;right:0;bottom:0;height:3px;z-index:2;
  background:linear-gradient(90deg,#e3b341,rgba(227,179,65,0) 70%);
}
/* etwas kompakter auf schmalen Fenstern */
@media (max-width:800px){#fx-banner{height:130px}.fx-banner-nm{font-size:21px}}