/* ---------- Header / Nav ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  padding-block: var(--space-sm);
  background: color-mix(in oklch, var(--color-bg) 78%, transparent);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid transparent;
  transition: border-color var(--duration-normal) var(--ease-out-expo),
              box-shadow var(--duration-normal) var(--ease-out-expo);
}

.site-header.is-scrolled {
  border-bottom-color: var(--color-border);
  box-shadow: var(--shadow-sm);
}

/* ---------- Transparent header over a dark hero ---------- */
/* position:sticky still occupies its own space in normal flow, pushing the
   hero down below it -- so a transparent background there would just reveal
   the plain page background instead of the hero. Taking the header out of
   flow entirely lets the hero start at the very top of the viewport, with
   the header floating on top of it. */
.site-header--on-dark-hero {
  position: fixed;
  left: 0;
  right: 0;
  width: 100%;
}

.site-header--on-dark-hero:not(.is-scrolled) {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transition: background var(--duration-normal) var(--ease-out-expo),
              border-color var(--duration-normal) var(--ease-out-expo),
              box-shadow var(--duration-normal) var(--ease-out-expo);
}


/* Desktop only: the floating header sits over the dark hero, so its nav links
   need to be light. On mobile these links live inside the drawer (on the green
   panel) and must NOT inherit this -- otherwise it overrides the drawer's own
   colours and active states. */
@media (min-width: 1100px) {
  .site-header--on-dark-hero:not(.is-scrolled) .nav-links > li > a,
  .site-header--on-dark-hero:not(.is-scrolled) .nav-item-dropdown__row > a,
  .site-header--on-dark-hero:not(.is-scrolled) .nav-item-dropdown__toggle {
    color: color-mix(in oklch, white 92%, transparent);
  }
}

.site-header--on-dark-hero:not(.is-scrolled) .nav-toggle {
  color: white;
  border-color: color-mix(in oklch, white 45%, transparent);
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--color-ink);
}

.brand-mark {
  width: 2.75rem;
  height: 2.75rem;
  flex-shrink: 0;
  border-radius: 30%;
  box-shadow: var(--shadow-sm);
  transition: transform var(--duration-normal) var(--ease-out-expo);
}

.brand:hover .brand-mark { transform: rotate(-6deg) scale(1.05); }

.footer-brand .brand-mark { box-shadow: none; }

.brand-logo {
  display: block;
  height: 3.25rem;
  width: auto;
  transition: transform var(--duration-normal) var(--ease-out-expo);
}

.brand:hover .brand-logo { transform: scale(1.05); }

.footer-brand .brand-logo-chip {
  display: inline-flex;
  align-items: center;
  background: var(--color-surface);
  border-radius: var(--radius-sm);
  padding: 0.4rem 0.6rem;
  flex-shrink: 0;
}

.footer-brand .brand-logo-chip .brand-logo { height: 2.5rem; }

.brand-name {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
  line-height: 1.1;
}

.brand-tagline {
  display: block;
  font-family: var(--font-body);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-stone);
  font-weight: 600;
}

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

.nav-links {
  display: flex;
  gap: var(--space-md);
}

/* The ETG24 logo button is an inline-flex anchor with an explicit fixed
   height; left as a plain inline child, its <li> picks up extra height from
   the surrounding line box (the same class of bug documented below for
   "Leistungen"), which then made the separate "Kostenlose Bewertung" button
   center against a taller row and sit visibly lower. Flexing just this <li>
   makes its box match the anchor's real height instead of the line box. */
.nav-links > li:has(.nav-cta-logo) { display: flex; align-items: center; }

.nav-links a {
  position: relative;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-ink-soft);
  padding-block: 0.3rem;
}

.nav-links a::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -3px;
  height: 2px;
  background: var(--color-terracotta);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--duration-normal) var(--ease-out-expo);
}

.nav-links a:hover,
.nav-links a[aria-current="page"] {
  color: var(--color-ink);
}

