/* ============================================
   Bereichsseiten der Landingpage (/buchhaltung, /lohn ...)
   Baut auf landing.css auf: Kopf wie .hero bzw. .feature, Abschnitte wie .story,
   Fragen wie .faq.
   ============================================ */

/* Pfad über der Überschrift: Omnia / Bereich */
.bereich-pfad {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
  font: 500 .82rem/1.4 var(--font);
  color: var(--meta);
}
.bereich-pfad a { color: var(--meta); }
.bereich-pfad a:hover { color: var(--accent); }
.bereich-pfad [aria-current] { color: var(--body); }

/* Kopf mit Screenshot: wie die Startseite, Überschrift eine Stufe kleiner (längere Sätze). */
.bereich-hero h1 { font-size: clamp(1.9rem, 5vw, 2.9rem); max-width: 26ch; }

/* Kopf mit Banner (dunkles Band): Text unter der Kopfzeile beginnen. */
.bereich-banner .feature__inner { padding-top: calc(var(--nav-h) + clamp(40px, 6vw, 72px)); padding-bottom: clamp(48px, 7vw, 80px); }
.bereich-banner .eyebrow { margin-bottom: 18px; }
.bereich-banner h1 {
  font-size: clamp(1.9rem, 5vw, 2.9rem);
  letter-spacing: -.04em;
  line-height: 1.08;
  margin-bottom: 18px;
  text-wrap: balance;
}
.bereich-banner .bereich-pfad, .bereich-banner .bereich-pfad a { color: var(--dim); }
.feature--treuhand .feature__media { background-image: url("/assets/images/landing/treuhand.webp"); }
.feature--umstieg .feature__media { background-image: url("/assets/images/landing/umstieg.webp"); }

/* Weitere Bereiche */
.bereich-links {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr));
  gap: 12px;
}
.bereich-links__item {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 2px 14px;
  align-items: start;
  padding: 18px 18px;
  border: 1px solid var(--border-card);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-card);
  transition: border-color .2s, transform .2s;
}
.bereich-links__item:hover { border-color: rgba(10, 116, 176, .35); transform: translateY(-2px); }
.bereich-links__item .tile__icon { grid-row: span 2; width: 40px; height: 40px; border-radius: 10px; }
.bereich-links__name { font-weight: 600; color: var(--text); }
.bereich-links__text { font-size: .88rem; line-height: 1.5; color: var(--dim); }

/* Schmal: das Banner steht als Band unter dem Text (landing.css), dafür unten Platz lassen. */
@media (max-width: 760px) {
  .bereich-banner .feature__inner { padding-bottom: 48vw; }
}

@media (prefers-reduced-motion: reduce) {
  .bereich-links__item { transition: none; }
}