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

:root {
  --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;
}

/* ——— Hintergrund ——— */
body {
  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;
}

/* ——— 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-plaintext {
  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;
}

/* Native Form-Controls (Datepicker, Select-Dropdown) im OS-Dark-Mode rendern */
input[type="date"].form-control,
.form-select {
  color-scheme: dark;
}

/* ——— 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 (Container dunkel, E-Mail-Inhalt im iframe bleibt hell) ——— */
.preview-wrap {
  border-color: var(--border) !important;
  background: var(--bg-card) !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;
}

/* ——— Finding-Boxen (info_web_schwachstellenscan.html) ——— */
.service-content-root .finding-example {
  background-color: rgba(0,207,239,.06);
  border-left: 4px solid var(--cyan);
  border-top: 1px solid var(--border);
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  border-radius: 0 8px 8px 0;
  padding: 1.1rem 1.4rem;
  margin-bottom: 1rem;
}

.service-content-root .finding-example .severity-badge {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 2px 10px;
  border-radius: 4px;
  color: #fff;
  margin-bottom: 0.5rem;
}

.service-content-root .severity-hoch  { background-color: #dc3545; }
.service-content-root .severity-mittel { background-color: #fd7e14; }

.service-content-root .finding-example .finding-title {
  font-weight: 600;
  color: var(--text-1);
  margin-bottom: 0.3rem;
}

.service-content-root .finding-example .finding-desc {
  font-size: 0.9rem;
  color: var(--text-2);
  margin-bottom: 0;
}

.service-content-root .finding-example code {
  background: rgba(0,207,239,.12);
  color: var(--cyan);
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 0.85em;
}

/* ——— FAQ-Akkordeon (info_web_schwachstellenscan.html) ——— */
.service-content-root .faq-item {
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: 0.75rem;
  overflow: hidden;
}

.service-content-root .faq-question {
  background: #1a2540;
  padding: 1rem 1.2rem;
  font-weight: 600;
  color: var(--text-1);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  user-select: none;
}

.service-content-root .faq-question:hover { background: #1f2e50; }

.service-content-root .faq-question .faq-icon {
  color: var(--cyan);
  font-size: 0.9rem;
  transition: transform 0.2s;
}

.service-content-root .faq-answer {
  padding: 1rem 1.2rem;
  color: var(--text-2);
  font-size: 0.93rem;
  border-top: 1px solid rgba(255,255,255,.06);
  display: none;
  background: var(--bg-card);
}

.service-content-root .faq-item.open .faq-answer { display: block; }
.service-content-root .faq-item.open .faq-icon   { transform: rotate(180deg); }

/* ======================================================
   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);
}