/* ==========================================================================
   BUHA — Layout: Container, Raster, Sektionsrhythmus, Header, Footer,
   Hero, CTA-Band, Breadcrumb. Mobile-first (Designsystem 4, 11, 12).
   ========================================================================== */

/* --- Container (Designsystem 4.2) ----------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 20px; /* Gutter xs/sm */
}

.container--read {
  max-width: var(--container-read);
}

@media (min-width: 768px) {
  .container {
    padding-inline: 32px;
  }
}

@media (min-width: 1024px) {
  .container {
    padding-inline: 40px;
  }
}

/* --- main-Bereich wächst ------------------------------------------------- */
main {
  flex: 1 0 auto;
}

/* --- Sektionsrhythmus (Designsystem 4.3) ---------------------------------- */
.section {
  padding-block: var(--s-7); /* 48px mobil */
}

@media (min-width: 768px) {
  .section {
    padding-block: var(--s-8); /* 64px tablet */
  }
}

@media (min-width: 1024px) {
  .section {
    padding-block: var(--s-9); /* 96px desktop */
  }
}

/* abwechselnde Sektionsfläche */
.section--soft {
  background: var(--c-bg-soft);
}

.section--navy {
  background: var(--c-navy-800);
  color: rgba(255, 255, 255, 0.85);
}

.section--navy h2,
.section--navy h3,
.section--navy .t-h2,
.section--navy .t-display {
  color: #fff;
}

/* --- Sektionskopf --------------------------------------------------------- */
.section-head {
  max-width: 44rem;
  margin-bottom: var(--s-6);
}

.section-head--center {
  margin-inline: auto;
  text-align: center;
}

.section-head p {
  margin-top: var(--s-3);
}

/* --- Raster (Designsystem 4.2) -------------------------------------------- */
.grid {
  display: grid;
  gap: var(--s-5);
}

.grid--2 { grid-template-columns: 1fr; }
.grid--3 { grid-template-columns: 1fr; }
.grid--4 { grid-template-columns: 1fr; }

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

@media (min-width: 1024px) {
  .grid { gap: var(--s-6); }
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--4 { grid-template-columns: repeat(4, 1fr); }
}

/* Zwei-Spalten-Layout (Hero, Inhalt+Sidebar) */
.split {
  display: grid;
  gap: var(--s-6);
  align-items: center;
}

@media (min-width: 1024px) {
  .split {
    grid-template-columns: 7fr 5fr;
    gap: var(--s-8);
  }
  .split--reverse > :first-child { order: 2; }
  .split--6040 { grid-template-columns: 3fr 2fr; }
  .split--6535 { grid-template-columns: 65fr 35fr; align-items: start; }
}

/* ==========================================================================
   Header & persistente CTA-Bar (Designsystem 6.2)
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: var(--c-surface);
  border-bottom: 1px solid var(--c-line);
  transition: box-shadow 150ms ease-out;
}

/* Schatten ab Scroll > 8px (per JS .is-scrolled) */
.site-header.is-scrolled {
  box-shadow: var(--shadow-sm);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  height: 64px;
}

/* Ab lg darf der Header die volle Viewport-Breite nutzen (statt 1200px-Cap),
   damit die 8-teilige Navigation + CTA-Cluster ohne Überlauf Platz finden
   (Designsystem 6.2: volle Menüleiste ab lg). */
@media (min-width: 1024px) {
  .header-inner {
    height: 80px;
    max-width: 1440px;
  }
}

@media (min-width: 1440px) {
  .header-inner {
    max-width: 1440px;
  }
}

/* Logo */
.header-logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.header-logo svg,
.header-logo img {
  height: 32px;
  width: auto;
}

@media (min-width: 1024px) {
  .header-logo svg,
  .header-logo img {
    height: 36px;
  }
}

/* --- Desktop-Navigation --------------------------------------------------- */
.main-nav {
  display: none;
}

