:root{
  --navy:#0B1C2D;
  --gold:#FD8D02;
  --white:#FFFFFF;

  /* optional: weiche Schatten / Radius */
  --lux-shadow: 0 10px 30px rgba(11, 28, 45, .18);
  --lux-radius: 6px;
}

/* BODY: dunkles Banking-Grundgefühl */
body{
  background-color: var(--navy) !important;
  color: #0f172a; /* Text auf weißen Cards */
}

/* ---------------------------------------
   NAVBAR: Navy + Gold + Mega Menü
---------------------------------------- */

/* NAVBAR Grundstil */
.navbar{
  background: rgba(11, 28, 45, .92) !important;
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(201, 162, 77, .18) !important;

  /* Stabilere Höhe */
  padding-top: .65rem;
  padding-bottom: .65rem;
}

/* Logo kontrolliert über CSS (statt height="90") */
.nav-logo{
  height: 90px;
  width: auto;
  display: block;
}
@media (max-width: 991.98px){
  .nav-logo{ height: 90px; }
}

.navbar .navbar-brand,
.navbar .nav-link{
  color: rgba(255,255,255,.92) !important;
}

/* Active Link */
.navbar .nav-link.active{
  color: var(--gold) !important;
}

.navbar .nav-link:hover,
.navbar .nav-link:focus{
  color: var(--gold) !important;
}

.navbar .navbar-text{
  color: rgba(255,255,255,.65) !important;
}

/* Toggler (Hamburger) sichtbar */
.navbar .navbar-toggler{
  border-color: rgba(201, 162, 77, .35) !important;
}
.navbar .navbar-toggler:focus{
  box-shadow: 0 0 0 .2rem rgba(201, 162, 77, .25) !important;
}
.navbar .navbar-toggler-icon{
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255,255,255,0.9%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}

/* Dropdown/Mega Menü: dunkler Hintergrund + Gold-Rand */
.navbar .dropdown-menu{
  background: rgba(11, 28, 45, .98) !important;
  border: 1px solid rgba(201, 162, 77, .20) !important;
  box-shadow: 0 18px 45px rgba(0,0,0,.35) !important;
  border-radius: 18px;
}

/* Mega-Menü Layout: volle Breite auf Desktop */
@media (min-width: 992px){
  .dropdown-mega{ position: static; }
  .dropdown-mega .dropdown-menu{
    width: 100%;
    left: 0;
    right: 0;
    padding: 1.25rem;
    margin-top: .6rem;
    top: 100%;
  }
}

/* Mega-Menü Links */
.navbar .mega-link{
  text-decoration: none;
  display: block;
  padding: .6rem .75rem;
  border-radius: .9rem;
  color: rgba(255,255,255,.90) !important;
}

.navbar .mega-link:hover,
.navbar .mega-link:focus{
  background: rgba(201, 162, 77, .10);
  color: var(--gold) !important;
}

/* Überschriften im Mega-Menü */
.navbar .dropdown-menu .fw-semibold{
  color: rgba(255,255,255,.98) !important;
}

/* Wichtig: text-muted in der Navbar/Mega-Menü hell lassen */
.navbar .text-muted{
  color: rgba(255,255,255,.60) !important;
}

/* Callout Box im Mega-Menü */
.navbar .dropdown-menu .bg-body-secondary{
  background: rgb(0, 49, 118) !important;
  border: 1px solid rgba(201, 162, 77, .18) !important;
}

/* Navbar-Buttons in Theme-Optik */
.navbar .btn-outline-primary{
  border-color: rgba(255,255,255,.35) !important;
  color: rgba(255,255,255,.9) !important;
  border-radius: 12px !important;
}
.navbar .btn-outline-primary:hover{
  background: rgba(255,255,255,.10) !important;
  border-color: rgba(201,162,77,.55) !important;
  color: var(--gold) !important;
}

/* ---------------------------------------
   MAIN: Background / Luxus-Container
---------------------------------------- */

