/* ============================================================
   theme-dark.css – Serancon Security Portal (Dunkel-Design)
   Ergänzt Bootstrap 5.3, ohne es zu ersetzen.
   ============================================================ */

:root {
  color-scheme: dark;

  /* eigene Design-Variablen */
  --bg:      #0b0f1a;
  --bg2:     #0d1117;
  --bg-card: #141d2e;
  --cyan:    #00cfef;
  --border:  rgba(255,255,255,.08);
  --text-1:  #e2e8f0;
  --text-2:  #94a3b8;
  --text-3:  #64748b;
  --navy:    #0f172a;

  /* Bootstrap-Variablen überschreiben — verhindert weiße Tabellen, Dropdowns etc. */
  --bs-body-bg:        #0b0f1a;
  --bs-body-color:     #e2e8f0;
  --bs-card-bg:        #141d2e;
  --bs-border-color:   rgba(255,255,255,.08);
  --bs-table-bg:       transparent;
  --bs-table-striped-bg: rgba(255,255,255,.03);
  --bs-table-hover-bg:   rgba(0,207,239,.07);
  --bs-dropdown-bg:    #141d2e;
  --bs-dropdown-border-color: rgba(255,255,255,.1);
  --bs-dropdown-link-color:   #94a3b8;
  --bs-dropdown-link-hover-bg: #0f172a;
  --bs-modal-bg:       #141d2e;
  --bs-modal-header-bg: #0f172a;
  --bs-input-bg:       #0f172a;
  --bs-input-border-color: rgba(255,255,255,.15);
  --bs-input-color:    #e2e8f0;
}

/* ——— Hintergrund ——— */
body {
  background-color: var(--bg) !important;
  color: var(--text-1) !important;
}

#background-layer {
  background-color: var(--bg) !important;
}

/* ——— Haupt-Container ——— */
.container-box {
  background: var(--bg-card) !important;
  box-shadow: 0 4px 20px rgba(0,0,0,.5) !important;
  border: 1px solid var(--border);
}

.container-box .border-top {
  border-color: var(--border) !important;
}

.container-box footer .text-muted,
.container-box footer a.text-muted {
  color: var(--text-3) !important;
}

.container-box footer a {
  color: var(--text-2) !important;
}

.container-box footer a:hover {
  color: var(--cyan) !important;
}

/* ——— Überschriften / Text ——— */
h4, h5, h6, p.lead {
  color: var(--text-1);
}

.text-muted { color: var(--text-3) !important; }
.subtitle-tagline small { color: var(--text-3) !important; }

/* ——— Cards ——— */
.card {
  background-color: var(--bg-card) !important;
  border-color: var(--border) !important;
  color: var(--text-1) !important;
}

.card-header {
  background-color: var(--navy) !important;
  border-bottom-color: var(--border) !important;
  color: var(--text-1) !important;
}

.card-body {
  background-color: var(--bg-card) !important;
  color: var(--text-1) !important;
}

/* card-body.row hat durch Bootstrap-Gutter margin-top: -Xrem → zieht Body in den Header */
.card-body.row {
  margin-top: 0 !important;
}

/* ——— Service-Kacheln (start.html) ——— */
.nav-btn {
  background: var(--bg-card) !important;
  border-color: rgba(255,255,255,.12) !important;
  color: var(--text-1) !important;
  box-shadow: 0 4px 14px rgba(0,0,0,.35) !important;
}

.nav-btn:hover {
  background: #1a2540 !important;
  box-shadow: 0 6px 18px rgba(0,0,0,.45) !important;
}

.nav-btn p.small,
.nav-btn .small {
  color: var(--text-2) !important;
}

.nav-btn.nav-btn-disabled {
  background-color: #0f1728 !important;
  border-color: rgba(255,255,255,.05) !important;
  color: var(--text-3) !important;
  opacity: .75;
}

/* ——— Preis-Aufschlüsselung ——— */
.price-breakdown li {
  border-bottom-color: var(--border) !important;
  color: var(--text-2) !important;
}

.price-breakdown li:last-child {
  border-top-color: var(--border) !important;
  color: var(--text-1) !important;
}

/* ——— Formulare ——— */
.form-control,
.form-select {
  background-color: var(--navy) !important;
  border-color: rgba(255,255,255,.15) !important;
  color: var(--text-1) !important;
}

.form-control::placeholder {
  color: var(--text-3) !important;
}

.form-control:focus,
.form-select:focus {
  background-color: #162032 !important;
  border-color: var(--cyan) !important;
  box-shadow: 0 0 0 .2rem rgba(0,207,239,.2) !important;
  color: var(--text-1) !important;
}

