/* ==========================================================================
   components.css — Extracted inline style patterns (Novaris Consulting)
   Generated: 2026-04-02 | Iteration 1
   ========================================================================== */

/* #1 — Footer link (block, small, muted, no underline, transition) */
.footer-link {
  display: block;
  font-size: 0.82rem;
  color: rgba(195, 215, 245, 0.48);
  text-decoration: none;
  transition: color 0.14s ease;
  margin-bottom: 0.55rem;
}

/* #2 — Footer link inline (same but without block/margin) */
.footer-link-inline {
  font-size: 0.82rem;
  color: rgba(195, 215, 245, 0.48);
  text-decoration: none;
  transition: color 0.14s ease;
}

/* #3 — Text navy */
.text-navy {
  color: #0D1B3E;
}

/* #4 — Wave block (block with negative margin overlap) */
.wave-block {
  display: block;
  margin-bottom: -1px;
}

/* #5 — Flex row center tight (gap 0.45rem) */
.flex-row-center-tight {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

/* #6 — Footer category heading (Montserrat 800, small, light blue) */
.footer-category-heading {
  font-family: Montserrat, sans-serif;
  font-weight: 800;
  font-size: 0.88rem;
  color: #4DAEE5;
}

/* #7 — Footer meta text (tiny, muted light) */
.footer-meta-text {
  font-size: 0.73rem;
  color: rgba(195, 215, 245, 0.55);
}

/* #8 — Flex row start (gap 0.5rem) */
.flex-row-start {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}

/* #9 — Checkmark icon style (accent blue, bold, no shrink) */
.icon-accent-check {
  color: #1E56B5;
  font-weight: 700;
  flex-shrink: 0;
  margin-top: 1px;
}

/* #10 — Footer section label (Montserrat 700, uppercase, muted) */
.footer-section-label {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: rgba(195, 215, 245, 0.3);
  margin-bottom: 1rem;
}

/* #11 — Text center */
.text-center-block {
  text-align: center;
}

/* #12 — Card error/warning (red tinted bg, border, rounded) */
.card-error {
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.18);
  border-radius: 12px;
  padding: 1rem 1.2rem;
}

/* #13 — Footer subtext (small, muted light) */
.footer-subtext {
  font-size: 0.78rem;
  color: rgba(195, 215, 245, 0.55);
}

/* #14 — Flex row start medium (gap 0.6rem) */
.flex-row-start-md {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
}

/* #15 — Body text small (0.82rem, gray) */
.text-body-sm {
  font-size: 0.82rem;
  color: #374151;
}