main.container{
  position: relative;
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;

  /* Bild + weiches Overlay 
  background-image:
    radial-gradient(1200px 600px at 20% 0%, rgba(201,162,77,.12), transparent 60%),
    radial-gradient(900px 500px at 90% 20%, rgba(255,255,255,.06), transparent 55%),
    linear-gradient(180deg, rgba(11,28,45,.55), rgba(11,28,45,.78));*/

  background-repeat: repeat-y;
  background-size: 1200px auto;
  background-position: center top;
  background-attachment: scroll;

  border-radius: 22px;
}

/* Cards: edel, ruhig, leicht “floating” */
.card{
  border: 1px solid rgba(11, 28, 45, .08) !important;
  border-radius: var(--lux-radius) !important;
  box-shadow: var(--lux-shadow) !important;
}

/* Headings: etwas mehr “Premium” */
h1, h2, h3, .card-title{
  letter-spacing: .2px;
}

/* Form Controls: dezente Navy-Kante + Gold Fokus */
.form-control, .form-select{
  border-radius: 12px !important;
  border-color: rgba(11, 28, 45, .14) !important;
}

.form-control:focus, .form-select:focus{
  border-color: rgba(201, 162, 77, .65) !important;
  box-shadow: 0 0 0 .25rem rgba(201, 162, 77, .18) !important;
}

/* Primär-Button: Gold (CTA) */
.btn-primary{
  background-color: var(--gold) !important;
  border-color: var(--gold) !important;
  color: #101828 !important;
  font-weight: 600;
  border-radius: 12px !important;
}
.btn-primary:hover, .btn-primary:focus{
  filter: brightness(.95);
}

/* Outline Secondary: “Private Banking” Look */
.btn-outline-secondary{
  border-color: rgba(255,255,255,.35) !important;
  color: rgba(255,255,255,.9) !important;
  border-radius: 12px !important;
}
.btn-outline-secondary:hover{
  background: rgba(255,255,255,.10) !important;
  border-color: rgba(201,162,77,.55) !important;
  color: var(--gold) !important;
}

/* kleine “Gold-Akzente” an sinnvollen Stellen */
.display-6{
  color: rgba(255,255,255,.96) !important;
}

/* ✅ text-muted NICHT global überschreiben (sonst Mega-Menü kaputt)
   Stattdessen nur innerhalb von Content/Cards dunkler machen. */
main .text-muted,
.card .text-muted{
  color: rgba(0,0,0,.70) !important;
}

/* Produkt-Stats Boxen: clean + mini gold top border */
.product-card .border.rounded{
  border-color: rgba(11,28,45,.10) !important;
  position: relative;
}
.product-card .border.rounded::before{
  content:"";
  position:absolute;
  left: 10px;
  right: 10px;
  top: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(255, 178, 12,.75), transparent);
  border-radius: 999px;
}

/* ---------------------------------------
   FOOTER
---------------------------------------- */

footer{
  background: rgba(11,28,45,.95) !important;
  border-top: 1px solid rgba(201,162,77,.18) !important;
}

footer, footer a{
  color: rgba(255,255,255,.72) !important;
}

footer a:hover{
  color: var(--gold) !important;
}

	  
	  /* ✅ Mega Menü: nicht transparent + immer über Content */
.navbar .dropdown-menu{
  background-color: #0B1C2D !important;   /* deckend */
  opacity: 1 !important;
  z-index: 1055 !important;              /* über Navbar/Content */
}

/* falls Bootstrap Variablen reinfunken */
.navbar .dropdown-menu.show{
  background-color: #026EDA !important;
}

/* Optional: bessere Abgrenzung */
.navbar .dropdown-menu{
  border: 1px solid rgba(201, 162, 77, .22) !important;
}

/* ✅ wichtig wegen backdrop-filter: eigenes Stacking sicher machen */
.navbar{
  position: sticky; /* oder relative, wenn du kein sticky willst */
  top: 0;
  z-index: 1050;
}

/* Mega Menü darf nicht hinter irgendwas im main verschwinden */
.dropdown-mega .dropdown-menu{
  position: absolute;
}

/* Optional: leichter „Dim“-Overlay hinter dem Mega Menü (nur Desktop) */
@media (min-width: 992px){
  body.mega-open::before{
    content:"";
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.35);
    z-index: 1040;
  }
}