/* Volle Navigationsleiste ab 1200px. Darunter (inkl. md/lg-Tablets) bleibt
   das Hamburger-Overlay aktiv. Navigations-Breakpoint = 1200px ist mit
   Design-System Rev. 2 (Abschnitt 4.1 / 6.2, Klärung D-1) verbindlich
   bestätigt; Nav, Header-CTA-Burger und Bottom-Bar schalten gemeinsam an
   genau dieser Grenze, das 12-Spalten-Raster bleibt bei 1024px.

   R-2 (Audit Runde 2): Im engen Bereich 1200–1279px sind die Gaps zwischen
   Nav-Punkten und im CTA-Cluster bewusst kompakt, damit Logo + 8-teilige Nav
   + CTA-Cluster überlauffrei in die verfügbare Breite passen
   (1200px − 2×40px Gutter = 1120px). Ab 1280px ist genug Platz für die
   großzügigeren Abstände. */
@media (min-width: 1200px) {
  .main-nav {
    display: flex;
    align-items: center;
    gap: var(--s-3);
  }
}

@media (min-width: 1280px) {
  .main-nav {
    gap: var(--s-4);
  }
}

@media (min-width: 1380px) {
  .main-nav {
    gap: var(--s-5);
  }
}

.main-nav > ul {
  display: flex;
  align-items: center;
  gap: 10px;
}

@media (min-width: 1280px) {
  .main-nav > ul {
    gap: var(--s-4);
  }
}

@media (min-width: 1380px) {
  .main-nav > ul {
    gap: var(--s-5);
  }
}

.main-nav a,
.main-nav .nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 500;
  font-size: 0.9375rem;
  color: var(--c-navy-700);
  text-decoration: none;
  padding-block: var(--s-2);
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}

@media (min-width: 1280px) {
  .main-nav a,
  .main-nav .nav-toggle {
    font-size: 1rem;
  }
}

.main-nav a:hover,
.main-nav .nav-toggle:hover {
  color: var(--c-navy-600);
  border-bottom-color: var(--c-amber-500);
}

/* aktiver Menüpunkt */
.main-nav a[aria-current="page"],
.main-nav li.is-active > a,
.main-nav li.is-active > .nav-toggle {
  border-bottom-color: var(--c-amber-500);
}

/* --- Leistungen-Dropdown (Designsystem 6.2) ------------------------------- */
.nav-dropdown {
  position: relative;
}

.nav-dropdown .nav-toggle {
  background: none;
}

.dropdown-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  min-width: 320px;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-md);
  padding: var(--s-3);
  z-index: var(--z-dropdown);
  opacity: 0;
  visibility: hidden;
  transition: opacity 150ms ease-out, transform 150ms ease-out;
}

.nav-dropdown.is-open .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.dropdown-menu li a {
  display: flex;
  gap: var(--s-3);
  align-items: flex-start;
  padding: var(--s-3);
  border-radius: var(--r-sm);
  border-bottom: none;
}

.dropdown-menu li a:hover {
  background: var(--c-navy-050);
  border-bottom: none;
}

.dropdown-menu .dd-icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  background: var(--c-navy-100);
  border-radius: var(--r-sm);
  color: var(--c-navy-700);
}

.dropdown-menu .dd-title {
  display: block;
  font-weight: 600;
  color: var(--c-navy-700);
}

.dropdown-menu .dd-sub {
  display: block;
  font-size: 0.8125rem;
  color: var(--c-ink-500);
}

/* --- Header-CTA-Cluster --------------------------------------------------- */
.header-cta {
  display: flex;
  align-items: center;
  gap: var(--s-2);
}

/* Mobil: Telefon-Link und Primär-CTA im Header ausblenden
   (Designsystem 6.2 — mobil nur Logo/Telefon-Icon/WhatsApp/Hamburger).
   Diese Basisregeln stehen VOR der Media-Query, damit die Desktop-Regeln
   gewinnen (gleiche Spezifität, Reihenfolge entscheidet). */
.header-cta .phone-link {
  display: none;
}

.header-cta .btn-quote {
  display: none;
}

/* Telefonnummer-Text: erst ab xl sichtbar, im lg-Bereich Platz sparen */
.header-cta .phone-link .phone-number {
  display: none;
}

