/* ==========================================================================
   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);
}
/* Audit-Fix (768 px): Grid-Kinder duerfen unter ihre min-content-Breite
   schrumpfen. Sonst zwingt der lange Stellentitel
   „Rechtsanwaltsfachangestellte/r" die 1fr-Spur breiter als den Container
   (3 px Ueberstand am Tablet-Breakpoint). */
.jobs-grid > * { min-width: 0; }
@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;
  }
  /* Der Header traegt seit dem Referenz-Layout das Marken-Gruen — die Anker-Navigation
     muss deshalb hell sein, wie die Hauptnavigation auf den deutschen Seiten. */
  .anchor-nav a {
    font-weight: 600;
    font-size: var(--fs-body-sm);
    color: var(--color-text-on-dark);
    text-decoration: none;
  }
  .anchor-nav a:hover { color: var(--color-accent-bright); }
}

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

/* ==========================================================================
   STARTSEITE — Boutique-Luxe (RELAUNCH 2026, Briefing §4–§11)
   ========================================================================== */

/* --- Signatur-Element §12: feine Gold-Hairline mit Marken-Raute (Wiedererkennung) --- */
.brand-rule {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  width: min(220px, 60%);
  margin: 0 0 var(--space-md);
  color: var(--color-accent);
}
.brand-rule--center { margin-inline: auto; }
.brand-rule::before,
.brand-rule::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, currentColor);
}
.brand-rule::after { background: linear-gradient(90deg, currentColor, transparent); }
.brand-rule__dot {
  width: 7px; height: 7px;
  flex-shrink: 0;
  transform: rotate(45deg);
  background-color: currentColor;
}
.section--dark .brand-rule,
.home-hero .brand-rule { color: var(--color-accent-bright); }

/* --- Hero (nahtloses Grün-Band, das rechts ins Foto übergeht — Referenz) --- */
.home-hero {
  position: relative;
  background-color: var(--color-primary);
  color: var(--color-text-on-dark);
  padding-block: clamp(var(--space-2xl), 6vw, var(--space-4xl));
  overflow: hidden;
}
.home-hero::before {
  content: '';
  position: absolute; inset: 0;
  background-image: repeating-linear-gradient(135deg, transparent 0 30px, rgba(201,162,75,0.04) 30px 31px);
  pointer-events: none;
}
.home-hero__grid {
  position: relative;
  display: grid;
  grid-template-columns: 1.02fr 0.98fr;
  gap: var(--space-2xl);
  align-items: stretch;
}
/* verhindert, dass die Foto-Intrinsicbreite die Spalten sprengt (Overflow-Guard) */
.home-hero__grid > * { min-width: 0; }
.home-hero__content { align-self: center; padding-block: var(--space-lg); }
.home-hero__title {
  color: var(--color-text-on-dark);
  font-size: clamp(2rem, 4.4vw, var(--fs-display));
  line-height: 1.12;
  letter-spacing: -0.01em;
  margin: 0;
  max-width: 15ch;
}
/* goldene Trennlinie zwischen Überschrift und Fließtext (Referenz) */
.home-hero__rule {
  display: block;
  width: 64px; height: 2px;
  margin: var(--space-lg) 0;
  background-color: var(--color-accent-bright);
}
.home-hero__lead {
  color: var(--color-text-on-dark-muted);
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body-lg);
  max-width: 42ch;
  margin-bottom: var(--space-xl);
}
/* Beide Hero-CTAs als Versalien mit Sperrung (Referenz) */
.home-hero .btn { text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; }

/* --- Hero-Foto: läuft bündig bis an die rechte Bildschirmkante und blendet
   an seiner linken Kante weich ins Grün-Band (Referenz-Layout) --- */
