/* ============================================================
   BOOTSTRAP THEME OVERRIDES  —  assets/themes/bootstrap/overrides.css
   Lädt NACH Bootstrap — überschreibt und ergänzt für CMS-Branding.
   Bootstrap-Variablen werden via :root angepasst.
   ============================================================ */

/* ── Bootstrap CSS-Variablen überschreiben ────────────────── */
:root {
  --bs-body-bg:            #0d0f14;
  --bs-body-color:         #e8e4dc;
  --bs-body-font-family:   'DM Sans', sans-serif;
  --bs-body-font-weight:   300;
  --bs-card-bg:            #141720;
  --bs-card-border-color:  #252a38;
  --bs-border-color:       #252a38;
  --bs-border-radius:      6px;
  --bs-border-radius-lg:   12px;

  /* Brand-Farben als Bootstrap-Primär */
  --bs-primary:            #c8a96e;
  --bs-primary-rgb:        200,169,110;
  --bs-link-color:         #c8a96e;
  --bs-link-hover-color:   #e0c48a;

  /* Input */
  --bs-body-bg:            #0d0f14;
  --bs-input-bg:           #1a1e28;
  --bs-input-color:        #e8e4dc;
  --bs-input-border-color: #252a38;
  --bs-input-focus-border-color: #c8a96e;
  --bs-input-focus-box-shadow: 0 0 0 .2rem rgba(200,169,110,.15);

  /* Muted */
  --bs-secondary-color:    #7a7f94;

  /* Gold-Akzent */
  --gold:      #c8a96e;
  --gold-light:#e0c48a;
  --danger:    #c04f4f;
  --success:   #4f9c6e;
  --accent:    #3d8bcd;
}

/* ── Basis ─────────────────────────────────────────────────── */
body { background:var(--bs-body-bg); color:var(--bs-body-color); display:flex; flex-direction:column; min-height:100vh; }

h1,h2,h3,h4 { font-family:'Playfair Display',serif; }
h1 { font-size:clamp(2rem,5vw,3.2rem); }
h2 { font-size:clamp(1.5rem,3vw,2rem); }

a { color:var(--gold); }
a:hover { color:var(--gold-light); }

/* ── Header ────────────────────────────────────────────────── */
.site-header {
  position:sticky; top:0; z-index:1030;
  background:rgba(13,15,20,.88);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--bs-border-color);
  padding:.85rem 0;
}
.header-inner { display:flex; align-items:center; justify-content:space-between; gap:1rem; }

.logo { display:flex; align-items:center; gap:.5rem; text-decoration:none; }
.logo-mark { font-size:1.4rem; color:var(--gold); animation:pulse 4s ease-in-out infinite; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.45} }
.logo-name { font-family:'Playfair Display',serif; font-size:1.15rem; font-weight:700; color:var(--bs-body-color); }

