/* ============================================
   MS KLEROSE – user.css für Cassiopeia
   Version 3 – Final
   Bebas Neue + Inter, Menü-Hover, Card-Fix,
   Glitch-Animation, komplettes Dark Theme
   ============================================
   
   SCHRIFT EINBINDEN (einmalig, siehe Anleitung):
   Joomla → Site-Module → Neu → Benutzerdefiniertes HTML
   Position: head | Titelanzeige: Verbergen
   Inhalt (HTML-Modus):
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Inter:wght@300;400;600&display=swap" rel="stylesheet">
   ============================================ */

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

/* ── TYPOGRAFIE ── */
h1, h2, h3, h4, h5, h6,
.site-title a,
.navbar-brand,
.page-header h1,
.mod-menu__site-name {
  font-family: 'Bebas Neue', sans-serif !important;
  letter-spacing: 0.08em !important;
}

body, p, li, a,
.nav-link,
.mod-menu a,
.dropdown-item,
input, textarea, select, button {
  font-family: 'Inter', sans-serif !important;
}

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

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

.site-title a, .navbar-brand {
  color: var(--ms-gold) !important;
}

/* ── MENÜ – HOVER FIX ── */
.navbar-nav .nav-item .nav-link,
.navbar-nav > li > a,
#sp-menu .nav-item a,
.mod-menu__item a {
  color: rgba(244,241,232,0.7) !important;
  background-color: transparent !important;
  transition: color 0.2s ease, background-color 0.2s ease !important;
  border-radius: 0 !important;
}

.navbar-nav .nav-item .nav-link:hover,
.navbar-nav .nav-item .nav-link:focus,
.navbar-nav > li > a:hover,
.navbar-nav > li > a:focus,
#sp-menu .nav-item a:hover,
#sp-menu .nav-item a:focus,
.mod-menu__item a:hover,
.mod-menu__item a:focus {
  color: var(--ms-gold) !important;
  background-color: transparent !important;
  box-shadow: none !important;
  outline: none !important;
}

.navbar-nav .nav-item.active .nav-link,
.navbar-nav .nav-item.current .nav-link,
.mod-menu__item--active a {
  color: var(--ms-gold) !important;
  background-color: transparent !important;
  border-bottom: 2px solid var(--ms-gold) !important;
}

/* ── DROPDOWN ── */
.dropdown-menu {
  background-color: var(--ms-deep) !important;
  border: 1px solid rgba(143,184,212,0.15) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4) !important;
}

.dropdown-menu .dropdown-item {
  color: rgba(244,241,232,0.7) !important;
  background-color: transparent !important;
  transition: color 0.2s, background-color 0.2s !important;
}

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

/* ── CARDS ── */
.card {
  --card-bg: #22262a !important;
  background-color: #22262a !important;
  border: 1px solid rgba(143,184,212,0.12) !important;
  color: var(--ms-text) !important;
}

.card-header, .card-footer {
  background-color: var(--ms-surface) !important;
  border-color: rgba(143,184,212,0.12) !important;
  color: var(--ms-text) !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;
}

h1, h2, h3, h4, h5, h6,
.page-header h1 {
  color: var(--ms-text) !important;
}

p, li, td, th {
  color: var(--ms-muted) !important;
}

.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;
}

/* ── 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;
}

/* ── 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;
}

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; }

/* ── 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;
}

.btn-primary {
  background-color: var(--ms-gold) !important;
  border-color: var(--ms-gold) !important;
  color: var(--ms-ink) !important;
  font-family: 'Inter', sans-serif !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); }
}