@layer layout {
  .container {
    width: min(100% - 2 * var(--gutter), var(--container));
    margin-inline: auto;
  }

  /* Abschnitte trennt Weißraum; eine Linie darunter nur bei Bedarf über .section--rule
     (funktioniert auch auf .stats und .cta) */
  .section {
    padding-block: var(--section);
  }
  .section--rule { border-bottom: 1px solid var(--rule); }

  .section__head {
    max-width: 44rem;
    margin-bottom: clamp(2rem, 4vw, 3.5rem);

    & .eyebrow { margin-bottom: .9rem; }
    & .section__text { margin-top: 1.1rem; color: var(--ink-soft); font-size: 1.125rem; font-weight: 300; }
  }
  .section__head--row {
    max-width: none;
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
  }

  .split {
    display: grid;
    gap: clamp(2rem, 5vw, 5rem);
    align-items: start;

    @media (min-width: 900px) {
      grid-template-columns: minmax(0, 1.6fr) minmax(16rem, 1fr);
    }
  }
  .split--lead {
    @media (min-width: 900px) {
      grid-template-columns: minmax(16rem, 1fr) minmax(0, 2fr);
    }
  }
  .split__aside {
    display: grid;
    gap: 1rem;
    align-content: start;
    @media (min-width: 900px) { position: sticky; top: calc(var(--header-h) + 2rem); }
  }

  /* --- Skip-Link --- */
  .skip-link {
    position: absolute;
    left: 1rem;
    top: -4rem;
    z-index: 100;
    padding: .75rem 1rem;
    background: var(--ink);
    color: var(--bg);
    &:focus { top: 1rem; }
  }

  /* --- Header --- */
  .header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: color-mix(in oklab, var(--bg) 90%, transparent);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--rule);
  }
  .header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    min-height: var(--header-h);
  }
  .logo {
    display: flex;                /* kein Zeilenkasten → kein Unterhang, Inhalt exakt zentriert */
    align-items: center;
    color: var(--ink);
    text-decoration: none;
    flex: none;
    --logo-h: 2.75rem;
    @media (max-width: 639px) { --logo-h: 2.25rem; }
  }
  .logo__inner { display: flex; align-items: center; gap: .75rem; color: var(--ink); }
  .logo__mark { height: var(--logo-h); width: auto; transition: height .35s var(--ease); }
  .logo__text {
    display: block;
    max-width: 16rem;
    overflow: hidden;
    /* Zeilenhöhe = Markenhöhe: Glyphen sitzen nach Schriftmetrik mittig, wie die Navigationstexte */
    line-height: var(--logo-h);
    transition: max-width .4s var(--ease), opacity .25s var(--ease);
  }
  .logo__name {
    display: block;
    font-weight: 600;
    font-size: calc(var(--logo-h) * .5);
    letter-spacing: -0.025em;
    white-space: nowrap;
  }

  /* Kompakter Header nach dem Scrollen: Wortmarke klappt ein, Bildmarke bleibt (header.js) */
  .header { transition: --header-h .35s var(--ease); }
  .header.is-compact {
    --header-h: 4rem;
    & .logo { --logo-h: 2.25rem; }
    & .logo__text { max-width: 0; opacity: 0; }
  }
  .header__inner { transition: min-height .35s var(--ease); }
  .header__actions {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    @media (max-width: 639px) { gap: .75rem; }
  }
  .header__phone {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-weight: 500;
    font-size: .9375rem;
    text-decoration: none;
    white-space: nowrap;
    & .icon { width: 1.05em; height: 1.05em; }
    @media (max-width: 1099px) { & span { display: none; } }
    @media (max-width: 959px) { display: none; }
  }
  .header__remote {
    height: 2.5rem;              /* gleiche Höhe wie Theme-Toggle und Menü-Button */
    padding-block: 0;
    /* Ausblenden unter 960 px steht in components.css bei .button – die Button-Regel liegt in der späteren Schicht */
  }

  /* --- Navigation --- */
  .nav__list {
    display: flex;
    gap: clamp(1rem, 2.5vw, 2.25rem);
    list-style: none;
  }
  .nav__link {
    display: inline-block;
    padding-block: .5rem;
    font-weight: 500;
    font-size: .9375rem;
    letter-spacing: .02em;
    color: var(--ink);
    text-decoration: underline transparent;
    text-decoration-thickness: 1px;
    text-underline-offset: .45em;
    white-space: nowrap;          /* Chevron bleibt neben dem Text */
    transition: text-decoration-color var(--t-hover) var(--ease), color var(--t-hover) var(--ease);

    &:hover { text-decoration-color: var(--blue); color: var(--ink); }
    &.is-active { text-decoration-color: var(--ink); }
  }
  .nav__chevron { display: inline-block; width: .9em; height: .9em; margin-left: .2em; vertical-align: -.1em; transform: rotate(90deg); transition: transform var(--t-move) var(--ease); }
  /* Untermenü (Desktop): Aufklappmenü unter dem Menüpunkt, rein per CSS bei Hover oder Tastaturfokus */
  .nav__item--parent { position: relative; }
  .nav__sub {
    position: absolute;
    top: 100%;
    left: -1rem;
    z-index: 60;
    min-width: 15rem;
    padding: .5rem 0;
    list-style: none;
    background: var(--bg);
    border: 1px solid var(--rule);
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity var(--t-hover) var(--ease), transform var(--t-hover) var(--ease), visibility 0s var(--t-hover);
    &::before { content: ""; position: absolute; inset: -.75rem 0 auto; height: .75rem; }   /* Brücke zum Menüpunkt */
  }
  .nav__item--parent:is(:hover, :focus-within) {
    & .nav__sub { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
    & .nav__chevron { transform: rotate(-90deg); }
  }
  .nav__sublink {
    display: block;
    padding: .55rem 1rem;
    font-size: .9375rem;
    font-weight: 400;
    color: var(--ink);
    text-decoration: none;
    transition: color var(--t-hover) var(--ease);
    &:hover, &[aria-current="page"] { color: var(--link-hover); }
  }
  .nav-toggle { display: none; }

  @media (max-width: 959px) {
    /* Kein backdrop-filter: er wäre Containing Block für das fixed-Overlay der Navigation (Overlay hätte keine Höhe) */
    .header { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--bg); }
    /* Das nach rechts geschobene Overlay darf die Seite nicht seitlich scrollbar machen (clip: kein Scroll-Container) */
    html, body { overflow-x: clip; }
    .nav-toggle {
      display: inline-grid;
      place-items: center;
      width: 2.5rem; height: 2.5rem;
      border: 1px solid var(--rule);
      & .icon { width: 1.4rem; height: 1.4rem; }
      & .nav-toggle__close { display: none; }
      &[aria-expanded="true"] .nav-toggle__open { display: none; }
      &[aria-expanded="true"] .nav-toggle__close { display: block; }
    }
    .nav {
      position: fixed;
      inset: var(--nav-top, var(--header-h)) 0 0 0;
      z-index: 40;
      display: flex;
      flex-direction: column;
      padding: 1rem var(--gutter) 2rem;
      background: var(--bg);
      overflow-y: auto;
      transform: translateX(100%);
      opacity: 0;
      visibility: hidden;
      transition: transform .3s var(--ease), opacity .3s var(--ease), visibility 0s .3s;

      &.is-open {
        transform: none;
        opacity: 1;
        visibility: visible;
        transition-delay: 0s;
      }
    }
    .nav__list { flex-direction: column; gap: 0; }
    .nav__item { border-bottom: 1px solid var(--rule); }
    .nav__link {
      display: block;
      padding: 1.1rem 0;
      font-size: 1.5rem;
      font-weight: 600;
      letter-spacing: -0.02em;
      text-decoration: none;
      &.is-active { color: var(--blue-deep); }
    }
    .nav__chevron { display: none; }
    .nav__sub {                      /* mobil immer sichtbar, eingerückt unter dem Menüpunkt */
      position: static;
      min-width: 0;
      padding: 0 0 .75rem 1rem;
      border: 0;
      opacity: 1;
      visibility: visible;
      transform: none;
      transition: none;
      &::before { content: none; }
    }
    .nav__sublink { padding: .5rem 0; font-size: 1.125rem; }
    body.nav-open { overflow: hidden; }
  }

  /* --- Footer --- */
  .footer {
    position: relative;
    overflow: hidden;
    padding-block: clamp(3rem, 6vw, 5rem) 1.5rem;
    background: var(--bg);
    border-top: 1px solid var(--rule);
    font-size: var(--fs-small);
  }
  .footer__waves {
    position: absolute;
    inset: 0 0 0 auto;
    width: min(55%, 720px);
    color: var(--wave);
    opacity: .55;
    pointer-events: none;
    mask-image: linear-gradient(90deg, transparent, #000 50%, #000 92%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 50%, #000 92%, transparent);
    & svg { width: 100%; height: 100%; }
    @media (max-width: 639px) { display: none; }
  }
  .footer__grid {
    position: relative;
    display: grid;
    gap: 2.5rem 2rem;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    @media (min-width: 1024px) { grid-template-columns: 1.5fr 1fr 1fr 1fr; }
  }
  .footer__col--brand { max-width: 24rem; }
  .footer__logo {
    display: inline-block;
    color: var(--ink);
    text-decoration: none;
    margin-bottom: 1rem;
    --logo-h: 2.25rem;
  }
  .footer__text { color: var(--ink-soft); font-weight: 300; }
  .footer__heading {
    font-size: var(--fs-eyebrow);
    font-weight: 500;
    letter-spacing: var(--track-eyebrow);
    text-transform: uppercase;
    color: var(--ink);
    margin-bottom: .85rem;
    & a { color: inherit; text-decoration: none; }
    & + .footer__list + .footer__heading { margin-top: 1.75rem; }
  }
  .footer__address { margin-bottom: .5rem; color: var(--ink-soft); }
  .footer__list {
    list-style: none;
    display: grid;
    gap: .35rem;
    color: var(--ink-soft);
    & a { color: inherit; text-decoration: none; &:hover { color: var(--link-hover); } }
  }
  .footer__bottom {
    position: relative;
    margin-top: 3rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--rule);
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    font-size: .75rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ink);
  }
}