@media (min-width: 1200px) {
  .header-cta {
    gap: var(--s-3);
  }
  .header-cta .phone-link {
    display: inline-flex;
  }
  .header-cta .btn-quote {
    display: inline-flex;
  }
}

@media (min-width: 1380px) {
  .header-cta .phone-link .phone-number {
    display: inline;
  }
}

/* Hamburger bis 1199px (inkl. md/lg-Tablets) — siehe .main-nav-Begründung.
   Höhere Spezifität (.header-cta .nav-burger), da components.css nach
   layout.css geladen wird und .btn-icon sonst die Anzeige überschreibt. */
.header-cta .nav-burger {
  display: inline-flex;
}

@media (min-width: 1200px) {
  .header-cta .nav-burger {
    display: none;
  }
}

/* ==========================================================================
   Mobile Overlay-Menü (Designsystem 6.2)
   ========================================================================== */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  background: var(--c-navy-800);
  color: #fff;
  display: flex;
  flex-direction: column;
  padding: var(--s-5);
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform 200ms ease-out;
  visibility: hidden;
}

.mobile-menu.is-open {
  transform: translateX(0);
  visibility: visible;
}

.mobile-menu-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--s-5);
}

.mobile-menu-head .header-logo svg .logo-word { fill: #fff; }

.mobile-menu nav ul {
  display: flex;
  flex-direction: column;
}

.mobile-menu nav > ul > li > a,
.mobile-menu .m-acc-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 56px;
  font-size: 1.25rem;
  font-weight: 500;
  color: #fff;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.mobile-menu .m-acc-panel {
  display: none;
  padding-bottom: var(--s-3);
}

.mobile-menu .m-acc.is-open .m-acc-panel {
  display: block;
}

.mobile-menu .m-acc-panel a {
  display: block;
  padding: var(--s-3) 0 var(--s-3) var(--s-5);
  font-size: 1.0625rem;
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
}

.mobile-menu .m-acc-toggle .icon {
  transition: transform 200ms ease;
}

.mobile-menu .m-acc.is-open .m-acc-toggle .icon {
  transform: rotate(180deg);
}

.mobile-menu-actions {
  margin-top: auto;
  padding-top: var(--s-6);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

/* ==========================================================================
   Mobile Bottom-Bar (Designsystem 6.11)
   ========================================================================== */
.bottom-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-bottombar);
  height: 64px;
  display: flex;
  background: var(--c-surface);
  border-top: 1px solid var(--c-line);
  box-shadow: 0 -6px 20px rgba(11, 27, 51, 0.10);
}

/* Bottom-Bar bis 1199px aktiv — parallel zum Hamburger-Menü. */
@media (min-width: 1200px) {
  .bottom-bar {
    display: none;
  }
}

.bottom-bar a {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 64px;
  font-size: 0.75rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--c-navy-700);
}

.bottom-bar a .icon {
  width: 22px;
  height: 22px;
}

.bottom-bar a.bb-whatsapp {
  color: var(--c-navy-900);
}

.bottom-bar a.bb-quote {
  background: var(--c-amber-500);
  color: var(--c-navy-900);
}

.bottom-bar a.bb-quote:hover {
  background: var(--c-amber-400);
}

/* ==========================================================================
   Footer (Designsystem 6.3)
   ========================================================================== */
.site-footer {
  flex-shrink: 0;
  background: var(--c-navy-900);
  color: rgba(255, 255, 255, 0.72);
  padding-block: var(--s-8);
}

.footer-grid {
  display: grid;
  gap: var(--s-6);
  grid-template-columns: 1fr;
}

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

@media (min-width: 1024px) {
  .footer-grid {
    grid-template-columns: 1.4fr 1fr 1.2fr 1fr;
  }
}

.footer-col h3 {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: var(--s-4);
}

.footer-col p {
  font-size: 0.9375rem;
}

.footer-brand .header-logo svg .logo-word { fill: #fff; }

.footer-col ul {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

.footer-col a {
  color: rgba(255, 255, 255, 0.72);
  text-decoration: none;
  font-size: 0.9375rem;
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
}

.footer-col a:hover {
  color: #fff;
  text-decoration: underline;
}

.footer-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  margin-top: var(--s-4);
  padding: 6px var(--s-3);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--r-pill);
  font-size: 0.8125rem;
}

