/* ============================================
   MS KLEROSE – user.css für Cassiopeia
   Einbinden: Joomla → System → Site Templates
   → Cassiopeia Details and Files → user.css
   ============================================ */

/* ── GRUNDFARBEN ── */
:root {
  --ms-ink:        #0b1d26;
  --ms-deep:       #132f3b;
  --ms-surface:    #1e3a4a;
  --ms-text:       #f4f1e8;
  --ms-muted:      #c8c0b0;
  --ms-gold:       #cfae70;
  --ms-foam:       #8fb8d4;
  
}
.card {
  --card-bg: #22262a !important;
}

/* ── BODY & HINTERGRUND ── */
body {
  background-color: var(--ms-ink) !important;
  color: var(--ms-text) !important;
}

/* ── HEADER / NAVBAR ── */
.header,
header.header,
.navbar,
.navbar-brand,
#sp-top,
#sp-menu,
.container-header {
  background-color: var(--ms-deep) !important;
  border-bottom: 1px solid rgba(143, 184, 212, 0.15) !important;
}

/* Site-Titel im Header */
.site-title a,
.navbar-brand,
.mod-menu__site-name {
  color: var(--ms-gold) !important;
   background: var(--ms-deep) !important;
  font-family: Georgia, serif !important;
  letter-spacing: 0.08em !important;
}

/* ── NAVIGATION ── */
.navbar-nav > li > a,
.nav-item > a,
.mod-menu a {
  color: var(--ms-text) !important;
  opacity: 0.75;
  letter-spacing: 0.06em;
  transition: opacity 0.2s, color 0.2s;
}

.navbar-nav > li > a:hover,
.nav-item > a:hover,
.mod-menu a:hover {
  color: var(--ms-gold) !important;
  opacity: 1;
  background: transparent !important;
}

/* Aktiver Menüpunkt */
.navbar-nav > li.active > a,
.nav-item.current > a,
.mod-menu li.active > a {
  color: var(--ms-gold) !important;
  opacity: 1;
  background: transparent !important;
}

/* Dropdown */
.dropdown-menu {
  background-color: var(--ms-deep) !important;
  border: 1px solid rgba(143, 184, 212, 0.15) !important;
}

.dropdown-menu a {
  color: var(--ms-text) !important;
}

.dropdown-menu a:hover {
  background-color: var(--ms-surface) !important;
  color: var(--ms-gold) !important;
}

/* ── HAUPTINHALT ── */
#sp-main-body,
.container-main,
.blog,
.item-page,
.com-content-article,
main {
  background-color: var(--ms-ink) !important;
  color: var(--ms-text) !important;
}

/* Artikel-Titel */
h1, h2, h3, h4, h5, h6,
.page-header h1,
.article-info-term {
  color: var(--ms-text) !important;
}

/* Fließtext */
p, li, td, th, span, label {
  color: var(--ms-muted) !important;
}

/* Links im Inhalt */
.item-page a,
.blog a,
article a {
  color: var(--ms-foam) !important;
  text-decoration: none;
}

.item-page a:hover,
.blog a:hover,
article a:hover {
  color: var(--ms-gold) !important;
}

/* ── BANNER ── */
.banner img,
#sp-banner img {
  width: 100% !important;
  max-height: 260px !important;
  object-fit: cover !important;
}

/* ── SIDEBAR / MODULE ── */
.sidebar,
#sp-left,
#sp-right,
.moduletable {
  background-color: var(--ms-deep) !important;
  border: 1px solid rgba(143, 184, 212, 0.1) !important;
}

.moduletable h3,
.moduletable .mod-header {
  color: var(--ms-gold) !important;
  border-bottom: 1px solid rgba(143, 184, 212, 0.15) !important;
  padding-bottom: 0.5rem;
  letter-spacing: 0.1em;
}

/* ── FOOTER ── */
footer,
#sp-footer,
.footer {
  background-color: #060e13 !important;
  color: rgba(244, 241, 232, 0.4) !important;
  border-top: 1px solid rgba(143, 184, 212, 0.1) !important;
}

footer a,
#sp-footer a {
  color: rgba(244, 241, 232, 0.4) !important;
  text-decoration: none;
}

footer a:hover,
#sp-footer a:hover {
  color: var(--ms-gold) !important;
}

/* ── BREADCRUMBS ── */
.breadcrumb {
  background: transparent !important;
}

.breadcrumb-item a,
.breadcrumb-item.active {
  color: var(--ms-muted) !important;
}

/* ── TABELLEN ── */
table {
  color: var(--ms-text) !important;
}

td, th {
  border-color: rgba(143, 184, 212, 0.15) !important;
}

/* ── FORMULARE ── */
input, textarea, select {
  background-color: var(--ms-surface) !important;
  color: var(--ms-text) !important;
  border: 1px solid rgba(143, 184, 212, 0.25) !important;
}

input::placeholder,
textarea::placeholder {
  color: var(--ms-muted) !important;
  opacity: 0.6;
}

/* Button */
.btn-primary {
  background-color: var(--ms-gold) !important;
  border-color: var(--ms-gold) !important;
  color: var(--ms-ink) !important;
}

.btn-primary:hover {
  background-color: #b8972e !important;
  border-color: #b8972e !important;
}

/* ── KLEROS GLITCH ANIMATION ── */
@keyframes msglitch {
  0%   { transform: translateY(-12px) scale(1.08) translate(0, 0); }
  25%  { transform: translateY(-12px) scale(1.08) translate(-2px, 1px); }
  50%  { transform: translateY(-12px) scale(1.08) translate(2px, -1px); }
  75%  { transform: translateY(-12px) scale(1.08) translate(-1px, -2px); }
  100% { transform: translateY(-12px) scale(1.08) translate(0, 0); }
}