.form-label { color: var(--text-2) !important; }
.form-text  { color: var(--text-3) !important; }

.form-check-label { color: var(--text-2) !important; }

.form-check-input {
  background-color: var(--navy) !important;
  border-color: rgba(255,255,255,.25) !important;
}

.form-check-input:checked {
  background-color: var(--cyan) !important;
  border-color: var(--cyan) !important;
}

/* Datumseingabe + Select: OS-UI in dunkel */
input[type="date"].form-control,
.form-select,
select {
  color-scheme: dark;
}

/* Native option-Elemente dunkel */
option {
  background-color: #0f172a;
  color: #e2e8f0;
}

option:hover,
option:focus,
option:checked {
  background-color: #162032;
  color: #e2e8f0;
}

/* ——— Alerts ——— */
.alert-success {
  background-color: rgba(20,90,60,.35) !important;
  border-color: rgba(34,197,94,.3) !important;
  color: #86efac !important;
}

.alert-info {
  background-color: rgba(14,80,130,.3) !important;
  border-color: rgba(56,189,248,.3) !important;
  color: #7dd3fc !important;
}

.alert-danger {
  background-color: rgba(100,20,20,.35) !important;
  border-color: rgba(239,68,68,.3) !important;
  color: #fca5a5 !important;
}

.alert-warning {
  background-color: rgba(100,70,5,.35) !important;
  border-color: rgba(234,179,8,.3) !important;
  color: #fde68a !important;
}

