/* custom.css */

/* 1) Schriftart Lexend importieren */
@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@300;400;500;600;700&display=swap');

/* 2) Allgemeine Custom-Farben */
:root {
  --color-primary:       #003D01;
  --color-secondary:     #D9FFBD;
  --color-text:          #003D01;
  --color-accent:        #E20B38;
  --color-h2:            #228524;
  --color-btn-hover:     #06126A;
  --color-blue:     #2439da;
  --color-main-bg:       #EDFFE1;
  --color-banner-green:  #CDE6BD;

  /* Font */
  --bs-font-sans-serif:  'Lexend', sans-serif;
}

/* 3) Light Mode (data-bs-theme="light") */
[data-bs-theme="light"] {
  --bs-body-bg:          var(--color-main-bg);
  --bs-body-color:       var(--color-text);
  --bs-primary:          var(--color-primary);
  --bs-secondary:        var(--color-secondary);
  --bs-info:             var(--color-accent);
  --bs-border-color:     var(--color-primary);
}

/* 4) Dark Mode (data-bs-theme="dark") */
[data-bs-theme="dark"] {
  /* Bootstrap setzt hier automatisch --bs-body-bg auf dunklen Standard */
  --bs-body-color:       var(--color-secondary);
  --bs-primary:          var(--color-secondary);
  --bs-secondary:        var(--color-primary);
  --bs-info:             var(--color-accent);
  --bs-border-color:     var(--color-secondary);
}

/* 5) Basis-Stile */
body {
  background-color: var(--bs-body-bg) !important; /* default bootstrap., in lightmode eigene*/
  color:            var(--bs-body-color) !important;
  font-family:      var(--bs-font-sans-serif) !important;
}

input .form-control{
  background-color: #fff !important;
  color:            var(--bs-body-color) !important;
  border:          1px solid var(--bs-border-color) !important;
}

/* 6) Überschriften */
h2 {
  color: var(--color-h2);
}

/* 7) Header / Navbar */
.navbar {
  background-color: var(--color-primary) !important; 
}
.navbar .navbar-brand,
.navbar .nav-link {
  color: var(--color-main-bg) !important;
}
/* Light-Mode: Dropdown-Item Hover */
[data-bs-theme="light"] .dropdown-menu .dropdown-item:hover {
  color:        #E20B38 !important;      /* Text-Farbe beim Hover */
  background-color: var(--bs-secondary) !important; /* Hintergrund beim Hover */
}

/* 8) Karten */
.card {
  border: 1px solid var(--bs-border-color) !important;
  background-color: var(--bs-body-bg);
  color:            var(--bs-body-color);
}

  .alert-info a {
    color: var(--bs-primary);
    text-decoration: underline;
  }
  .alert-info a:hover {
    color: initial;
  }

/* 10) Tooltips */
.tooltip .tooltip-inner {
  background-color: var(--bs-primary);
  color:            var(--bs-body-bg);
  border-radius:    0.375rem;
}
.tooltip .tooltip-arrow::before {
  border-top-color: var(--bs-primary) !important;
}

/* 11) Links */
a {
  color: var(--bs-primary);
  text-decoration: none;
}
a:hover {
  color: var(--bs-accent);
}

/* 12) Banner-Green */
.banner-green {
  background-color: var(--color-banner-green);
  padding:          1rem;
  border-radius:    var(--bs-border-radius);
}

/* 13) Footer */
footer {
  background-color: var(--bs-body-bg);
  color:            var(--bs-body-color);
  border-top:       1px solid var(--bs-border-color);
  padding:          2rem 0;
}
footer a {
  color: var(--bs-primary);
}

.btn .card {
  border-radius: 3px !important;
}

html[data-bs-theme="light"] .card {
  background-color: #fff; /* oder jede andere helle Nuance */
}

/* Leichter Hintergrund für Cards im Darkmode */
html[data-bs-theme="dark"] .card {
  background-color: #2b2b2b; /* dunkles Grau statt pechschwarz */
}

/* Lightmode: Input-Hintergrund an MAIN BG angleichen */
html[data-bs-theme="light"] input[type="text"],
html[data-bs-theme="light"] input[type="email"],
html[data-bs-theme="light"] .form-control {
  background-color: #fff; /* dein MAIN BG */
  color: #003D01;            /* Text in Primary */
}

/* Darkmode: etwas abgehobenes Dunkelgrau */
html[data-bs-theme="dark"] input[type="text"],
html[data-bs-theme="dark"] input[type="email"],
html[data-bs-theme="dark"] .form-control {
  background-color: #343a40; /* dunkelgrau (Bootstrap gray-800) */
  color: #DBF6FF;            /* heller Text für Kontrast */
}

/* Optional: abgerundete Ecken und Übergang beim Fokussieren */
.form-control {
  border-radius: 0.375rem;
  transition: background-color 0.2s ease;
}

.form-control:focus {
  background-color: rgba(255, 255, 255, 0.9);
  border-color: var(--bs-primary);
  box-shadow: 0 0 0 0.2rem rgba(0, 61, 1, 0.25);
}

/* CHANGED: btn-outline-light im Light‑Theme mit dunklem Hintergrund */
[data-bs-theme="light"] .btn-outline-light {
  color: var(--color-primary) !important;
  background-color: #fff !important;
  border-color: var(--color-primary) !important;
}
[data-bs-theme="light"] .btn-outline-light:hover,
[data-bs-theme="light"] .btn-outline-light:focus,
[data-bs-theme="light"] .btn-outline-light.active,
[data-bs-theme="light"] .btn-check:checked + .btn-outline-light,
[data-bs-theme="light"] .btn-outline-light:active {
  color: #fff !important;
  background-color: var(--bs-blue) !important;
  border-color: var(--bs-blue) !important;
}

/* custom.css – ganz ans Ende einfügen *