/* ==========================================================================
   SACH & VERSTAND – Layout: Header, Footer, Hero, Grids
   ========================================================================== */

/* ---------------- Header ---------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  height: var(--header-height);
  display: flex;
  align-items: center;
  background: rgba(255,255,255,0.92);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--color-border);
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  /* Die Hauptnavigation bündelt bewusst mehrere Fachbereichs-Links plus
     zwei CTAs – dafür braucht der Header mehr Breite als der übrige
     Inhaltscontainer (--container-max: 1180px). Eigener, großzügigerer
     Wert nur für den Header, damit auf gängigen Desktop-Breiten (ab
     1281px, siehe Breakpoint unten) niemals umgebrochen wird. */
  max-width: var(--header-container-max);
}

.logo { display: flex; align-items: center; gap: var(--space-2); flex-shrink: 0; }
.logo img, .logo svg { height: 34px; width: auto; }

.main-nav {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  flex-wrap: nowrap;
}

.main-nav__list {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: var(--space-4);
  flex-wrap: nowrap;
}

.main-nav__list a,
.nav-group-label {
  display: inline-block;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--color-text);
  padding: var(--space-2) 0;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
/* Gruppen-Label ohne eigenes Sprungziel (z. B. "Vermittlung") – öffnet nur
   das Untermenü über den .nav-caret-Button, navigiert selbst nirgendwohin. */
.has-dropdown.is-open .nav-group-label { color: var(--color-teal-600); }
.main-nav__list a:hover,
.main-nav__list a[aria-current="page"] {
  color: var(--color-teal-600);
  border-bottom-color: var(--color-teal-400);
}

/* Dropdown "Sachverständige" (bündelt Rechner + Wissen als klar
   untergeordnete Bereiche der Sachverständigen-Tätigkeit, statt sie als
   gleichrangige Hauptpunkte zu zeigen).
   WICHTIG: Steuerung erfolgt bewusst NICHT mehr über :hover. Eine reine
   Hover-Lösung hat eine unsichtbare "Totzone" zwischen Link und Dropdown
   (der Abstand durch margin-top) – bewegt man die Maus diagonal dorthin,
   verlässt der Zeiger kurz das <li>, der Hover-Zustand endet, und das Menü
   schließt sich, bevor man den gewünschten Punkt anklicken kann. Genau das
   führte zu "Dropdown wird angezeigt, ist aber nicht anklickbar". Deshalb
   steuert jetzt ein eigener Klick-/Tap-Button (.nav-caret, siehe
   includes.js initNavDropdowns()) über die Klasse .is-open, zusätzlich
   bleibt :focus-within als Tastatur-Fallback erhalten. */
.has-dropdown { position: relative; display: inline-flex; align-items: center; }
.nav-caret {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  padding: var(--space-2);
  margin-left: -2px;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.nav-caret:hover { color: var(--color-teal-600); }
.has-dropdown.is-open .nav-caret { transform: rotate(180deg); color: var(--color-teal-600); }
.main-nav__dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: var(--z-header);
  min-width: 240px;
  margin: var(--space-2) 0 0;
  padding: var(--space-2);
  list-style: none;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: 0 12px 28px rgba(13,13,13,0.12);
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.has-dropdown.is-open .main-nav__dropdown,
.has-dropdown:focus-within .main-nav__dropdown {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.main-nav__dropdown a {
  display: block;
  padding: var(--space-3) var(--space-3);
  border-radius: var(--radius-sm);
  border-bottom: none !important;
  font-size: 0.92rem;
  white-space: nowrap;
}
.main-nav__dropdown a:hover { background: var(--color-bg-subtle); }

.nav-toggle {
  display: none;
  background: none;
  border: none;
  padding: var(--space-2);
}
.nav-toggle svg { width: 26px; height: 26px; }

@media (max-width: 1300px) {
  .nav-toggle { display: inline-flex; }
  .main-nav {
    position: fixed;
    /* WICHTIG: .site-header setzt backdrop-filter, wodurch der Header selbst
       zum containing block für fixed-positionierte Nachfahren wird (Safari/
       Chrome-Spezifikation für backdrop-filter/filter/transform). "bottom: 0"
       würde sich dadurch auf das Header-Ende statt auf den Viewport beziehen
       und das Menü auf wenige Pixel Höhe zusammenschrumpfen lassen. Deshalb
       Höhe explizit über 100vh berechnen statt über "bottom" – vh bezieht
       sich immer auf den echten Viewport, unabhängig vom containing block. */
    top: var(--header-height);
    left: 0;
    right: 0;
    height: calc(100vh - var(--header-height));
    background: var(--color-white);
    flex-direction: column;
    align-items: stretch;
    padding: var(--space-6) var(--space-5);
    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--dur-normal) var(--ease), transform var(--dur-normal) var(--ease);
    overflow-y: auto;
  }
  .main-nav.is-open {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }
  .main-nav__list {
    flex-direction: column;
    gap: var(--space-1);
  }
  .main-nav__list a {
    display: block;
    padding: var(--space-4) 0;
    font-size: 1.15rem;
    border-bottom: 1px solid var(--color-border);
  }
  /* Im mobilen Menü gibt es kein Hover/Klapp-Verhalten – das Dropdown wird
     stattdessen immer als eingerückte Unterliste direkt sichtbar dargestellt,
     der Klick-Caret aus der Desktop-Ansicht wird daher ausgeblendet. */
  .has-dropdown { display: block; }
  .nav-caret { display: none; }
  .main-nav__dropdown {
    position: static;
    opacity: 1;
    transform: none;
    pointer-events: auto;
    display: block;
    margin: 0 0 var(--space-2);
    padding: 0 0 0 var(--space-5);
    background: none;
    border: none;
    box-shadow: none;
  }
  .main-nav__dropdown a {
    font-size: 1rem;
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--color-border) !important;
    color: var(--color-text-muted);
  }
  .main-nav .btn { margin-top: var(--space-5); width: 100%; }
}

