@layer reset, tokens, base, layout, components, sections, utilities;

@layer tokens {
  :root {
    /* Fonts */
    --font-haboro: "haboro", system-ui, sans-serif;
    --font-myriad: "myriad-pro", "Helvetica Neue", system-ui, sans-serif;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-bold: 700;

    /* Type sizes */
    --font-size-display: clamp(36px, 5vw, 56px);
    --font-size-h1: 35px;
    --font-size-h1-line: 42px;        /* Annahme — Figma zeigt 18px, das stimmt nicht für 35px */
    --font-size-h2: 28px;
    --font-size-h2-line: 34px;
    --font-size-h3: 22px;
    --font-size-h3-line: 28px;
    --font-size-h4: 18px;
    --font-size-h4-line: 24px;
    --font-size-nav: 15px;
    --font-size-nav-line: 18px;
    --font-size-body: 16px;
    --font-size-body-line: 22px;
    --font-size-small: 13px;
    --font-size-meta: 12px;
    --font-size-meta-line: 22px;

    /* Colors */
    --color-bg: #ffffff;
    --color-bg-soft: #EAEBEC; /* #959CA0 @ 20 % über Weiß */
    --color-text: #000000;
    --color-text-muted: #6b6b6b;
    --color-border: #e5e1d8;
    --color-divider: #7A7A7A;
    --color-accent-whatsapp: #25D366;
    --color-overlay: rgb(0 0 0 / 0.4);

    /* Spacing scale (4-based) */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;
    --space-8: 64px;
    --space-9: 96px;
    --space-10: 128px;

    /* Section vertical rhythm */
    --section-py:        clamp(48px, 8vw, 96px);
    --section-py-tight:  clamp(32px, 5vw, 56px);

    /* Radii */
    --radius-none: 0;
    --radius-sm: 2px;
    --radius-md: 4px;
    --radius-pill: 999px;

    /* Transitions */
    --transition-fast: 0.15s ease;
    --transition-base: 0.25s ease;

    /* Layout */
    --header-height: 131px;
    --container-max: 1440px;
    --container-padding: clamp(24px, 6vw, 86px);
    --container-padding-mobile: 20px;

    /* Z-index scale */
    --z-header: 100;
    --z-modal: 200;

    /* Breakpoints (Referenz, in @media direkt verwenden):
       sm: 640px, md: 960px, lg: 1280px */
  }

  /* Mobile: container-padding auf 20px herunterziehen — wirkt überall,
     wo var(--container-padding) verwendet wird. */
  @media (max-width: 40em) {
    :root {
      --container-padding: var(--container-padding-mobile);
    }
  }
}

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  body { margin: 0; }
  img, picture, svg { display: block; max-width: 100%; }
  button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
  ul { list-style: none; padding: 0; margin: 0; }
  a { color: inherit; text-decoration: none; }
}

@layer base {
  html {
    font-family: var(--font-haboro);
    color: var(--color-text);
    background: var(--color-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    scroll-behavior: smooth;
  }
  body { font-size: var(--font-size-body); line-height: var(--font-size-body-line); }

  h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-haboro);
    font-weight: var(--font-weight-regular);
    color: var(--color-text);
    margin: 0 0 var(--space-4);
    letter-spacing: -0.005em;
  }

  h1 { font-size: var(--font-size-display); line-height: 1.1; }
  h2 { font-size: var(--font-size-h2); line-height: var(--font-size-h2-line); }
  h3 { font-size: var(--font-size-h3); line-height: var(--font-size-h3-line); }
  h4 { font-size: var(--font-size-h4); line-height: var(--font-size-h4-line); }
  h5, h6 { font-size: var(--font-size-body); line-height: var(--font-size-body-line); font-weight: var(--font-weight-medium); }

  p { margin: 0 0 var(--space-4); }
  p:last-child { margin-bottom: 0; }

  a {
    color: inherit;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    transition: opacity var(--transition-fast);
  }
  a:hover { opacity: 0.7; }

  strong, b { font-weight: var(--font-weight-medium); }

  hr {
    border: 0;
    border-top: 1px solid var(--color-border);
    margin: var(--space-6) 0;
  }

  :focus-visible {
    outline: 2px solid var(--color-text);
    outline-offset: 2px;
  }
}

@layer layout {
  .container {
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--container-padding);
  }

  .container--narrow { max-width: 880px; }
  .container--wide   { max-width: 1640px; }

  .section {
    padding-block: var(--section-py);
  }

  /* Verankerte Sections (Menü-Sprungmarken, z. B. "Über uns" → #ueber-uns):
     Offset gegen den Sticky-Header, damit der Abschnitt nicht verdeckt wird. */
  .section[id] {
    scroll-margin-top: calc(var(--header-height, 131px) + 16px);
  }

  .section--tight { padding-block: var(--section-py-tight); }
  .section--flush { padding-block: 0; }
  .section--soft  { background: var(--color-bg-soft); }

  .grid { display: grid; gap: var(--space-5); }
  .grid--2 { grid-template-columns: 1fr; }
  .grid--3 { grid-template-columns: 1fr; }
  .grid--4 { grid-template-columns: 1fr; }
  .grid--auto { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }

  @media (min-width: 40em) {
    .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: 60em) {
    .grid--3 { grid-template-columns: repeat(3, 1fr); }
    .grid--4 { grid-template-columns: repeat(4, 1fr); }
  }

  .stack > * + * { margin-top: var(--space-5); }
  .stack--tight > * + * { margin-top: var(--space-3); }
  .stack--loose > * + * { margin-top: var(--space-7); }
}