.nav-links a:hover::after,
.nav-links a[aria-current="page"]::after {
  transform: scaleX(1);
}

.nav-links a.nav-cta {
  padding-block: 0.55rem;
}
.nav-links a.nav-cta::after { display: none; }

/* Box matches the logo's native 117:55 ratio so the image fills it with no
   letterbox (the stray white edge). */
.nav-links a.nav-cta-logo { display: inline-flex; align-items: center; padding: 0; height: 2.5rem; aspect-ratio: 117 / 55; width: auto; overflow: hidden; transition: transform var(--duration-fast) var(--ease-out-expo); }
.nav-links a.nav-cta-logo:hover { transform: translateY(-2px); }
.nav-cta-logo__img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Desktop shows the ETG24 logo image; the text label is a mobile-drawer
   fallback (see the max-width: 1099px block below). */
.nav-cta-logo__text { display: none; }

/* Contact block only ever renders inside the mobile drawer -- the desktop
   header already omits this info and doesn't need it duplicated. */
.nav-contact { display: none; }

@media (min-width: 1100px) {
  /* .btn-ghost's default border-color reads as near-invisible against the
     translucent light header background; tint it with the brand forest
     color so the pill still registers as a distinct secondary CTA at rest.
     (Scoped to desktop -- on the dark green mobile drawer the default light
     border-color already has plenty of contrast.) */
  .nav-links a.nav-cta {
    border-color: color-mix(in oklch, var(--color-forest) 45%, transparent);
  }
  .nav-links a.nav-cta:hover { border-color: var(--color-forest); }
}

/* ---------- Leistungen dropdown ---------- */
.nav-item-dropdown { position: relative; }
/* .accordion-item is reused here purely for the shared open/close JS pattern;
   the FAQ-only border-bottom divider it carries doesn't belong in the nav. */
.nav-item-dropdown.accordion-item { border-bottom: none; }
.nav-item-dropdown__row { display: flex; align-items: center; gap: 0.2rem; }
.nav-item-dropdown__toggle {
  background: none;
  border: none;
  padding: 0.2rem;
  color: var(--color-ink-soft);
  cursor: pointer;
  display: inline-flex;
  transition: transform var(--duration-fast) var(--ease-out-expo), color var(--duration-fast) var(--ease-out-expo);
}
.nav-item-dropdown__toggle:hover { color: var(--color-forest); }
.nav-item-dropdown[data-open="true"] .nav-item-dropdown__toggle { transform: rotate(180deg); }

.nav-item-dropdown__menu {
  display: none;
  flex-direction: column;
}
.nav-item-dropdown[data-open="true"] .nav-item-dropdown__menu { display: flex; }

@media (min-width: 1100px) {
  /* Plain nav links render as inline text while the Leistungen item's link
     sits inside a flex row (.nav-item-dropdown__row), which blockifies it
     and changes how its vertical padding contributes to box height. With
     the default stretch/top-alignment, that made "Leistungen" sit visibly
     lower than its siblings. Centering each nav item within the row instead
     of stretching it removes the dependency on that box-height difference. */
  .nav-links { align-items: center; }

  .nav-item-dropdown__menu {
    position: absolute;
    top: 100%;
    left: 0;
    /* padding-top (not margin) keeps the hoverable box flush against the
       trigger link -- a visible gap here breaks :hover on mouse travel. */
    padding-top: var(--space-sm);
    min-width: 14rem;
    z-index: 110;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity var(--duration-fast) var(--ease-out-expo), transform var(--duration-fast) var(--ease-out-expo), visibility 0s linear var(--duration-fast);
  }
  .nav-item-dropdown__menu-inner {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    padding: var(--space-xs);
    display: flex;
    flex-direction: column;
    width: 100%;
  }
  .nav-item-dropdown:hover .nav-item-dropdown__menu,
  .nav-item-dropdown:focus-within .nav-item-dropdown__menu,
  .nav-item-dropdown[data-open="true"] .nav-item-dropdown__menu {
    display: flex;
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity var(--duration-fast) var(--ease-out-expo), transform var(--duration-fast) var(--ease-out-expo), visibility 0s linear 0s;
  }
  .nav-item-dropdown__menu li { width: 100%; }
  .nav-item-dropdown__menu a {
    display: block;
    padding: 0.55rem 0.75rem;
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--color-ink-soft);
    white-space: nowrap;
  }
  .nav-item-dropdown__menu a:hover { background: var(--color-forest-pale); color: var(--color-forest); }
  .nav-item-dropdown__menu a::after { display: none; }
}