.home-hero__media {
  position: relative;
  margin: 0;
  align-self: stretch;
  overflow: hidden;
}
/* Foto-Bleed bis an die rechte Bildschirmkante nur im Desktop-Layout */
@media (min-width: 960px) {
  .home-hero__media {
    min-height: clamp(300px, 38vw, 500px);
    width: calc(100% + var(--gutter) + max(0px, (100vw - var(--container-wide)) / 2));
  }
}
.home-hero__media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 45%;
}
/* Grün-Verlauf an der linken Foto-Kante — nahtloser Übergang zum Text-Panel */
.home-hero__media::after {
  content: '';
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, var(--color-primary) 0%, rgba(18,58,44,0.55) 14%, rgba(18,58,44,0) 46%),
    linear-gradient(0deg, rgba(2,35,28,0.35) 0%, rgba(2,35,28,0) 34%);
  pointer-events: none;
}

@media (max-width: 959px) {
  .home-hero__grid { grid-template-columns: 1fr; gap: var(--space-xl); }
  .home-hero__content { padding-block: 0; }
  .home-hero__title { max-width: 20ch; }
  /* Versalien-CTAs ruhig setzen (Umbruch erlaubt, kein Überlauf) */
  .home-hero .btn {
    letter-spacing: 0.03em;
    padding-inline: 18px;
    white-space: normal;
    text-align: center;
    min-width: 0;
    line-height: 1.15;
  }
  /* Foto folgt gestapelt unter Text + CTAs, volle Breite, ruhiges 16:10 */
  .home-hero__media {
    width: 100%;
    min-height: 0;
    aspect-ratio: 16 / 10;
    border-radius: var(--radius-md);
  }
  .home-hero__media img { position: static; }
  .home-hero__media::after {
    background: linear-gradient(0deg, rgba(2,35,28,0.35) 0%, rgba(2,35,28,0) 38%);
  }
}
@media (max-width: 600px) {
  .home-hero .btn { font-size: 0.8125rem; letter-spacing: 0.02em; padding-inline: 14px; }
}

/* Vertrauensleiste innerhalb des grünen Heros (TR-Startseite) — auf dunklem
   Grund lesbar halten, ohne die helle Standardvariante zu verändern */
.home-hero .hero__trust { border-top-color: rgba(255,255,255,0.16); }
.home-hero .hero__trust li { color: var(--color-text-on-dark-muted); }
.home-hero .hero__trust svg { color: var(--color-accent-bright); }

/* Button auf Marken-Grün: Creme-Fläche mit grüner Schrift (kein Gold, kein Weiß-auf-Grün) */
.btn--on-brand {
  background-color: var(--color-bg);
  color: var(--color-primary);
  border-color: var(--color-bg);
}
.btn--on-brand:hover {
  background-color: #FFFFFF;
  color: var(--color-primary-dark);
  border-color: #FFFFFF;
}

/* Vertrauensleiste unter dem Hero am 13.10.2026 auf Wunsch des Inhabers entfernt (B-99). */

/* --- Deutsch-türkischer Wirtschaftsverkehr (grüne Teaser-Sektion) --- */
.detr-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--space-2xl);
  align-items: center;
}
@media (max-width: 959px) {
  .detr-grid { grid-template-columns: 1fr; gap: var(--space-lg); }
}

/* --- Arbeitsweise (nummerierte Schritte) --- */
.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-lg) var(--space-xl);
}
.step {
  padding-top: var(--space-md);
  border-top: 2px solid var(--color-border-strong);
}
.step__num {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 2.25rem;
  line-height: 1;
  color: var(--color-accent);
}
.step__title { margin: var(--space-2xs) 0; }
.step__text { font-size: var(--fs-body-sm); color: var(--color-text-muted); }
@media (max-width: 959px) { .steps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 479px) { .steps { grid-template-columns: 1fr; } }

/* --- Portrait-Platzhalter: zusätzlicher Silber-Signet-Rahmen, ohne Beschriftung --- */
.portrait-ph--signet::after {
  content: '';
  position: absolute; inset: 12px;
  border: 1px solid var(--color-silver);
  border-radius: 6px;
  opacity: 0.5;
  pointer-events: none;
}