/* ==========================================================================
   Gerhard GmbH – Rahmen: Header, Navigation, Abschnitte, Footer
   ========================================================================== */

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--color-bg);
  border-bottom: var(--border-thin) solid var(--color-line);
}
.site-header__inner {
  max-width: var(--container-wide);
  margin-inline: auto;
  padding-inline: var(--gutter);
  min-block-size: 4rem;
  display: flex;
  align-items: center;
  gap: var(--space-m);
}
.site-logo { flex: none; display: block; }
.site-logo img { block-size: 2.75rem; inline-size: auto; }

.site-header__phone {
  margin-left: auto;
  font-weight: var(--weight-semibold);
  white-space: nowrap;
  text-decoration: none;
}
.site-header__phone:hover { text-decoration: underline; }
.site-header__phone-label { color: var(--color-text-muted); font-weight: var(--weight-regular); }

/* Menü-Button (mobil) */
.nav-toggle {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  min-block-size: 3rem;
  padding: 0 var(--space-s);
  border: var(--border) solid var(--color-text);
  border-radius: var(--radius);
  background: var(--color-bg);
  font-weight: var(--weight-semibold);
  cursor: pointer;
}
.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  display: block;
  inline-size: 1.125rem;
  block-size: 2px;
  background: currentColor;
  transition: transform var(--duration) var(--ease), opacity var(--duration) var(--ease);
}
.nav-toggle__bars { position: relative; }
.nav-toggle__bars::before,
.nav-toggle__bars::after { content: ""; position: absolute; left: 0; }
.nav-toggle__bars::before { top: -6px; }
.nav-toggle__bars::after { top: 6px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after { transform: translateY(-6px) rotate(-45deg); }

/* Navigation – Grundlage */
.main-navigation ul { list-style: none; margin: 0; padding: 0; }
.main-navigation li { max-width: none; }
.main-navigation a,
.main-navigation strong {
  display: block;
  font-weight: var(--weight-semibold);
  color: var(--color-text);
  text-decoration: none;
}

/* Mobil: ausklappbares Menü unter dem Header */
@media (max-width: 63.999em) {
  .site-header__nav {
    display: none;
    position: absolute;
    inset: 100% 0 auto;
    max-block-size: calc(100svh - 4rem);
    overflow-y: auto;
    background: var(--color-bg);
    border-top: var(--border-thin) solid var(--color-line);
    border-bottom: var(--border-strong) solid var(--color-line-strong);
    padding: var(--space-s) var(--gutter) var(--space-l);
  }
  .site-header--open .site-header__nav { display: block; }
  .site-header__phone-label { display: none; }
  .main-navigation .level_1 > li { border-bottom: var(--border-thin) solid var(--color-line); }
  .main-navigation .level_1 > li > a,
  .main-navigation .level_1 > li > strong { padding: var(--space-xs) 0; font-size: var(--step-1); }
  .main-navigation .level_2 { padding: 0 0 var(--space-xs) var(--space-s); }
  .main-navigation .level_2 a,
  .main-navigation .level_2 strong { padding: var(--space-3xs) 0; font-weight: var(--weight-regular); }
  .main-navigation strong.active,
  .main-navigation .trail > a { color: var(--color-link); }
  html.nav-open { overflow: hidden; }
}
@media (max-width: 26em) {
  .site-header__phone { font-size: var(--step--1); }
  .nav-toggle__label { display: none; }
}

/* Desktop: Navigation in einer Zeile, Unterpunkte als Aufklappmenü */
@media (min-width: 64em) {
  .site-header__inner { min-block-size: var(--header-height); gap: var(--space-l); }
  .site-logo img { block-size: 3.25rem; }
  .nav-toggle { display: none; }
  .site-header__nav { order: 2; margin-left: auto; }
  .site-header__phone { order: 3; margin-left: 0; padding-left: var(--space-m); border-left: var(--border-thin) solid var(--color-line); }

  .main-navigation .level_1 { display: flex; gap: var(--space-m); }
  .main-navigation .level_1 > li { position: relative; }
  .main-navigation .level_1 > li > a,
  .main-navigation .level_1 > li > strong {
    padding-block: calc((var(--header-height) - 1.6em) / 2 - var(--border-strong));
    border-bottom: var(--border-strong) solid transparent;
    white-space: nowrap;
  }
  .main-navigation .level_1 > li > a:hover,
  .main-navigation .level_1 > li.active > strong,
  .main-navigation .level_1 > li.trail > a { border-bottom-color: var(--color-line-strong); }

  .main-navigation .level_1 > li.submenu > a::after,
  .main-navigation .level_1 > li.submenu > strong::after {
    content: "";
    display: inline-block;
    inline-size: 0.4em;
    block-size: 0.4em;
    margin-left: 0.4em;
    border: solid currentColor;
    border-width: 0 2px 2px 0;
    transform: translateY(-0.2em) rotate(45deg);
  }

  .main-navigation .level_2 {
    position: absolute;
    top: 100%;
    left: calc(var(--space-m) * -1);
    min-inline-size: 15rem;
    padding: var(--space-xs) 0;
    background: var(--color-bg);
    border: var(--border-thin) solid var(--color-line);
    border-top: var(--border-strong) solid var(--color-line-strong);
    box-shadow: var(--shadow-raised);
    opacity: 0;
    visibility: hidden;
    transform: translateY(0.25rem);
    transition: opacity var(--duration) var(--ease), transform var(--duration) var(--ease), visibility var(--duration);
  }
  .main-navigation .level_1 > li:hover > .level_2,
  .main-navigation .level_1 > li:focus-within > .level_2 { opacity: 1; visibility: visible; transform: none; }
  .main-navigation .level_2 a,
  .main-navigation .level_2 strong { padding: var(--space-2xs) var(--space-m); font-weight: var(--weight-regular); white-space: nowrap; }
  .main-navigation .level_2 a:hover { background: var(--color-surface); color: var(--color-link); }
  .main-navigation .level_2 strong.active { color: var(--color-link); font-weight: var(--weight-semibold); }
}

/* ---------- Abschnitte (Artikel) ---------- */
.site-main > .mod_article { margin: 0; }
.section {
  padding: var(--section-space) var(--gutter);
  background: var(--color-bg);
}
.section > * { max-width: var(--container); margin-inline: auto; }
.section > :first-child { margin-top: 0; }
.section > :last-child { margin-bottom: 0; }
.section--muted { background: var(--color-surface); }

/* keine doppelten Abstände bei gleicher Fläche */
.site-main > .section:not([class*="section--"]) + .section:not([class*="section--"]) { padding-top: 0; }
.site-main > .section--muted + .section--muted { padding-top: 0; }

/* Abstände zwischen Elementen innerhalb eines Abschnitts */
.section > * + * { margin-top: var(--space-l); }
.section > .section__title + .section__intro { margin-top: var(--space-s); }
.section__title h2,
.section > .content-headline { margin-bottom: 0; }
.section__intro { color: var(--color-text-muted); font-size: var(--step-1); line-height: var(--leading-snug); }
.section__more { text-align: left; }

.section--trust { background: var(--color-surface); padding: var(--space-l) var(--gutter); }
/* Vertrauenszeile und Leistungen teilen die Fläche: nur ein normaler Abstand, kein addierter */
.site-main > .section--trust + .section--muted { padding-top: 0; }

.section--cta {
  background: var(--color-dark);
  color: var(--color-on-dark);
  padding: var(--space-xl) var(--gutter);
}

/* ---------- Footer ---------- */
.site-footer {
  background: var(--color-dark);
  color: var(--color-on-dark-muted);
  font-size: var(--step--1);
  padding: var(--space-xl) var(--gutter);
  border-top: var(--border-thin) solid var(--color-dark-2);
}
.section--cta + .site-footer,
.site-main:has(> .section--cta:last-child) + .site-footer { border-top-color: var(--color-dark-2); }
.site-footer__inner {
  max-width: var(--container);
  margin-inline: auto;
  display: grid;
  gap: var(--space-l) var(--grid-gap);
}
@media (min-width: 40em) { .site-footer__inner { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64em) { .site-footer__inner { grid-template-columns: 2fr 1.4fr 1fr; } }

.site-footer a { color: var(--color-link-on-dark); }
.site-footer a:hover { color: var(--color-on-dark); }
.site-footer :focus-visible { outline-color: var(--color-focus-on-dark); }
.site-footer h2 {
  font-size: var(--step-1);
  color: var(--color-on-dark);
  margin-bottom: var(--space-s);
}
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: var(--space-3xs); }
.site-footer .footer-col--nav a { text-decoration: none; color: var(--color-on-dark-muted); }
.site-footer .footer-col--nav a:hover { color: var(--color-on-dark); text-decoration: underline; }
.site-footer .footer-col--nav strong { color: var(--color-on-dark); font-weight: var(--weight-semibold); }
.footer-contact strong { color: var(--color-on-dark); }
.footer-contact p { margin-bottom: var(--space-s); }
.footer-logo {
  display: inline-block;
  background: var(--color-bg);
  padding: var(--space-xs) var(--space-s);
}
.footer-logo img { block-size: 2.5rem; inline-size: auto; }
.footer-contact__notdienst { border-left: var(--border-strong) solid var(--color-motiv-on-dark); padding-left: var(--space-s); }

/* „Passend dazu“ (interne Links vor dem Abschluss-Band): gleiche Fläche wie ein schlichter Abschnitt */
.site-main > .section:not([class*="section--"]) + .section--related { padding-top: 0; }