/* ---------------- Footer ---------------- */
.site-footer {
  background: var(--color-ink);
  color: rgba(255,255,255,0.82);
  padding-block: var(--space-8) var(--space-6);
}
.site-footer a { color: rgba(255,255,255,0.82); }
.site-footer a:hover { color: var(--color-teal-300); }

.footer-grid {
  display: grid;
  grid-template-columns: 1.2fr repeat(4, 1fr);
  gap: var(--space-6);
}
.footer-grid h4 {
  color: var(--color-white);
  font-family: var(--font-body);
  font-size: var(--fs-small);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  margin-bottom: var(--space-4);
}
.footer-grid ul { list-style: none; margin: 0; padding: 0; }
.footer-grid li { margin-bottom: var(--space-2); font-size: 0.95rem; }

.footer-bottom {
  margin-top: var(--space-7);
  padding-top: var(--space-5);
  border-top: 1px solid rgba(255,255,255,0.14);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  justify-content: space-between;
  font-size: var(--fs-small);
  color: rgba(255,255,255,0.6);
}
.footer-bottom nav { display: flex; gap: var(--space-5); flex-wrap: wrap; }

@media (max-width: 780px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

/* ---------------- Hero ---------------- */
.hero {
  padding-block: var(--space-9) var(--space-8);
  background:
    radial-gradient(1200px 480px at 85% -10%, rgba(0,162,188,0.32), transparent 60%),
    radial-gradient(800px 400px at -10% 110%, rgba(0,162,188,0.14), transparent 60%),
    var(--color-bg);
}
.hero .container {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: var(--space-8);
  align-items: center;
}
.hero__content h1 { margin-bottom: var(--space-5); }
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-top: var(--space-6);
}
.hero__meta {
  margin-top: var(--space-6);
  display: flex;
  gap: var(--space-6);
  flex-wrap: wrap;
}
.hero__meta-item {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  font-size: var(--fs-small);
  color: var(--color-text-muted);
}
.hero__meta-item strong {
  font-family: var(--font-display);
  font-size: 1.4rem;
  color: var(--color-ink);
}
.hero__visual {
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: linear-gradient(155deg, var(--color-teal-100), var(--color-teal-50) 55%, var(--color-bg-muted));
  border: 1px solid var(--color-teal-200);
  box-shadow: var(--shadow-md);
  min-height: 380px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

@media (max-width: 900px) {
  .hero .container { grid-template-columns: 1fr; }
  .hero__visual { min-height: 220px; order: -1; }
}

/* ---------------- Page header (Unterseiten) ---------------- */
.page-header {
  padding-block: var(--space-8) var(--space-6);
  background: var(--color-bg-subtle);
  border-bottom: 1px solid var(--color-border);
}

/* Variante für Verkehrsschadenfall-/Auftragsseiten: bewusst kein
   klinisch-weißer Hintergrund, sondern ein dunkler, markentypischer
   Hintergrund (Ink + Teal-Verlauf + dezentes Fahrbahn-Streifenmuster)
   statt eines Stockfotos – lizenzfrei, leicht, markenkonform. */
.page-header--automotive {
  position: relative;
  padding-block: var(--space-9) var(--space-7);
  background:
    radial-gradient(900px 360px at 88% -20%, rgba(0,162,188,0.28), transparent 60%),
    repeating-linear-gradient(115deg, rgba(255,255,255,0.035) 0 2px, transparent 2px 34px),
    var(--color-ink);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  overflow: hidden;
}
.page-header--automotive .breadcrumbs { color: rgba(255,255,255,0.55); }
.page-header--automotive .breadcrumbs a:hover { color: var(--color-teal-300); }
.page-header--automotive h1,
.page-header--automotive .lead { color: var(--color-white); }
.page-header--automotive .lead { color: rgba(255,255,255,0.78); }
.breadcrumbs {
  display: flex;
  gap: var(--space-2);
  font-size: var(--fs-small);
  color: var(--color-text-soft);
  margin-bottom: var(--space-4);
  flex-wrap: wrap;
}
.breadcrumbs a:hover { color: var(--color-teal-600); }

/* ---------------- Grids ---------------- */
.grid {
  display: grid;
  gap: var(--space-6);
}
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 980px) {
  .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
}

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-8);
  align-items: center;
}
@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; }
}