/* § 6 StBerG-Streifen im Footer (Designsystem 6.3 / 6.9) */
.footer-legal-note {
  margin-top: var(--s-7);
  padding-top: var(--s-6);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  font-size: 0.875rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.72);
}

.footer-legal-note strong {
  color: #fff;
}

.footer-bottom {
  margin-top: var(--s-6);
  padding-top: var(--s-5);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3) var(--s-5);
  justify-content: space-between;
  font-size: 0.8125rem;
}

/* Footer-Accordion mobil */
@media (max-width: 767px) {
  .footer-col[data-accordion] h3 {
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .footer-col[data-accordion] .footer-acc-icon {
    transition: transform 200ms ease;
  }
  .footer-col[data-accordion]:not(.is-open) ul {
    display: none;
  }
  .footer-col[data-accordion].is-open .footer-acc-icon {
    transform: rotate(180deg);
  }
}

@media (min-width: 768px) {
  .footer-acc-icon {
    display: none;
  }
}

/* ==========================================================================
   Hero (Designsystem 6.15)
   ========================================================================== */
.hero {
  background: var(--c-bg);
  padding-block: var(--s-8);
}

@media (min-width: 768px) {
  .hero { padding-block: var(--s-9); }
}

@media (min-width: 1024px) {
  .hero { padding-block: var(--s-10); }
}

.hero--dark {
  background: var(--c-navy-800);
  color: rgba(255, 255, 255, 0.85);
}

.hero--dark .t-display,
.hero--dark .t-h1,
.hero--dark h1 {
  color: #fff;
}

.hero--compact {
  padding-block: var(--s-7);
}

@media (min-width: 1024px) {
  .hero--compact { padding-block: var(--s-8); }
}

.hero-content p {
  margin-top: var(--s-4);
}

.hero-actions {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  margin-top: var(--s-6);
}

@media (min-width: 600px) {
  .hero-actions {
    flex-direction: row;
    flex-wrap: wrap;
  }
}

.hero-media {
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}

/* ==========================================================================
   CTA-Band (Designsystem 6.16)
   ========================================================================== */
.cta-band {
  background: var(--c-navy-800);
  color: rgba(255, 255, 255, 0.85);
  text-align: center;
  padding-block: var(--s-8);
}

@media (min-width: 1024px) {
  .cta-band { padding-block: var(--s-9); }
}

.cta-band h2 {
  color: #fff;
  margin-bottom: var(--s-3);
}

.cta-band .cta-band-inner {
  max-width: 44rem;
  margin-inline: auto;
}

.cta-band .hero-actions {
  justify-content: center;
}

/* ==========================================================================
   Breadcrumb (Designsystem / Konzept 10.1)
   ========================================================================== */
.breadcrumb {
  padding-block: var(--s-4);
  font-size: 0.875rem;
}

.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  align-items: center;
}

.breadcrumb li {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  color: var(--c-ink-500);
}

.breadcrumb li:not(:last-child)::after {
  content: "›";
  color: var(--c-ink-300);
}

.breadcrumb a {
  color: var(--c-ink-500);
  text-decoration: none;
}

.breadcrumb a:hover {
  color: var(--c-navy-600);
  text-decoration: underline;
}

.breadcrumb [aria-current="page"] {
  color: var(--c-navy-700);
  font-weight: 500;
}

/* ==========================================================================
   Hilfs-Utilities
   ========================================================================== */
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.mt-4 { margin-top: var(--s-4); }
.mt-5 { margin-top: var(--s-5); }
.mt-6 { margin-top: var(--s-6); }
.mb-4 { margin-bottom: var(--s-4); }
.mb-6 { margin-bottom: var(--s-6); }
.flow > * + * { margin-top: var(--s-4); }
.flow-lg > * + * { margin-top: var(--s-6); }

/* Sektions-Einblenden beim Scrollen (Designsystem 9) */
.reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 400ms ease-out, transform 400ms ease-out;
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
  }
}