:root{
  --fh-red: #c1121f;
  --fh-red-2: #ff0a54;
  --fh-dark: #0b0b10;
  --fh-card: rgba(255,255,255,.06);
  --fh-border: rgba(255,255,255,.12);
  --fh-text: rgba(255,255,255,.88);
  --fh-muted: rgba(255,255,255,.62);
}

body{
  background: radial-gradient(1200px 700px at 20% 0%, rgba(255, 10, 84, .18), transparent 55%),
              radial-gradient(900px 600px at 100% 20%, rgba(193, 18, 31, .16), transparent 60%),
              var(--fh-dark);
  color: var(--fh-text);
  min-height: 100vh;
}

.fh-glow{
  box-shadow: 0 0 0.9rem rgba(255, 10, 84, .25), 0 0 2.2rem rgba(193, 18, 31, .18);
}

.fh-card{
  background: var(--fh-card);
  border: 1px solid var(--fh-border);
  border-radius: 18px;
  backdrop-filter: blur(10px);
}

.fh-brand{
  letter-spacing: .04em;
  font-weight: 700;
}

.btn-fh{
  background: linear-gradient(135deg, var(--fh-red-2), var(--fh-red));
  border: none;
  color: #fff;
}
.btn-fh:hover{ filter: brightness(1.05); color:#fff; }

.text-fh-muted{ color: var(--fh-muted) !important; }

.form-control, .form-select{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  color: var(--fh-text);
}
.form-control:focus, .form-select:focus{
  border-color: rgba(255, 10, 84, .55);
  box-shadow: 0 0 0 .25rem rgba(255, 10, 84, .15);
  background: rgba(255,255,255,.06);
  color: var(--fh-text);
}

.navbar{
  background: rgba(0,0,0,.22);
  border-bottom: 1px solid rgba(255,255,255,.08);
  backdrop-filter: blur(10px);
}

a{ color: rgba(255, 10, 84, .95); }
a:hover{ color: rgba(255, 10, 84, 1); }

/* =========================================
   Dark-Theme Fix: Nav-Tabs lesbar machen
   ========================================= */
.nav-tabs{
  border-bottom: 1px solid rgba(255,255,255,.12);
}

.nav-tabs .nav-link{
  color: rgba(255,255,255,.78);
  border: 1px solid transparent;
  border-top-left-radius: 14px;
  border-top-right-radius: 14px;
}

.nav-tabs .nav-link:hover{
  color: rgba(255,255,255,.95);
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.10) rgba(255,255,255,.10) transparent;
}

.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link{
  color: rgba(255,255,255,.98);
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.14) rgba(255,255,255,.14) transparent;
}


/* =========================================
   Dark-Theme Fix: Hilfetexte & Dropdowns
   ========================================= */

/* Bootstrap Hilfetexte unter Inputs (form-text) sichtbar machen */
.form-text{
  color: var(--fh-muted) !important;
}

/* Placeholder etwas besser lesbar */
.form-control::placeholder{
  color: rgba(255,255,255,.55) !important;
}

/* Dropdown-Liste lesbar machen (Browser rendert Options oft auf weißem Hintergrund) */
select.form-select option,
.form-select option{
  color: #111 !important;
  background-color: #fff !important;
}

select.form-select optgroup,
.form-select optgroup{
  color: #111 !important;
  background-color: #fff !important;
}

/* =========================================
   Dark-Theme Fix: disabled/readonly Inputs
   ========================================= */
.form-control:disabled,
.form-control[readonly],
.form-select:disabled,
.form-select[readonly]{
  background-color: rgba(255,255,255,.06) !important;
  border-color: rgba(255,255,255,.12) !important;
  color: rgba(255,255,255,.88) !important;
  opacity: 1 !important; /* Bootstrap dimmt disabled sonst */
  -webkit-text-fill-color: rgba(255,255,255,.88) !important; /* Chrome/Safari */
}

/* Optional: falls du disabled-Inputs leicht "muted" willst */
.form-control:disabled,
.form-control[readonly]{
  cursor: not-allowed;
}