.main-nav { display:flex; align-items:center; gap:.25rem; }
.nav-link  { color:var(--bs-secondary-color)!important; border-radius:var(--bs-border-radius); font-size:.875rem; transition:.2s; }
.nav-link:hover { background:var(--bs-card-bg); color:var(--bs-body-color)!important; }
.nav-logout { color:var(--danger)!important; }
.nav-logout:hover { background:rgba(192,79,79,.1)!important; }
.nav-avatar { width:24px; height:24px; border-radius:50%; background:var(--gold); color:#0d0f14; font-size:.7rem; font-weight:700; display:grid; place-items:center; }

/* ── Main / Footer ─────────────────────────────────────────── */
.site-main   { flex:1; padding:3rem 0 4rem; }
.site-footer { border-top:1px solid var(--bs-border-color); padding:1.25rem 0; }
.footer-inner { display:flex; align-items:center; justify-content:space-between; gap:1rem; font-size:.8rem; color:var(--bs-secondary-color); }
.footer-logo  { font-family:'Playfair Display',serif; color:var(--gold); }

/* ── Bootstrap Button-Overrides ────────────────────────────── */
.btn-primary { background-color:var(--gold); border-color:var(--gold); color:#0d0f14; font-weight:500; }
.btn-primary:hover,.btn-primary:focus { background-color:var(--gold-light); border-color:var(--gold-light); color:#0d0f14; box-shadow:0 6px 20px rgba(200,169,110,.3); }
.btn-outline-secondary { color:var(--gold); border-color:var(--gold); }
.btn-outline-secondary:hover { background-color:rgba(200,169,110,.1); color:var(--gold-light); border-color:var(--gold-light); }

/* ── Card ──────────────────────────────────────────────────── */
.card { background:var(--bs-card-bg); border-color:var(--bs-border-color); color:var(--bs-body-color); }
.card p { color:var(--bs-secondary-color); }

/* ── Forms ─────────────────────────────────────────────────── */
.form-control, .form-select {
  background-color:#1a1e28;
  border-color:var(--bs-border-color);
  color:var(--bs-body-color);
}
.form-control:focus, .form-select:focus {
  background-color:#1a1e28;
  border-color:var(--gold);
  color:var(--bs-body-color);
  box-shadow:0 0 0 .2rem rgba(200,169,110,.15);
}
.form-control::placeholder { color:var(--bs-secondary-color); opacity:.6; }
.form-control:disabled     { opacity:.5; }
.form-label { font-size:.8rem; font-weight:500; text-transform:uppercase; letter-spacing:.08em; color:var(--bs-secondary-color); }

/* ── Alerts ────────────────────────────────────────────────── */
.alert-danger  { background:rgba(192,79,79,.12); border-color:var(--danger); color:#e88; }
.alert-success { background:rgba(79,156,110,.12); border-color:var(--success); color:#8d8; }
.alert-info    { background:rgba(61,139,205,.12); border-color:var(--accent);  color:#8bc; }

/* ── Auth-Seiten ───────────────────────────────────────────── */
.auth-wrap  { display:grid; place-items:center; min-height:60vh; }
.auth-box   { width:min(420px,100%); }
.auth-title { font-family:'Playfair Display',serif; font-size:1.7rem; margin-bottom:.35rem; }
.auth-sub   { color:var(--bs-secondary-color); font-size:.9rem; margin-bottom:2rem; }
.auth-divider { text-align:center; margin:1.5rem 0 1rem; font-size:.85rem; color:var(--bs-secondary-color); }

/* ── Hero ──────────────────────────────────────────────────── */
.hero { padding:5rem 0 3rem; position:relative; }
.hero::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse 60% 50% at 50% 0%,rgba(200,169,110,.06),transparent); pointer-events:none; }
.hero-eyebrow { display:inline-flex; align-items:center; gap:.5rem; font-size:.78rem; font-weight:500; text-transform:uppercase; letter-spacing:.12em; color:var(--gold); margin-bottom:1.25rem; }
.hero-eyebrow::before { content:''; display:block; width:24px; height:1px; background:var(--gold); }
.hero-title   { font-size:clamp(2.5rem,6vw,4rem); line-height:1.1; margin-bottom:1.25rem; }
.hero-title em { font-style:italic; color:var(--gold); }
.hero-desc  { font-size:1.05rem; color:var(--bs-secondary-color); margin-bottom:2rem; }
.hero-actions { display:flex; gap:1rem; flex-wrap:wrap; }

/* ── Dashboard-Cards ───────────────────────────────────────── */
.dash-card { background:var(--bs-card-bg); border:1px solid var(--bs-border-color); border-radius:var(--bs-border-radius-lg); padding:1.5rem; transition:.2s; height:100%; }
.dash-card:hover { border-color:var(--gold); transform:translateY(-2px); }
.dash-card-icon { font-size:1.8rem; margin-bottom:.75rem; }
.dash-card h3 { font-size:1rem; margin-bottom:.4rem; }
.dash-card p  { font-size:.85rem; }

.member-bar { display:flex; align-items:center; gap:1rem; background:var(--bs-card-bg); border:1px solid var(--bs-border-color); border-radius:var(--bs-border-radius-lg); padding:1rem 1.5rem; margin-bottom:2rem; }
.member-bar-avatar { width:48px; height:48px; border-radius:50%; background:var(--gold); color:#0d0f14; font-size:1.2rem; font-weight:700; display:grid; place-items:center; flex-shrink:0; }
.member-bar-badge { margin-left:auto; padding:.25rem .65rem; border-radius:999px; font-size:.7rem; font-weight:500; text-transform:uppercase; letter-spacing:.08em; background:rgba(200,169,110,.12); color:var(--gold); border:1px solid rgba(200,169,110,.25); }
.member-bar-badge.admin { background:rgba(61,139,205,.12); color:var(--accent); border-color:rgba(61,139,205,.25); }

/* ── Profil ────────────────────────────────────────────────── */
.profile-avatar { width:100px; height:100px; border-radius:50%; background:var(--gold); color:#0d0f14; font-size:2.5rem; font-weight:700; display:grid; place-items:center; font-family:'Playfair Display',serif; margin:0 auto 1rem; border:3px solid var(--bs-border-color); }
.profile-sidebar { text-align:center; }
.role-badge { display:inline-block; margin-top:.4rem; padding:.2rem .6rem; border-radius:999px; font-size:.7rem; text-transform:uppercase; letter-spacing:.08em; background:rgba(200,169,110,.12); color:var(--gold); border:1px solid rgba(200,169,110,.2); }
.profile-since { font-size:.78rem; color:var(--bs-secondary-color); margin-top:.5rem; }

/* ── Page Header ───────────────────────────────────────────── */
.page-header { margin-bottom:2.5rem; padding-bottom:1.5rem; border-bottom:1px solid var(--bs-border-color); }
.page-header h1 { margin-bottom:.35rem; }
.page-header p  { margin:0; color:var(--bs-secondary-color); }

/* ── Text-Utilities ────────────────────────────────────────── */
.text-gold { color:var(--gold)!important; }

/* ============================================================
   MEGA MENU  —  Bootstrap Theme Overrides
   ============================================================ */

.mm-backdrop { display:none; position:fixed; inset:0; z-index:1029; background:rgba(0,0,0,.5); }
.mm-backdrop.is-active { display:block; }

.header-inner { align-items: stretch; gap: 0; }
.logo { align-self: center; margin-right: 1rem; }

.mega-nav {
  flex: 1; display: flex; align-items: stretch;
  position: relative; z-index: 1030;
}
.mega-menu { list-style:none; display:flex; align-items:stretch; gap:0; margin:0; padding:0; }
.mega-item  { position:static; display:flex; align-items:stretch; }

.mega-trigger {
  display:flex; align-items:center; gap:.35rem;
  padding: 0 .85rem; height:100%;
  background:none; border:none;
  color: var(--bs-secondary-color);
  font-family: 'DM Sans',sans-serif;
  font-size:.85rem; cursor:pointer; white-space:nowrap;
  transition:.2s; position:relative;
}
.mega-trigger::after {
  content:''; position:absolute; bottom:0; left:0; right:0;
  height:2px; background:var(--gold); transform:scaleX(0); transition:.2s;
}
.mega-trigger:hover, .mega-trigger[aria-expanded="true"] {
  color: var(--bs-body-color); background:rgba(255,255,255,.03);
}
.mega-trigger[aria-expanded="true"]::after { transform:scaleX(1); }
.mm-icon  { font-size:.9rem; }
.mm-arrow { width:10px; height:6px; flex-shrink:0; transition:transform .25s; }
.mega-trigger[aria-expanded="true"] .mm-arrow { transform:rotate(180deg); }

.mega-dropdown {
  display:none; position:fixed;
  top: var(--header-h, 56px); left:0; right:0; z-index:1031;
  background:var(--bs-card-bg);
  border-top:1px solid var(--bs-border-color);
  border-bottom:1px solid var(--bs-border-color);
  box-shadow:0 12px 40px rgba(0,0,0,.5);
  animation:mmSlideDown .2s cubic-bezier(.4,0,.2,1) both;
}
.mega-dropdown.is-open { display:block; }

@keyframes mmSlideDown {
  from { opacity:0; transform:translateY(-8px); }
  to   { opacity:1; transform:translateY(0); }
}

.mega-dropdown-inner {
  display:flex; gap:0;
  width:min(1080px,94vw); margin:0 auto; padding:1.5rem 0;
}
.mega-col {
  flex:1; padding:0 1.25rem;
  border-right:1px solid var(--bs-border-color);
}
.mega-col:last-child { border-right:none; }

.mm-col-title {
  font-size:.68rem; font-weight:600;
  text-transform:uppercase; letter-spacing:.1em;
  color:var(--gold); margin-bottom:.75rem;
  padding-bottom:.5rem;
  border-bottom:1px solid rgba(200,169,110,.2);
}

.mega-link {
  display:flex; align-items:flex-start; gap:.65rem;
  padding:.55rem .6rem; border-radius:.375rem;
  text-decoration:none; color:var(--bs-body-color);
  transition:.15s; margin-bottom:.15rem;
}
.mega-link:hover { background:rgba(255,255,255,.05); transform:translateX(3px); color:var(--bs-body-color); }
.mega-link.is-active { background:rgba(200,169,110,.1); }
.mega-link.is-active strong { color:var(--gold); }

.mm-item-icon { font-size:1.1rem; flex-shrink:0; margin-top:.1rem; }
.mm-item-body { display:flex; flex-direction:column; gap:.1rem; }
.mm-item-body strong { font-size:.875rem; font-weight:500; color:var(--bs-body-color); line-height:1.2; }
.mm-item-body small  { font-size:.75rem;  color:var(--bs-secondary-color); }

.mm-cta-primary { background:rgba(200,169,110,.12); border:1px solid rgba(200,169,110,.25); }
.mm-cta-primary:hover { background:rgba(200,169,110,.2); }
.mm-cta-primary strong { color:var(--gold); }
.mm-logout strong { color:var(--danger); }
.mm-logout:hover  { background:rgba(192,79,79,.08); }
.mm-admin strong  { color:var(--accent); }
.mm-admin:hover   { background:rgba(61,139,205,.07); }

.header-right { display:flex; align-items:center; gap:.5rem; margin-left:1rem; flex-shrink:0; }
.header-avatar {
  display:flex; align-items:center; gap:.5rem;
  padding:.35rem .65rem; border-radius:.375rem;
  text-decoration:none; color:var(--bs-secondary-color); font-size:.85rem; transition:.2s;
}
.header-avatar:hover { background:rgba(255,255,255,.05); color:var(--bs-body-color); }

.avatar-circle {
  width:28px; height:28px; border-radius:50%;
  display:grid; place-items:center;
  font-size:.8rem; font-weight:700; flex-shrink:0;
}
.avatar-circle.admin     { background:var(--gold);   color:#0d0f14; }
.avatar-circle.moderator { background:var(--accent); color:#fff; }
.avatar-circle.member    { background:rgba(255,255,255,.12); color:var(--bs-body-color); }
.avatar-name  { font-size:.82rem; }
.avatar-badge {
  font-size:.62rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em;
  padding:.1rem .35rem; border-radius:3px;
  background:rgba(200,169,110,.15); color:var(--gold); border:1px solid rgba(200,169,110,.25);
}

.mm-burger {
  display:none; flex-direction:column; justify-content:center;
  gap:5px; width:36px; height:36px;
  background:none; border:1px solid var(--bs-border-color);
  border-radius:.375rem; cursor:pointer; padding:.4rem .5rem; transition:.2s;
}
.mm-burger:hover { border-color:var(--gold); }
.mm-burger span  { display:block; height:2px; background:var(--bs-secondary-color); border-radius:2px; transition:.25s; }
.mm-burger[aria-expanded="true"] span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.mm-burger[aria-expanded="true"] span:nth-child(2) { opacity:0; }
.mm-burger[aria-expanded="true"] span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

@media (max-width:900px) { .mega-trigger { padding:0 .6rem; font-size:.8rem; } }
@media (max-width:720px) {
  .mm-burger { display:flex; }
  .avatar-name, .avatar-badge { display:none; }
  .mega-nav {
    position:fixed; top:56px; left:0; right:0; bottom:0;
    background:var(--bs-body-bg); border-top:1px solid var(--bs-border-color);
    overflow-y:auto; transform:translateX(-100%);
    transition:transform .3s cubic-bezier(.4,0,.2,1); z-index:1035; flex-direction:column;
  }
  .mega-nav.mm-mobile-open { transform:translateX(0); }
  .mega-menu { flex-direction:column; }
  .mega-item { flex-direction:column; align-items:stretch; }
  .mega-trigger { padding:.85rem 1.25rem; border-bottom:1px solid var(--bs-border-color); justify-content:space-between; }
  .mega-trigger::after { display:none; }
  .mega-dropdown { position:static; box-shadow:none; border:none; animation:none; }
  .mega-dropdown-inner { flex-direction:column; width:100%; padding:.5rem 0 1rem; }
  .mega-col { border-right:none; border-bottom:1px solid var(--bs-border-color); padding:.75rem 1.25rem; }
  .mega-col:last-child { border-bottom:none; }
}

/* ═══════════════════════════════════════════════════════════════
   BOOTSTRAP THEME — MOBILE MEGA MENU OVERRIDES  ≤ 768px
═══════════════════════════════════════════════════════════════ */

/* ── Bootstrap: Mobile Mega Menu ─────────────────────────────── */
@media (max-width: 900px) {
  .mega-trigger { padding: 0 .5rem; font-size: .8rem; }
  .mm-icon      { display: none; }
}

@media (max-width: 768px) {
  .mm-burger  { display: flex; }
  .avatar-name, .avatar-badge { display: none; }

  .mm-backdrop.is-active { background: rgba(0,0,0,.65); z-index: 1029;  /* UNTER site-header (z-index:1030) */ }
  body.mm-open .site-header { z-index: 1060 !important; } /* Stacking-context fix */

  .mega-nav {
    display: block !important;
    position: fixed !important;
    top: 0; left: 0;
    width: min(300px, 85vw);
    height: 100dvh;
    background-color: #1c2133 !important;
    border-right: 2px solid #c8a96e !important;
    box-shadow: 4px 0 32px rgba(0,0,0,.8) !important;
    overflow-y: auto;
    transform: translateX(-100%);
    transition: transform .3s ease;
    z-index: 1050 !important;
    padding-top: 0;
  }
  .mega-nav.mm-mobile-open { transform: translateX(0) !important; }
  .mega-nav::before {
    content: '◈  Navigation';
    display: flex; align-items: center;
    height: 52px; padding: 0 1.25rem;
    font-family: 'Playfair Display', serif; font-size: .95rem; font-weight: 700;
    color: #c8a96e; background: #141720;
    border-bottom: 1px solid #252a38;
    position: sticky; top: 0; z-index: 1;
  }
  .mega-menu       { display: flex !important; flex-direction: column; list-style: none; margin: 0; padding: 0; }
  .mega-item       { display: block; border-bottom: 1px solid #252a38; }
  .mega-trigger    { display: flex !important; width: 100%; justify-content: space-between; align-items: center;
                     height: auto; min-height: 52px; padding: .85rem 1.25rem !important;
                     color: #e8e4dc !important; font-size: .95rem !important; font-weight: 500;
                     background: transparent; border: none; border-radius: 0; }
  .mega-trigger::after { display: none; }
  .mm-icon   { display: inline !important; }
  .mega-trigger[aria-expanded="true"] { color: #c8a96e !important; background: rgba(200,169,110,.08) !important; }
  .mega-dropdown   { display: none !important; position: static !important; background: #141720 !important;
                     border: none; border-top: 1px solid #252a38; box-shadow: none !important; animation: none !important; }
  .mega-dropdown.is-open { display: block !important; }
  .mega-dropdown-inner   { flex-direction: column; width: 100%; padding: .4rem 0 .6rem; }
  .mega-col  { padding: .4rem 1rem; border: none !important; }
  .mega-link { min-height: 44px; color: #e8e4dc !important; align-items: center; }
  .mega-link:hover { transform: none; background: rgba(255,255,255,.06); }
  .mm-item-body strong { color: #e8e4dc; }
  .header-inner { height: auto; min-height: 48px; }
  body.mm-open  { overflow: hidden; }
}