@media (max-width: 1099px) {
  .nav-item-dropdown__row { width: 100%; justify-content: space-between; }
  .nav-item-dropdown__toggle { color: var(--color-bg); padding: 0.4rem; }
  .nav-item-dropdown__menu {
    padding-left: var(--space-md);
    gap: var(--space-sm);
    margin-top: var(--space-sm);
  }
  .nav-item-dropdown__menu a { color: color-mix(in oklch, var(--color-bg) 85%, transparent); font-size: var(--text-base); }
  .nav-item-dropdown__menu a::after { display: none; }
}

.nav-toggle {
  display: none;
  position: relative;
  z-index: 101;
  width: 2.75rem; height: 2.75rem;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
}

.nav-toggle svg { width: 1.35rem; height: 1.35rem; }

.nav-backdrop {
  position: fixed;
  inset: 0;
  background: color-mix(in oklch, var(--color-ink) 55%, transparent);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--duration-normal) var(--ease-out-expo),
              visibility 0s linear var(--duration-normal);
  z-index: 40;
}

.nav-backdrop.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity var(--duration-normal) var(--ease-out-expo), visibility 0s linear 0s;
}

@media (max-width: 1099px) {
  .nav-toggle { display: inline-flex; }

  /* backdrop-filter on .site-header creates a new containing block for any
     position:fixed descendant, so the drawer below would be fixed relative
     to the header's own box instead of the viewport. */
  .site-header { backdrop-filter: none; -webkit-backdrop-filter: none; }

  .main-nav {
    position: fixed;
    z-index: 90;
    inset: 0 0 0 auto;
    width: min(80vw, 22rem);
    background: var(--color-forest);
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: var(--space-md);
    overflow-y: auto;
    padding: 6.5rem var(--space-lg) var(--space-lg);
    transform: translateX(100%);
    visibility: hidden;
    box-shadow: var(--shadow-lg);
    transition: transform var(--duration-normal) var(--ease-out-expo),
                visibility 0s linear var(--duration-normal);
  }

  .main-nav.is-open {
    transform: translateX(0);
    visibility: visible;
    transition: transform var(--duration-normal) var(--ease-out-expo),
                visibility 0s linear 0s;
  }

  .nav-links {
    flex-direction: column;
    gap: var(--space-md);
    width: 100%;
  }

  .nav-links a { color: var(--color-bg); font-size: var(--text-lg); }
  .nav-links a::after { background: var(--color-terracotta); }
  /* Branded press/current feedback instead of the browser's black tap flash.
     Scoped through .main-nav for enough specificity to win over the base
     drawer link colour. */
  .main-nav .nav-links a:active,
  .main-nav .nav-links a[aria-current="page"] { color: var(--color-terracotta); }
  .main-nav .nav-item-dropdown__toggle:active { color: var(--color-terracotta); }

  /* Match the primary CTA's full-width pill treatment so the secondary
     ETG24 button reads as an equally deliberate action, not a stray link. */
  .nav-links a.nav-cta {
    width: 100%;
  }

  /* In the drawer the ETG24 logo image blew up far larger than the primary
     CTA and read as a stray graphic. Drop the image here and render the plain
     "ETG24 Portal" text label instead, styled as a normal .btn-sm ghost pill
     so it matches the "Kostenlose Bewertung" button exactly (same width,
     padding and height). */
  .nav-links a.nav-cta-logo {
    width: 100%;
    height: auto;
    aspect-ratio: auto;
    min-height: 2.75rem;
    padding: 0 1.25rem;
    overflow: visible;
    justify-content: center;
    /* .nav-links a sets text-lg on the drawer links; the CTA must use the
       button's own text-xs so it matches the Kostenlose-Bewertung button. */
    font-size: var(--text-xs);
    /* Brand-blue outline instead of the plain white ghost pill. */
    color: var(--color-terracotta);
    border-color: var(--color-terracotta);
  }
  .nav-links a.nav-cta-logo:hover {
    color: var(--color-terracotta);
    border-color: var(--color-terracotta);
    background: color-mix(in oklch, var(--color-terracotta) 14%, transparent);
  }
  .nav-links a.nav-cta-logo .nav-cta-logo__img { display: none; }
  .nav-links a.nav-cta-logo .nav-cta-logo__text { display: inline; }

  /* Trim the brand logo down a little further on phones so it doesn't dominate
     the compact header. */
  .brand-logo { height: 3.25rem; }

  /* The two drawer CTAs (ETG24 ghost + Kostenlose-Bewertung primary) share the
     exact same box so they read as an equal pair, with even spacing. */
  .main-nav .nav-links { margin: 0; }
  .main-nav .btn-primary {
    width: 100%;
    min-height: 2.75rem;
    padding: 0 1.25rem;
    margin-top: 0;
  }

  .nav-contact {
    display: block;
    width: 100%;
    margin-top: var(--space-lg);
    padding-top: var(--space-lg);
    border-top: 1px solid color-mix(in oklch, var(--color-bg) 18%, transparent);
  }

  .nav-contact__title {
    display: block;
    font-size: var(--text-sm);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: color-mix(in oklch, var(--color-bg) 70%, transparent);
    margin-bottom: var(--space-sm);
  }

  .nav-contact ul { display: flex; flex-direction: column; gap: var(--space-xs); }

  .nav-contact li,
  .nav-contact a {
    font-size: var(--text-sm);
    color: color-mix(in oklch, var(--color-bg) 85%, transparent);
  }

  .nav-contact a:hover { color: var(--color-terracotta); }
}