@layer components {
  /* ---------- Site Header ---------- */
  .site-header {
    position: sticky;
    top: 0;
    z-index: var(--z-header);
    background: var(--color-bg);
    transition: box-shadow 0.2s ease;

    &.has-stuck-filter { box-shadow: 0 6px 12px rgb(0 0 0 / 0.06); }

    & .site-header__inner {
      max-width: var(--container-max);
      margin-inline: auto;
      padding-inline: var(--container-padding);
    }

    @media (min-width: 60em) {
      & .site-header__inner {
        padding-inline: 68px; /* per Figma: 1440 layout, header content 68px inset */
      }
    }

    /* Mobile bar — Burger | Logo | (Spacer für Zentrierung).
       Layout per Figma-Spec: ~85px Höhe, Logo 110px breit zentriert,
       Burger linksbündig (21×15). */
    /* Mobile bar — Kontakt-Icons links | Logo Mitte | Burger rechts (Figma DEV-03).
       Flex (icons↔burger via space-between) + absolut zentriertes Logo, damit
       das Logo trotz unterschiedlich breiter Seiten echt mittig sitzt. */
    & .site-header__mobile-bar {
      /* Logo als einziges Flow-Element → von justify-content zentriert; Icons
         und Burger absolut an den Rändern. So sitzt das Logo garantiert mittig,
         egal wie breit die Seiten sind. */
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      /* Figma DEV-03: Header 63px hoch, Logo 88×58. */
      min-height: 60px;
      /* Negative Inline-Margins ziehen die Border-Unten über die volle
         Viewport-Breite, das Padding hält den Inhalt im Container. */
      margin-inline: calc(var(--container-padding) * -1);
      padding-block: 4px;
      padding-inline: var(--container-padding);
      border-bottom: 1px solid #959CA0;
    }

    & .site-header__brand {
      display: flex;
      align-items: center;
      line-height: 0; /* verhindert Baseline-Höhe rund um das <img> */
    }

    & .site-header__brand--mobile {
      /* zentriert via justify-content der Bar */
    }

    & .site-header__logo--mobile {
      display: block;
      width: 88px;
      height: auto;
      aspect-ratio: 169 / 113;
    }

    /* Kontakt-Icons links (kompakt, mit Trennstrichen wie Desktop-Top-Bar).
       Figma DEV-03: Icons ~13–15px, in 14px-Box (Seitenverhältnis erhalten);
       Trennstriche ~14px, ~9px Abstand je Seite. */
    & .site-header__icon-list--mobile {
      position: absolute;
      left: var(--container-padding);
      top: 50%;
      transform: translateY(-50%);
    }
    & .site-header__icon-list--mobile .site-header__icon-item {
      padding-inline: 9px;
    }
    /* Erstes Icon bündig zum linken Rand (kein Padding links). */
    & .site-header__icon-list--mobile .site-header__icon-item:first-child {
      padding-inline-start: 0;
    }
    & .site-header__icon-list--mobile .site-header__icon-item:not(:last-child)::after {
      height: 14px;
    }
    & .site-header__icon-list--mobile .site-header__icon-link svg,
    & .site-header__icon-list--mobile .site-header__icon-link img {
      width: auto;
      height: auto;
      max-width: 14px;
      max-height: 14px;
    }

    /* Burger (mobile only) — rechts */
    & .site-header__burger {
      position: absolute;
      right: var(--container-padding);
      top: 50%;
      transform: translateY(-50%);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 40px;
      height: 40px;
      color: var(--color-text);

      & svg { width: 21px; height: 15px; display: block; }
    }

    /* Generic icon-link styling (used in top-bar AND mobile-icons).
       Icons render at their native pixel size (set via SVG width/height attrs
       or <img> width/height) — keeping Figma-true sizes (Calendar 21, Mail 23×15,
       Phone 15×20, WhatsApp 25). */
    & .site-header__icon-link {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: var(--color-text);
      line-height: 0;

      &:hover { opacity: 0.7; }
    }

    /* Desktop block — hidden on mobile */
    & .site-header__desktop { display: none; }
  }

  /* Desktop top-bar icons: vertical separators with consistent height */
  .site-header__icon-list {
    display: flex;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .site-header__icon-item {
    display: flex;
    align-items: center;
    padding-inline: 16px;
    position: relative;
  }

  .site-header__icon-item:first-child { padding-inline-start: 0; }
  .site-header__icon-item:last-child  { padding-inline-end: 0; }

  .site-header__icon-item:not(:last-child)::after {
    content: "";
    position: absolute;
    inset-inline-end: 0;
    inset-block-start: 50%;
    translate: 0 -50%;
    width: 0.8px;
    height: 23px;
    background: var(--color-text);
  }

  /* Desktop layout (>= 960px) — 2-row × 3-col grid, logo spans both rows */
  @media (min-width: 60em) {
    .site-header {
      & .site-header__mobile-bar   { display: none; }
      & .site-header__mobile-icons { display: none; }
      & .site-header__burger       { display: none; }

      & .site-header__desktop {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        grid-template-rows: auto auto;
        grid-template-areas:
          "icons brand ."
          "navL  brand navR";
        align-items: center;
        column-gap: 32px;
        row-gap: 12px;
        /* (131 total - 112 logo) / 2 = 9.5px → 9/10 padding */
        padding-block: 9px 10px;
      }

      & .site-header__icon-list { grid-area: icons; justify-self: start; }
      & .site-header__brand--desktop {
        grid-area: brand;
        justify-self: center;
        align-self: center;
      }
      /* Nav auf die Höhe der Logo-Wortmarke "P&G Immobilien" heben.
         Das zentrierte Logo legt die Wortmarke ~15px über die Nav-Zeile;
         der Versatz bringt die Menüpunkte mit der Wortmarke auf eine Linie
         (Feedback KW25). */
      & .site-header__nav-left  { grid-area: navL; justify-self: start; transform: translateY(-15px); }
      & .site-header__nav-right { grid-area: navR; justify-self: end;   transform: translateY(-15px); }

      & .site-header__logo--desktop { width: auto; height: 112px; }
    }
  }

  /* ---------- Site Nav (reusable, Desktop + Drawer) ---------- */
  .site-nav__list {
    display: flex;
    gap: 32px;
  }

  .site-nav__list > li {
    position: relative;
  }

  .site-nav__link {
    font-family: var(--font-haboro);
    font-size: var(--font-size-nav);
    line-height: var(--font-size-nav-line);
    /* Figma "Desktop Navigation": Haboro Norm Regular 400. Der aktive Punkt
       ist "Desktop Navigation unterstrichen" = Haboro 500 + Unterstreichung. */
    font-weight: var(--font-weight-regular);
    color: var(--color-text);
    padding-block: 8px;
    /* override @layer base default a-underline — Nav-Links sind standardmäßig
       nicht unterstrichen. Footer/Drawer dimmen bei Hover (unten), die
       Desktop-Hauptnav unterstreicht bei Hover (siehe .site-header-Regel). */
    text-decoration: none;

    &:hover { opacity: 0.7; text-decoration: none; }
  }

  /* Desktop-Hauptnav (im Header): KEINE dauerhafte Aktiv-Markierung.
     Laut Figma wird ein Punkt nur bei Mouse-Over hervorgehoben — als
     Haboro-Unterstreichung. Bewusst ohne Gewichtswechsel (400→500), damit
     die Geschwister-Items beim Hover nicht springen (kein Layout-Shift). */
  .site-header .site-nav__link:hover {
    opacity: 1;
    text-decoration: underline;
    text-underline-offset: 6px;
    text-decoration-thickness: 1px;
  }

  /* Footer-/Legal-Nav (Bauträger · Wohnraum · AGB · Impressum): aktiver Punkt
     wird NICHT unterstrichen (Feedback KW25 — "Wohnraum nicht unterstreichen").
     Die Unterstreichung ist dem aktiven Hauptmenü vorbehalten. */
  .site-footer__nav .site-nav__link[aria-current="page"] {
    font-weight: var(--font-weight-regular);
    text-decoration: none;
  }

  /* ---------- Dropdown (Desktop) ---------- */
  .menu-item-has-children > .site-nav__link {
    cursor: default;
  }

  .site-nav__list .sub-menu {
    /* --sub-menu-pad-x muss mit dem horizontalen Padding der Sub-Items
       übereinstimmen, damit der Item-Text mit dem Parent fluchtet. */
    --sub-menu-pad-x: 20px;
    position: absolute;
    top: calc(100% + 8px);
    left: calc(var(--sub-menu-pad-x) * -1);
    min-width: 220px;
    background: #fff;
    border: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent);
    box-shadow: 0 16px 40px color-mix(in srgb, var(--color-text) 10%, transparent);
    padding: 8px 0;
    margin: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-4px);
    transition: opacity var(--transition-fast), visibility var(--transition-fast), transform var(--transition-fast);
    z-index: 50;
  }

  .site-nav__list .menu-item-has-children:hover > .sub-menu,
  .site-nav__list .menu-item-has-children:focus-within > .sub-menu,
  .site-nav__list .menu-item-has-children.is-open > .sub-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
  }

  .site-nav__list .sub-menu li + li {
    border-top: 1px solid color-mix(in srgb, var(--color-text) 6%, transparent);
  }

  .site-nav__list .sub-menu .site-nav__link {
    display: block;
    padding: 10px var(--sub-menu-pad-x);
    white-space: nowrap;
    font-family: var(--font-myriad);
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-regular);
    color: var(--color-text);
    transition: background-color var(--transition-fast), color var(--transition-fast);

    &:hover {
      background: color-mix(in srgb, var(--color-text) 4%, transparent);
      opacity: 1;
    }

    &[aria-current="page"] {
      text-decoration: none;
      background: color-mix(in srgb, var(--color-text) 6%, transparent);
      font-weight: var(--font-weight-medium);
    }
  }

  /* ---------- Site Footer ---------- */
  .site-footer {
    padding-block: 64px 32px;

    & .site-footer__inner {
      max-width: var(--container-max);
      margin-inline: auto;
      padding-inline: 86px;
    }

    /* Top row — brand + social */
    & .site-footer__head {
      display: grid;
      grid-template-columns: 1fr;
      gap: 24px;
      align-items: center;
      justify-items: center;
    }

    & .site-footer__brand {
      display: inline-flex;
      align-items: center;
    }

    & .site-footer__logo {
      width: auto;
      height: 104px;
    }

    /* Social icons — circle + glyph baked into the SVG asset */
    & .site-footer__social {
      display: flex;
      gap: 15px;
    }

    & .site-footer__social-link {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      line-height: 0;

      &:hover { opacity: 0.85; }

      & svg { width: 23px; height: 23px; }
    }

    /* Divider — two line segments with a 24px gap on each side of the diamond */
    & .site-footer__divider {
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      align-items: center;
      column-gap: 24px;
      margin-block: 0 45px;
    }

    & .site-footer__divider::before,
    & .site-footer__divider::after {
      content: "";
      height: 1px;
      background: var(--color-divider);
    }

    & .site-footer__back-to-top {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: none;
      border: 0;
      padding: 0;
      cursor: pointer;
      color: var(--color-divider);
      line-height: 0;

      &:hover { color: var(--color-text); }

      & svg { display: block; }
    }

    /* Bottom row — contact text + nav */
    & .site-footer__foot {
      display: grid;
      grid-template-columns: 1fr;
      gap: 24px;
      align-items: start;
      justify-items: center;
      text-align: center;
    }

    & .site-footer__contact {
      font-family: var(--font-myriad);
      font-size: var(--font-size-meta);
      line-height: var(--font-size-meta-line);
      font-weight: var(--font-weight-regular);
      color: var(--color-text);

      & p { margin: 0; }

      & a {
        color: inherit;
        text-decoration: none;

        &:hover { text-decoration: underline; }
      }
    }

    & .site-footer__nav .site-nav__list {
      display: flex;
      flex-wrap: wrap;
      gap: 16px 48px;
      justify-content: center;
    }
  }

  /* Footer Mobile layout (<60em) — Reihenfolge laut Figma:
     Logo → Divider mit Up-Chevron → Nav → Social-Icons → Adresse.
     `display: contents` löst .__head und .__foot auf, damit deren Kinder
     direkt im Flex-Column des Inner liegen und per `order` umgereiht werden. */
  @media (max-width: 60em) {
    .site-footer {
      /* Kein eigenes Top-Padding: der Abstand zum Logo kommt aus dem
         padding-bottom der letzten Section (~48px ≈ Figma 45px). Sonst
         doppelter Abstand (Section-pb + Footer-pt). */
      padding-block: 0 32px;

      & .site-footer__inner {
        display: flex;
        flex-direction: column;
        gap: 24px;
        padding-inline: var(--container-padding);
      }

      & .site-footer__head,
      & .site-footer__foot {
        display: contents;
      }

      /* Logo: 15px Abstand nach unten zum Divider (Figma) — den 24px-Flex-Gap
         entsprechend zusammenziehen (Logo-SVG hat etwas Eigen-Weißraum). */
      & .site-footer__brand   { order: 1; align-self: center; margin-bottom: -16px; }
      & .site-footer__divider {
        order: 2;
        /* Strich edge-to-edge bis an die Viewport-Ränder */
        margin: 0 calc(var(--container-padding) * -1);
      }
      & .site-footer__nav     { order: 3; }
      & .site-footer__social  { order: 4; align-self: center; gap: 18px; }
      & .site-footer__contact {
        order: 5;
        text-align: center;
        font-size: 10px;
        line-height: 16px;
      }

      /* Figma DEV-03: Logo 88px BREIT (nicht hoch) → ~58px hoch. */
      & .site-footer__logo {
        width: 88px;
        height: auto;
      }

      & .site-footer__social-link svg {
        width: 23px;
        height: 23px;
      }

      /* Legal-Nav mobil: engerer Zeilenabstand + kompaktere Spalten, damit
         der Block mittig sitzt (Feedback KW25 — "Wohnraum nicht in der Mitte",
         "Zeilenabstand verringern"). */
      & .site-footer__nav .site-nav__list {
        gap: 10px 28px;
        justify-content: center;
      }
    }
  }

  /* Footer Desktop layout */
  @media (min-width: 60em) {
    .site-footer {
      & .site-footer__head {
        grid-template-columns: auto auto;
        justify-content: space-between;
        justify-items: stretch;
      }

      & .site-footer__brand     { justify-self: start; }
      & .site-footer__social    { justify-self: end; transform: translateY(20px); }

      & .site-footer__foot {
        grid-template-columns: auto auto;
        justify-content: space-between;
        justify-items: stretch;
        text-align: start;
      }

      & .site-footer__contact   { justify-self: start; }
      & .site-footer__nav       { justify-self: end; }

      & .site-footer__nav .site-nav__list {
        flex-wrap: nowrap;
        justify-content: flex-end;
      }
    }
  }

  /* ---------- Off-canvas drawer (Mobile nav) ---------- */
  .site-nav-drawer {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
    visibility: hidden;
    pointer-events: none;

    & .site-nav-drawer__overlay {
      position: absolute;
      inset: 0;
      background: rgb(0 0 0 / 0.4);
      opacity: 0;
    }

    & .site-nav-drawer__panel {
      position: absolute;
      inset: 0 auto 0 0;
      width: 100%;
      background: var(--color-bg);
      transform: translateX(-100%);
      display: flex;
      flex-direction: column;
      overflow-y: auto;

      @media (min-width: 60em) {
        width: min(86vw, 380px);
      }
    }

    & .site-nav-drawer__head {
      position: sticky;
      top: 0;
      z-index: 1;
      background: var(--color-bg);
      display: grid;
      grid-template-columns: 40px 1fr 40px;
      align-items: center;
      gap: 16px;
      /* Maße 1:1 zur geschlossenen Mobile-Bar, damit Logo & Close-Button
         beim Öffnen NICHT nach unten springen. */
      min-height: 85px;
      padding: 8px var(--container-padding) 4px;
      border-bottom: 1px solid #959CA0;
    }

    & .site-nav-drawer__close {
      grid-column: 1;
      justify-self: start;
      width: 40px;
      height: 40px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 0;
      background: transparent;
      border: 0;
      color: var(--color-text);
      cursor: pointer;

      /* SVG ist intrinsisch 20×20 — Button-Hitbox bleibt 40×40 für Touch */
      & svg { display: block; width: 20px; height: 20px; }
    }

    & .site-nav-drawer__brand {
      grid-column: 2;
      display: flex;
      justify-content: center;
    }
    & .site-nav-drawer__logo {
      width: 110px;
      height: auto;
      aspect-ratio: 169 / 113;
    }

    & .site-nav-drawer__body {
      padding: 0;
      display: flex;
      flex-direction: column;
      flex: 1;
    }

    /* Suchfeld laut Mobile-Layout ausgeblendet */
    & .site-nav-drawer__search { display: none; }

    /* Nav: kein padding-inline auf dem Wrapper, damit die <li>-Bottom-Border
       von Drawer-Rand zu Drawer-Rand läuft. Das horizontale Text-Inset
       wandert auf den <a> (29px laut Figma).
       Oben 50px Abstand zum Head-Trennstrich. */
    & .site-nav-drawer__nav {
      padding-inline: 0;
      padding-top: 50px;
    }

    & .site-nav-drawer__nav .site-nav__list {
      flex-direction: column;
      gap: 0;
    }

    & .site-nav-drawer__nav .site-nav__list > li {
      border-bottom: 1px solid #959CA0;
    }

    & .site-nav-drawer__nav .site-nav__link {
      display: block;
      font-family: var(--font-haboro);
      font-size: 20px;
      line-height: 18px;
      font-weight: var(--font-weight-medium);
      padding: 18px 29px;
    }

    /* Sub-Menu auf Mobile IMMER inline anzeigen (kein Popover).
       Hier müssen die Desktop-Dropdown-Defaults (position: absolute,
       box-shadow, background, opacity-Fade) explizit zurückgenommen werden,
       sonst rendert das Sub-Menu als schwebende weiße Box. */
    & .site-nav-drawer__nav .sub-menu {
      position: static;
      top: auto;
      left: auto;
      min-width: 0;
      background: transparent;
      border: 0;
      box-shadow: none;
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
      transform: none;
      transition: none;
      list-style: none;
      margin: 0;
      padding: 0;
      display: flex;
      flex-direction: column;
      gap: 0;
      z-index: auto;
    }

    & .site-nav-drawer__nav .sub-menu > li {
      border-bottom: 1px solid #959CA0;
    }

    /* Letztes Sub-Item: keine eigene Border — der Parent <li.menu-item-has-children>
       bringt schon eine Bottom-Border mit, sonst stapeln sich zwei Linien. */
    & .site-nav-drawer__nav .sub-menu > li:last-child {
      border-bottom: 0;
    }

    & .site-nav-drawer__nav .sub-menu .site-nav__link {
      font-family: var(--font-haboro);
      font-size: 16px;
      line-height: 18px;
      font-weight: var(--font-weight-regular);
      padding: 14px 29px 14px 58px;
    }

    /* Parent mit Kindern (ohne URL → als <span> gerendert) ist nicht klickbar */
    & .site-nav-drawer__nav .menu-item-has-children > span.site-nav__link {
      cursor: default;
    }

    & .site-nav-drawer__footer {
      margin-top: auto;
      padding: 32px 29px 40px;

      & .site-nav__list {
        flex-direction: column;
        gap: 0;
      }

      & .site-nav__link {
        display: block;
        padding-block: 4px;
        font-family: var(--font-myriad);
        font-size: 12px;
        line-height: 18px;
        font-weight: 400;
        color: #000;
      }
    }
  }

  body.is-nav-open .site-nav-drawer {
    visibility: visible;
    pointer-events: auto;

    & .site-nav-drawer__overlay { opacity: 1; }
    & .site-nav-drawer__panel { transform: translateX(0); }
  }

  body.is-nav-open { overflow: hidden; }
}