/* #16 — Flex row center (gap 0.75rem) */
.flex-row-center {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

/* #17 — Text accent blue */
.text-accent {
  color: #1E56B5;
}

/* #18 — Flex column tight (gap 0.55rem) */
.flex-col-tight {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

/* #19 — Link light blue (no underline) */
.link-light-blue {
  color: #4DAEE5;
  text-decoration: none;
}

/* #20 — Hidden (display none) */
.is-hidden {
  display: none;
}

/* ==========================================================================
   Dark mode overrides for utility classes
   ========================================================================== */
html.dark .text-navy { color: #e8f0fa !important; }
html.dark .text-body-sm { color: #8aaac8 !important; }
html.dark .text-accent { color: #4DAEE5 !important; }
html.dark .badge-green { background: rgba(16,185,129,0.18) !important; color: #34d399 !important; }
html.dark .project-card { border-color: rgba(77,174,229,0.15) !important; box-shadow: 0 4px 22px rgba(0,0,0,0.3), 0 0 0 1px rgba(77,174,229,0.08) !important; }
html.dark .project-icon { background: linear-gradient(135deg,rgba(30,86,181,0.3),rgba(77,174,229,0.25)) !important; border-color: rgba(77,174,229,0.25) !important; }
html.dark .weiterfuehrend-card { background: var(--bg-card, #122244) !important; border-color: rgba(77,174,229,0.15) !important; }
html.dark .weiterfuehrend-card h3 { color: #e8f0fa !important; }
html.dark .weiterfuehrend-card p { color: #8aaac8 !important; }
div[style*="color:rgba(30,86,181,0.12)"] { color: rgba(30,86,181,0.25) !important; }
html.dark div[style*="color:rgba(30,86,181,0.12)"] { color: rgba(77,174,229,0.3) !important; }

/* Definition box — dark mode */
html.dark .defbox {
  background: linear-gradient(135deg, #0d1b36 0%, #122244 100%) !important;
  border-color: rgba(77,174,229,0.2) !important;
}
html.dark .defbox p { color: #8aaac8 !important; }
html.dark .defbox p[itemprop="name"] { color: #e8f0fa !important; }
html.dark .defbox a { color: #4DAEE5 !important; }
html.dark .defbox ul { color: #8aaac8 !important; }
html.dark .defbox div[style*="border-top"] { border-color: rgba(77,174,229,0.2) !important; }

/* Report page tables — dark mode */
html.dark .ds-table thead tr { background: linear-gradient(135deg, #0d1b36, #122244) !important; border-bottom-color: rgba(77,174,229,0.2) !important; }
html.dark .ds-table thead th { color: #e8f0fa !important; }
html.dark .ds-table tbody tr { border-bottom-color: rgba(77,174,229,0.1) !important; }
html.dark .ds-table tbody td { color: #8aaac8 !important; }
html.dark .ds-table tbody td strong { color: #e8f0fa !important; }

/* ═══════════════════════════════════════════════════════════════════
   E-E-A-T Quellen-Footer (.eeat-sources, #50) + Trust-Banner (.eeat-trust, #57)
   Class-based dark-mode overrides. Inline [style*=…] selectors broke because
   reveal-on-scroll JS re-serializes the style attribute (#f5f8fe → rgb(245,…)).
═══════════════════════════════════════════════════════════════════ */

html.dark .eeat-sources {
  background: var(--bg-base, #0a1428) !important;
  border-top-color: rgba(77,174,229,0.12) !important;
}
html.dark .eeat-sources h2 { color: #e8f0fa !important; }
html.dark .eeat-sources p { color: #8aaac8 !important; }
html.dark .eeat-sources svg { stroke: #4DAEE5 !important; }
html.dark .eeat-sources .sources-list a { color: #7ECEF5 !important; }
html.dark .eeat-sources .sources-list a:hover { color: #4DAEE5 !important; }
html.dark .eeat-sources time { color: #e8f0fa !important; }

html.dark .eeat-trust {
  background: var(--bg-raised, #0D1B3E) !important;
  border-top-color: rgba(77,174,229,0.18) !important;
  border-bottom-color: rgba(77,174,229,0.10) !important;
}
html.dark .eeat-trust div[style*="color:#1E56B5"] { color: #4DAEE5 !important; }
html.dark .eeat-trust div[style*="color:#5a6e8c"] { color: #8aaac8 !important; }
html.dark .eeat-trust div[style*="border-left"] {
  border-left-color: rgba(77,174,229,0.18) !important;
  border-right-color: rgba(77,174,229,0.18) !important;
}
html.dark .eeat-trust span[data-build="TRUST_STAT_APPROVAL"] { color: #4DAEE5 !important; }

/* ═══════════════════════════════════════════════════════════════════
   Wave-Divider dark-mode coverage — GLOBAL
   Many pages have wave SVGs with hard-coded fill="#ffffff" / "#fff" /
   "#f5f8fe" and no class. In dark mode these were rendering as bright
   white blobs against the dark page bg. Branchen pages already had
   per-file rules; promote to a global rule so all wave-dividers stay
   consistent (and no future page is missed).
═══════════════════════════════════════════════════════════════════ */

/* Class-based (existing CTA top wave) */
html.dark .wave-fill-raised { fill: var(--bg-raised, #0D1B3E) !important; }
html.dark .wave-fill-white  { fill: var(--bg-base,   #0a1428) !important; }

/* Attribute-based fallback for wave SVGs without a class — scoped to
   .wave-divider so we don't repaint icon/illustration SVGs that share
   the same fill colors. */
html.dark .wave-divider rect[fill="#ffffff"],
html.dark .wave-divider path[fill="#ffffff"],
html.dark .wave-divider rect[fill="#fff"],
html.dark .wave-divider path[fill="#fff"]      { fill: var(--bg-base,   #0a1428) !important; }
html.dark .wave-divider rect[fill="#f5f8fe"],
html.dark .wave-divider path[fill="#f5f8fe"]   { fill: var(--bg-raised, #0D1B3E) !important; }