/* ---------- Footer ---------- */
.site-footer {
  background: var(--color-forest);
  color: color-mix(in oklch, var(--color-bg) 88%, transparent);
  padding-block: var(--space-2xl) var(--space-lg);
  /* Reset the legacy `.site-footer { text-align: center }` rule from
     global.css, which otherwise inherits into every column/heading/list
     here and makes the grid look crooked instead of straight. */
  text-align: left;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: var(--space-xl);
  padding-bottom: var(--space-xl);
}

.footer-brand .brand { color: var(--color-bg); }
.footer-brand p { margin-top: var(--space-sm); color: color-mix(in oklch, var(--color-bg) 75%, transparent); max-width: 32ch; font-size: var(--text-sm); }

.footer-col h3 {
  color: var(--color-bg);
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--space-sm);
}

.footer-col ul { display: flex; flex-direction: column; gap: var(--space-xs); }
.footer-col a { color: color-mix(in oklch, var(--color-bg) 80%, transparent); font-size: var(--text-sm); }
.footer-col a:hover { color: var(--color-terracotta); }

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-sm);
  padding-top: var(--space-lg);
  border-top: 1px solid color-mix(in oklch, var(--color-bg) 18%, transparent);
  font-size: var(--text-sm);
  color: color-mix(in oklch, var(--color-bg) 65%, transparent);
}

.footer-bottom ul { display: flex; gap: var(--space-md); }
.footer-bottom a { color: color-mix(in oklch, var(--color-bg) 65%, transparent); }
.footer-bottom a:hover { color: var(--color-bg); }

.footer-credit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  margin-top: var(--space-md);
  font-size: var(--text-xs);
  color: color-mix(in oklch, var(--color-bg) 45%, transparent);
}