@layer sections {
  /* ---------- Shared section primitives ---------- */
  .section__head {
    text-align: center;
    max-width: 720px;
    margin-inline: auto;
    margin-bottom: var(--space-7);
  }

  .section__eyebrow {
    font-family: var(--font-myriad);
    font-size: var(--font-size-meta);
    line-height: 1;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    margin: 0 0 var(--space-3);
  }

  .section__headline {
    font-family: var(--font-haboro);
    /* Figma "Desktop H1": Haboro Norm Regular 500, 35/50, #000.
       CSS-Weight 400 statt 500 — Adobe-Fonts-Kit liefert den 500er-Schnitt
       nicht aus, daher synthetisiert der Browser sonst zu fett. */
    font-size: 35px;
    line-height: 50px;
    font-weight: 400;
    letter-spacing: 0;
    color: var(--color-text);
    margin: 0 0 var(--space-4);
  }

  @media (max-width: 40em) {
    /* Figma „Mobile H1": Haboro 500, 28 / 35. */
    .section__headline { font-size: 28px; line-height: 35px; }
  }

  .section__intro {
    font-family: var(--font-myriad);
    font-size: var(--font-size-body);
    line-height: var(--font-size-body-line);
    color: var(--color-text);
    margin: 0;

    & p { margin: 0; }
    & strong, & b { font-weight: 700; }
  }

  .section__body { font-family: var(--font-myriad); }

  .section__cta { margin-top: var(--space-6); }

  /* Lead paragraph (italic, bigger) — used between headline and body.
     Figma "Desktop Zitat": Haboro Norm Regular Italic 500, 22 / 30, #000.
     CSS-Weight 400 (Adobe-Kit liefert kein 500). */
  .section__lead {
    font-family: var(--font-haboro);
    font-style: italic;
    font-weight: 400;
    font-size: 22px;
    line-height: 30px;
    color: var(--color-text);
    margin: 0 auto var(--space-5);
    max-width: 608px;
  }

  /* Figma „Mobile Zitat": Haboro 500 italic, 18 / 26. Muss NACH der Basis-
     Regel stehen (gleiche Spezifität → spätere Regel gewinnt). */
  @media (max-width: 60em) {
    .section__lead { font-size: 18px; line-height: 26px; }
  }

  .section__head--left { text-align: start; max-width: 720px; margin-inline: 0; }
  .section__head--center { text-align: center; max-width: 720px; margin-inline: auto; }

  /* Prose — used inside WYSIWYG output. Keep editorial. */
  .prose {
    font-family: var(--font-myriad);
    font-size: var(--font-size-body);
    line-height: var(--font-size-body-line);
    color: var(--color-text);

    & > * + * { margin-top: var(--space-4); }
    & h2, & h3, & h4 { font-family: var(--font-haboro); margin-top: var(--space-6); }
    & ul { list-style: disc; padding-left: 1.4em; }
    & ol { list-style: decimal; padding-left: 1.4em; }
    & li + li { margin-top: var(--space-2); }
    & a { text-decoration: underline; text-underline-offset: 3px; }
  }

  /* ---------- Hero Fullwidth ---------- */
  .section--hero-fullwidth {
    position: relative;
    min-height: clamp(420px, 60vh, 720px);
    background-color: #b8d4d6;
    background-size: cover;
    background-position: center;
    color: #ffffff;
    display: flex;
    align-items: end;

    & .section--hero-fullwidth__inner {
      max-width: var(--container-max);
      margin-inline: auto;
      width: 100%;
      padding: 64px var(--container-padding);
    }

    & .section--hero-fullwidth__headline {
      font-family: var(--font-haboro);
      font-size: clamp(32px, 5vw, 56px);
      line-height: 1.1;
      font-weight: var(--font-weight-regular);
      margin: 0 0 16px;
      text-shadow: 0 2px 12px rgb(0 0 0 / 0.3);
    }

    & .section--hero-fullwidth__subline {
      font-family: var(--font-myriad);
      font-size: clamp(16px, 1.6vw, 20px);
      line-height: 1.4;
      margin: 0 0 24px;
      max-width: 600px;
      text-shadow: 0 1px 8px rgb(0 0 0 / 0.3);
    }

    & .section--hero-fullwidth__cta { margin-top: 8px; }
  }

  /* ---------- Hero Slider / Cover-Image ---------- */
  .section--hero-slider {
    position: relative;
    background-color: var(--color-bg-soft);
    overflow: hidden;
  }

  /* Heights per Figma: default = 675px (front-page hero) */
  .section--hero-slider--compact { --hero-slider-h: clamp(280px, 45vh, 540px); }
  .section--hero-slider           { --hero-slider-h: 675px; }
  .section--hero-slider--default  { --hero-slider-h: 675px; }
  .section--hero-slider--tall     { --hero-slider-h: clamp(440px, 75vh, 880px); }

  @media (max-width: 40em) {
    /* Headerbild mobil flacher (Feedback KW25 — "Headerbild weniger hoch"). */
    .section--hero-slider { --hero-slider-h: 340px; }
  }

  .section--hero-slider__cover,
  .section--hero-slider__swiper {
    width: 100%;
    height: var(--hero-slider-h);
    background-size: cover;
    background-position: center;
  }

  .section--hero-slider__swiper { position: relative; }

  .section--hero-slider__slide {
    background-size: cover;
    background-position: center;
    width: 100%;
    height: 100%;
  }

  /* Pagination bullets — bottom centre, 29px from bottom edge per Figma.
     Swiper's bundle CSS sizes/spaces bullets via CSS variables — override
     them here so our values stick without spec wars. */
  .section--hero-slider__pagination {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 29px !important;
    top: auto !important;
    z-index: 5;
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 17px;
    width: auto !important;

    --swiper-pagination-bottom: 29px;
    --swiper-pagination-top: auto;
    --swiper-pagination-bullet-size: 10px;
    --swiper-pagination-bullet-width: 10px;
    --swiper-pagination-bullet-height: 10px;
    --swiper-pagination-bullet-horizontal-gap: 0;
    --swiper-pagination-bullet-opacity: 1;
    --swiper-pagination-bullet-inactive-color: #ffffff;
    --swiper-pagination-bullet-inactive-opacity: 1;
    --swiper-pagination-color: #A4ACB1;
    --swiper-theme-color: #A4ACB1;
  }

  /* Belt-and-braces: also force the values directly in case the variables
     are ignored by older Swiper versions or theme overrides. */
  .section--hero-slider__pagination .swiper-pagination-bullet {
    width: 10px !important;
    height: 10px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 50%;
    background: #ffffff !important;
    opacity: 1 !important;
    cursor: pointer;
    appearance: none;
    transition: background-color var(--transition-fast);
  }

  .section--hero-slider__pagination .swiper-pagination-bullet-active {
    background: #A4ACB1 !important;
  }

  /* Scroll-down chevron — bottom centre, 67px from bottom edge per Figma */
  .section--hero-slider__scroll-down {
    position: absolute;
    left: 50%;
    bottom: 67px;
    transform: translateX(-50%);
    z-index: 6;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 37px;
    height: 21px;
    color: #ffffff;
    line-height: 0;
    transition: opacity var(--transition-fast);

    & img { width: 100%; height: 100%; display: block; }

    &:hover { opacity: 0.7; }
  }

  /* Hero-Slider Prev/Next-Pfeile (Feedback KW25 — "Pfeile zum Durchklicken").
     Nur sichtbar, wenn ein Slider aktiv ist (Single-Cover hat keine Buttons). */
  .section--hero-slider__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 6;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    color: #fff;
    background: rgb(0 0 0 / 0.18);
    border-radius: 50%;
    transition: background-color var(--transition-fast), opacity var(--transition-fast);

    & svg { width: 12px; height: 20px; display: block; }
    &:hover { background: rgb(0 0 0 / 0.38); }
    &.swiper-button-disabled { opacity: 0; pointer-events: none; }
  }
  .section--hero-slider__nav--prev { left: clamp(8px, 2vw, 24px); }
  .section--hero-slider__nav--next { right: clamp(8px, 2vw, 24px); }

  /* ---------- Text-Block ----------
     Figma "Text-Block"-Section: Headline (Haboro 35/50) → 34px Abstand →
     Lead (Haboro Italic 22/30) → Body (Myriad 16/22). Content-Spalte 608px
     breit, in `.container--narrow` (880px) horizontal zentriert. */
  .section--text-block {
    text-align: center;

    &.section--align-left { text-align: start; }
    &.section--align-left .section__lead { margin-inline: 0; }
    &.section--align-left .section__body { margin-inline: 0; }

    & .section__headline { margin-bottom: 34px; }
    & .section__body {
      font-family: var(--font-myriad);
      font-size: 16px;
      line-height: 22px;
      font-weight: 400;
      color: var(--color-text);
      margin-inline: auto;
      max-width: 608px;
    }
  }

  /* Zweispaltiger Fließtext (Feedback KW25 — "Unser Leben ist die Baustelle":
     bei viel Text 2 Spalten, linksbündig). Headline/Lead bleiben zentriert;
     nur der Body wird auf Desktop zweispaltig und über die volle Narrow-Breite
     gezogen. Mobil bleibt es einspaltig. */
  @media (min-width: 60em) {
    .section--text-block--cols-2 .section__body {
      max-width: none;
      margin-inline: 0;
      text-align: start;
      columns: 2;
      column-gap: 64px;
    }
    .section--text-block--cols-2 .section__body > :first-child { margin-top: 0; }
  }

  /* Mobile (<60em): Text-Block ist immer linksbündig, egal welche
     align-Variante im Backend gesetzt ist (laut Figma Mobile-Layout). */
  @media (max-width: 60em) {
    .section--text-block {
      text-align: start;

      & .section__lead { margin-inline: 0; }
      & .section__body { margin-inline: 0; }
    }
  }

  /* ---------- Text + Image ---------- */
  .section--text-image {
    & .section--text-image__head {
      text-align: center;
      margin: 0 auto var(--space-7);
      max-width: 720px;
    }

    & .section--text-image__grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: var(--space-7);
      align-items: center;
    }

    & .section--text-image__media {
      & img {
        width: 100%;
        height: auto;
        display: block;
      }
    }

    & .section--text-image__content {
      max-width: 56ch;
    }

    & .section--text-image__content .section__lead { margin-inline: 0; }
    & .section--text-image__content .section__body { margin-inline: 0; max-width: none; }
  }

  .section__cta--group {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    margin-top: var(--space-6);

    & .btn {
      flex: 0 0 auto;
      min-width: 200px;
    }
  }

  /* btn--ghost-soft fallback in @layer components — used in section CTAs and
     property card. Defined here as a section-scoped helper if not yet in
     the buttons block. */
  .btn--ghost-soft {
    background: #A4ACB1;
    color: #fff;
    border-color: #A4ACB1;
  }
  .btn--ghost-soft:hover {
    background: #8B949A;
    border-color: #8B949A;
  }

  @media (min-width: 60em) {
    .section--text-image .section--text-image__grid {
      grid-template-columns: minmax(0, 457px) minmax(0, 409px);
      justify-content: center;
      gap: var(--space-7);
    }

    .section--text-image--left .section--text-image__media   { order: 0; }
    .section--text-image--left .section--text-image__content { order: 1; }
    .section--text-image--right .section--text-image__media   { order: 1; }
    .section--text-image--right .section--text-image__content { order: 0; }
  }

  /* Zeilenumbruch-Helfer: nur mobil sichtbar, Desktop einzeilig (Feedback KW25). */
  @media (min-width: 60em) {
    .u-br-mobile { display: none; }
  }

  /* Mobile (<60em): Text-Bild-Section — Bild UNTER den Text, CTAs nebeneinander
     (Feedback KW25 mobil — "Bild unter Text", CTAs "nebeneinander"). */
  @media (max-width: 60em) {
    .section--text-image .section--text-image__content { order: 1; }
    .section--text-image .section--text-image__media   { order: 2; }

    /* Abstand Content (CTAs) → Bild mobil nur 19px (Figma DEV-03). */
    .section--text-image .section--text-image__grid { gap: 19px; }

    .section__cta--group {
      flex-wrap: nowrap;
      gap: 0;
    }
    .section__cta--group .btn {
      flex: 1 1 0;
      min-width: 0;
    }
  }

  /* ---------- Icon-Grid ---------- */
  .section--icon-grid {
    & .section--icon-grid__list {
      list-style: none;
      padding: 0;
      margin: 0;
    }

    & .section--icon-grid__item {
      text-align: center;
      padding: var(--space-5);
    }

    & .section--icon-grid__icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 64px;
      height: 64px;
      margin: 0 auto var(--space-4);

      & img { width: 100%; height: auto; }
    }

    /* Figma "Desktop Fließtext Auszeichnung": Myriad Pro Bold 16/18, #000. */
    & .section--icon-grid__title {
      font-family: var(--font-myriad);
      font-size: 16px;
      line-height: 18px;
      font-weight: 700;
      letter-spacing: 0;
      color: var(--color-text);
      margin: 0;
    }

    & .section--icon-grid__text {
      font-family: var(--font-myriad);
      font-size: var(--font-size-body);
      line-height: 1.55;
      color: var(--color-text-muted);
      margin: var(--space-3) 0 0;
    }
  }

  /* Desktop: mehr Luft zwischen den Icon-Reihen (Leistungen-Grid mit Icons).
     Feedback KW25 — "mehr Abstand zwischen den Icon-Zeilen". Spalten bleiben
     beim Standard-Gap, nur der Zeilenabstand wächst. */
  @media (min-width: 60em) {
    .section--icon-grid:not(.section--icon-grid--no-icons) .section--icon-grid__list {
      row-gap: var(--space-8);
    }
  }

  /* No-icons variant — used for left-aligned mini-section grids
     (e.g. Leistungen "Beratung / Besichtigung / Abwicklung"). */
  .section--icon-grid--no-icons {
    & .section--icon-grid__item {
      text-align: start;
      padding: 0;
    }

    /* Figma "Desktop Zitat": Haboro Italic 500 → CSS 400, 22 / 30, #000. */
    & .section--icon-grid__title {
      font-family: var(--font-haboro);
      font-style: italic;
      font-size: 22px;
      line-height: 30px;
      font-weight: 400;
      color: var(--color-text);
      margin: 0 0 28px;
    }

    /* Figma "Desktop Fließtext": Myriad Pro Regular 400, 16 / 22, #000. */
    & .section--icon-grid__text {
      font-family: var(--font-myriad);
      font-size: 16px;
      line-height: 22px;
      font-weight: 400;
      color: var(--color-text);
    }
  }

  .section--icon-grid--head-left .section__head {
    text-align: start;
    max-width: 720px;
    margin-inline: 0;
  }

  .section--icon-grid--head-left.section--icon-grid--no-icons {
    padding-top: 78px;

    & .section--icon-grid__list {
      row-gap: 55px;
      column-gap: 110px;
    }
  }

  /* Mobile (<60em): Icon-Grid mit Icons (Leistungen-Variante) zeigt 2-spaltig
     mit zentrierter Headline und zentrierten Item-Texts. */
  @media (max-width: 60em) {
    .section--icon-grid:not(.section--icon-grid--no-icons) .section__head {
      text-align: center;
      max-width: none;
      margin-inline: auto;
    }

    .section--icon-grid:not(.section--icon-grid--no-icons) .section--icon-grid__list {
      grid-template-columns: repeat(2, 1fr);
      column-gap: 16px;
      /* Mehr Raum zwischen den Bereichen (Feedback KW25 mobil). */
      row-gap: 48px;
    }

    .section--icon-grid:not(.section--icon-grid--no-icons) .section--icon-grid__item {
      padding: 0;
      text-align: center;
    }

    /* Icons kleiner als am Desktop (Feedback KW25 mobil). */
    .section--icon-grid:not(.section--icon-grid--no-icons) .section--icon-grid__icon {
      width: 46px;
      height: 46px;
      margin-bottom: var(--space-3);
    }

    /* Figma "Mobile Card-Title": Myriad Bold 14 / 18, #000. */
    .section--icon-grid:not(.section--icon-grid--no-icons) .section--icon-grid__title {
      font-size: 14px;
      line-height: 18px;
    }

    /* No-Icons-Variante (grauer „Ob Verkäufer oder Käufer…"-Block):
       1-spaltig, mobil ZENTRIERT (Feedback KW25 — "Text zentriert"; das
       veraltete Figma zeigte linksbündig). Abstände: Section padding-top 67px,
       row-gap zwischen Items 48px, Title 18/26, Title→Body 18px. */
    .section--icon-grid--head-left.section--icon-grid--no-icons {
      padding-top: 67px;
    }

    .section--icon-grid--head-left.section--icon-grid--no-icons .section__head {
      text-align: center;
      margin-inline: auto;
    }

    .section--icon-grid--no-icons .section--icon-grid__list {
      grid-template-columns: 1fr;
      row-gap: 48px;
      column-gap: 0;
    }

    .section--icon-grid--no-icons .section--icon-grid__item {
      text-align: center;
    }

    .section--icon-grid--no-icons .section--icon-grid__title {
      font-size: 18px;
      line-height: 26px;
      margin-bottom: 18px;
    }
  }

  /* ---------- Quote ---------- */
  .section--quote {
    text-align: center;

    & .section--quote__figure { margin: 0; }

    & .section--quote__text {
      font-family: var(--font-haboro);
      font-size: clamp(22px, 2.6vw, 32px);
      line-height: 1.4;
      font-weight: var(--font-weight-regular);
      margin: 0 0 var(--space-5);
      quotes: "\201C" "\201D";

      &::before { content: open-quote; margin-right: 0.1em; }
      &::after  { content: close-quote; margin-left: 0.1em; }
    }

    & .section--quote__caption {
      font-family: var(--font-myriad);
      font-size: var(--font-size-meta);
      line-height: 1.4;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      color: var(--color-text-muted);
      display: flex;
      flex-direction: column;
      gap: var(--space-1);
      align-items: center;
    }

    & .section--quote__author {
      color: var(--color-text);
      font-weight: var(--font-weight-medium);
    }
  }

  /* ---------- CTA-Band ---------- */
  .section--cta-band {
    & .section--cta-band__inner {
      display: grid;
      grid-template-columns: 1fr;
      gap: var(--space-5);
      align-items: center;
      justify-items: center;
      text-align: center;
      padding: var(--space-7) var(--space-5);
    }

    & .section--cta-band__headline {
      font-family: var(--font-haboro);
      font-size: clamp(24px, 3vw, 36px);
      line-height: 1.2;
      font-weight: var(--font-weight-regular);
      margin: 0 0 var(--space-3);
    }

    & .section--cta-band__subline {
      font-family: var(--font-myriad);
      font-size: var(--font-size-body);
      line-height: 1.5;
      color: var(--color-text-muted);
      margin: 0;
    }

    &.section--cta-band--soft .section--cta-band__inner {
      background: var(--color-bg-soft);
    }

    &.section--cta-band--dark .section--cta-band__inner {
      background: var(--color-text);
      color: var(--color-bg);
    }

    &.section--cta-band--dark .section--cta-band__subline { color: color-mix(in srgb, var(--color-bg) 75%, transparent); }
  }

  @media (min-width: 60em) {
    .section--cta-band .section--cta-band__inner {
      grid-template-columns: 1fr auto;
      justify-items: stretch;
      text-align: start;
      padding: var(--space-7) var(--space-8);
    }
  }

  /* ---------- Properties Teaser ---------- */
  .section--properties-teaser {
    & .section__head { margin-bottom: var(--space-6); }

    & .section--properties-teaser__grid {
      display: grid;
      row-gap: 70px;
      column-gap: 20px;
      grid-template-columns: 1fr;
    }

    & .section--properties-teaser__more {
      text-align: center;
      margin-top: 78px;

      & .btn {
        width: 188px;
        height: 41px;
        padding: 11px 16px 12px;
        background: transparent;
        border: 1px solid #4D4D4D;
        border-radius: 0;
        color: #4D4D4D;
        font-family: var(--font-myriad);
        font-size: 16px;
        line-height: 18px;
        font-weight: 700;
        letter-spacing: 0;
        text-transform: none;
      }

      & .btn:hover {
        background: #4D4D4D;
        color: #fff;
        border-color: #4D4D4D;
      }
    }

    & .section--properties-teaser__empty {
      text-align: center;
      color: var(--color-text-muted);
    }
  }

  /* Mobile: Cards füllen die volle Viewport-Breite (laut Figma randlos).
     Heading und „Weitere Immobilien"-Button bleiben im Container-Padding. */
  @media (max-width: 60em) {
    .section--properties-teaser .section--properties-teaser__grid {
      margin-inline: calc(var(--container-padding) * -1);
      row-gap: 40px;
    }

    /* "Aktuelle Immobilien"-Überschrift mobil zentriert (Figma DEV-03). */
    .section--properties-teaser .section__head {
      text-align: center;
      margin-inline: auto;
    }

    /* Hinweis: Der 42px-Mobile-Abstand des "Weitere Immobilien"-Buttons wird
       in der Skin-immomakler.css gesetzt — deren unlayered Basisregel (78px)
       schlägt jede @layer-Regel hier, daher muss der Override dort stehen. */
  }

  @media (min-width: 40em) {
    .section--properties-teaser .section--properties-teaser__grid { grid-template-columns: repeat(2, 1fr); }
  }
  @media (min-width: 60em) {
    .section--properties-teaser .section--properties-teaser__grid { grid-template-columns: repeat(3, 1fr); }
  }

  /* ---------- Contact Form ---------- */
  .section--contact-form {
    & .section__head { text-align: center; }

    & .section--contact-form__form {
      max-width: 1136px;
      margin: var(--space-6) auto 0;
      background: var(--color-bg-soft);
      padding: 23px 20px;
    }
  }

  /* Mobil: Intro-Fließtext linksbündig (Figma DEV-03) — Headline bleibt
     zentriert. */
  @media (max-width: 60em) {
    .section--contact-form .section__intro { text-align: left; }
  }

  /* ---------- Gravity Forms — pg-immo-contact-form skin ----------
     GF 2.9+ wraps in:
       <div class="gform_wrapper gform-theme gform-theme--orbital pg-immo-contact-form_wrapper">
         <form>
           <div class="gform-body">
             <div class="gform_fields">
               <div class="gfield pg-field--{name}">
                 <label class="gfield_label">…</label>
                 <div class="ginput_container">
                   <input> / <textarea>
                 </div>
               </div>
             </div>
           </div>
           <div class="gform_footer"><input type="submit"></div>
         </form>
       </div>

     GF Orbital theme uses CSS variables (--gf-*) at high specificity, so we
     mostly override at the same selector level (`.pg-immo-contact-form_wrapper`).
  */

  /* Force the orbital theme variables to our palette */
  .pg-immo-contact-form_wrapper.gform-theme,
  .pg-immo-contact-form_wrapper [data-parent-form] {
    --gf-color-primary: #8c8c8c;
    --gf-color-primary-rgb: 140, 140, 140;
    --gf-color-primary-contrast: #ffffff;
    --gf-color-primary-darker: var(--color-text);
    --gf-color-primary-lighter: #a8a8a8;
    --gf-color-in-ctrl: var(--color-bg);
    --gf-color-in-ctrl-contrast: var(--color-text);
    --gf-color-in-ctrl-darker: var(--color-bg);
    --gf-color-in-ctrl-lighter: var(--color-bg);
    --gf-color-out-ctrl-light: transparent;
    --gf-color-out-ctrl-dark: var(--color-text);
    --gf-radius: 0;
    --gf-ctrl-radius: 0;
    --gf-ctrl-btn-radius: 0;
    --gf-ctrl-padding-x: 22px;
    --gf-ctrl-padding-y: 18px;
    --gf-ctrl-font-family: var(--font-myriad);
    --gf-ctrl-font-size: 15px;
    --gf-ctrl-border-color: transparent;
    --gf-ctrl-border-color-focus: var(--color-text);
    --gf-ctrl-bg-color: var(--color-bg);
    --gf-ctrl-bg-color-focus: var(--color-bg);
    --gf-ctrl-color: var(--color-text);
    --gf-ctrl-placeholder-color: #9a9a9a;
    --gf-ctrl-shadow: none;
    --gf-ctrl-shadow-focus: none;
    --gf-ctrl-btn-bg-color-primary: #8c8c8c;
    --gf-ctrl-btn-bg-color-hover-primary: var(--color-text);
    --gf-ctrl-btn-color-primary: var(--color-bg);
    --gf-ctrl-btn-color-hover-primary: var(--color-bg);
    --gf-ctrl-btn-border-color-primary: #8c8c8c;
    --gf-ctrl-btn-border-color-hover-primary: var(--color-text);
    --gf-ctrl-btn-font-family: var(--font-haboro);
    --gf-ctrl-btn-font-size: 16px;
    --gf-ctrl-btn-font-weight: 500;
    --gf-ctrl-btn-padding-x: 22px;
    --gf-ctrl-btn-padding-y: 18px;
    --gf-label-color: transparent; /* labels visually hidden anyway */
    --gf-label-space-y-secondary: 0;
    --gf-form-gap: var(--space-3);
    --gf-form-gap-y: var(--space-3);
    --gf-form-row-gap: var(--space-3);
  }

  /* Hide the GF-internal header bits (we render our own headline above). */
  .pg-immo-contact-form_wrapper .gform_heading,
  .pg-immo-contact-form_wrapper .gform_required_legend,
  .pg-immo-contact-form_wrapper .gfield--type-honeypot,
  .pg-immo-contact-form_wrapper .gform_validation_container {
    display: none !important;
  }

  /* Visually-hide labels — placeholders carry the cue */
  body .pg-immo-contact-form_wrapper .gfield_label {
    position: absolute !important;
    width: 1px !important; height: 1px !important;
    padding: 0 !important; margin: -1px !important;
    overflow: hidden !important; clip: rect(0,0,0,0) !important;
    white-space: nowrap !important; border: 0 !important;
  }

  /* The 3×3 grid (desktop) — we lift gfield items into the form-level grid
     via display:contents on .gform_body and .gform_fields. The honeypot
     is hidden above so it doesn't spill into the first grid cell. */
  body .pg-immo-contact-form_wrapper form.pg-immo-contact-form {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: var(--space-4) !important;
    margin: 0;
  }

  body .pg-immo-contact-form_wrapper .gform-body,
  body .pg-immo-contact-form_wrapper .gform_body,
  body .pg-immo-contact-form_wrapper .gform_fields {
    display: contents !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  @media (min-width: 60em) {
    body .pg-immo-contact-form_wrapper form.pg-immo-contact-form {
      grid-template-columns: 1fr 1fr 1fr !important;
      /* Figma: 3 Reihen à 41 px Höhe. Textarea (rowspan 2) füllt 2×41 + gap. */
      grid-template-rows: 41px 41px 41px !important;
      grid-template-areas:
        "anrede   vorname  nachricht"
        "nachname email    nachricht"
        "telefon  worum    submit" !important;
      gap: 22px !important;
    }
  }

  body .pg-immo-contact-form_wrapper .gfield {
    margin: 0 !important;
    padding: 0 !important;
    width: auto !important;
    max-width: none !important;
  }

  body .pg-immo-contact-form_wrapper .pg-field--anrede    { grid-area: anrede !important; }
  body .pg-immo-contact-form_wrapper .pg-field--vorname   { grid-area: vorname !important; }
  body .pg-immo-contact-form_wrapper .pg-field--nachricht { grid-area: nachricht !important; }
  body .pg-immo-contact-form_wrapper .pg-field--nachname  { grid-area: nachname !important; }
  body .pg-immo-contact-form_wrapper .pg-field--email     { grid-area: email !important; }
  body .pg-immo-contact-form_wrapper .pg-field--telefon   { grid-area: telefon !important; }
  body .pg-immo-contact-form_wrapper .pg-field--worum     { grid-area: worum !important; }

  body .pg-immo-contact-form_wrapper .gform_footer,
  body .pg-immo-contact-form_wrapper .gform-footer {
    grid-area: submit !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
  }

  /* Mobile (einspaltig): Nachricht ans Ende der Feldliste, Submit zuletzt
     (Figma Detailseite 6004:246 — Reihenfolge Name/Kontakt → Nachricht). */
  @media (max-width: 60em) {
    body .pg-immo-contact-form_wrapper .gfield { order: 5; }
    body .pg-immo-contact-form_wrapper .pg-field--anrede   { order: 1; }
    body .pg-immo-contact-form_wrapper .pg-field--vorname  { order: 2; }
    body .pg-immo-contact-form_wrapper .pg-field--nachname { order: 3; }
    body .pg-immo-contact-form_wrapper .pg-field--email    { order: 4; }
    body .pg-immo-contact-form_wrapper .pg-field--telefon  { order: 5; }
    body .pg-immo-contact-form_wrapper .pg-field--worum    { order: 6; }
    body .pg-immo-contact-form_wrapper .pg-field--nachricht { order: 7; }
    body .pg-immo-contact-form_wrapper .gform_footer,
    body .pg-immo-contact-form_wrapper .gform-footer { order: 8; }
  }

  /* The .ginput_container wrapper inside each gfield — fill the grid cell */
  body .pg-immo-contact-form_wrapper .ginput_container {
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
  }

  /* Inputs — fill the cell (41 px Figma row height) */
  body .pg-immo-contact-form_wrapper input[type="text"],
  body .pg-immo-contact-form_wrapper input[type="email"],
  body .pg-immo-contact-form_wrapper input[type="tel"],
  body .pg-immo-contact-form_wrapper input[type="number"] {
    width: 100% !important;
    height: 100% !important;
    padding: 0 16px !important;
    background: var(--color-bg) !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    font-family: var(--font-myriad) !important;
    font-size: 16px !important;
    line-height: 18px !important;
    color: var(--color-text) !important;
  }

  body .pg-immo-contact-form_wrapper textarea {
    width: 100% !important;
    height: 100% !important;
    padding: 12px 16px !important;
    background: var(--color-bg) !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    font-family: var(--font-myriad) !important;
    font-size: 16px !important;
    line-height: 22px !important;
    color: var(--color-text) !important;
    resize: vertical;
    min-height: 41px;
  }

  body .pg-immo-contact-form_wrapper input::placeholder,
  body .pg-immo-contact-form_wrapper textarea::placeholder {
    color: #A4ACB1 !important;
    font-style: italic !important;
    font-weight: 400 !important;
    opacity: 1 !important;
  }

  body .pg-immo-contact-form_wrapper input:focus,
  body .pg-immo-contact-form_wrapper textarea:focus {
    outline: 2px solid var(--color-text) !important;
    outline-offset: 0 !important;
    box-shadow: none !important;
  }

  /* Submit — fills the entire grid cell (full row height, full column width).
     GF (gravity-theme) gibt dem Button margin-bottom:8px + align-self:flex-end
     → er säße 8px zu hoch und wäre ggü. Telefon/Worum versetzt. Hier auf
     stretch + margin:0 zurücksetzen, damit er exakt die Zelle ausfüllt. */
  body .pg-immo-contact-form_wrapper .gform_footer input[type="submit"],
  body .pg-immo-contact-form_wrapper .gform-footer input[type="submit"] {
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    align-self: stretch !important;
    padding: 0 16px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #A4ACB1 !important;
    color: #fff !important;
    font-family: var(--font-myriad) !important;
    font-size: 16px !important;
    line-height: 18px !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    cursor: pointer;
    transition: background-color var(--transition-fast);
    box-shadow: none !important;
  }

  body .pg-immo-contact-form_wrapper .gform_footer input[type="submit"]:hover,
  body .pg-immo-contact-form_wrapper .gform-footer input[type="submit"]:hover {
    background: #8B949A !important;
  }

  /* Validation — Felder werden NUR farblich markiert (keine sichtbaren
     Feld-Labels). GF (gravity-theme) zeichnet das Banner unlayered mit
     Vollrahmen/Rundung/Schatten + absolut positioniertem Icon im 48px-
     Linkseinzug. Hier mit body-Prefix + !important auf die scharfkantige,
     editoriale Formoptik trimmen. */

  /* Fehlerhafte Felder: ruhiger Marken-Terrakotta-Rahmen statt Alarm-Rot.
     (GF setzt zusätzlich border:1px auf [aria-invalid] — unsere Inputs haben
     border:0, daher hier eine Outline, die das Layout nicht verschiebt.) */
  body .pg-immo-contact-form_wrapper .gfield_error input,
  body .pg-immo-contact-form_wrapper .gfield_error textarea,
  body .pg-immo-contact-form_wrapper [aria-invalid="true"] {
    outline: 1.5px solid #c64a3a !important;
    outline-offset: 0 !important;
    border: 0 !important;
    background: rgb(198 74 58 / 0.04) !important;
  }

  /* Fehler-Banner: kein Vollrahmen/keine Rundung/kein Schatten, nur ein
     dezenter Akzentbalken links. 48px-Linkseinzug bleibt (Platz fürs Icon). */
  body .pg-immo-contact-form_wrapper .gform_validation_errors {
    grid-column: 1 / -1 !important;
    position: relative !important;
    margin: 0 0 var(--space-4) !important;
    padding: var(--space-4) var(--space-5) var(--space-4) 48px !important;
    background: rgb(198 74 58 / 0.06) !important;
    border: 0 !important;
    border-left: 3px solid #c64a3a !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  /* Banner-Text: Myriad, gedämpftes Rot, GF-Default-Margins raus */
  body .pg-immo-contact-form_wrapper .gform_validation_errors > h2 {
    margin: 0 !important;
    padding: 0 !important;
    font-family: var(--font-myriad) !important;
    font-size: 15px !important;
    font-weight: var(--font-weight-bold) !important;
    line-height: 1.4 !important;
    letter-spacing: 0 !important;
    color: #a23b2d !important;
  }

  /* GF-Icon bleibt absolut im Linkseinzug, nur Farbe/Größe angepasst */
  body .pg-immo-contact-form_wrapper .gform_validation_errors > h2 .gform-icon {
    color: #c64a3a !important;
    font-size: 22px !important;
    inset-inline-start: 16px !important;
  }

  /* Sprungmarken-Liste (falls Summary aktiv) dezent, ohne Bullets */
  body .pg-immo-contact-form_wrapper .gform_validation_errors > ol {
    margin: var(--space-2) 0 0 !important;
    padding: 0 !important;
  }
  body .pg-immo-contact-form_wrapper .gform_validation_errors > ol li {
    list-style: none !important;
    font-family: var(--font-myriad) !important;
    font-size: 13px !important;
    color: #a23b2d !important;
  }
  body .pg-immo-contact-form_wrapper .gform_validation_errors > ol a {
    color: #a23b2d !important;
    font-size: 13px !important;
  }

  /* Feld-Meldungen ("Dieses Feld ist erforderlich.") visuell ausblenden —
     Markierung erfolgt rein farblich. Per sr-only statt display:none, damit
     Screenreader die Meldung weiter via aria-describedby vorlesen. */
  body .pg-immo-contact-form_wrapper .gfield_validation_message,
  body .pg-immo-contact-form_wrapper .validation_message {
    position: absolute !important;
    width: 1px !important; height: 1px !important;
    padding: 0 !important; margin: -1px !important;
    overflow: hidden !important; clip: rect(0,0,0,0) !important;
    white-space: nowrap !important; border: 0 !important;
    background: none !important;
  }

  /* Confirmation message */
  .gform_confirmation_message {
    font-family: var(--font-myriad);
    font-size: var(--font-size-body);
    line-height: 1.5;
    text-align: center;
    padding: var(--space-7) var(--space-5);
    background: var(--color-bg);
    color: var(--color-text);
  }

  /* Mobile (<60em): Maße exakt aus Figma DEV-03 (Frame 127:3).
     Desktop nutzt fixe 41px grid-rows + height:100% inputs; mobil gibt es
     keine Rows → hier explizit Feldhöhe 41px, Textarea 103px, Gap 8px,
     Feld-Innenabstand 19px, Formbox-Padding 15px. Die Desktop-grid-areas
     werden aufgehoben, damit die gfields im 1-Column-Grid auto-placen. */
  @media (max-width: 60em) {
    .section--contact-form .section--contact-form__form {
      padding: 15px;
    }

    body .pg-immo-contact-form_wrapper form.pg-immo-contact-form {
      gap: 8px !important;
    }

    body .pg-immo-contact-form_wrapper .gfield,
    body .pg-immo-contact-form_wrapper .gform_footer,
    body .pg-immo-contact-form_wrapper .gform-footer {
      grid-area: auto !important;
    }

    body .pg-immo-contact-form_wrapper .ginput_container {
      height: auto !important;
    }

    body .pg-immo-contact-form_wrapper input[type="text"],
    body .pg-immo-contact-form_wrapper input[type="email"],
    body .pg-immo-contact-form_wrapper input[type="tel"],
    body .pg-immo-contact-form_wrapper input[type="number"] {
      box-sizing: border-box !important;
      height: 41px !important;
      min-height: 0 !important;
      padding: 0 19px !important;
      line-height: 18px !important;
    }

    body .pg-immo-contact-form_wrapper textarea {
      box-sizing: border-box !important;
      height: 103px !important;
      min-height: 103px !important;
      padding: 12px 19px !important;
      line-height: 22px !important;
    }

    /* Abstand Textarea → Submit 21px (Figma) = 8px Gap + 13px. */
    body .pg-immo-contact-form_wrapper .gform_footer,
    body .pg-immo-contact-form_wrapper .gform-footer {
      margin-top: 13px !important;
    }

    body .pg-immo-contact-form_wrapper .gform_footer input[type="submit"],
    body .pg-immo-contact-form_wrapper .gform-footer input[type="submit"] {
      box-sizing: border-box !important;
      height: 41px !important;
      min-height: 0 !important;
      padding: 0 16px !important;
    }
  }

  /* ---------- Region Detail (tpl_region_detail.php) ---------- */
  .section--region-hero {
    position: relative;
    min-height: clamp(320px, 45vh, 540px);
    background-color: var(--color-bg-soft);
    background-size: cover;
    background-position: center;
  }

  /* Globaler, fixierter WhatsApp-Button (Feedback KW25 — sticky am rechten
     Rand, bleibt beim Scrollen immer sichtbar). Einmal global im Footer
     eingebunden, schwebt unten rechts über dem Inhalt. */
  .pg-contact-fab {
    position: fixed;
    right: clamp(16px, 2vw, 28px);
    bottom: clamp(16px, 3vw, 28px);
    z-index: var(--z-modal);
    display: inline-flex;
    width: 56px;
    height: 56px;
    line-height: 0;
    filter: drop-shadow(0 4px 12px rgb(0 0 0 / 0.28));
    transition: transform var(--transition-fast);

    & img { width: 100%; height: 100%; display: block; }
    &:hover { transform: scale(1.06); }
  }

  @media (max-width: 40em) {
    .pg-contact-fab { width: 50px; height: 50px; }
  }

  .section--region-title {
    padding-block: var(--space-8) var(--space-7);
    text-align: center;
  }

  /* ---------- 404 ---------- */
  .error-404 {
    padding-block: clamp(80px, 12vw, 160px);
  }

  .error-404__inner {
    text-align: center;
    max-width: 720px;
  }

  .error-404__eyebrow {
    font-family: var(--font-haboro);
    font-size: clamp(72px, 12vw, 140px);
    line-height: 1;
    font-weight: var(--font-weight-regular);
    color: var(--color-bg-soft);
    margin: 0 0 var(--space-3);
    letter-spacing: -0.02em;
  }

  .error-404__title {
    font-family: var(--font-haboro);
    font-size: 35px;
    line-height: 1.15;
    font-weight: var(--font-weight-medium);
    color: var(--color-text);
    margin: 0 0 var(--space-4);
  }

  .error-404__text {
    font-family: var(--font-myriad);
    font-size: var(--font-size-body);
    line-height: var(--font-size-body-line);
    color: var(--color-text);
    margin: 0 0 var(--space-6);
  }

  .error-404__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
  }

  /* Danke-Seite (page-danke.php) — gleiche zentrierte Bühne wie die 404. */
  .page-thanks {
    padding-block: clamp(80px, 12vw, 160px);
  }

  .page-thanks__inner {
    text-align: center;
    max-width: 720px;
  }

  .page-thanks__icon {
    display: inline-flex;
    color: var(--color-text);
    margin: 0 0 var(--space-4);
  }

  .page-thanks__title {
    font-family: var(--font-haboro);
    font-size: 35px;
    line-height: 1.15;
    font-weight: var(--font-weight-medium);
    color: var(--color-text);
    margin: 0 0 var(--space-4);
  }

  .page-thanks__text {
    font-family: var(--font-myriad);
    font-size: var(--font-size-body);
    line-height: var(--font-size-body-line);
    color: var(--color-text);
    margin: 0 0 var(--space-6);
  }

  .page-thanks__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
  }

  /* ---------- Objekt-teilen-Modal (share.js) ---------- */
  .pg-share-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-4);
  }

  .pg-share-modal[hidden] { display: none; }

  body.pg-share-open { overflow: hidden; }

  .pg-share-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgb(0 0 0 / 0.57); /* Figma: #000000 @ 57 % */
  }

  .pg-share-modal__dialog {
    position: relative;
    width: 100%;
    max-width: 520px;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    box-shadow: 0 24px 60px color-mix(in srgb, var(--color-text) 18%, transparent);
    padding: clamp(28px, 6vw, 48px);
    text-align: center;
  }

  .pg-share-modal__close {
    position: absolute;
    top: -11px;
    right: -11px;
    width: 23px;
    height: 23px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: #fff;
    color: var(--color-text);
    box-shadow: 0 2px 10px rgb(0 0 0 / 0.18);
    cursor: pointer;
    transition: background-color var(--transition-fast);

    & svg { width: 13px; height: 13px; }
    &:hover { background: var(--color-bg-soft); }
  }

  .pg-share-modal__title {
    font-family: var(--font-haboro);
    font-size: 24px;
    line-height: 1.1;
    font-weight: var(--font-weight-regular);
    color: var(--color-text);
    margin: 0 0 var(--space-4);
  }

  .pg-share-modal__divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    color: var(--color-divider);
    /* Striche reichen bis 19px an den Modal-Rand — bricht aus dem
       Content-Padding der Dialog-Box aus (Figma). */
    margin: 0 calc(19px - clamp(28px, 6vw, 48px)) var(--space-5);

    & span {
      height: 1px;
      flex: 1;
      background: var(--color-divider); /* gleiches Grau wie der Chevron */
    }
    & svg { width: 22px; height: 11px; }
  }

  .pg-share-modal__text {
    font-family: var(--font-myriad);
    font-size: var(--font-size-body); /* 16px */
    line-height: var(--font-size-body-line); /* 22px */
    color: var(--color-text);
    margin: 0 0 var(--space-6);

    /* Objektname: Figma „Desktop Fließtext Auszeichnung" = Myriad 700.
       Überschreibt die Basisregel strong{font-weight:500}. */
    & strong { font-weight: var(--font-weight-bold); }
  }

  .pg-share-modal__links {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
  }

  .pg-share-modal__btn {
    width: 33px;
    height: 33px;
    display: inline-flex;
    transition: opacity var(--transition-fast), transform var(--transition-fast);

    & img { width: 33px; height: 33px; display: block; }
    &:hover { opacity: 0.85; transform: translateY(-2px); }
  }

  .section--region-title__headline {
    font-family: var(--font-haboro);
    font-size: clamp(34px, 4.5vw, 56px);
    line-height: 1.1;
    font-weight: var(--font-weight-regular);
    margin: 0;
    letter-spacing: -0.005em;
  }

  .section--region-content {
    padding-block: 0 var(--space-9);
  }

  .section--region-content__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-7);
    align-items: start;
  }

  .section--region-content__media img {
    width: 100%;
    height: auto;
    display: block;
  }

  .section--region-content__body {
    margin-bottom: var(--space-5);
    font-size: 15px;
    line-height: 1.65;
  }

  .section--region-content__disclosures {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--color-border);
  }

  .section--region-content__disclosure-item {
    border-bottom: 1px solid var(--color-border);
  }

  .section--region-content__disclosure { padding-block: 4px; }

  .section--region-content__summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-4) 0;
    font-family: var(--font-haboro);
    font-size: var(--font-size-h4);
    line-height: 1.3;
    font-weight: var(--font-weight-regular);

    &::-webkit-details-marker { display: none; }

    &:hover { color: var(--color-text-muted); }
  }

  .section--region-content__summary-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    color: var(--color-text);
    transition: transform var(--transition-base);
  }

  .section--region-content__disclosure[open] .section--region-content__summary-icon {
    transform: rotate(180deg);
  }

  .section--region-content__answer {
    padding: 0 0 var(--space-4);
    font-size: 14px;
    line-height: 1.6;
  }

  @media (min-width: 60em) {
    .section--region-content__grid {
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      gap: var(--space-9);
    }
  }

  /* Properties block on region pages */
  .section--region-properties {
    padding-block: 0 var(--space-9);
  }

  .section--region-properties__head {
    margin-bottom: var(--space-7);
  }

  .section--region-properties__headline {
    font-family: var(--font-haboro);
    font-size: clamp(26px, 3vw, 36px);
    line-height: 1.15;
    font-weight: var(--font-weight-regular);
    margin: 0;
  }

  .section--region-properties__more {
    margin: var(--space-7) 0 0;
    text-align: center;
  }

  .section--region-properties__grid {
    display: grid;
    gap: var(--space-5);
    grid-template-columns: 1fr;
  }
  @media (min-width: 40em) { .section--region-properties__grid { grid-template-columns: repeat(2, 1fr); } }
  @media (min-width: 60em) { .section--region-properties__grid { grid-template-columns: repeat(3, 1fr); } }

  /* Mobile: "Immobilien in …"-Überschrift zentriert (Feedback KW25). */
  @media (max-width: 60em) {
    .section--region-properties__head { text-align: center; }
  }

  /* ---------- FAQ ---------- */
  .section--faq {
    & .section--faq__list {
      list-style: none;
      padding: 0;
      margin: 0;
      border-top: 1px solid var(--color-border);
    }

    & .section--faq__item {
      border-bottom: 1px solid var(--color-border);
    }

    & .section--faq__disclosure { padding-block: var(--space-4); }

    & .section--faq__summary {
      list-style: none;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--space-4);
      padding-block: var(--space-3);

      &::-webkit-details-marker { display: none; }

      &:hover { color: var(--color-text-muted); }
    }

    & .section--faq__question {
      font-family: var(--font-haboro);
      font-size: var(--font-size-h4);
      line-height: 1.3;
      font-weight: var(--font-weight-medium);
    }

    & .section--faq__indicator {
      font-family: var(--font-myriad);
      font-size: 24px;
      line-height: 1;
      transition: transform var(--transition-base);
    }

    & .section--faq__disclosure[open] .section--faq__indicator {
      transform: rotate(45deg);
    }

    & .section--faq__answer {
      padding-top: var(--space-3);
      padding-bottom: var(--space-2);
      max-width: 60ch;
    }
  }

  /* ---------- Standard-Seiten (Impressum, Datenschutz, AGB) ----------
     Schlichtes Title-+-Prose-Layout im Narrow-Container. */
  .page-default {
    padding-block: var(--section-py);

    & .page-default__head {
      margin-bottom: var(--space-7);
      text-align: center;
    }

    & .page-default__title {
      font-family: var(--font-haboro);
      font-size: 35px;
      line-height: 50px;
      font-weight: 400;
      color: var(--color-text);
      margin: 0;
    }
  }

  @media (max-width: 40em) {
    .page-default .page-default__title { font-size: 28px; line-height: 40px; }
  }

  /* ---------- Region & Orte Übersicht ----------
     Grid aus Vorschaukarten (Beitragsbild + Titel) der Orte-Seiten. */
  .section--region-overview {
    & .region-overview__grid {
      list-style: none;
      margin: var(--space-7) 0 0;
      padding: 0;
      display: grid;
      grid-template-columns: 1fr;
      gap: var(--space-5);
    }

    @media (min-width: 40em) {
      & .region-overview__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-6);
      }
    }

    @media (min-width: 60em) {
      & .region-overview__grid {
        grid-template-columns: repeat(3, 1fr);
      }
    }

    & .region-overview__item { margin: 0; }

    & .region-overview__card {
      display: block;
      color: var(--color-text);
      text-decoration: none;

      &:hover .region-overview__image { transform: scale(1.04); }
      &:hover .region-overview__title { opacity: 0.7; }
    }

    & .region-overview__media {
      position: relative;
      aspect-ratio: 4 / 3;
      overflow: hidden;
      background: var(--color-bg-soft);
    }

    & .region-overview__image {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.4s ease;
    }

    & .region-overview__title {
      font-family: var(--font-haboro);
      font-style: italic;
      font-size: 22px;
      line-height: 30px;
      font-weight: 400;
      margin: var(--space-3) 0 0;
      transition: opacity var(--transition-fast);
    }

    & .region-overview__empty {
      text-align: center;
      color: var(--color-text-muted);
      margin: var(--space-6) 0 0;
    }
  }
}

@layer components {
  /* ---------- Buttons ---------- */
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 16px 12px;
    min-height: 41px;
    font-family: var(--font-myriad);
    font-size: 16px;
    line-height: 18px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    text-decoration: none;
    border: 1px solid currentColor;
    border-radius: 0;
    background: transparent;
    color: var(--color-text);
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;

    &:hover { background: var(--color-text); color: var(--color-bg); }
  }

  .btn--primary {
    background: #626A6F;
    color: #fff;
    border-color: #626A6F;

    &:hover { background: #4D5560; border-color: #4D5560; }
  }

  .btn--ghost {
    background: transparent;
    color: var(--color-bg);
    border-color: var(--color-bg);

    &:hover { background: var(--color-bg); color: var(--color-text); }
  }
}

@layer utilities {
  .visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0);
    white-space: nowrap; border: 0;
  }
}