/* ==========================================================================
   pages.css — Seiten-/Sektions-spezifische Layouts und Feinheiten
   Ergaenzt components.css. Bezug: 02-Designsystem.md Abschnitt 6, 9
   ========================================================================== */

/* --- USP-Block (Startseite, 3 Spalten) --- */
.usp-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-xl);
}
@media (max-width: 599px) {
  .usp-grid { grid-template-columns: 1fr; gap: var(--space-lg); }
}

/* --- Leistungskacheln-Grid (Startseite) --- */
.tiles-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
}
@media (max-width: 959px) {
  .tiles-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 599px) {
  .tiles-grid { grid-template-columns: 1fr; }
}

/* --- Karriere-Grid (2 Spalten) --- */
.jobs-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-lg);
}
@media (max-width: 599px) {
  .jobs-grid { grid-template-columns: 1fr; }
}

/* --- Kontakt-Layout (7/5) --- */
.contact-layout {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: var(--space-2xl);
  align-items: start;
}
@media (max-width: 959px) {
  .contact-layout { grid-template-columns: 1fr; gap: var(--space-xl); }
}

/* --- Form-Tabs (Kontakt/Terminanfrage) --- */
.tabs {
  display: flex;
  gap: var(--space-2xs);
  margin-bottom: var(--space-lg);
  border-bottom: 1px solid var(--color-border);
}
.tabs [role="tab"] {
  padding: var(--space-sm) var(--space-md);
  background: none;
  border: 0;
  border-bottom: 3px solid transparent;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-body);
  color: var(--color-text-muted);
  margin-bottom: -1px;
}
.tabs [role="tab"]:hover { color: var(--color-accent-dark); }
.tabs [role="tab"][aria-selected="true"] {
  color: var(--color-primary);
  border-bottom-color: var(--color-accent);
}

/* --- Detailseiten-Intro --- */
.detail-intro {
  max-width: var(--container-text);
}

/* --- Verzahnungs-Grafik (Startseite "aus einer Hand") --- */
.interlock {
  position: relative;
  aspect-ratio: 4 / 3;
  background-color: var(--color-primary);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.interlock::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(135deg, transparent 0 26px, rgba(166,119,46,0.10) 26px 27px);
}
.interlock__rings {
  position: relative;
  display: flex;
  align-items: center;
}
.interlock__ring {
  width: 130px; height: 130px;
  border: 3px solid var(--color-accent-light);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--color-text-on-dark);
}
.interlock__ring:last-child {
  margin-left: -34px;
  border-color: var(--color-accent);
  background-color: rgba(166,119,46,0.14);
}

/* --- Statistik-/Fakten-Zeile --- */
.facts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
}
.fact {
  text-align: center;
  padding: var(--space-md);
}
.fact__num {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 2.5rem;
  color: var(--color-accent);
  line-height: 1;
}
.fact__label {
  font-size: var(--fs-body-sm);
  color: var(--color-text-muted);
  margin-top: var(--space-2xs);
}
.section--dark .fact__label { color: var(--color-text-on-dark-muted); }
@media (max-width: 599px) {
  .facts { grid-template-columns: 1fr; gap: var(--space-md); }
}

/* --- Werdegang-Timeline (Kanzlei-Seite) --- */
.timeline {
  list-style: none;
  margin: 0; padding: 0;
  border-left: 2px solid var(--color-border);
}
.timeline li {
  position: relative;
  padding: 0 0 var(--space-lg) var(--space-lg);
}
.timeline li:last-child { padding-bottom: 0; }
.timeline li::before {
  content: '';
  position: absolute;
  left: -7px; top: 4px;
  width: 12px; height: 12px;
  background-color: var(--color-accent);
  border-radius: 50%;
}
.timeline__year {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-h6);
  letter-spacing: 0.08em;
  color: var(--color-accent-dark);
}
.timeline__text { margin-top: 2px; }

/* --- Anker-Navigation (TR-Landingpage One-Pager) --- */
.anchor-nav {
  display: none;
}
@media (min-width: 1024px) {
  .anchor-nav {
    display: flex;
    gap: var(--space-md);
    list-style: none;
    margin: 0; padding: 0;
  }
  .anchor-nav a {
    font-weight: 600;
    font-size: var(--fs-body-sm);
    color: var(--color-text);
    text-decoration: none;
  }
  .anchor-nav a:hover { color: var(--color-accent-dark); }
}

/* --- 404-Seite --- */
.error-page {
  text-align: center;
  padding-block: var(--space-4xl);
}
.error-page__code {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 6rem;
  color: var(--color-accent);
  line-height: 1;
}

/* --- Sektionseinleitung zentriert --- */
.section__intro {
  max-width: var(--container-text);
  margin-inline: auto;
  text-align: center;
}
.section__intro p { color: var(--color-text-muted); margin-top: var(--space-sm); }

/* Anker-Offset fuer Sticky-Header */
[id] { scroll-margin-top: calc(var(--header-h) + var(--space-md)); }