.footer-credit__heart {
  width: 0.85rem;
  height: 0.85rem;
  color: var(--color-terracotta);
  flex: none;
}

.footer-credit a {
  color: color-mix(in oklch, var(--color-bg) 78%, transparent);
  font-weight: 600;
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-out-expo);
}

.footer-credit a:hover {
  color: var(--color-bg);
  text-decoration: underline;
  text-underline-offset: 2px;
}

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

/* ---------- Page header (Unterseiten) ---------- */
.page-hero {
  padding-top: clamp(3rem, 2rem + 4vw, 5.5rem);
  padding-bottom: var(--space-xl);
  background: var(--color-bg-alt);
  position: relative;
  overflow: hidden;
}

.page-hero .eyebrow { margin-bottom: var(--space-xs); }
.page-hero h1 { max-width: 20ch; }
.page-hero .lede { margin-top: var(--space-md); }

.page-hero-decor {
  position: absolute;
  right: -6rem; top: -4rem;
  width: 22rem; opacity: 0.5;
  color: var(--color-forest-pale);
}

.anchor-nav {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
  margin-top: var(--space-lg);
}

.anchor-nav a {
  padding: 0.6rem 1.1rem;
  border-radius: var(--radius-full);
  border: 1.5px solid var(--color-border);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-ink-soft);
}
.anchor-nav a:hover { border-color: var(--color-forest); color: var(--color-forest); }

/* ---------- Section headers & layout utilities ---------- */
.section-head {
  max-width: 46rem;
  margin-bottom: var(--space-xl);
}

.section-head h2 { margin-block: var(--space-2xs) 0; }
.section-head.center { margin-inline: auto; text-align: center; }

.section-head--split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-lg);
  align-items: end;
  max-width: none;
}
.section-head--split .lede { margin: 0; color: var(--color-stone); }

@media (max-width: 760px) {
  .section-head--split { grid-template-columns: 1fr; }
}

.divider-motif {
  width: 100%;
  height: auto;
  color: var(--color-forest-pale);
  margin-block: var(--space-lg);
  animation: divider-breathe 5s var(--ease-out-soft) infinite;
}

@keyframes divider-breathe {
  0%, 100% { transform: scaleY(1); opacity: 1; }
  50% { transform: scaleY(0.85); opacity: 0.7; }
}

.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 4vw, 4rem);
  align-items: center;
}

.service-intro { margin-bottom: var(--space-xl); }
.service-intro .section-head { margin-bottom: 0; }

.service-illustration {
  display: block;
  width: 100%;
  max-width: 26rem;
  height: auto;
  margin-inline: auto;
  border-radius: var(--radius-md);
}

@media (max-width: 860px) {
  .two-col { grid-template-columns: 1fr; }
}

/* ---------- Hausverwaltung – Referenzobjekte ---------- */
.referenz-card {
  display: block;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: transform var(--duration-normal) var(--ease-out-expo),
              box-shadow var(--duration-normal) var(--ease-out-expo);
}

.referenz-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

.referenz-card__media img {
  display: block;
  width: 100%;
  height: 180px;
  object-fit: cover;
}

.referenz-card__body {
  padding: 0.9rem 1rem 1.1rem;
}

.referenz-card__body h3 {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 600;
  margin: 0 0 0.2rem;
}

.referenz-card__body p {
  color: var(--color-stone);
  font-size: var(--text-sm);
  margin: 0;
}

.referenz-card--more {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 0.4rem;
  min-height: 220px;
  padding: var(--space-lg);
  background: var(--color-forest);
  color: var(--color-bg);
}

.referenz-card--more strong {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  line-height: 1;
}

.referenz-card--more span {
  font-size: var(--text-sm);
  color: color-mix(in oklch, var(--color-bg) 85%, transparent);
  max-width: 22ch;
}

/* ---------- Homepage – embedded Werteermittlung calculator ---------- */
.home-calculator {
  padding-block: var(--space-section);
  background: var(--color-bg-alt);
}