/* =====================================================
   Farb- und Stildefinition – Köln-Bonner Akademie Landingpage
   Akzentfarbe: #0D6EFD (Bootstrap-Blau)
   ===================================================== */

:root {
  --brand-wihte: #fff;
  --brand-blue: #0d6efd;       /* helles Bootstrap-Blau */
  --brand-blue-dark: #0a58ca;  /* Hover-Ton */
  --brand-text-blue: #32538a;  /* dezentes ADR-Blau */
  --brand-text: #212529;
  --bs-dark-rgb: 50, 83, 138;
}

/* -------------------------------
   Grundlayout
---------------------------------- */
body {
  background-color: #ffffff;
  color: var(--brand-text);
  font-family: "Inter", "Segoe UI", Roboto, Arial, sans-serif;
  line-height: 1.6;
}

/* -------------------------------
   Überschriften
---------------------------------- */
h1 {
  color: #fff;
  font-weight: 600;
}
h1.jp-3 {
  color: var(--brand-text-blue);
  font-weight: 600;
}


h2, h3, h4, h5, h6 {
  color: var(--brand-text-blue);
  font-weight: 600;
}

/* Alle H4-Elemente */
h4,
.h4 {
  color: # !important;
  font-weight: 600;
}

/* Kombination mit Bootstrap-Klassen (z. B. h4.mb-3, h4.mt-4, etc.) */
h4.mb-3,
.h4.mb-3,
h4.mt-3,
.h4.mt-3,
h4.mb-4,
.h4.mb-4 {
  color: #32538A !important;
}

/* Falls H4 in dunklen Bereichen (Header, Footer) vorkommt: weiß lassen */
header h4,
footer h4.mb-3,
.h4.mb-3,{
  color: #fff !important;
}
/* -------------------------------
   Links
---------------------------------- */
a {
  color: rgba(50,83,138,1.00);
  text-decoration: none;
  transition: color 0.2s ease;
}
a:hover {
  color: var(--brand-blue-dark);
  text-decoration: underline;
}
/* Aktive Navigationslinks & aktive Zustände */
.nav-link.active,
.navbar-nav .nav-link.active,
a.active,
a[aria-current="page"],
a.current {
  color: var(--brand-text-blue) !important;
  font-weight: 600;
}
/* -------------------------------
   Buttons
---------------------------------- */
.btn-primary {
  background-color: #32538A;
  border-color: var(--brand-blue);
}
.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--brand-blue-dark);
  border-color: var(--brand-blue-dark);
}

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

/* =====================================================
   Buttons – keine Textdekoration (saubere CTA-Darstellung)
   ===================================================== */

/* Alle Buttons & Button-Links */
.btn,
a.btn,
button.btn {
  text-decoration: none !important;
}

/* Auch bei Hover, Focus, Active */
.btn:hover,
a.btn:hover,
button.btn:hover,
.btn:focus,
a.btn:focus,
button.btn:focus,
.btn:active,
a.btn:active,
button.btn:active {
  text-decoration: none !important;
  outline: none !important;
  box-shadow: none; /* optional: glatte Optik ohne Leuchtrand */
}

/* Option: wenn du den Fokusrahmen barrierefrei behalten willst, 
   aber dezenter in deiner Farbe (#32538A) */
.btn:focus-visible {
  box-shadow: 0 0 0 0.15rem rgba(50,83,138,0.4) !important;
}


/* -------------------------------
   Navbar (optional Blauakzent)
---------------------------------- */
.navbar-light .navbar-nav .nav-link.active,
.navbar-light .navbar-nav .show > .nav-link {
  color: var(--brand-blue);
}

/* -------------------------------
   Formular-Fokus
---------------------------------- */
.form-control:focus {
  border-color: var(--brand-blue);
  box-shadow: 0 0 0 0.2rem rgba(13,110,253,0.25);
}

/* -------------------------------
   Footer
---------------------------------- */
footer {
  background-color: var(--bs-dark-rgb);
  color: #fff;
  font-size: 0.9rem;
  padding: 1.5rem 0;
}
footer a {
  color: #fff;
  opacity: 0.9;
}
footer a:hover {
  opacity: 1;
  text-decoration: underline;
}

/* -------------------------------
   Utility-Klassen
---------------------------------- */
.text-brand {
  color: var(--brand-blue) !important;
}
.bg-brand {
  background-color: var(--brand-blue) !important;
  color: #fff !important;
}

/* =====================================================
   Erweiterung: Terminlisten / Tabellen / Cards
   Farbangleich an ADR-Blau (#32538A)
   ===================================================== */

/* Card-Ränder und Überschriften */
.card,
.list-group-item,
.table,
.alert-info {
  border-color: #32538A !important;
}

/* Titel / Header von Cards oder Terminabschnitten */
.card-header,
.table thead th {
  background-color: #32538A !important;
  color: #fff !important;
  font-weight: 600;
}

/* Einzelne Terminbox (z. B. in div. Kurslisten) */
.termin-box {
  border: 2px solid #32538A;
  border-radius: 0.75rem;
  padding: 1rem;
  transition: all 0.2s ease-in-out;
}
.termin-box:hover {
  box-shadow: 0 0 10px rgba(50,83,138,0.3);
  transform: translateY(-2px);
}

/* Tabellenrahmen */
.table-bordered > :not(caption) > * > * {
  border-color: #32538A !important;
}

/* Terminüberschrift (falls z. B. .termin-title genutzt) */
.termin-title {
  color: #32538A !important;
  font-weight: 600;
}

/* Datum / Label Hervorhebung */
.badge-termin,
.label-termin {
  background-color: #32538A;
  color: #fff;
  padding: 0.4em 0.7em;
  border-radius: 0.4em;
  font-size: 0.85rem;
}

/* Bootstrap-Alert (z. B. Hinweis auf Kursbeginn) */

.alert-info {
  background-color: rgba(50,83,138,0.08);
  color: #32538A;
  border: 1px solid #32538A;
}
.accordion-button:not(.collapsed) {
  color: #32538A;
  background-color: rgba(50,83,138,0.08);
}
.accordion-item {
  border-color: #32538A !important;
}
.accordion-button:not(.collapsed) {
  color: #32538A;
  background-color: rgba(50,83,138,0.08);
}
.accordion-item {
  border-color: #32538A !important;
}


/* === Form Response Panel (CSS-only window) === */
/* Container: zentriert in beide Richtungen */
#formResponsePanel {
  position: fixed;
  inset: 0;                 /* statt left/bottom → nimmt den ganzen Viewport */
  z-index: 9999;
  display: none;            /* wird per .is-open umgeschaltet */
  justify-content: center;  /* horizontal zentriert */
  align-items: center;      /* vertikal zentriert */
}

/* Beim Öffnen als Flex-Overlay anzeigen */
#formResponsePanel.is-open {
  display: flex;
}

/* Box bleibt weiß mit 3D-Schatten (unverändert) */
.form-response {
  background: #ffffff;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.06);
  box-shadow:
    0 18px 40px rgba(0,0,0,.20),
    0  6px 18px rgba(0,0,0,.12),
    inset 0 1px 0 rgba(255,255,255,.6);
  max-width: 560px;
  width: calc(100vw - 32px);
  padding: 16px 20px;
  position: relative;
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
}