/* ====== Astrology Theme – custom.css (Bootstrap 5.3+) ====== */
/* Ziel: seriös & modern, nicht esoterisch, dezent kosmisch      */

/* =========
   0) Basis-Fonts (optional)
   ========= */
:root {
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

/* =========
   1) Design Tokens als CSS-Variablen (Light)
   ========= */
:root,
:root[data-bs-theme="light"] {
  /* Primär-Palette – Nacht-Indigo (09063E) mit Tints/Shades */
  --astro-primary-50:  #EEF0FF;
  --astro-primary-100: #D8DBFF;
  --astro-primary-200: #B2B8FF;
  --astro-primary-300: #8C95FF;
  --astro-primary-400: #5E69F3;
  --astro-primary-500: #2E3BCB;
  --astro-primary-600: #1A2799;
  --astro-primary-700: #121C70;
  --astro-primary-800: #0E1556;
  --astro-primary-900: #09063E; /* Kern */

  /* Akzent – Sternenlicht / Polarlicht */
  --astro-accent-1: #2AD2FF; /* zartes Cyan */
  --astro-accent-2: #9B8CFF; /* kühles Violett */

  /* Neutrals (kühle Grautöne für Seriosität) */
  --astro-gray-50:  #F8FAFC;
  --astro-gray-100: #F1F5F9;
  --astro-gray-200: #E2E8F0;
  --astro-gray-300: #CBD5E1;
  --astro-gray-400: #94A3B8;
  --astro-gray-500: #64748B;
  --astro-gray-600: #475569;
  --astro-gray-700: #334155;
  --astro-gray-800: #1E293B;
  --astro-gray-900: #0F172A;

  /* Bootstrap Core Tokens */
  --bs-font-sans-serif: var(--font-sans);
  --bs-body-font-family: var(--font-sans);
  --bs-body-bg:    #FFFFFF;
  --bs-body-color: var(--astro-gray-800);

  --bs-primary:     var(--astro-primary-900);
  --bs-primary-rgb: 9, 6, 62;
  --bs-secondary:   var(--astro-gray-700);
  --bs-success:     #2ECC71;
  --bs-info:        #0EA5E9;
  --bs-warning:     #F59E0B;
  --bs-danger:      #EF4444;

  --bs-link-color:        var(--astro-primary-900);
  --bs-link-hover-color:  var(--astro-primary-700);

  --bs-border-radius:      .75rem;
  --bs-border-radius-sm:   .5rem;
  --bs-border-radius-lg:   1rem;
  --bs-border-color:       var(--astro-gray-200);

  --bs-focus-ring-opacity: .25;
  --bs-focus-ring-color:   rgba(9, 6, 62, .35);

  /* Subtile „Sternenfeld“-Fläche für hero/headers (nur wenn gewünscht nutzen) */
  --astro-sky: radial-gradient(1200px 600px at 10% -20%, rgba(154, 140, 255, .12), transparent 60%),
               radial-gradient(900px 500px at 90% 0%, rgba(42, 210, 255, .10), transparent 55%),
               linear-gradient(180deg, #ffffff 0%, #f8f9ff 100%);
}

/* =========
   2) Dark Mode Tokens
   ========= */
:root[data-bs-theme="dark"] {
  --bs-body-bg:    #0B0D18;               /* sehr dunkler Nachthimmel */
  --bs-body-color: #E5E7EB;

  --bs-primary:     #A7B0FF;              /* aufgehellte Primärfarbe für Dark */
  --bs-primary-rgb: 167, 176, 255;
  --bs-secondary:   #94A3B8;

  --bs-link-color:       #C9CFFF;
  --bs-link-hover-color: #AEB6FF;

  --bs-border-color:     rgba(255,255,255,.12);
  --bs-focus-ring-color: rgba(167,176,255,.35);

  --astro-sky: radial-gradient(1200px 600px at 10% -20%, rgba(154, 140, 255, .25), transparent 60%),
               radial-gradient(900px 500px at 90% 0%, rgba(42, 210, 255, .20), transparent 55%),
               linear-gradient(180deg, #0B0D18 0%, #0F1222 100%);
}

/* =========
   3) Grundtypografie & Links
   ========= */
body {
  letter-spacing: 0.01em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, .h1,
h2, .h2,
h3, .h3 {
  font-family: 'Nova Round', cursive;
  font-weight: 400; /* Nova Round hat nur 400 */
  line-height: 1.2;
}

a {
  text-underline-offset: .15em;
  text-decoration-thickness: .08em;
}
a:hover { text-decoration: underline; }

/* =========
   4) Buttons – klar, fokussiert
   ========= */
.btn {
  font-weight: 600;
  letter-spacing: 0.01em;
  border-radius: var(--bs-border-radius);
}

.btn-primary {
  /* Im Light: sehr dunkles Indigo -> wir nehmen helle Schrift */
  color: #fff;
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
  box-shadow: 0 .25rem .75rem rgba(var(--bs-primary-rgb), .15);
}
.btn-primary:hover {
  background-color: var(--astro-primary-700);
  border-color: var(--astro-primary-700);
}
.btn-primary:active,
.btn-primary:focus {
  background-color: var(--astro-primary-800);
  border-color: var(--astro-primary-800);
}

.btn-outline-primary {
  color: var(--bs-primary);
  border-color: var(--bs-primary);
}
.btn-outline-primary:hover {
  color: #fff;
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
}

/* Zarter „Startrail“-CTA (Akzentverlauf) */
.btn-aurora {
  color: #0B0D18;
  background-image: linear-gradient(135deg, var(--astro-accent-1), var(--astro-accent-2));
  border: 0;
}
.btn-aurora:hover { filter: brightness(.96) contrast(1.05); }

/* =========
   5) Navbar – kompakt & hochwertig
   ========= */
.navbar {
  backdrop-filter: saturate(140%) blur(6px);
  -webkit-backdrop-filter: saturate(140%) blur(6px);
  border-bottom: 1px solid var(--bs-border-color);
}
.navbar-light, .navbar-dark {
  box-shadow: 0 .5rem 1rem rgba(0,0,0,.04);
}
.navbar .nav-link {
  font-weight: 600;
  color: var(--bs-body-color);
  opacity: .85;
}
.navbar .nav-link:hover,
.navbar .nav-link:focus {
  opacity: 1;
  color: var(--bs-primary);
}

/* Aktiver Menüpunkt: dezent */
.navbar .nav-link.active {
  color: var(--bs-primary);
  position: relative;
}
.navbar .nav-link.active::after {
  content: "";
  position: absolute;
  left: .25rem; right: .25rem; bottom: -.35rem;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  opacity: .66;
}

/* =========
   6) Cards, Sections, „kosmische“ Hintergründe
   ========= */
.section-sky {
  background: var(--astro-sky);
}

.card {
  border: 0;
  border-radius: 1rem;
  box-shadow: 0 .75rem 2rem rgba(0,0,0,.06);
}
.card-header {
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.03) 100%);
  border-bottom: 1px solid var(--bs-border-color);
  font-weight: 600;
}
.card-title {
  letter-spacing: -0.01em;
}

[data-bs-theme="dark"] .card {
  box-shadow: 0 .75rem 2rem rgba(0,0,0,.35);
}
[data-bs-theme="dark"] .card-header {
  background: linear-gradient(180deg, rgba(255,255,255,.04) 0%, rgba(255,255,255,0) 100%);
}

/* =========
   7) Formulare – klar und vertrauenswürdig
   ========= */
.form-control,
.form-select {
  border-radius: .75rem;
  border-color: var(--bs-border-color);
}
.form-control:focus,
.form-select:focus {
  box-shadow: 0 0 0 .25rem var(--bs-focus-ring-color);
  border-color: var(--astro-primary-700);
}
.form-text {
  color: var(--astro-gray-600);
}
.input-group-text {
  background-color: var(--astro-gray-50);
  border-color: var(--bs-border-color);
}

/* =========
   8) Badges & Alerts – nüchtern animiert
   ========= */
.badge.bg-primary {
  background-color: var(--bs-primary) !important;
}
.alert-primary {
  color: #fff;
  background: linear-gradient(180deg, var(--astro-primary-800), var(--astro-primary-900));
  border: 0;
}

/* =========
   9) Tabellen – minimales Chrome
   ========= */
.table {
  --bs-table-color: var(--bs-body-color);
  --bs-table-bg: transparent;
  --bs-table-border-color: var(--bs-border-color);
  --bs-table-striped-bg: rgba(0,0,0,.02);
}
[data-bs-theme="dark"] .table {
  --bs-table-striped-bg: rgba(255,255,255,.04);
}

/* =========
   10) Utilities – dezente Helfer
   ========= */
.text-starlight { color: var(--astro-accent-1) !important; }
.text-nebula   { color: var(--astro-accent-2) !important; }

.bg-constellation {
  background:
    radial-gradient(2px 2px at 20% 30%, rgba(255,255,255,.65) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 70% 10%, rgba(255,255,255,.45) 50%, transparent 51%),
    radial-gradient(2px 2px at 80% 60%, rgba(255,255,255,.55) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 30% 80%, rgba(255,255,255,.35) 50%, transparent 51%),
    linear-gradient(180deg, rgba(255,255,255,.0), rgba(255,255,255,.0));
  background-color: var(--astro-primary-900);
}

/* Hero mit subtiler Sternoptik (Light/Dark harmoniert mit --astro-sky) */
.hero {
  background: var(--astro-sky);
  border-bottom: 1px solid var(--bs-border-color);
}
.hero .display-4,
.hero .h1 { letter-spacing: -0.02em; }

/* =========
   11) Fokus & Accessibilty
   ========= */
:focus-visible {
  outline: .25rem solid var(--bs-focus-ring-color);
  outline-offset: 2px;
}

/* =========
   12) Kleine Transition-Politur
   ========= */
.btn, .nav-link, .form-control, .form-select, .card, .badge {
  transition: all .2s ease;
}
/* ===== Sidebar Navigation Styling ===== */

/* Hintergrund der Sidebar (hell/dunkel) */
.bg-body {
  background-color: var(--bs-body-bg) !important;
}

/* Basis-Links */
.nav-pills .nav-link {
  color: var(--bs-body-color);
  border-radius: var(--bs-border-radius);
  font-weight: 500;
  margin-bottom: .25rem;
  transition: background-color .2s ease, color .2s ease;
}

/* Hover-Effekt */
.nav-pills .nav-link:hover {
  background-color: var(--astro-primary-50);
  color: var(--bs-primary);
}

/* Aktiver Link */
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  background-color: var(--bs-primary);
  color: #fff;
}

/* Icons innerhalb der Links */
.nav-pills .nav-link i {
  opacity: .75;
  transition: opacity .2s;
}
.nav-pills .nav-link:hover i,
.nav-pills .nav-link.active i {
  opacity: 1;
  color: inherit;
}
/* Navbar Brand + Links */
.navbar-brand,
.navbar .nav-link,
.navbar .dropdown-item {
  font-family: 'Nova Round', cursive;
  font-weight: 400;
  letter-spacing: 0.01em;
}

/* Sidebar Titel & Links */
.nav-pills .nav-link,
.sidebar .nav-link,
.sidebar .nav-header,
.sidebar .nav-item > a {
  font-family: 'Nova Round', cursive;
  font-weight: 400;
  letter-spacing: 0.01em;
}

/* Optional: Sidebar Überschrift "Mitgliederbereich" */
.sidebar-title,
a.fs-5 {
  font-family: 'Nova Round', cursive !important;
}