/* ——— Badges ——— */
.badge-label { background: var(--text-3) !important; }
.badge-premium { background: #ffc107 !important; color: #000 !important; }
.badge-light   { background: #1d4ed8 !important; }

/* ——— Buttons ——— */
.btn-outline-secondary {
  color: var(--text-2) !important;
  border-color: rgba(255,255,255,.2) !important;
}

.btn-outline-secondary:hover {
  background-color: rgba(255,255,255,.08) !important;
  color: var(--text-1) !important;
  border-color: rgba(255,255,255,.3) !important;
}

/* ——— RSS-Boxen ——— */
.rss-box {
  background: var(--bg-card) !important;
  color: var(--text-1) !important;
  border-color: var(--border) !important;
}

.rss-box:hover { background: #1a2540 !important; }
.rss-box .rss-title-link { color: var(--cyan) !important; }
.rss-box .rss-meta { color: var(--text-3) !important; }
.rss-box .rss-summary { color: var(--text-2) !important; }

/* ——— Pagination ——— */
.pagination .page-link {
  background-color: var(--bg-card) !important;
  border-color: var(--border) !important;
  color: var(--cyan) !important;
}

.pagination .active .page-link {
  background-color: var(--cyan) !important;
  border-color: var(--cyan) !important;
  color: #000 !important;
}

.pagination .page-link:hover {
  background-color: var(--navy) !important;
  color: var(--text-1) !important;
}

/* ——— infos.html: Infostrecken-Boxen ——— */
.section-card {
  border-color: var(--cyan) !important;
}

.section-head {
  background: linear-gradient(180deg, #142030, #0f1a28) !important;
  border-bottom-color: rgba(0,207,239,.2) !important;
  color: var(--text-1) !important;
}

/* ——— PTA-Bestätigungs-Box ——— */
.pta-confirm-box {
  background-color: var(--navy) !important;
  border-color: rgba(255,255,255,.12) !important;
}

/* bg-light-Elemente auf dunkel umschalten */
.bg-light {
  background-color: var(--navy) !important;
  color: var(--text-1) !important;
}

/* ——— Empfängerquelle-Karten (infos.html) ——— */
.eq-card {
  background: var(--navy) !important;
  border-color: rgba(255,255,255,.12) !important;
  color: var(--text-1) !important;
}

.eq-card:hover {
  border-color: var(--cyan) !important;
  background: #162032 !important;
}

.eq-card-active {
  border-color: var(--cyan) !important;
  background: rgba(0,207,239,.08) !important;
  box-shadow: 0 0 0 3px rgba(0,207,239,.2) !important;
}

/* ——— Popover ——— */
.popover {
  background-color: var(--bg-card) !important;
  border-color: rgba(255,255,255,.15) !important;
}

.popover-header {
  background-color: var(--navy) !important;
  border-bottom-color: var(--border) !important;
  color: var(--text-1) !important;
}

.popover-body {
  color: var(--text-2) !important;
}

.bs-popover-auto[data-popper-placement^=bottom] > .popover-arrow::after,
.bs-popover-bottom > .popover-arrow::after {
  border-bottom-color: var(--bg-card) !important;
}

/* ——— Hintergrund-Canvas (Hex-Regen + Netzwerk, dezent) ——— */
#background-canvas {
  opacity: 0.55;
}

/* ——— iframe-Vorschau (E-Mail bleibt hell) ——— */
.preview-wrap {
  border-color: var(--border) !important;
  background: #fff !important;
}

/* ——— Spinner ——— */
.spinner-border { color: var(--cyan) !important; }

/* ——— Collapse-Inhalte ——— */
.collapse .card-body {
  background-color: var(--bg-card) !important;
}

/* ======================================================
   Info-Seiten (alle info_*.html teilen dieselbe CSS-Struktur)
   Inline-<style>-Blöcke in Templates wurden bereinigt –
   !important nur noch wo Bootstrap-Spezifität es erfordert.
   ====================================================== */

.service-content-root {
  color: var(--text-2);
}

.service-content-root h2,
.service-content-root h5 {
  color: var(--text-1);
}

.service-content-root p,
.service-content-root li,
.service-content-root span:not(.step-number) {
  color: var(--text-2);
}

/* ——— Schrift ——— */
.service-content-root {
  font-family: 'Inter', sans-serif;
  text-align: left;
  line-height: 1.7;
  width: 100%;
}

.service-content-root h2,
.service-content-root h4,
.service-content-root h5,
.service-content-root p,
.service-content-root li,
.service-content-root span,
.service-content-root div {
  font-family: 'Inter', sans-serif;
}

.service-content-root h2 {
  font-size: 1.75rem;
  font-weight: 600;
  margin-bottom: 1rem;
  margin-top: 2.5rem;
}

.service-content-root h2:first-of-type {
  margin-top: 0;
}

.service-content-root h5 {
  font-weight: 600;
  margin-bottom: 0.5rem;
  font-size: 1.1rem;
}

/* Service-Card (äußere Karte) */
.service-content-root .service-card {
  background-color: var(--bg-card);
  border-radius: 8px;
  border: 1px solid var(--border);
  box-shadow: 0 8px 30px rgba(0,0,0,.45);
  overflow: hidden;
  margin-bottom: 2rem;
}

/* Card-Header: Cyan-Balken, Schrift SCHWARZ (Nutzerwunsch) */
.service-content-root .service-card-header {
  background-color: var(--cyan);
  color: #000;
  font-weight: 900;
  letter-spacing: 0.06em;
  font-size: 1.05rem;
  text-transform: uppercase;
  padding: 16px 24px;
  text-align: left;
}

/* Card-Body */
.service-content-root .service-card-body {
  background-color: var(--bg-card);
  padding: 32px 24px 36px;
}

@media (min-width: 992px) {
  .service-content-root .service-card-body {
    padding: 40px 48px 44px;
  }
}

/* Feature-Karten (3er-Reihe) */
.service-content-root .feature-card {
  padding: 1.5rem;
  text-align: center;
  background-color: #1a2540;
  border: 1px solid var(--border);
  border-radius: 10px;
  height: 100%;
  box-shadow: 0 2px 8px rgba(0,0,0,.3);
  transition: box-shadow 0.2s ease;
}

.service-content-root .feature-card:hover {
  transform: none;
  box-shadow: 0 10px 24px rgba(0,0,0,.5);
}

.service-content-root .feature-card h5 {
  color: var(--text-1);
}

.service-content-root .feature-card p {
  color: var(--text-2);
}

/* Feature-Icon */
.service-content-root .feature-icon {
  font-size: 2rem;
  margin-bottom: 1rem;
}

/* Cyan-Check Liste */
.service-content-root .cyan-check {
  margin-bottom: 0.5rem;
}

.service-content-root .cyan-check::before {
  content: "\f00c";
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  font-style: normal;
  display: inline-block;
  margin-right: 10px;
}

/* Step-Liste */
.service-content-root .step-list li {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

/* Step-Number Badge */
.service-content-root .step-number {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: var(--cyan);
  color: #0b0f1a;
  font-weight: 700;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
}

/* Hinweis-Box (note-box) */
.service-content-root .note-box {
  background-color: rgba(0,207,239,.06);
  border-left: 4px solid var(--cyan);
  border-radius: 0 8px 8px 0;
  padding: 1.1rem 1.4rem;
  margin: 1rem 0 1.5rem;
  font-size: 0.93rem;
  color: var(--text-2);
}

.service-content-root .note-box p {
  color: var(--text-2);
  margin-bottom: 0;
}

/* Trennlinie */
.service-content-root .section-divider {
  border: none;
  border-top: 1px solid var(--border);
  margin: 2.5rem 0;
}

/* ——— Preis-Tabelle (.pricing-table) ——— */
.service-content-root .pricing-table {
  background: transparent;
}

.service-content-root .pricing-table td {
  background: transparent;
  color: var(--text-2);
  border-bottom-color: var(--border);
}

.service-content-root .pricing-table tr:nth-child(even) td {
  background: rgba(255,255,255,.03);
}

.service-content-root .pricing-table tr:last-child td {
  border-bottom: none;
}

/* ——— Vergleichs-Tabelle (.compare-table, z. B. Phishing Premium) ——— */
.service-content-root .compare-table {
  background: transparent;
}

.service-content-root .compare-table th {
  background: #162032;
  color: var(--cyan);
  border-bottom-color: rgba(0,207,239,.25);
  font-weight: 700;
}

/* erste Spalte (Merkmal-Spalte) etwas hervorheben */
.service-content-root .compare-table td:first-child {
  color: var(--text-1);
  font-weight: 500;
}

.service-content-root .compare-table td {
  background: transparent;
  color: var(--text-2);
  border-bottom-color: var(--border);
}

.service-content-root .compare-table tr:nth-child(even) td {
  background: rgba(255,255,255,.03);
}

.service-content-root .compare-table tr:last-child td {
  border-bottom: none;
}

/* Feature-Icon Farbe */
.service-content-root .feature-icon {
  color: var(--cyan);
}

/* Cyan-Check Pseudo-Element */
.service-content-root .cyan-check::before {
  color: var(--cyan);
}

/* Ungeordnete Listen ohne Einzug */
.service-content-root ul.list-unstyled {
  padding-left: 0;
  list-style: none;
  margin-bottom: 1.5rem;
}

/* Step-Liste Layout */
.service-content-root .step-list {
  list-style: none;
  padding-left: 0;
  margin-bottom: 1.5rem;
}

/* CTA-Gruppe */
.service-content-root .cta-group {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-top: 2.5rem;
  flex-wrap: wrap;
}

/* Schritt-Liste */
.service-content-root .step-content strong {
  color: var(--text-1);
}

/* Freitext in step-content */
.service-content-root .step-content {
  color: var(--text-2);
}

/* ——— CTA-Button in Info-Seiten: Pill-Form, dunkler Text ——— */
.service-content-root .cta-button {
  display: inline-block;
  padding: 14px 28px;
  font-size: 1.05rem;
  font-weight: 700;
  text-decoration: none;
  background-color: var(--cyan);
  color: #0b0f1a !important;
  border-color: transparent;
  border-radius: 9999px;
  box-shadow: 0 2px 8px rgba(0,207,239,.2);
  transition: box-shadow .25s ease;
}

.service-content-root .cta-button:hover {
  background-color: var(--cyan);
  color: #0b0f1a !important;
  transform: none;
  box-shadow: 0 0 0 3px rgba(255,255,255,.3), 0 0 16px rgba(255,255,255,.3);
  border-color: transparent;
}

/* ——— Globaler btn-primary Override (Cyan, dunkler Text, Pill-Form, Glow-Hover) ——— */
.btn-primary {
  background-color: var(--cyan) !important;
  color: #0b0f1a !important;
  border: none !important;
  border-radius: 9999px !important;
  font-weight: 700 !important;
  box-shadow: 0 2px 8px rgba(0,207,239,.2) !important;
  transition: box-shadow .25s ease !important;
}

.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--cyan) !important;
  color: #0b0f1a !important;
  box-shadow: 0 0 0 3px rgba(255,255,255,.3), 0 0 16px rgba(255,255,255,.3) !important;
}

.btn-primary:active {
  box-shadow: 0 2px 8px rgba(0,207,239,.2) !important;
}

/* ——— Portal-weiter Button-Override (btn-custom, falls im content-layer) ——— */
.btn-custom.disabled,
.btn-custom:disabled {
  background: #1e3040 !important;
  color: var(--text-3) !important;
  opacity: .6;
  transform: none !important;
  box-shadow: none !important;
  cursor: not-allowed;
}

/* outline-secondary im neuen Stil (Abbrechen, Startseite) */
.btn-outline-secondary {
  border-radius: 9999px !important;
}

/* ======================================================
   Info-Seiten: zusätzliche Komponenten-Overrides
   (role-card, topic-item, grade-badges)
   ====================================================== */

/* role-card (info_msp_email_phishing.html – drei Ebenen-Boxen) */
.service-content-root .role-card {
  background-color: #1a2540;
  border-color: var(--border);
  box-shadow: 0 2px 8px rgba(0,0,0,.3);
  transition: box-shadow 0.2s ease;
}

.service-content-root .role-card:hover {
  box-shadow: 0 10px 24px rgba(0,0,0,.5);
}

.service-content-root .role-card .role-label {
  color: var(--cyan);
}

/* topic-item (info_it_security_awareness_schulung.html) */
.service-content-root .topic-item {
  flex: 1 1 calc(50% - 1rem);
  background-color: #1a2540;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1rem 1.25rem;
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  color: var(--text-2);
}

.service-content-root .topic-item i {
  color: var(--cyan);
  font-size: 1.3rem;
  margin-top: 2px;
  flex-shrink: 0;
}

@media (min-width: 768px) {
  .service-content-root .topic-item { flex: 1 1 calc(33% - 1rem); }
}

/* grade-badges (info_web_schwachstellenscan.html) */
.grade-a {
  background: rgba(6,95,70,.35);
  color: #86efac;
}

.grade-b {
  background: rgba(30,64,175,.35);
  color: #93c5fd;
}

.grade-c {
  background: rgba(146,64,14,.35);
  color: #fcd34d;
}

.grade-d {
  background: rgba(154,52,18,.35);
  color: #fdba74;
}

.grade-f {
  background: rgba(153,27,27,.35);
  color: #fca5a5;
}

/* ======================================================
   awareness_phishing.html – Dark-Theme-Overrides
   Inline-<style>-Block wurde auf Layout-Regeln reduziert –
   !important hier nicht mehr systematisch nötig.
   ====================================================== */

.awareness-root {
  color: var(--text-2);
}

.awareness-root h2,
.awareness-root h3,
.awareness-root h5 {
  color: var(--text-1);
}

.awareness-root p,
.awareness-root li {
  color: var(--text-2);
}

/* Hauptkarte */
.awareness-root .awareness-card {
  background-color: var(--bg-card);
  border-color: var(--border);
  box-shadow: 0 8px 25px rgba(0,0,0,.45);
}

/* Erfolgsbox (Grün) */
.awareness-root .safe-box {
  background-color: rgba(16,185,129,.12);
  border-color: rgba(16,185,129,.4);
}

.awareness-root .safe-box-title {
  color: #86efac;
}

.awareness-root .safe-box p {
  color: #86efac;
}

/* Warnbox (Gelb) */
.awareness-root .explain-box {
  background-color: rgba(245,158,11,.10);
  border-color: rgba(245,158,11,.4);
}

.awareness-root .explain-box-title {
  color: #fcd34d;
}

.awareness-root .explain-box p,
.awareness-root .explain-box li {
  color: #fde68a;
}

/* Tipps-Box (Cyan) */
.awareness-root .tips-box {
  background-color: rgba(0,207,239,.10);
  border-color: rgba(0,207,239,.4);
}

.awareness-root .tips-box-title {
  color: var(--cyan);
}

/* Feature-Kacheln */
.awareness-root .feature-card {
  background-color: #1a2540;
  border-color: var(--border);
  box-shadow: 0 2px 8px rgba(0,0,0,.3);
}

.awareness-root .feature-card:hover {
  transform: none;
  box-shadow: 0 10px 24px rgba(0,0,0,.5);
}

.awareness-root .feature-card h5 {
  color: var(--text-1);
}

.awareness-root .feature-card p {
  color: var(--text-2);
}

/* Kategorie-Labels */
.awareness-root .category-label {
  color: var(--text-3);
  border-bottom-color: var(--border);
}

/* Step-List Nummern in awareness-root */
.awareness-root .step-list li::before {
  background-color: var(--cyan);
  color: #0b0f1a;
}

/* Code/Beispiel-Boxen */
.awareness-root .example-box {
  background-color: var(--navy);
  border-color: var(--border);
  color: var(--text-2);
}

/* CTA-Gruppe und Button (awareness_phishing.html) */
.awareness-root .cta-group {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-top: 2.5rem;
  flex-wrap: wrap;
}

.awareness-root .cta-button {
  display: inline-block;
  padding: 14px 28px;
  font-size: 1.05rem;
  font-weight: 700;
  color: #0b0f1a !important;
  background-color: var(--cyan);
  border: none;
  border-radius: 9999px;
  text-decoration: none;
  box-shadow: 0 2px 8px rgba(0,207,239,.2);
  transition: box-shadow 0.25s ease;
}

.awareness-root .cta-button:hover {
  background-color: var(--cyan);
  color: #0b0f1a !important;
  box-shadow: 0 0 0 3px rgba(255,255,255,.3), 0 0 16px rgba(255,255,255,.3);
}

/* ============================================================
   ADMIN-SPEZIFISCHE ERWEITERUNGEN (test.serancon)
   ============================================================ */

/* Navbar */
.navbar {
  background-color: var(--bg2) !important;
  border-bottom: 1px solid var(--border);
}
.navbar-brand, .navbar .nav-link { color: var(--text-1) !important; }
.navbar-toggler { border-color: rgba(255,255,255,.2) !important; }
.navbar-toggler-icon { filter: invert(1); }
.btn-abmelden { background-color: rgba(239,68,68,.15) !important; border: 1px solid rgba(239,68,68,.35) !important; color: #fca5a5 !important; border-radius: 9999px !important; }
.btn-abmelden:hover { background-color: rgba(239,68,68,.25) !important; }

/* Dropdown-Menüs (Bootstrap JS-Dropdowns) */
.dropdown-menu {
  background-color: var(--bg-card) !important;
  border-color: var(--border) !important;
}
.dropdown-item { color: var(--text-2) !important; }
.dropdown-item:hover, .dropdown-item:focus { background-color: var(--navy) !important; color: var(--text-1) !important; }
.dropdown-divider { border-color: var(--border) !important; }
.dropdown-header { color: var(--text-3) !important; }

/* Tabellen */
.table { color: var(--text-1) !important; border-color: var(--border) !important; }
.table td, .table th { border-color: var(--border) !important; }
.table-striped > tbody > tr:nth-of-type(odd) > * { color: var(--text-1) !important; background-color: rgba(255,255,255,.03) !important; }
.table-hover > tbody > tr:hover > * { background-color: rgba(0,207,239,.07) !important; color: var(--text-1) !important; }
thead.table-dark th, .table-dark thead th { background-color: var(--navy) !important; color: var(--text-1) !important; border-color: var(--border) !important; }
thead.table-light th, .table-light th { background-color: #141d2e !important; color: var(--text-2) !important; border-color: var(--border) !important; }
.table-bordered { border-color: var(--border) !important; }

/* Accordion */
.accordion-item { background-color: var(--bg-card) !important; border-color: var(--border) !important; }
.accordion-button { background-color: var(--navy) !important; color: var(--text-1) !important; }
.accordion-button:not(.collapsed) { background-color: #162032 !important; color: var(--cyan) !important; box-shadow: 0 0 0 .2rem rgba(0,207,239,.15) !important; }
.accordion-button::after { filter: invert(1) !important; }
.accordion-body { background-color: var(--bg-card) !important; color: var(--text-1) !important; }

/* Tabs */
.nav-tabs { border-bottom-color: var(--border) !important; }
.nav-tabs .nav-link { color: var(--text-2) !important; border-color: transparent !important; }
.nav-tabs .nav-link:hover { color: var(--text-1) !important; border-color: var(--border) var(--border) transparent !important; }
.nav-tabs .nav-link.active { background-color: var(--bg-card) !important; border-color: var(--border) var(--border) var(--bg-card) !important; color: var(--cyan) !important; }

/* Modal */
.modal-content { background-color: var(--bg-card) !important; border-color: var(--border) !important; color: var(--text-1) !important; }
.modal-header { border-bottom-color: var(--border) !important; background-color: var(--navy) !important; color: var(--text-1) !important; }
.modal-footer { border-top-color: var(--border) !important; background-color: var(--bg-card) !important; }
.btn-close { filter: invert(1) !important; }

/* List-Group */
.list-group-item { background-color: var(--bg-card) !important; border-color: var(--border) !important; color: var(--text-1) !important; }

/* Input-Group */
.input-group-text { background-color: var(--navy) !important; border-color: rgba(255,255,255,.15) !important; color: var(--text-2) !important; }

/* Buttons */
.btn-success { background-color: #166534 !important; border-color: #166534 !important; color: #bbf7d0 !important; border-radius: 9999px !important; box-shadow: 0 2px 8px rgba(22,101,52,.25) !important; transition: box-shadow .25s ease !important; }
.btn-success:hover, .btn-success:focus { background-color: #15803d !important; box-shadow: 0 0 0 3px rgba(255,255,255,.2), 0 0 14px rgba(22,101,52,.5) !important; }
.btn-danger { background-color: rgba(153,27,27,.6) !important; border-color: rgba(239,68,68,.4) !important; color: #fca5a5 !important; border-radius: 9999px !important; box-shadow: 0 2px 8px rgba(153,27,27,.2) !important; transition: box-shadow .25s ease !important; }
.btn-danger:hover, .btn-danger:focus { background-color: rgba(185,28,28,.7) !important; box-shadow: 0 0 0 3px rgba(255,255,255,.15), 0 0 12px rgba(239,68,68,.4) !important; }
.btn-warning { background-color: rgba(120,53,15,.5) !important; border-color: rgba(234,179,8,.3) !important; color: #fde68a !important; border-radius: 9999px !important; box-shadow: 0 2px 8px rgba(120,53,15,.2) !important; transition: box-shadow .25s ease !important; }
.btn-warning:hover, .btn-warning:focus { background-color: rgba(146,64,14,.6) !important; box-shadow: 0 0 0 3px rgba(255,255,255,.15), 0 0 12px rgba(234,179,8,.3) !important; }
.btn-info { background-color: rgba(14,80,130,.5) !important; border-color: rgba(56,189,248,.3) !important; color: #7dd3fc !important; border-radius: 9999px !important; }
.btn-secondary { background-color: var(--navy) !important; border-color: rgba(255,255,255,.2) !important; color: var(--text-2) !important; border-radius: 9999px !important; }
.btn-outline-primary { color: var(--cyan) !important; border-color: var(--cyan) !important; border-radius: 9999px !important; }
.btn-outline-primary:hover { background-color: rgba(0,207,239,.1) !important; }
.btn-outline-danger { color: #fca5a5 !important; border-color: rgba(239,68,68,.4) !important; border-radius: 9999px !important; }
.btn-outline-danger:hover { background-color: rgba(153,27,27,.3) !important; }
.btn-outline-light { color: var(--text-2) !important; border-color: rgba(255,255,255,.2) !important; border-radius: 9999px !important; }
.btn-outline-light:hover { background-color: rgba(255,255,255,.08) !important; }

/* Badges */
.badge.bg-primary { background-color: #1d4ed8 !important; }
.badge.bg-success { background-color: #166534 !important; color: #bbf7d0 !important; }
.badge.bg-danger  { background-color: rgba(153,27,27,.7) !important; color: #fca5a5 !important; }
.badge.bg-warning { background-color: rgba(120,53,15,.6) !important; color: #fde68a !important; }
.badge.bg-secondary { background-color: var(--navy) !important; color: var(--text-2) !important; }
.badge.bg-info    { background-color: rgba(14,80,130,.6) !important; color: #7dd3fc !important; }
.badge.bg-dark    { background-color: #0f172a !important; color: var(--text-1) !important; }
.badge.bg-light   { background-color: #141d2e !important; color: var(--text-1) !important; }
.badge-extern     { background-color: rgba(30,64,175,.3) !important; color: #93c5fd !important; }
.badge-manuell    { background-color: rgba(6,95,70,.3) !important; color: #86efac !important; }

/* Border-Utilities */
.border-primary { border-color: rgba(29,78,216,.5) !important; }
.border-success { border-color: rgba(22,101,52,.5) !important; }
.border-secondary { border-color: rgba(100,116,139,.4) !important; }
.border-danger  { border-color: rgba(153,27,27,.5) !important; }
.border-info    { border-color: rgba(14,80,130,.5) !important; }
.border-warning { border-color: rgba(120,53,15,.5) !important; }

/* Text-Utilities */
.text-primary { color: #60a5fa !important; }
.text-success { color: #86efac !important; }
.text-secondary { color: var(--text-3) !important; }
.text-danger  { color: #fca5a5 !important; }
.text-info    { color: #7dd3fc !important; }
.text-warning { color: #fde68a !important; }

/* Admin card-header Cyan-Linksstreifen */
.bg-cyan-header {
  background-color: var(--navy) !important;
  color: var(--text-1) !important;
  border-left: 4px solid var(--cyan) !important;
}

/* Modul-Kacheln (security.html) */
.modul-kachel { border-color: var(--border) !important; background-color: var(--bg-card) !important; transition: all 0.15s ease; }
.modul-kachel:not(.disabled):hover { border-color: var(--cyan) !important; background-color: #162032 !important; }
.modul-kachel.active { border-color: var(--cyan) !important; background-color: rgba(0,207,239,.08) !important; }
.modul-kachel.active i { color: var(--cyan) !important; }
.modul-kachel.disabled { opacity: 0.4; cursor: default !important; }
.modul-kachel i { color: var(--text-3) !important; }

/* Empfänger-Quell-Kacheln (kunde_formular.html) */
.quellenKachel { background-color: var(--navy) !important; border: 2px solid var(--border) !important; border-radius: 8px; cursor: pointer; }
.quellenKachel.aktiv { border-color: var(--cyan) !important; background-color: rgba(0,207,239,.08) !important; }
.quellenKachel i { color: var(--text-3); }
.quellenKachel.aktiv i { color: var(--cyan) !important; }
.quellenKachel .kachel-label { color: var(--text-2); }
.quellenKachel.aktiv .kachel-label { color: var(--cyan) !important; }

/* Empfänger-Quell-Box (Manuell/AAD Inhalt) */
.empfaenger-quelle-box {
  background-color: rgba(0,207,239,.05) !important;
  border: 1px solid rgba(0,207,239,.25) !important;
  border-radius: 8px;
}

/* Cyan-Border-Utilities */
.border-cyan-2 { border: 2px solid rgba(0,207,239,.4) !important; }
.border-cyan-3 { border: 3px solid rgba(0,207,239,.5) !important; }

/* ——— Aktivitäten-Timeline ——— */
.activity-icon { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0; font-size: 1rem; }
.activity-anruf   { background: rgba(34,197,94,.15); color: #86efac; }
.activity-email   { background: rgba(56,189,248,.15); color: #7dd3fc; }
.activity-meeting { background: rgba(168,85,247,.15); color: #d8b4fe; }
.activity-notiz   { background: rgba(234,179,8,.15);  color: #fde68a; }
.badge-activity-anruf   { background: rgba(34,197,94,.2)  !important; color: #86efac !important; }
.badge-activity-email   { background: rgba(56,189,248,.2) !important; color: #7dd3fc !important; }
.badge-activity-meeting { background: rgba(168,85,247,.2) !important; color: #d8b4fe !important; }
.badge-activity-notiz   { background: rgba(234,179,8,.2)  !important; color: #fde68a !important; }
.timeline-erledigt { opacity: .6; }

/* ——— Pipeline-Stages ——— */
.badge-stage-lead        { background: rgba(100,116,139,.3) !important; color: #cbd5e1 !important; }
.badge-stage-qualifiziert{ background: rgba(56,189,248,.2)  !important; color: #7dd3fc !important; }
.badge-stage-angebot     { background: rgba(234,179,8,.2)   !important; color: #fde68a !important; }
.badge-stage-verhandlung { background: rgba(168,85,247,.2)  !important; color: #d8b4fe !important; }
.badge-stage-gewonnen    { background: rgba(34,197,94,.2)   !important; color: #86efac !important; }
.badge-stage-verloren    { background: rgba(239,68,68,.2)   !important; color: #fca5a5 !important; }

/* ——— Prioritäts-Badges für Aufgaben ——— */
.badge-prio-niedrig  { background: rgba(100,116,139,.3) !important; color: #94a3b8 !important; }
.badge-prio-mittel   { background: rgba(56,189,248,.2)  !important; color: #7dd3fc !important; }
.badge-prio-hoch     { background: rgba(234,179,8,.2)   !important; color: #fde68a !important; }
.badge-prio-kritisch { background: rgba(239,68,68,.25)  !important; color: #fca5a5 !important; }

/* ——— Aufgaben-Status-Badges ——— */
.badge-status-offen         { background: rgba(56,189,248,.2)  !important; color: #7dd3fc !important; }
.badge-status-in_bearbeitung{ background: rgba(234,179,8,.2)   !important; color: #fde68a !important; }
.badge-status-erledigt      { background: rgba(34,197,94,.2)   !important; color: #86efac !important; }
.badge-status-abgebrochen   { background: rgba(100,116,139,.3) !important; color: #94a3b8 !important; }

/* ——— Kanban-Board ——— */
.kanban-board { display: flex; gap: 1rem; overflow-x: auto; padding-bottom: 1rem; }
.kanban-col { flex: 0 0 260px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; }
.kanban-col-header { padding: .75rem 1rem; font-weight: 700; border-bottom: 1px solid var(--border); font-size: .9rem; }
.kanban-card { background: var(--navy); border: 1px solid var(--border); border-radius: 8px; padding: .75rem; margin: .5rem; font-size: .875rem; }
.kanban-card:hover { border-color: var(--cyan); }

/* code/pre */
code { color: var(--cyan) !important; background-color: rgba(0,207,239,.08) !important; padding: 0 4px; border-radius: 3px; }

/* h1-h6 */
h1, h2, h3, h4, h5, h6 { color: var(--text-1) !important; }

/* form-control-plaintext */
.form-control-plaintext { color: var(--text-1) !important; }

/* details/summary */
summary { color: var(--text-2) !important; cursor: pointer; }