/* ============================================================
   Maier Data-Vision-Engineering
   Ergänzendes Stylesheet: Breadcrumbs, FAQ, Fließtext-Layout
   ============================================================ */

/* ---------- Breadcrumbs ---------- */
.breadcrumbs {
  font-family: var(--font-ui);
  font-size: 0.9rem;
  margin-bottom: 14px;
}
.page-hero .breadcrumbs { color: #b8c4d6; }
.page-hero .breadcrumbs a { color: #dfe6f0; }
.page-hero .breadcrumbs a:hover { color: #fff; }
.page-hero .breadcrumbs span { color: #fff; }

main > section:not(.page-hero) .breadcrumbs { color: var(--color-text-muted); }
main > section:not(.page-hero) .breadcrumbs a { color: var(--color-accent); }
main > section:not(.page-hero) .breadcrumbs span { color: var(--color-text); }

/* ---------- FAQ (details / summary) ---------- */
.faq {
  max-width: 820px;
  margin: 24px auto 0;
}
.faq details {
  border: 1px solid var(--color-line);
  border-radius: var(--radius-sm);
  margin-bottom: 14px;
  background: var(--color-bg);
}
.faq summary {
  cursor: pointer;
  padding: 16px 20px;
  font-family: var(--font-ui);
  font-size: 1.08rem;
  color: var(--color-primary);
  list-style: none;
  position: relative;
  padding-right: 48px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  position: absolute;
  right: 20px;
  color: var(--color-accent);
  font-size: 1.3rem;
}
.faq details[open] summary::after { content: "\2013"; }
.faq details p {
  padding: 0 20px 18px;
  color: var(--color-text-muted);
  margin: 0;
}

/* ---------- Service- / Wissens-Detailtext ---------- */
.prose { max-width: 820px; margin: 0 auto; }
.prose h2 { margin-top: 8px; }
.prose h3 { margin-top: 24px; }
.prose ul { margin: 0 0 1.2rem 22px; }
.prose li { margin-bottom: 6px; }

/* ---------- Card-Links ---------- */
.card h3 a { color: var(--color-primary); }
.card h3 a:hover { color: var(--color-accent); text-decoration: none; }

/* ---------- Zusatz-Hilfsklassen ---------- */
.mt-3 { margin-top: 60px; }
.lead-muted { color: var(--color-text-muted); }