/* ==========================================================================
   APPS Architekten — Components
   --------------------------------------------------------------------------
   Project-owned visual identity. Per `.planned/jaeger-plans.md` ("Template
   ships scaffold, not stylesheet"), all distinctive look-and-feel lives
   here. Edit freely.

   Aesthetic: modern firm on editorial bones. Generous whitespace,
   typographic confidence, hairline rules, DM Sans wght 300/400/500. Red
   stays a precise accent (never a fill, never decoration). Photography
   carries weight — full-bleed hero slider, ~30vh filler image bands as
   section breaks, photo-led tabbed sections — without ever crowding the
   type. No drop shadows, no card elevation, no big colored gradients in
   body sections; modernity comes from rhythm, scale, and quiet detail
   (hairline corner-marks, soft red counter-glow), not decorative noise.

   Direction history: Phase 3 set the editorial line; Phase 9 locked in
   the studio composition (slider + carousel + FAQ); Phase 10 pivoted to
   the modern-firm register (filler bands, tabbed Leistungen, Phosphor
   icons). See `.loop/DEVLOG.md` for the why behind each move.
   ========================================================================== */

@layer components {

  /* ----- Reveal-on-scroll (Phase 12) -----------------------------------
     Drives entry animations — `[data-reveal]` starts hidden, JS toggles
     `[data-revealed]` when the element enters the viewport. Stagger comes
     from a `--reveal-delay` custom property that the JS sets on each
     child of a `[data-reveal-stagger]` container.
     -------------------------------------------------------------------- */

  [data-reveal] {
    opacity: 0;
    transform: translateY(10px);
    transition:
      opacity   600ms var(--ease-emphasized),
      transform 600ms var(--ease-emphasized);
    transition-delay: var(--reveal-delay, 0ms);
    will-change: opacity, transform;
  }

  [data-reveal][data-revealed] {
    opacity: 1;
    transform: none;
  }

  @media (prefers-reduced-motion: reduce) {
    [data-reveal] {
      opacity: 1;
      transform: none;
      transition: none;
    }
  }


  /* ----- Section primitive ----------------------------------------------
     Pages stack `<section class="section">` blocks. Sections oscillate
     between white and a warm off-white (`.section--warm`) per Phase 12 —
     tonal rhythm replaces the hairline section dividers we used through
     Phase 11. Section headers carry an index numeral, an uppercase label,
     an optional lede paragraph, and (Pass B) a faint oversized numeral
     watermark sitting behind the composition.
     -------------------------------------------------------------------- */

  .section {
    padding-block: var(--space-9);
    position: relative;
  }

  .section--first {
    /* The first section follows the hero — looser top spacing so the
       transition from full-bleed image to editorial body breathes. */
    padding-block-start: var(--space-9);
  }

  /* Warm-tone band — retired in Phase 12 Pass B revision 2. The class
     is kept (no consumers) so removing it from `home.php` is safe; we may
     bring banding back as a sibling motif if the page reads too uniform. */
  .section--warm {
    background-color: var(--color-surface-warm);
  }

  /* Decorative-section host — establishes a positioning context so the
     architectural background SVG (`.section-decor`) can absolutely
     position into a corner without affecting the section's normal flow. */
  .section--decor {
    position: relative;
    overflow: hidden;
  }

  /* Background architectural motif — sits behind everything in its host
     section. The wrapping `<div>` is positioned absolutely; the inner
     SVG strokes inherit colour from `currentColor`, opacity from the
     wrapper. Variants push the SVG to a section's outer edge so the
     drawing reads as architectural punctuation rather than background
     filler. Hidden on narrow viewports where it would overlap content. */
  .section-decor {
    position: absolute;
    pointer-events: none;
    z-index: 0;
    color: var(--color-text);
    opacity: 0.10;
    line-height: 0;
  }

  .section-decor svg {
    display: block;
    width: 100%;
    height: 100%;
  }

  /* Skyline — full-bleed cityscape anchored to the section's bottom edge,
     reaching slightly past the viewport on each side so it reads as a
     fragment of a longer drawing, not a self-contained illustration.
     Aspect-ratio derives the height from the width so the SVG always
     exactly fills its wrapper (no letterboxing). Pairs with
     `Decor::skyline()` (5:1 SVG aspect). */
  .section-decor--skyline {
    left: 50%;
    bottom: -1rem;
    transform: translateX(-50%);
    width: 108vw;
    aspect-ratio: 5 / 1;
    max-height: 22rem;
  }

  /* Right-edge plan — full-section-height plan view, anchored to the
     right edge with strong bleed off-screen. Reads as architectural
     marginalia. Pairs with `Decor::plan()` (1:1). */
  .section-decor--edge-right {
    top: -2rem;
    bottom: -2rem;
    right: -10rem;
    width: clamp(26rem, 50vw, 42rem);
    aspect-ratio: auto;
  }

  /* Left-edge bleed — symmetric mirror of edge-right. Used for the
     Leistungen axonometric and the FAQ plan. */
  .section-decor--edge-left {
    top: -2rem;
    bottom: -2rem;
    left: -10rem;
    width: clamp(26rem, 50vw, 42rem);
    aspect-ratio: auto;
  }

  /* Narrow modifier — pairs with either edge variant to shrink the motif
     to marginalia width (~22rem max). Edge-specific bleed amount is set
     by combined selectors below so the modifier works for both sides. */
  .section-decor--narrow {
    width: clamp(16rem, 22vw, 22rem);
  }

  .section-decor--edge-left.section-decor--narrow {
    left: -4rem;
  }

  .section-decor--edge-right.section-decor--narrow {
    right: -4rem;
  }

  /* One-off size bump for short-aspect motifs (e.g. the 2:1 buildings
     elevation) that look visually smaller than 1:1 motifs at the same
     wrapper width because they only fill half the wrapper height.
     Composes with --narrow; ordered after so it wins specificity.
     ~14 % wider than narrow — meant to feel slight. */
  .section-decor--lg {
    width: clamp(18rem, 25vw, 25rem);
  }

  /* Top-right corner accent — for sections that need a discrete mark
     rather than full-edge bleed (e.g. a smaller motif at the top-right). */
  .section-decor--corner-top-right {
    top: -2rem;
    right: -3rem;
    width: clamp(20rem, 32vw, 28rem);
    aspect-ratio: 1 / 1;
  }

  /* Below 800 px the decorative SVG would overlap with the main content
     instead of sitting beside it — hide it on narrow screens. Skyline
     stays visible because it's bottom-anchored and doesn't fight content
     for horizontal space. */
  @media (max-width: 799px) {
    .section-decor:not(.section-decor--skyline) {
      display: none;
    }
    .section-decor--skyline {
      bottom: -0.5rem;
      height: clamp(8rem, 18vh, 12rem);
      opacity: 0.08;
    }
  }

  /* Section content sits above the decoration. Anything inside a decor
     section needs to clear z-index 0 — the .container does it for the
     whole content tree. */
  .section--decor > .container {
    position: relative;
    z-index: 1;
  }

  .section-header {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-4);
    margin-bottom: var(--space-7);
    /* Centred composition — text centred inside each block-level child,
       block-level children fill the column (default), and inline-flex
       children (the optional link) centre themselves via `justify-self`. */
    text-align: center;
    position: relative;
  }

  /* When the header carries a right-side link, the link drops below the
     centred content on every viewport — keeps the whole composition
     symmetric instead of forcing a 2-column desktop layout. */
  .section-header--with-link {
    grid-template-columns: 1fr;
  }

  .section-header__index,
  .section-header__eyebrow {
    display: block;
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    color: var(--color-accent);
    letter-spacing: var(--tracking-wide);
    font-feature-settings: "tnum" 1;
    line-height: 1;
    margin: 0;
  }

  /* Section icon — small Phosphor mark sitting above the index. Centred
     inside a hairline-bordered square that nods to the outline aesthetic
     used on the cards below. Accent-coloured and quiet; the icon
     establishes the section's character without competing with the label. */
  .section-header__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    margin-inline: auto;
    color: var(--color-accent);
    border: 1px solid var(--color-accent);
    border-radius: 0;
    line-height: 0;
  }

  .section-header__icon svg {
    width: 1.25rem;
    height: 1.25rem;
  }

  .section-header__eyebrow {
    text-transform: uppercase;
    /* Eyebrow text doesn't need tabular nums; we keep the index/eyebrow
       baseline shared otherwise so the section rhythm reads identical
       whether the heading carries a numeral or a word. */
    font-feature-settings: normal;
  }

  /* Inner group used inside `.section-header--with-link` to keep
     index/eyebrow + label + lede stacked with the same rhythm as a
     plain section-header. The grid `gap` lives on the outer header for
     the link → group spacing; the group needs its own gap so its
     children don't collapse against each other. */
  .section-header__group {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    align-items: center;
    text-align: center;
  }

  .section-header__label {
    display: block;
    font-size: clamp(1.5rem, 1rem + 1.6vw, 2.25rem);
    font-weight: var(--font-light);
    letter-spacing: var(--tracking-tight);
    color: var(--color-text);
    line-height: 1.05;
    margin: 0;
  }

  .section-header__lede {
    grid-column: 1 / -1;
    max-width: 52ch;
    color: var(--color-text-muted);
    font-size: var(--text-lg);
    line-height: var(--leading-normal);
    margin: 0 auto;
  }

  .section-header__link {
    display: inline-flex;
    align-items: center;
    gap: 0.45em;
    font-weight: var(--font-medium);
    color: var(--color-text);
    text-decoration: none;
    border-bottom: 1px solid currentColor;
    padding-bottom: 2px;
    justify-self: center;
    transition: color var(--duration-fast) var(--ease-standard);
  }

  .section-header__link::after {
    content: "→";
    transition: transform var(--duration-fast) var(--ease-standard);
  }

  .section-header__link:hover {
    color: var(--color-accent);
  }

  .section-header__link:hover::after {
    transform: translateX(3px);
  }


  /* ----- Hero slider ---------------------------------------------------
     Full-bleed five-image slider. Slides stack absolutely; opacity fade
     between them. Photo-led — no Ken-Burns, no red accents in the
     chrome. Dots in the bottom-right, side arrows on the edges, white
     progress bar at the bottom edge. Driven by `/assets/js/home.js`.
     -------------------------------------------------------------------- */

  .hero-slider {
    position: relative;
    width: 100%;
    /* Anchored to the viewport rather than a clamp — the hero is the page's
       opening frame, so it should fill the screen exactly (no max-height
       cap so tall viewports don't get a sliver of white space below the
       hero). */
    height: 100vh;
    min-height: 36rem;
    overflow: hidden;
    background-color: var(--zinc-950);
    color: var(--white);
    isolation: isolate;
  }

  .hero-slider:focus-visible {
    outline: 2px solid var(--color-focus-ring);
    outline-offset: -4px;
  }

  .hero-slider__stage {
    position: absolute;
    inset: 0;
  }

  .hero-slider__slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transition:
      opacity   var(--duration-slow) var(--ease-standard),
      visibility 0s linear var(--duration-slow);
    pointer-events: none;
  }

  .hero-slider__slide[data-active] {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition:
      opacity   var(--duration-slow) var(--ease-standard),
      visibility 0s linear 0s;
  }

  .hero-slider__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }

  /* Medium-strength shade for legible overlay text. Diagonal weighting +
     a small darken-from-bottom keeps the lower half readable while the top
     stays clear photography. */
  .hero-slider__shade {
    position: absolute;
    inset: 0;
    background:
      linear-gradient(
        to top,
        rgba(0, 0, 0, 0.55) 0%,
        rgba(0, 0, 0, 0.25) 45%,
        rgba(0, 0, 0, 0.15) 100%
      );
    pointer-events: none;
  }

  .hero-slider__overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    padding-bottom: clamp(var(--space-9), 16vh, 10rem);
    pointer-events: none;
  }

  .hero-slider__overlay-inner {
    max-width: none;
  }

  .hero-slider__eyebrow {
    display: block;
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: var(--white);
    opacity: 0.88;
    margin-bottom: var(--space-4);
    padding-left: var(--space-5);
    position: relative;
  }

  /* Eyebrow leading hairline — white, not red. */
  .hero-slider__eyebrow::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: var(--space-4);
    height: 1px;
    background-color: var(--white);
    opacity: 0.7;
    transform: translateY(-50%);
  }

  .hero-slider__display {
    font-size: clamp(1.875rem, 1.25rem + 2.6vw, 3.75rem);
    font-weight: var(--font-light);
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: var(--white);
    margin: 0;
    max-width: 22ch;
    text-wrap: balance;
  }

  .hero-slider__display em {
    font-style: normal;
    color: var(--white);
    font-weight: var(--font-medium);
  }

  .hero-slider__lead {
    margin-top: var(--space-4);
    max-width: 46ch;
    font-size: var(--text-base);
    font-weight: var(--font-normal);
    color: var(--white);
    opacity: 0.88;
    line-height: var(--leading-normal);
  }

  /* ----- Hero slider arrows (prev/next, edge-mounted) ------------------ */

  .hero-slider__arrow {
    appearance: none;
    background: rgba(0, 0, 0, 0.22);
    border: 1px solid rgba(255, 255, 255, 0.35);
    color: var(--white);
    cursor: pointer;
    width: 3rem;
    height: 3rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 4;
    transition:
      background-color var(--duration-fast) var(--ease-standard),
      border-color     var(--duration-fast) var(--ease-standard);
  }

  .hero-slider__arrow--prev {
    left: var(--space-4);
  }

  .hero-slider__arrow--next {
    right: var(--space-4);
  }

  .hero-slider__arrow:hover,
  .hero-slider__arrow:focus-visible {
    background-color: rgba(0, 0, 0, 0.45);
    border-color: var(--white);
  }

  .hero-slider__arrow:focus-visible {
    outline: 2px solid var(--color-focus-ring);
    outline-offset: 2px;
  }

  .hero-slider__arrow-icon {
    width: 1.25rem;
    height: 1.25rem;
  }

  @media (max-width: 640px) {
    .hero-slider__arrow {
      width: 2.5rem;
      height: 2.5rem;
    }
    .hero-slider__arrow--prev { left: var(--space-3); }
    .hero-slider__arrow--next { right: var(--space-3); }
  }

  /* ----- Hero slider chrome (dots bottom-right + progress bar) --------- */

  .hero-slider__chrome {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 5;
    pointer-events: none;
  }

  .hero-slider__chrome-inner {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-bottom: var(--space-5);
    pointer-events: auto;
  }

  .hero-slider__indicators {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
  }

  .hero-slider__indicator {
    appearance: none;
    background: none;
    border: none;
    padding: var(--space-2);
    margin: 0;
    cursor: pointer;
    position: relative;
  }

  .hero-slider__indicator::before {
    content: "";
    display: block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.4);
    transition:
      background-color var(--duration-fast) var(--ease-standard),
      transform        var(--duration-fast) var(--ease-standard);
  }

  .hero-slider__indicator:hover::before {
    background-color: rgba(255, 255, 255, 0.7);
  }

  .hero-slider__indicator[aria-selected="true"]::before {
    background-color: var(--white);
    transform: scale(1.35);
  }

  .hero-slider__indicator:focus-visible {
    outline: 2px solid var(--color-focus-ring);
    outline-offset: 2px;
  }

  .hero-slider__progress {
    height: 1px;
    width: 100%;
    background-color: rgba(255, 255, 255, 0.18);
    overflow: hidden;
  }

  .hero-slider__progress-bar {
    display: block;
    width: 100%;
    height: 100%;
    background-color: var(--white);
    transform-origin: left center;
    transform: scaleX(0);
    /* Animation duration set by JS via inline style. */
  }

  @media (prefers-reduced-motion: reduce) {
    .hero-slider__slide {
      transition: opacity var(--duration-fast) linear;
    }
    .hero-slider__progress-bar {
      display: none;
    }
  }

  @media (max-width: 640px) {
    .hero-slider {
      min-height: 30rem;
    }
    .hero-slider__chrome-inner {
      justify-content: center;
      padding-bottom: var(--space-4);
    }
  }


  /* ----- Icon utility (inline SVG via App\Support\Icon) ----------------
     Phosphor Light icons emit a 256-viewBox SVG with stroke-width 12.
     `.icon` controls visible size; stroke scales proportionally with width.
     -------------------------------------------------------------------- */

  .icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    flex-shrink: 0;
    vertical-align: middle;
    color: currentColor;
  }


  /* ----- Leistungen tabs ----------------------------------------------
     Tabbed three-discipline panel — replaces the earlier 3-up service
     grid. Tab bar (icon + label) on top, large active panel showing
     image + headline + sub-services list + CTA. JS-enhanced (home.js
     drives `aria-selected` + panel visibility). Without JS, the first
     panel is shown via the initial `data-active` attribute and the rest
     stay hidden — degrades gracefully (no broken-state).
     -------------------------------------------------------------------- */

  .leistungen-tabs {
    display: grid;
    gap: var(--space-7);
  }

  .leistungen-tabs__bar {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--color-text);
    border-bottom: 1px solid var(--color-border);
  }

  @media (min-width: 700px) {
    .leistungen-tabs__bar {
      grid-template-columns: repeat(3, 1fr);
    }
  }

  .leistungen-tabs__tab {
    appearance: none;
    background: none;
    border: none;
    border-bottom: 1px solid var(--color-border);
    padding: var(--space-5) var(--space-4);
    margin: 0;
    width: 100%;
    text-align: left;
    cursor: pointer;
    color: var(--color-text-muted);
    font: inherit;
    font-weight: var(--font-medium);
    letter-spacing: var(--tracking-tight);
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    position: relative;
    transition:
      color            var(--duration-fast) var(--ease-standard),
      background-color var(--duration-fast) var(--ease-standard);
  }

  @media (min-width: 700px) {
    .leistungen-tabs__tab {
      border-bottom: none;
      border-right: 1px solid var(--color-border);
      padding-block: var(--space-6);
      justify-content: flex-start;
    }
    .leistungen-tabs__tab:last-child {
      border-right: none;
    }
  }

  .leistungen-tabs__tab .icon {
    width: 1.65em;
    height: 1.65em;
    color: var(--color-text-muted);
    transition: color var(--duration-fast) var(--ease-standard);
  }

  .leistungen-tabs__tab-label {
    font-size: var(--text-lg);
    line-height: 1;
  }

  .leistungen-tabs__tab:hover {
    color: var(--color-text);
  }

  .leistungen-tabs__tab:hover .icon {
    color: var(--color-accent);
  }

  .leistungen-tabs__tab[aria-selected="true"] {
    color: var(--color-text);
  }

  .leistungen-tabs__tab[aria-selected="true"] .icon {
    color: var(--color-accent);
  }

  /* Active marker: a thin red rule along the bottom edge of the active
     tab. Sits inside the existing hairline so it overlays cleanly. */
  .leistungen-tabs__tab[aria-selected="true"]::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
    background-color: var(--color-accent);
  }

  .leistungen-tabs__tab:focus-visible {
    outline: 2px solid var(--color-focus-ring);
    outline-offset: -4px;
  }


  .leistungen-tabs__panels {
    position: relative;
  }

  .leistungen-tabs__panel {
    display: none;
    grid-template-columns: 1fr;
    gap: var(--space-6);
    align-items: start;
  }

  .leistungen-tabs__panel[data-active] {
    display: grid;
  }

  @media (min-width: 900px) {
    .leistungen-tabs__panel {
      grid-template-columns: 1.15fr 1fr;
      gap: var(--space-8);
    }
  }

  .leistungen-tabs__media {
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background-color: var(--color-bg-muted);
    position: relative;
  }

  .leistungen-tabs__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* Single hairline corner-mark on the top-left of the media — gentle
     studio gesture matching the editorial vocabulary used elsewhere. */
  .leistungen-tabs__media::before {
    content: "";
    position: absolute;
    top: var(--space-3);
    left: var(--space-3);
    width: var(--space-6);
    height: var(--space-6);
    border-top: 1px solid var(--color-accent);
    border-left: 1px solid var(--color-accent);
    pointer-events: none;
    z-index: 1;
  }

  .leistungen-tabs__copy {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
  }

  .leistungen-tabs__title {
    font-size: clamp(1.75rem, 1.25rem + 1.6vw, 2.5rem);
    font-weight: var(--font-light);
    letter-spacing: -0.02em;
    line-height: 1.1;
    margin: 0;
    text-wrap: balance;
  }

  .leistungen-tabs__title em {
    font-style: normal;
    color: var(--color-accent);
    font-weight: var(--font-medium);
  }

  .leistungen-tabs__lede {
    color: var(--color-text-muted);
    font-size: var(--text-lg);
    line-height: var(--leading-normal);
    margin: 0;
    max-width: none;
  }

  .leistungen-tabs__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--space-2);
    border-top: 1px solid var(--color-border);
    padding-top: var(--space-4);
    max-width: none;
  }

  .leistungen-tabs__list li {
    color: var(--color-text);
    font-size: var(--text-base);
    padding-left: var(--space-5);
    position: relative;
    max-width: none;
  }

  .leistungen-tabs__list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.7em;
    width: var(--space-4);
    height: 1px;
    background-color: var(--color-accent);
  }

  .leistungen-tabs__cta {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 0.45em;
    font-weight: var(--font-medium);
    color: var(--color-text);
    text-decoration: none;
    border-bottom: 1px solid currentColor;
    padding-bottom: 2px;
    margin-top: var(--space-3);
    transition: color var(--duration-fast) var(--ease-standard);
  }

  .leistungen-tabs__cta::after {
    content: "→";
    transition: transform var(--duration-fast) var(--ease-standard);
  }

  .leistungen-tabs__cta:hover {
    color: var(--color-accent);
  }

  .leistungen-tabs__cta:hover::after {
    transform: translateX(3px);
  }


  /* ----- Process strip (4 numbered phases) -----------------------------
     Vertical numbered list — each step is a row with index, title, and
     body. Hairline rules between rows. Reads as an editorial timeline
     and gives Prozess (now sitting deeper in the page) the breath it
     needs without competing with surrounding sections.
     -------------------------------------------------------------------- */

  /* Vertical red rail runs through the numeral column. The rail sits
     behind every step (`::before` on the strip), and each numeral wears
     a section-matching background patch so the rail "passes through"
     while the digits stay readable. Section background colour is
     inherited via `currentColor`-style trickery: we set the patch on
     `.process-step__num` and override it in `.section--warm` below.
     -------------------------------------------------------------------- */

  .process-strip {
    list-style: none;
    margin: 0;
    padding: 0;
    padding-left: var(--space-7);
    position: relative;
    display: flex;
    flex-direction: column;
  }

  .process-strip::before {
    content: "";
    position: absolute;
    left: calc(var(--space-7) - 1.25rem);
    top: var(--space-5);
    bottom: var(--space-5);
    width: 1px;
    background-color: var(--color-accent);
  }

  @media (min-width: 800px) {
    .process-strip {
      padding-left: 0;
    }
    .process-strip::before {
      left: 1.25rem;
    }
  }

  .process-step {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: var(--space-5);
    row-gap: var(--space-2);
    padding-block: var(--space-5);
    align-items: baseline;
    max-width: none;
    position: relative;
  }

  @media (min-width: 800px) {
    .process-step {
      grid-template-columns: 4rem 16rem 1fr;
      column-gap: var(--space-7);
      row-gap: 0;
      padding-block: var(--space-6);
    }
  }

  /* Numeral sits ON the rail — accent text on a section-matching
     background patch so the rail visually breaks at each numeral. */
  .process-step__num {
    grid-row: 1;
    grid-column: 1;
    display: inline-block;
    font-size: var(--text-xl);
    font-weight: var(--font-medium);
    color: var(--color-accent);
    letter-spacing: var(--tracking-wide);
    font-feature-settings: "tnum" 1;
    line-height: 1.2;
    margin: 0;
    margin-left: -0.5rem;
    padding: 0.25rem 0.5rem;
    background-color: var(--color-bg);
    position: relative;
  }

  .section--warm .process-step__num {
    background-color: var(--color-surface-warm);
  }

  .process-step__title {
    grid-row: 1;
    grid-column: 2;
    font-size: clamp(1.25rem, 1rem + 0.6vw, 1.625rem);
    font-weight: var(--font-medium);
    letter-spacing: var(--tracking-tight);
    line-height: 1.2;
    margin: 0;
  }

  .process-step__body {
    grid-row: 2;
    grid-column: 2;
    color: var(--color-text-muted);
    margin: 0;
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    max-width: 56ch;
  }

  @media (min-width: 800px) {
    .process-step__title {
      grid-column: 2;
    }
    .process-step__body {
      grid-row: 1;
      grid-column: 3;
      align-self: baseline;
    }
  }


  /* ----- Project hero grid ---------------------------------------------
     Two non-moving "lead" projects in a 2-up grid above the carousel.
     Single column on narrow viewports. Inherits the outline aesthetic
     from `.project-card`; the `--hero` variant adds a chip overlay,
     eyebrow, lead and CTA row.
     -------------------------------------------------------------------- */

  .project-hero-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-5);
    margin-block: var(--space-6) var(--space-7);
  }

  @media (min-width: 800px) {
    .project-hero-grid {
      grid-template-columns: 1fr 1fr;
      gap: var(--space-6);
    }
  }


  /* ----- Project card (base) -------------------------------------------
     Single card variant — the entire card is a link. Used by the hero
     grid (`--hero`), the home carousel (`--carousel`), and the carousel
     tail (`--more`). Will be reused by the projekte index in Phase 4.
     Outline-aesthetic — 1 px hairline default; hover lifts the border
     to accent red and the title to accent.
     -------------------------------------------------------------------- */

  .project-card {
    display: flex;
    flex-direction: column;
    color: inherit;
    text-decoration: none;
    height: 100%;
    border: 1px solid var(--color-border);
    background-color: var(--color-bg);
    transition:
      border-color var(--duration-fast) var(--ease-standard),
      transform    var(--duration-fast) var(--ease-emphasized);
  }

  .project-card:hover {
    border-color: var(--color-accent);
  }

  .project-card__media {
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background-color: var(--color-bg-muted);
    position: relative;
  }

  .project-card__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--duration-slow) var(--ease-standard);
  }

  .project-card:hover .project-card__media img {
    transform: scale(1.04);
  }

  /* Hero variant carries a wider 3:2 media so the lead projects feel
     weighty next to the smaller carousel cards below. */
  .project-card--hero .project-card__media {
    aspect-ratio: 3 / 2;
  }

  .project-card__body {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-5);
    flex: 1 1 auto;
  }

  .project-card__eyebrow {
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--color-text-muted);
  }

  .project-card__title {
    font-size: var(--text-lg);
    font-weight: var(--font-medium);
    letter-spacing: var(--tracking-tight);
    margin: 0;
    transition: color var(--duration-fast) var(--ease-standard);
  }

  .project-card:hover .project-card__title {
    color: var(--color-accent);
  }

  /* Carousel cards run a touch larger than grid cards. */
  .project-card--carousel .project-card__title {
    font-size: var(--text-xl);
  }

  /* Hero cards carry the largest title — close to a section heading. */
  .project-card--hero .project-card__title {
    font-size: var(--text-2xl);
  }

  .project-card__lead {
    font-size: var(--text-sm);
    line-height: var(--leading-relaxed);
    color: var(--color-text-muted);
    margin: 0;
    max-width: 38rem;
  }

  /* Chip overlay on the media — outline-pill in the same language as the
     job-item__chip, here used to mark the lead projects as "Referenz". */
  .project-card__chip {
    position: absolute;
    top: var(--space-3);
    left: var(--space-3);
    z-index: 1;
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.625rem;
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--color-text);
    background-color: rgb(255 255 255 / 0.95);
    border: 1px solid var(--color-border);
  }

  /* CTA row — visible always, the icon translates up-right on card
     hover. Same icon language as the prefooter cells. */
  .project-card__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    margin-block-start: var(--space-2);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    letter-spacing: var(--tracking-tight);
    color: var(--color-text);
    transition: color var(--duration-fast) var(--ease-standard);
  }

  .project-card__cta-icon {
    width: 1rem;
    height: 1rem;
    transition: transform var(--duration-fast) var(--ease-emphasized);
  }

  .project-card:hover .project-card__cta {
    color: var(--color-accent);
  }

  .project-card:hover .project-card__cta-icon {
    transform: translate(2px, -2px);
  }


  /* ----- Project carousel — wrap, scroller, chrome ---------------------
     Wrap sits inside `.container` — left edge respects the container, the
     inner scroller breaks out right via negative margin so cards bleed
     off-screen until scrolled. Native scroll/swipe still works; the
     visible scrollbar is hidden because the chrome below is the
     primary affordance.

     Chrome (`.project-carousel-chrome`) stays inside the container on
     both sides: arrows in the left corner, dots in the right corner,
     stacked below the rail per the design brief.
     -------------------------------------------------------------------- */

  .project-carousel-wrap {
    margin-block-start: var(--space-3);
  }

  .project-carousel {
    /* Right-edge bleed: stretch the right margin to the viewport edge
       while the left edge stays aligned with the container. */
    margin-right: calc(50% - 50vw);
    /* Bleed compensation: pad-right matching the breakout so the last
       card can scroll fully into view past the container right edge. */
    padding-right: calc(50vw - 50%);
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 0;
    /* Native scrollbar hidden — chrome below is the affordance. */
    scrollbar-width: none;
    -ms-overflow-style: none;
    /* Vertical breathing so card focus rings have room. */
    padding-block: var(--space-2);
  }

  .project-carousel::-webkit-scrollbar {
    display: none;
  }

  .project-carousel:focus-visible {
    outline: 2px solid var(--color-focus-ring);
    outline-offset: 4px;
  }

  .project-carousel__track {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: var(--space-5);
    align-items: stretch;
  }

  .project-carousel__item {
    flex: 0 0 auto;
    width: clamp(16rem, 75vw, 22rem);
    max-width: none;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  @media (min-width: 800px) {
    .project-carousel__item {
      width: clamp(20rem, 32vw, 26rem);
    }
  }

  /* Chrome row — arrows on the left, dots on the right, container-aligned
     on both sides. */
  .project-carousel-chrome {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-5);
    margin-block-start: var(--space-5);
    flex-wrap: wrap;
  }

  .project-carousel-chrome__arrows {
    display: flex;
    gap: var(--space-2);
  }

  .project-carousel-chrome__arrow {
    appearance: none;
    border: 1px solid var(--color-border);
    background-color: var(--color-bg);
    width: 2.75rem;
    height: 2.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--color-text);
    transition:
      border-color var(--duration-fast) var(--ease-standard),
      color        var(--duration-fast) var(--ease-standard),
      background-color var(--duration-fast) var(--ease-standard);
  }

  .project-carousel-chrome__arrow:hover:not([disabled]) {
    border-color: var(--color-accent);
    color: var(--color-accent);
  }

  .project-carousel-chrome__arrow:focus-visible {
    outline: 2px solid var(--color-focus-ring);
    outline-offset: 2px;
  }

  .project-carousel-chrome__arrow[disabled] {
    cursor: not-allowed;
    color: var(--color-text-muted);
    opacity: 0.4;
  }

  .project-carousel-chrome__arrow-icon {
    width: 1rem;
    height: 1rem;
  }

  .project-carousel-chrome__dots {
    display: flex;
    gap: 0.5rem;
    align-items: center;
  }

  .project-carousel-chrome__dot {
    appearance: none;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: var(--radius-full);
    border: 1px solid var(--color-border-strong);
    background-color: transparent;
    padding: 0;
    cursor: pointer;
    transition:
      background-color var(--duration-fast) var(--ease-standard),
      border-color var(--duration-fast) var(--ease-standard),
      transform var(--duration-fast) var(--ease-standard);
  }

  .project-carousel-chrome__dot:hover {
    border-color: var(--color-accent);
  }

  .project-carousel-chrome__dot:focus-visible {
    outline: 2px solid var(--color-focus-ring);
    outline-offset: 2px;
  }

  .project-carousel-chrome__dot[aria-selected="true"] {
    background-color: var(--color-accent);
    border-color: var(--color-accent);
    transform: scale(1.2);
  }

  @media (max-width: 799px) {
    .project-carousel-chrome__arrow {
      width: 2.5rem;
      height: 2.5rem;
    }
  }


  /* ----- Tail card — closes the carousel with intent ------------------
     Same dimensions as a regular project card, but a dashed outline +
     stripped composition signal "this isn't a project, it's the index
     link". Hover solidifies the outline to accent red.
     -------------------------------------------------------------------- */

  .project-card--more {
    background-color: transparent;
    border-style: dashed;
  }

  .project-card--more:hover {
    border-style: solid;
    border-color: var(--color-accent);
  }

  .project-card__more-inner {
    height: 100%;
    min-height: 18rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--space-5);
    padding: var(--space-5);
  }

  .project-card__more-eyebrow {
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--color-text-muted);
  }

  .project-card__more-title {
    font-size: var(--text-2xl);
    font-weight: var(--font-medium);
    letter-spacing: var(--tracking-tight);
    color: var(--color-text);
  }

  .project-card--more:hover .project-card__more-title {
    color: var(--color-accent);
  }


  /* ----- FAQ list ------------------------------------------------------
     Native <details>/<summary> accordion. Single-column, max-width-capped
     and horizontally centred — reads as a focused list rather than a
     two-column wall. Custom chevron (+ → ×) via ::after on summary.
     -------------------------------------------------------------------- */

  .faq-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    max-width: 56rem;
    margin-inline: auto;
  }

  /* Outline-aesthetic row. 1 px hairline default; the open state thickens
     the LEFT border to 3 px solid red, which doubles as the visual
     "you're reading this one" anchor. Padding shifts left by the
     2 px difference so the right edge stays put and the text doesn't
     reflow on open. */
  .faq-item {
    padding: 0 var(--space-6);
    margin-inline: 0;
    max-width: none;
    background-color: var(--color-bg);
    border: 1px solid var(--color-border);
    border-left-width: 1px;
    transition:
      background-color var(--duration-fast) var(--ease-standard),
      border-color     var(--duration-fast) var(--ease-standard);
  }

  .faq-item:hover {
    border-color: var(--color-border-strong);
  }

  .faq-item[open] {
    border-color: var(--color-border);
    border-left: 3px solid var(--color-accent);
    padding-left: calc(var(--space-6) - 2px);
  }

  .faq-item__q {
    /* Reset summary defaults across browsers. */
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
    font-size: var(--text-lg);
    font-weight: var(--font-medium);
    color: var(--color-text);
    letter-spacing: var(--tracking-tight);
    line-height: 1.3;
    padding: var(--space-4) 0;
    transition: color var(--duration-fast) var(--ease-standard);
  }

  .faq-item__q::-webkit-details-marker {
    display: none;
  }

  .faq-item__q:hover {
    color: var(--color-accent);
  }

  .faq-item__q:hover .faq-item__chevron {
    color: var(--color-accent);
  }

  .faq-item__q-text {
    flex: 1 1 auto;
  }

  /* Chevron: a + sign that rotates to × when open. Two pseudo-bars
     positioned absolutely in a small square. */
  .faq-item__chevron {
    flex: 0 0 auto;
    display: inline-block;
    position: relative;
    width: 1.125rem;
    height: 1.125rem;
    margin-top: 0.35em;
    transition: transform var(--duration-normal) var(--ease-emphasized);
  }

  .faq-item__chevron::before,
  .faq-item__chevron::after {
    content: "";
    position: absolute;
    background-color: currentColor;
    transition: opacity var(--duration-fast) var(--ease-standard);
  }

  /* Horizontal bar */
  .faq-item__chevron::before {
    left: 0;
    right: 0;
    top: 50%;
    height: 1px;
    transform: translateY(-50%);
  }

  /* Vertical bar */
  .faq-item__chevron::after {
    top: 0;
    bottom: 0;
    left: 50%;
    width: 1px;
    transform: translateX(-50%);
  }

  .faq-item[open] .faq-item__chevron {
    transform: rotate(45deg);
    color: var(--color-accent);
  }

  .faq-item[open] .faq-item__q {
    color: var(--color-accent);
  }

  .faq-item__a {
    overflow: hidden;
    padding-top: var(--space-3);
    padding-right: var(--space-7);
    padding-bottom: var(--space-5);
    color: var(--color-text-muted);
    line-height: var(--leading-normal);
    max-width: 60ch;
  }

  .faq-item__a p {
    margin: 0;
    max-width: none;
  }

  @media (prefers-reduced-motion: reduce) {
    .faq-item__chevron {
      transition: none;
    }
  }


  /* ----- About block ---------------------------------------------------
     Two-column section — image left, copy + qualitative stats + CTA on
     the right. Stacks on mobile. Image carries a 4:5 portrait crop so
     the studio reads as people, not an abstract motif.
     -------------------------------------------------------------------- */

  .about-block {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-6);
    align-items: stretch;
  }

  @media (min-width: 900px) {
    .about-block {
      grid-template-columns: 1fr 1fr;
      gap: var(--space-8);
    }
  }

  .about-block__media {
    margin: 0;
    overflow: hidden;
    background-color: var(--color-bg-muted);
  }

  /* Below the 2-col breakpoint the copy column doesn't exist to set the
     image height — keep a portrait aspect so the figure doesn't collapse. */
  @media (max-width: 899px) {
    .about-block__media {
      aspect-ratio: 4 / 5;
    }
  }

  .about-block__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .about-block__copy {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
  }

  .about-block__heading {
    font-size: clamp(1.75rem, 1.25rem + 1.5vw, 2.5rem);
    font-weight: var(--font-light);
    letter-spacing: -0.02em;
    line-height: 1.1;
    margin: 0;
    text-wrap: balance;
  }

  .about-block__heading em {
    font-style: normal;
    color: var(--color-accent);
    font-weight: var(--font-medium);
  }

  .about-block__body {
    color: var(--color-text-muted);
    font-size: var(--text-lg);
    line-height: var(--leading-normal);
    margin: 0;
    max-width: 50ch;
  }

  /* Outline-aesthetic stats — each cell is its own hairline-bordered
     square. Reads as a 3-up grid of discrete facts rather than a single
     stat strip. Borders use the soft neutral; the numerals stay accent.
     `minmax(0, 1fr)` prevents long unbreakable labels (e.g.
     "Leistungsphasen") from forcing each track to min-content width,
     which would push the parent past the viewport on narrow screens. */
  .about-block__stats {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-3);
    max-width: none;
  }

  /* Three columns once there's enough room for a label like
     "Leistungsphasen" to sit on one line in each cell. Below this width
     the row stacks vertically. */
  @media (min-width: 600px) {
    .about-block__stats {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }

  .about-stat {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-4);
    max-width: none;
    border: 1px solid var(--color-border);
    background-color: var(--color-bg);
  }

  @media (min-width: 600px) {
    .about-stat {
      padding: var(--space-5) var(--space-4);
    }
  }

  .about-stat__num {
    font-size: clamp(1.875rem, 1.25rem + 1.6vw, 2.75rem);
    font-weight: var(--font-light);
    letter-spacing: -0.04em;
    color: var(--color-accent);
    line-height: 1;
    font-feature-settings: "tnum" 1;
  }

  .about-stat__label {
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: var(--color-text-muted);
  }

  .about-block__cta {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 0.45em;
    font-weight: var(--font-medium);
    color: var(--color-text);
    text-decoration: none;
    border-bottom: 1px solid currentColor;
    padding-bottom: 2px;
    transition: color var(--duration-fast) var(--ease-standard);
  }

  .about-block__cta::after {
    content: "→";
    transition: transform var(--duration-fast) var(--ease-standard);
  }

  .about-block__cta:hover {
    color: var(--color-accent);
  }

  .about-block__cta:hover::after {
    transform: translateX(3px);
  }


  /* ----- Jobs list -----------------------------------------------------
     CMS-driven list of open positions. Used both in the home preview
     section (each item links to the /jobs index) and on the standalone
     /jobs page (each item carries its own mailto CTA).
     -------------------------------------------------------------------- */

  .jobs-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    max-width: none;
  }

  /* Outline-aesthetic row. Title (linked) + chip on top, lead in the
     middle column, primary "Jetzt bewerben" CTA on the right. Border
     lifts to accent on hover; the title link inks accent on hover too.
     The CTA is the explicit affordance — no whole-row link any more. */
  .job-item {
    max-width: none;
    background-color: var(--color-bg);
    border: 1px solid var(--color-border);
    padding: var(--space-5);
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-4);
    align-items: start;
    transition: border-color var(--duration-fast) var(--ease-standard);
  }

  .job-item:hover {
    border-color: var(--color-border-strong);
  }

  @media (min-width: 800px) {
    .job-item {
      grid-template-columns: minmax(15rem, 1.1fr) minmax(0, 1.6fr) auto;
      column-gap: var(--space-7);
      row-gap: var(--space-3);
      padding: var(--space-6) var(--space-6);
      align-items: center;
    }
  }

  .job-item__head {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
  }

  .job-item__title {
    font-size: var(--text-xl);
    font-weight: var(--font-medium);
    letter-spacing: var(--tracking-tight);
    margin: 0;
    line-height: 1.2;
    max-width: none;
  }

  .job-item__title-link {
    color: inherit;
    text-decoration: none;
    transition: color var(--duration-fast) var(--ease-standard);
  }

  .job-item__title-link:hover,
  .job-item__title-link:focus-visible {
    color: var(--color-accent);
  }

  .job-item__meta-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
  }

  /* Outline pill — solid red 1px border, accent text. No rgba, no fill.
     Phase 12 brief explicitly calls for the outline variant rather than a
     filled pill, which would have crowded the gradient CTA next to it. */
  .job-item__chip {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.65rem;
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: var(--color-accent);
    border: 1px solid var(--color-accent);
    border-radius: 9999px;
    line-height: 1.4;
    white-space: nowrap;
  }

  /* Ghost variant — used on the Initiativbewerbung row where the chip
     reads as a status note ("Ganzjährig offen"), not an enum value. */
  .job-item__chip--ghost {
    color: var(--color-text-muted);
    border-color: var(--color-border-strong);
  }

  .job-item__location {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    font-weight: var(--font-medium);
  }

  .job-item__lead {
    margin: 0;
    color: var(--color-text-muted);
    line-height: var(--leading-normal);
    max-width: 56ch;
  }

  /* Actions cluster — primary "Jetzt bewerben" + "Mehr ansehen" ghost link
     stack vertically on mobile (CTA full-width on top, link below), shift
     to right-aligned on desktop where they sit in the third grid column
     of the job row. */
  .job-item__actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    align-items: stretch;
  }

  @media (min-width: 800px) {
    .job-item__actions {
      align-items: flex-end;
      justify-self: end;
    }
  }

  /* Underlined ghost-link affordance — leads to the single job page.
     Smaller and quieter than the primary CTA so the apply button stays
     the dominant action in the row. Mobile: sits at the start of the
     stack (left edge). Desktop: aligns to the right edge of the actions
     column so it lines up under the apply CTA. */
  .job-item__more {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    color: var(--color-text);
    text-decoration: none;
    padding-bottom: 2px;
    border-bottom: 1px solid currentColor;
    transition: color var(--duration-fast) var(--ease-standard);
    align-self: flex-start;
  }

  @media (min-width: 800px) {
    .job-item__more {
      align-self: flex-end;
    }
  }

  .job-item__more-icon {
    width: 0.9em;
    height: 0.9em;
    transition: transform var(--duration-fast) var(--ease-standard);
  }

  .job-item__more:hover,
  .job-item__more:focus-visible {
    color: var(--color-accent);
  }

  .job-item__more:hover .job-item__more-icon,
  .job-item__more:focus-visible .job-item__more-icon {
    transform: translate(2px, -2px);
  }

  /* The apply CTA inherits everything from .btn / .btn--primary; on mobile
     it stretches to fill the actions column, on desktop it shrinks to its
     content (right-aligned by the parent). */
  .job-item__apply {
    align-self: stretch;
  }

  @media (min-width: 800px) {
    .job-item__apply {
      align-self: flex-end;
    }
  }


  /* ----- Pre-Footer (2-column full-bleed band) ------------------------
     Two stacked image-cards above the site footer — one routes to
     Projekte, one to Kontakt. Replaces the earlier closing CTA band.
     Each cell is a single anchor wrapping image + shade + content.
     -------------------------------------------------------------------- */

  .prefooter {
    display: grid;
    grid-template-columns: 1fr;
    margin-top: var(--space-9);
  }

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

  .prefooter__cell {
    position: relative;
    display: block;
    height: clamp(20rem, 50vh, 32rem);
    overflow: hidden;
    background-color: var(--zinc-950);
    color: var(--white);
    text-decoration: none;
    isolation: isolate;
  }

  .prefooter__cell:focus-visible {
    outline: 2px solid var(--color-focus-ring);
    outline-offset: -4px;
  }

  .prefooter__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    transition: transform var(--duration-slow) var(--ease-standard);
  }

  .prefooter__cell:hover .prefooter__image,
  .prefooter__cell:focus-visible .prefooter__image {
    transform: scale(1.04);
  }

  .prefooter__shade {
    position: absolute;
    inset: 0;
    background:
      linear-gradient(
        to top right,
        rgba(0, 0, 0, 0.65) 0%,
        rgba(0, 0, 0, 0.35) 45%,
        rgba(0, 0, 0, 0.15) 100%
      );
    z-index: 1;
  }

  .prefooter__content {
    position: relative;
    z-index: 2;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: var(--space-7) var(--space-5);
  }

  @media (min-width: 800px) {
    .prefooter__content {
      padding: var(--space-8);
    }
  }

  .prefooter__caption {
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: var(--white);
    opacity: 0.8;
    margin-bottom: var(--space-3);
  }

  .prefooter__heading {
    font-size: clamp(2rem, 1.25rem + 2vw, 3.25rem);
    font-weight: var(--font-light);
    letter-spacing: -0.02em;
    line-height: 1.05;
    margin: 0 0 var(--space-5);
    color: var(--white);
    max-width: 18ch;
    text-wrap: balance;
  }

  .prefooter__cta {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    font-size: var(--text-base);
    font-weight: var(--font-medium);
    color: var(--white);
    border-bottom: 1px solid var(--white);
    padding-bottom: 2px;
    align-self: flex-start;
    transition: gap var(--duration-fast) var(--ease-standard);
  }

  .prefooter__cta-icon {
    width: 0.875em;
    height: 0.875em;
  }

  .prefooter__cell:hover .prefooter__cta,
  .prefooter__cell:focus-visible .prefooter__cta {
    gap: var(--space-4);
  }

  /* The footer's top margin is reset because the pre-footer already
     provides the strong visual break. The `+` adjacent-sibling selector
     doesn't fire here in practice — `.prefooter` lives inside `<main>`
     and `.site-footer` is a sibling of `<main>`, so they're not direct
     siblings — but we keep the rule for templates that may inline
     prefooter outside `<main>` later. The :has() rule below is what
     actually applies on the home today. */
  .prefooter + .site-footer {
    margin-top: 0;
    padding-top: 0;
  }

  /* Cross-element fix: when the page contains a prefooter, drop the
     footer's top margin AND its own top padding. The prefooter ends in
     full-bleed dark imagery; the red footer should butt up against it
     with no white seam between them. */
  body:has(.prefooter) .site-footer {
    margin-top: 0;
    padding-top: 0;
  }

  /* Restore some breathing room above the first column row inside the
     red footer so the labels don't sit flush against the prefooter
     image edge. */
  body:has(.prefooter) .site-footer .site-footer__columns {
    padding-top: var(--space-7);
  }


  /* ----- Site header ---------------------------------------------------
     Fixed, hairline-bottom. Three-column layout — wordmark left, main nav
     centred, "Kontakt" CTA + mobile hamburger right.

     Transparent variant: when `<body class="has-hero">` is set, the header
     starts transparent over the hero and turns solid as soon as the user
     scrolls past a small threshold (`data-scrolled="true"` is toggled by
     `nav.js`). On every other page the header stays in its solid state.
     -------------------------------------------------------------------- */

  :root {
    --header-height: 4.75rem;
  }

  .site-header {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 50;
    background-color: var(--color-bg);
    border-bottom: 1px solid var(--color-border);
    color: var(--color-text);
    transition:
      background-color    var(--duration-normal) var(--ease-standard),
      border-bottom-color var(--duration-normal) var(--ease-standard),
      color               var(--duration-normal) var(--ease-standard);
  }

  /* Offset the page body for the fixed header — except where a hero lives
     immediately under it. The home page sets `body.has-hero` so the hero
     can run all the way to the top edge of the viewport. */
  main {
    padding-top: var(--header-height);
  }

  .has-hero main {
    padding-top: 0;
  }

  /* Transparent state — only on .has-hero pages, only before scroll. The
     `:not([data-scrolled])` keeps the same selector specificity for the
     resting and scrolled states so transitions are smooth in both
     directions. */
  .has-hero .site-header:not([data-scrolled="true"]) {
    background-color: transparent;
    border-bottom-color: transparent;
    color: var(--white);
  }

  .site-header__inner {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: var(--space-5);
    min-height: var(--header-height);
    padding-block: var(--space-3);
  }

  /* Mobile: stretch the inner row edge-to-edge with a tight inline
     padding instead of the wider container margins — gives the brand
     and the right-side actions room without crowding tiny screens. */
  @media (max-width: 799px) {
    .site-header .site-header__inner {
      width: 100%;
      max-width: none;
      padding-inline: var(--space-4);
      gap: var(--space-3);
    }
  }

  .site-header__brand {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    line-height: 1;
    color: var(--color-accent);
    text-decoration: none;
    transition: color var(--duration-fast) var(--ease-standard);
    /* Lift above the mobile menu overlay so the wordmark stays visible. */
    position: relative;
    z-index: 60;
  }

  .site-header__brand-mark {
    display: inline-flex;
    align-items: baseline;
    gap: 0.4em;
    font-size: var(--text-lg);
    letter-spacing: var(--tracking-tight);
    white-space: nowrap;
  }

  .site-header__brand-acronym {
    font-weight: var(--font-medium);
    letter-spacing: 0.02em;
  }

  .site-header__brand-name {
    font-weight: var(--font-light);
  }

  /* Small subtitle under the wordmark — partnership name, lockup affordance.
     Tight line-height keeps the header at its existing 4.75rem min-height.
     Neutral-muted on solid header (so it doesn't read as faded red next to
     the accent-red wordmark); translucent white on transparent header is
     handled by the .has-hero override below. */
  .site-header__brand-sub {
    font-size: 0.625rem;
    font-weight: var(--font-light);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    margin-top: 0.2em;
  }

  .site-header__brand:hover {
    filter: brightness(0.92);
  }

  /* Right-side actions cluster — "Kontakt" CTA + mobile hamburger.
     `justify-self: end` pins the cluster to the right edge of its grid
     cell. On mobile the nav is fixed-positioned out of flow, so without
     this the cluster could drift left of the right edge. */
  .site-header__actions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    justify-self: end;
    gap: var(--space-3);
    position: relative;
    z-index: 60;
  }

  /* Primary action gradient — tonal red diagonal, never multi-hue. Inner
     hairline shadow on hover gives the surface a touch of depth without
     resorting to drop shadows. */
  .site-header__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-accent); /* fallback */
    background-image: linear-gradient(140deg, var(--red-700) 0%, var(--red-800) 50%, var(--red-900) 100%);
    color: var(--white);
    padding: var(--space-2) var(--space-5);
    font-size: var(--text-base);
    font-weight: var(--font-medium);
    letter-spacing: var(--tracking-tight);
    text-decoration: none;
    line-height: 1.4;
    white-space: nowrap;
    transition:
      transform   var(--duration-fast) var(--ease-emphasized),
      box-shadow  var(--duration-fast) var(--ease-standard),
      filter      var(--duration-fast) var(--ease-standard);
  }

  .site-header__cta:hover,
  .site-header__cta:focus-visible {
    color: var(--white);
    transform: translateY(-1px);
    filter: brightness(1.05);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
  }

  @media (prefers-reduced-motion: reduce) {
    .site-header__cta {
      transition: filter var(--duration-fast) var(--ease-standard);
    }
    .site-header__cta:hover,
    .site-header__cta:focus-visible {
      transform: none;
    }
  }

  /* On mobile keep the CTA but tighten it so it fits next to the
     hamburger without crowding the wordmark. */
  @media (max-width: 540px) {
    .site-header__cta {
      padding: var(--space-2) var(--space-3);
      font-size: var(--text-sm);
    }
  }

  /* Transparent state — colour overrides for descendants. Brand, links,
     caret SVG and hamburger lines all flip to white. The Kontakt CTA
     keeps its red fill (dark enough to read against any hero
     photography). The `html:not(.is-nav-open)` scope prevents these
     overrides from leaking into the open mobile menu (they previously
     out-specced the `.is-nav-open` overrides below and rendered white
     menu links on the white menu panel — invisible). */
  html:not(.is-nav-open) .has-hero .site-header:not([data-scrolled="true"]) .site-header__brand,
  html:not(.is-nav-open) .has-hero .site-header:not([data-scrolled="true"]) .site-nav__link,
  html:not(.is-nav-open) .has-hero .site-header:not([data-scrolled="true"]) .site-nav__caret {
    color: var(--white);
  }

  /* Active-state colour override — the desktop active rule has selectors
     like `.site-nav__item.is-active-section > .site-nav__group > .site-nav__link`
     whose specificity ties the plain transparent rule above; the later
     rule wins and the active item went accent-red on the hero. Adding
     the `.has-hero .site-header:not(...)` chain plus the `html:not(...)`
     scope keeps the white override winning and excludes the open-menu
     state. The underline ::after marks the active state instead. */
  html:not(.is-nav-open) .has-hero .site-header:not([data-scrolled="true"]) .site-nav__link[aria-current="page"],
  html:not(.is-nav-open) .has-hero .site-header:not([data-scrolled="true"]) .site-nav__item.is-active-section > .site-nav__group > .site-nav__link,
  html:not(.is-nav-open) .has-hero .site-header:not([data-scrolled="true"]) .site-nav__item.is-active-section > .site-nav__link {
    color: var(--white);
  }

  html:not(.is-nav-open) .has-hero .site-header:not([data-scrolled="true"]) .site-header__brand-sub {
    color: rgba(255, 255, 255, 0.7);
  }

  html:not(.is-nav-open) .has-hero .site-header:not([data-scrolled="true"]) .site-header__brand:hover,
  html:not(.is-nav-open) .has-hero .site-header:not([data-scrolled="true"]) .site-nav__link:hover,
  html:not(.is-nav-open) .has-hero .site-header:not([data-scrolled="true"]) .site-nav__caret:hover {
    color: rgba(255, 255, 255, 0.7);
  }

  html:not(.is-nav-open) .has-hero .site-header:not([data-scrolled="true"]) .site-nav-toggle__line {
    background-color: var(--white);
  }

  /* When the mobile menu is open, force the header out of its transparent
     state — otherwise the white hamburger lines disappear against the
     white menu overlay. */
  .is-nav-open .site-header {
    background-color: var(--color-bg);
    border-bottom-color: var(--color-border);
    color: var(--color-text);
  }

  .is-nav-open .site-header .site-header__brand,
  .is-nav-open .site-header .site-nav-toggle__line,
  .is-nav-open .site-header .site-nav__link,
  .is-nav-open .site-header .site-nav__caret {
    color: var(--color-text);
  }

  /* Solid-state subtitle wins back over the .has-hero translucent-white
     override when the mobile menu forces the header solid. */
  .is-nav-open .site-header .site-header__brand-sub {
    color: var(--color-text-muted);
  }

  /* Brand wordmark in mobile-menu-open state: hold to accent (matches its
     solid-header default) instead of inheriting text-colour from above. */
  .is-nav-open .site-header .site-header__brand {
    color: var(--color-accent);
  }

  /* Dropdown items inside the open mobile menu — restore their muted
     state (white-on-transparent override would otherwise leak in on
     hero pages). */
  .is-nav-open .site-header .site-nav__dropdown a {
    color: var(--color-text-muted);
  }

  .is-nav-open .site-header .site-nav-toggle__line {
    background-color: var(--color-text);
  }


  /* ----- Side rail (right-edge floating quick-contact strip) -----------
     Three icon links — mailto, tel, /kontakt — fixed to the right edge,
     vertically centred. Default state is collapsed to icon width; on
     hover/focus the item expands leftward to reveal a small label.
     Hidden under 800 px (rail and mobile chrome would compete for space;
     header CTA already covers Kontakt on small screens).

     On `.has-hero` pages, the rail is hidden until the hero scrolls
     past — `nav.js` toggles `data-visible` based on hero intersection.
     -------------------------------------------------------------------- */

  .site-rail {
    position: fixed;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 40;
    display: none;
    flex-direction: column;
    /* align items to the right edge so width-grow extends leftward. */
    align-items: flex-end;
    gap: 1px;
    transition:
      opacity   220ms var(--ease-standard),
      transform 220ms var(--ease-emphasized);
  }

  @media (min-width: 800px) {
    .site-rail {
      display: flex;
    }
  }

  /* After-hero gating — hidden until JS confirms hero is mostly out of
     view (or no hero on this page). `data-visible="false"` is set
     pre-JS-paint via inline body class, so there's no flash. */
  .site-rail[data-visible="false"] {
    opacity: 0;
    pointer-events: none;
    transform: translateY(-50%) translateX(1.5rem);
  }

  .site-rail__item {
    display: inline-flex;
    /* row-reverse: icon sits on the right (rail edge); label appears on
       the left when the item expands. */
    flex-direction: row-reverse;
    align-items: center;
    justify-content: flex-start;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background-color: var(--color-accent);
    color: var(--white);
    text-decoration: none;
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    letter-spacing: var(--tracking-tight);
    overflow: hidden;
    white-space: nowrap;
    width: 3.25rem;
    height: 3.25rem;
    transition:
      width            220ms var(--ease-emphasized),
      background-color var(--duration-fast) var(--ease-standard);
  }

  .site-rail__item:focus-visible {
    outline: 2px solid var(--color-focus-ring);
    outline-offset: 2px;
  }

  .site-rail__icon {
    width: 1.5rem;
    height: 1.5rem;
    flex-shrink: 0;
  }

  /* One step thicker than the default Phosphor Light stroke (12) — sits
     between Light (12) and Regular (16) for a slightly bolder, more
     button-like read on the rail. */
  .site-rail__icon :is(path, polyline, line, circle, rect, polygon) {
    stroke-width: 14;
  }

  .site-rail__label {
    /* Hidden until expand, then fades in slightly behind the width
       transition so it appears once there's room. */
    opacity: 0;
    transition: opacity 160ms var(--ease-standard);
  }

  .site-rail__item:hover,
  .site-rail__item:focus-visible {
    width: 13rem;
    background-color: var(--color-accent-hover);
  }

  .site-rail__item:hover .site-rail__label,
  .site-rail__item:focus-visible .site-rail__label {
    opacity: 1;
    transition-delay: 80ms;
  }

  @media (prefers-reduced-motion: reduce) {
    .site-rail,
    .site-rail__item,
    .site-rail__label {
      transition: none;
    }
  }


  /* ----- Hamburger toggle (mobile only) -------------------------------- */

  .site-nav-toggle {
    display: inline-flex;
    flex-direction: column;
    justify-content: space-between;
    width: 26px;
    height: 18px;
    padding: 0;
    margin: 0;
    background: none;
    border: none;
    cursor: pointer;
    position: relative;
    z-index: 60;
  }

  .site-nav-toggle__line {
    display: block;
    width: 100%;
    height: 2px;
    background-color: var(--color-text);
    transform-origin: center;
    transition:
      transform var(--duration-normal) var(--ease-emphasized),
      opacity   var(--duration-fast)   var(--ease-standard);
  }

  .site-nav-toggle[aria-expanded="true"] .site-nav-toggle__line:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
  }

  .site-nav-toggle[aria-expanded="true"] .site-nav-toggle__line:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
  }

  .site-nav-toggle[aria-expanded="true"] .site-nav-toggle__line:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
  }

  @media (min-width: 800px) {
    .site-nav-toggle {
      display: none;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .site-nav-toggle__line {
      transition: none;
    }
  }


  /* ----- Site nav: shared bits ----------------------------------------- */

  .site-nav__list {
    list-style: none;
    margin: 0;
    padding: 0;
    max-width: none;
  }

  .site-nav__dropdown {
    list-style: none;
    margin: 0;
    padding: 0;
    max-width: none;
  }


  /* ----- Site nav: mobile (full-screen overlay) ------------------------ */

  @media (max-width: 799px) {
    .site-nav {
      position: fixed;
      inset: 0;
      z-index: 45;
      background-color: var(--color-bg);
      padding: calc(var(--space-7) + var(--space-7)) var(--space-5) var(--space-7);
      overflow-y: auto;
      transform: translateX(100%);
      visibility: hidden;
      transition:
        transform   var(--duration-normal) var(--ease-emphasized),
        visibility  0s linear var(--duration-normal);
    }

    .site-nav[data-open="true"] {
      transform: translateX(0);
      visibility: visible;
      transition:
        transform   var(--duration-normal) var(--ease-emphasized),
        visibility  0s linear 0s;
    }

    @media (prefers-reduced-motion: reduce) {
      .site-nav {
        transition: none;
      }
    }

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

    .site-nav__item {
      border-top: 1px solid var(--color-border);
    }

    .site-nav__item:last-child {
      border-bottom: 1px solid var(--color-border);
    }

    .site-nav__link {
      display: block;
      font-size: var(--text-2xl);
      font-weight: var(--font-light);
      color: var(--color-text);
      text-decoration: none;
      letter-spacing: var(--tracking-tight);
      padding-block: var(--space-4);
    }

    .site-nav__link[aria-current="page"],
    .site-nav__item.is-active-section > .site-nav__group > .site-nav__link,
    .site-nav__item.is-active-section > .site-nav__link {
      color: var(--color-accent);
    }

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

    .site-nav__group .site-nav__link {
      flex: 1;
    }

    .site-nav__caret {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 44px;
      height: 44px;
      padding: 0;
      margin: 0;
      background: none;
      border: none;
      color: var(--color-text);
      cursor: pointer;
      transition: transform var(--duration-normal) var(--ease-standard);
    }

    .site-nav__caret[aria-expanded="true"] {
      transform: rotate(180deg);
    }

    @media (prefers-reduced-motion: reduce) {
      .site-nav__caret {
        transition: none;
      }
    }

    /* Inline accordion collapse. max-height is set generously — only ever
       3-5 items, so the transition cost is fine and the UX is reliable
       across browsers (vs. the grid-template-rows trick, which needs a
       single-child wrapper). */
    .site-nav__dropdown {
      max-height: 0;
      overflow: hidden;
      transition: max-height var(--duration-normal) var(--ease-emphasized);
    }

    .site-nav__item--group[data-open="true"] .site-nav__dropdown {
      max-height: 24rem;
    }

    .site-nav__dropdown > li:first-child {
      padding-top: var(--space-2);
    }

    .site-nav__dropdown > li:last-child {
      padding-bottom: var(--space-4);
    }

    .site-nav__dropdown a {
      display: block;
      padding: var(--space-3) 0 var(--space-3) var(--space-5);
      font-size: var(--text-lg);
      font-weight: var(--font-normal);
      color: var(--color-text-muted);
      text-decoration: none;
    }

    .site-nav__dropdown a[aria-current="page"] {
      color: var(--color-accent);
    }

    @media (prefers-reduced-motion: reduce) {
      .site-nav__dropdown {
        transition: none;
      }
    }
  }

  /* Lock body scroll while the mobile menu is open. */
  .is-nav-open,
  .is-nav-open body {
    overflow: hidden;
  }


  /* ----- Site nav: desktop (inline horizontal + popover dropdown) ------ */

  @media (min-width: 800px) {
    .site-nav__list {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: var(--space-6);
    }

    .site-nav__item {
      position: relative;
    }

    .site-nav__group {
      display: inline-flex;
      align-items: center;
      gap: var(--space-1);
    }

    .site-nav__link {
      display: inline-block;
      position: relative;
      font-size: var(--text-base);
      font-weight: var(--font-normal);
      color: var(--color-text);
      text-decoration: none;
      padding-block: var(--space-2);
      transition: color var(--duration-fast) var(--ease-standard);
    }

    .site-nav__link:hover,
    .site-nav__link[aria-current="page"],
    .site-nav__item.is-active-section > .site-nav__group > .site-nav__link,
    .site-nav__item.is-active-section > .site-nav__link {
      color: var(--color-accent);
    }

    /* Active-state underline marker. Hidden by default; shown only on the
       transparent (over-hero) header where the accent-red colour shift
       above doesn't read well against varied photography. On solid
       header the underline stays hidden and the colour shift wins. */
    .site-nav__link::after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      bottom: 2px;
      height: 1px;
      background-color: currentColor;
      opacity: 0;
      transition: opacity var(--duration-normal) var(--ease-standard);
    }

    .has-hero .site-header:not([data-scrolled="true"]) .site-nav__link[aria-current="page"]::after,
    .has-hero .site-header:not([data-scrolled="true"]) .site-nav__item.is-active-section > .site-nav__group > .site-nav__link::after,
    .has-hero .site-header:not([data-scrolled="true"]) .site-nav__item.is-active-section > .site-nav__link::after {
      opacity: 1;
    }

    .site-nav__caret {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: auto;
      padding: var(--space-2) var(--space-1);
      background: none;
      border: none;
      color: var(--color-text);
      cursor: pointer;
      transition:
        transform var(--duration-fast) var(--ease-standard),
        color     var(--duration-fast) var(--ease-standard);
    }

    .site-nav__group:hover .site-nav__caret,
    .site-nav__caret:hover,
    .site-nav__caret[aria-expanded="true"] {
      color: var(--color-accent);
    }

    .site-nav__item--group:hover .site-nav__caret,
    .site-nav__caret[aria-expanded="true"] {
      transform: rotate(180deg);
    }

    @media (prefers-reduced-motion: reduce) {
      .site-nav__caret {
        transition: color var(--duration-fast) var(--ease-standard);
      }
    }

    .site-nav__dropdown {
      position: absolute;
      /* Sit flush with the parent — internal padding-top below replaces
         the visual gap, so the cursor never crosses dead space when
         moving from "Leistungen" down into the menu. */
      top: 100%;
      left: 0;
      min-width: 220px;
      padding: calc(var(--space-2) + var(--space-3)) 0 var(--space-3);
      background-color: var(--color-bg);
      border: 1px solid var(--color-border);
      /* No top border — the visual gap above the items is created by
         padding-top, and a top border would re-introduce a "ledge". */
      border-top: none;
      opacity: 0;
      visibility: hidden;
      transform: translateY(-4px);
      pointer-events: none;
      transition:
        opacity   var(--duration-fast) var(--ease-standard),
        transform var(--duration-fast) var(--ease-standard),
        visibility 0s linear var(--duration-fast);
    }

    /* Invisible bridge — extends the parent's hit-zone down by the same
       amount the dropdown's padding-top adds, so :hover on the parent
       stays true while the cursor traverses the menu's "head room". */
    .site-nav__item--group::after {
      content: "";
      position: absolute;
      top: 100%;
      left: 0;
      right: 0;
      height: var(--space-2);
      pointer-events: auto;
    }

    .site-nav__item--group:hover .site-nav__dropdown,
    .site-nav__item--group:focus-within .site-nav__dropdown,
    .site-nav__item--group[data-open="true"] .site-nav__dropdown {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
      pointer-events: auto;
      transition:
        opacity   var(--duration-fast) var(--ease-standard),
        transform var(--duration-fast) var(--ease-standard),
        visibility 0s linear 0s;
    }

    .site-nav__dropdown a {
      display: block;
      padding: var(--space-2) var(--space-5);
      font-size: var(--text-base);
      font-weight: var(--font-normal);
      color: var(--color-text);
      text-decoration: none;
      transition:
        color            var(--duration-fast) var(--ease-standard),
        background-color var(--duration-fast) var(--ease-standard);
    }

    .site-nav__dropdown a:hover,
    .site-nav__dropdown a[aria-current="page"] {
      color: var(--color-accent);
      background-color: var(--color-bg-subtle);
    }
  }


  /* ----- Site footer ---------------------------------------------------
     Brand-anchored ground floor — red fill, white type. Three columns
     above a hairline base strip. Hover lifts links via underline; we
     can't shift colour on a red fill, so the underline does the work.
     -------------------------------------------------------------------- */

  .site-footer {
    margin-top: var(--space-9);
    padding-block: var(--space-8) var(--space-5);
    background-color: var(--color-accent);
    color: var(--white);
  }

  .site-footer a {
    color: var(--white);
  }

  .site-footer__columns {
    display: grid;
    gap: var(--space-7);
    grid-template-columns: 1fr;
  }

  @media (min-width: 700px) {
    .site-footer__columns {
      grid-template-columns: 1fr 1fr;
      gap: var(--space-7) var(--space-8);
    }
  }

  @media (min-width: 1100px) {
    .site-footer__columns {
      grid-template-columns: 1.2fr 1fr 1.1fr 1fr;
    }
  }

  .site-footer__col {
    display: flex;
    flex-direction: column;
  }

  .site-footer__label {
    display: block;
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: var(--white);
    opacity: 0.7;
    margin-bottom: var(--space-4);
  }

  .site-footer__brand {
    font-size: var(--text-2xl);
    font-weight: var(--font-light);
    letter-spacing: var(--tracking-tight);
    color: var(--white);
    margin: 0;
    line-height: 1.1;
    max-width: none;
  }

  .site-footer__brand-acronym {
    font-weight: var(--font-medium);
  }

  .site-footer__tagline {
    margin-top: var(--space-3);
    color: var(--white);
    opacity: 0.8;
    font-size: var(--text-sm);
    max-width: 30ch;
  }

  .site-footer__nav,
  .site-footer__contact {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    max-width: none;
  }

  .site-footer__nav a,
  .site-footer__contact a {
    color: var(--white);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    padding-bottom: 1px;
    align-self: flex-start;
    transition:
      border-color var(--duration-fast) var(--ease-standard),
      opacity      var(--duration-fast) var(--ease-standard);
  }

  .site-footer__nav a:hover,
  .site-footer__contact a:hover {
    border-bottom-color: var(--white);
  }

  .site-footer__address {
    font-style: normal;
    color: var(--white);
    opacity: 0.85;
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
    margin: 0 0 var(--space-4);
  }

  .site-footer__contact {
    font-size: var(--text-sm);
  }

  /* Non-link rows in the contact list (e.g. fax) — kept visually equivalent
     to the link rows but without an underline-on-hover affordance. */
  .site-footer__contact-static {
    color: var(--white);
    opacity: 0.85;
    display: inline-block;
  }

  /* Öffnungszeiten — small dl rendered as label/value rows. The .row wrapper
     keeps each day + its hours together so they don't get visually split
     across line wraps. */
  .site-footer__hours {
    margin: 0;
    padding: 0;
    font-size: var(--text-sm);
    color: var(--white);
    line-height: var(--leading-normal);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
  }

  .site-footer__hours-row {
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  .site-footer__hours-row dt {
    font-weight: var(--font-medium);
    opacity: 0.85;
  }

  .site-footer__hours-row dd {
    margin: 0;
    opacity: 0.7;
  }

  .site-footer__base {
    margin-top: var(--space-7);
    padding-top: var(--space-5);
    border-top: 1px solid rgba(255, 255, 255, 0.25);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    font-size: var(--text-sm);
    color: var(--white);
  }

  @media (min-width: 600px) {
    .site-footer__base {
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
    }
  }

  .site-footer__copy {
    font-size: var(--text-sm);
    color: var(--white);
    opacity: 0.7;
  }

  .site-footer__legal {
    display: flex;
    gap: var(--space-5);
  }

  .site-footer__legal a {
    color: var(--white);
    opacity: 0.85;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    padding-bottom: 1px;
    transition:
      border-color var(--duration-fast) var(--ease-standard),
      opacity      var(--duration-fast) var(--ease-standard);
  }

  .site-footer__legal a:hover {
    opacity: 1;
    border-bottom-color: var(--white);
  }


  /* ----- Error page (404) ---------------------------------------------- */

  .error-page {
    padding-block: var(--space-9);
  }

  .error-page__code {
    display: block;
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: var(--color-accent);
    margin-bottom: var(--space-5);
  }

  .error-page__title {
    font-size: clamp(2.625rem, 1.6rem + 4.6vw, 5.25rem);
    font-weight: var(--font-light);
    line-height: 1.04;
    letter-spacing: -0.025em;
    margin: 0;
    text-wrap: balance;
    max-width: 16ch;
  }

  .error-page__title em {
    font-style: normal;
    color: var(--color-accent);
  }

  .error-page__lead {
    margin-top: var(--space-5);
    font-size: var(--text-lg);
    color: var(--color-text-muted);
    max-width: 56ch;
  }

  .error-page__links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-6);
    margin-top: var(--space-7);
  }

  .error-page__link {
    display: inline-flex;
    align-items: center;
    gap: 0.45em;
    font-weight: var(--font-medium);
    color: var(--color-text);
    text-decoration: none;
    border-bottom: 1px solid currentColor;
    padding-bottom: 2px;
    transition: color var(--duration-fast) var(--ease-standard);
  }

  .error-page__link::after {
    content: "→";
    transition: transform var(--duration-fast) var(--ease-standard);
  }

  .error-page__link:hover {
    color: var(--color-accent);
  }

  .error-page__link:hover::after {
    transform: translateX(2px);
  }


  /* ----- Filler band (full-bleed image, ~30vh) -------------------------
     Section breaks with photographic weight — bold tagline overlaid on a
     full-bleed image. White text, lighter top-right shade gradient (text
     anchors bottom-left). Hairline corner-marks frame the text block as
     a discrete editorial gesture.
     -------------------------------------------------------------------- */

  .filler-band {
    position: relative;
    width: 100%;
    height: clamp(20rem, 38vh, 28rem);
    overflow: hidden;
    background-color: var(--zinc-950);
    color: var(--white);
    isolation: isolate;
  }

  .filler-band__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 0;
  }

  .filler-band__shade {
    position: absolute;
    inset: 0;
    background:
      linear-gradient(
        to top right,
        rgba(0, 0, 0, 0.55) 0%,
        rgba(0, 0, 0, 0.25) 35%,
        rgba(0, 0, 0, 0) 70%
      );
    z-index: 1;
    pointer-events: none;
  }

  .filler-band__overlay {
    position: relative;
    z-index: 2;
    height: 100%;
    display: flex;
    align-items: flex-end;
    padding-block: clamp(var(--space-7), 8vh, var(--space-9));
  }

  .filler-band__inner {
    position: relative;
    padding-left: var(--space-5);
  }

  /* Hairline corner-mark on the top-left of the text block. */
  .filler-band__inner::before {
    content: "";
    position: absolute;
    top: -0.5em;
    left: 0;
    width: var(--space-5);
    height: var(--space-5);
    border-top: 1px solid rgba(255, 255, 255, 0.6);
    border-left: 1px solid rgba(255, 255, 255, 0.6);
    pointer-events: none;
  }

  .filler-band__caption {
    display: block;
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: var(--white);
    opacity: 0.78;
    margin-bottom: var(--space-4);
  }

  .filler-band__tagline {
    font-size: clamp(2rem, 1.25rem + 3.4vw, 4rem);
    font-weight: var(--font-light);
    line-height: 1.05;
    letter-spacing: -0.025em;
    color: var(--white);
    margin: 0;
    max-width: 22ch;
    text-wrap: balance;
  }


  /* ----- Buttons (Phase 12 Pass B) -------------------------------------
     Two variants — `--primary` is the gradient red that already lived on
     the header CTA, lifted into a reusable component. `--ghost` is the
     outline counterpart for secondary actions. The pair keeps every CTA
     across the page in the same visual register. Outlines + the gradient
     are the two strongest gestures the design carries; everything else
     falls out from typography and whitespace.
     -------------------------------------------------------------------- */

  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55em;
    padding: 0.75rem var(--space-5);
    font-family: inherit;
    font-size: var(--text-base);
    font-weight: var(--font-medium);
    letter-spacing: var(--tracking-tight);
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    border: 1px solid transparent;
    border-radius: 0;
    white-space: nowrap;
    transition:
      transform   var(--duration-fast) var(--ease-emphasized),
      box-shadow  var(--duration-fast) var(--ease-standard),
      filter      var(--duration-fast) var(--ease-standard),
      background-color var(--duration-fast) var(--ease-standard),
      color       var(--duration-fast) var(--ease-standard),
      border-color var(--duration-fast) var(--ease-standard);
  }

  .btn__icon {
    flex-shrink: 0;
    width: 1.05em;
    height: 1.05em;
    transition: transform var(--duration-fast) var(--ease-emphasized);
  }

  .btn:hover .btn__icon,
  .btn:focus-visible .btn__icon {
    transform: translateX(2px);
  }

  /* Primary — tonal red gradient, white text, inset hairline on hover for
     a touch of weight. Same visual language as the header Kontakt CTA. */
  .btn--primary {
    background-color: var(--color-accent); /* fallback */
    background-image: linear-gradient(140deg, var(--red-700) 0%, var(--red-800) 50%, var(--red-900) 100%);
    color: var(--white);
    border-color: transparent;
  }

  .btn--primary:hover,
  .btn--primary:focus-visible {
    color: var(--white);
    transform: translateY(-1px);
    filter: brightness(1.05);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
  }

  /* Ghost — outline counterpart. Uses the accent border + accent text;
     hover swaps to a filled red surface for affordance without changing
     dimensions (border-color stays accent, just inks the inside). */
  .btn--ghost {
    background-color: transparent;
    color: var(--color-accent);
    border-color: var(--color-accent);
  }

  .btn--ghost:hover,
  .btn--ghost:focus-visible {
    background-color: var(--color-accent);
    color: var(--white);
    transform: translateY(-1px);
  }

  @media (prefers-reduced-motion: reduce) {
    .btn,
    .btn__icon {
      transition: filter var(--duration-fast) var(--ease-standard);
    }
    .btn:hover,
    .btn:focus-visible,
    .btn:hover .btn__icon,
    .btn:focus-visible .btn__icon {
      transform: none;
    }
  }


  /* ----- Visually hidden utility ---------------------------------------
     Accessible-but-invisible — keeps screen readers fed while removing
     the element from the visual flow. Used by the projekte search form's
     hidden `<label>`.
     -------------------------------------------------------------------- */
  .visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }


  /* ----- Subpage hero (Phase 4) ----------------------------------------
     Half-height counterpart to the home `.hero-slider` — a single full-bleed
     image with title + lede overlaid. Used by /projekte (and the project
     detail's `.project-hero`, which adapts the same vocabulary). Body class
     `has-hero` keeps the header transparent over the image until scroll.
     -------------------------------------------------------------------- */

  .subpage-hero {
    position: relative;
    width: 100%;
    height: clamp(22rem, 50vh, 34rem);
    overflow: hidden;
    background-color: var(--zinc-950);
    color: var(--white);
    isolation: isolate;
  }

  .subpage-hero__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 0;
  }

  /* Three-layer shade — a top-down band gives the fixed header weight to
     read against, the diagonal layer adds bottom-left depth, and a flat
     baseline keeps centred middle content legible against bright photos. */
  .subpage-hero__shade {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
      linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.42) 0%,
        rgba(0, 0, 0, 0.18) 28%,
        rgba(0, 0, 0, 0)    55%
      ),
      linear-gradient(
        to top right,
        rgba(0, 0, 0, 0.60) 0%,
        rgba(0, 0, 0, 0.32) 45%,
        rgba(0, 0, 0, 0.10) 80%,
        rgba(0, 0, 0, 0)    100%
      ),
      rgba(0, 0, 0, 0.14);
  }

  .subpage-hero__overlay {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Centred content rhythm — title + lede sit in the middle of the
     hero column. Eyebrow keeps its hairline prefix but it now sits
     centred too, so we suppress the absolute pseudo and use a flex
     row with a hairline ::before that reads symmetric. */
  .subpage-hero__overlay-inner {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    color: var(--white);
    align-items: center;
    text-align: center;
  }

  .subpage-hero__eyebrow {
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.85);
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
  }

  .subpage-hero__eyebrow::before,
  .subpage-hero__eyebrow::after {
    content: "";
    width: var(--space-3);
    height: 1px;
    background-color: rgba(255, 255, 255, 0.8);
  }

  .subpage-hero__display {
    font-size: clamp(1.875rem, 1rem + 3vw, 3.25rem);
    font-weight: var(--font-light);
    letter-spacing: var(--tracking-tight);
    line-height: 1.05;
    color: var(--white);
    margin: 0;
    max-width: 22ch;
  }

  .subpage-hero__display em {
    font-style: normal;
    color: var(--white);
    font-weight: var(--font-medium);
  }

  .subpage-hero__lead {
    font-size: var(--text-lg);
    line-height: var(--leading-normal);
    color: rgba(255, 255, 255, 0.92);
    margin: 0;
    max-width: 52ch;
  }

  /* Project detail's hero is the subpage-hero with project-specific
     content — same dimensions, same overlay treatment, different markup
     class so we can vary type sizes without leaking back into /projekte.
     `--hero` sizes preset on the image keeps it crisp at any width. */
  .project-hero {
    position: relative;
    width: 100%;
    height: clamp(22rem, 50vh, 36rem);
    overflow: hidden;
    background-color: var(--zinc-950);
    color: var(--white);
    isolation: isolate;
  }

  .project-hero__media {
    position: absolute;
    inset: 0;
    z-index: 0;
  }

  .project-hero__media img,
  .project-hero__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
  }

  .project-hero__shade {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
      linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.42) 0%,
        rgba(0, 0, 0, 0.18) 28%,
        rgba(0, 0, 0, 0)    55%
      ),
      linear-gradient(
        to top right,
        rgba(0, 0, 0, 0.62) 0%,
        rgba(0, 0, 0, 0.34) 45%,
        rgba(0, 0, 0, 0.12) 80%,
        rgba(0, 0, 0, 0)    100%
      ),
      rgba(0, 0, 0, 0.14);
  }

  .project-hero__overlay {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Centred content — matches the subpage-hero rhythm so /projekte/{slug}
     reads as part of the same family. Eyebrow uses the symmetric flex
     hairline ::before/::after pattern instead of the absolute left-tag. */
  .project-hero__overlay-inner {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    align-items: center;
    text-align: center;
  }

  .project-hero__eyebrow {
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.88);
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
  }

  .project-hero__eyebrow::before,
  .project-hero__eyebrow::after {
    content: "";
    width: var(--space-3);
    height: 1px;
    background-color: rgba(255, 255, 255, 0.8);
  }

  .project-hero__display {
    font-size: clamp(2rem, 1.25rem + 3.2vw, 3.5rem);
    font-weight: var(--font-light);
    letter-spacing: var(--tracking-tight);
    line-height: 1.05;
    color: var(--white);
    margin: 0;
    max-width: 24ch;
  }

  .project-hero__display em {
    font-style: normal;
    color: var(--white);
    font-weight: var(--font-medium);
  }

  .project-hero__lead {
    font-size: var(--text-lg);
    line-height: var(--leading-normal);
    color: rgba(255, 255, 255, 0.92);
    margin: 0;
    max-width: 56ch;
  }


  /* ----- Filter-docked section modifier --------------------------------
     Trims the top padding on a section that opens with a docked filter
     bar — the docked bar's own block padding + hairline already provide
     the visual separator from the hero above, so the generic `.section`
     padding-block-start would read as wasted air.
     -------------------------------------------------------------------- */
  .section--filter-docked {
    padding-block-start: var(--space-5);
  }


  /* ----- AJAX swap target + loading state ------------------------------
     Wraps the filter bar + pills + count + grid + pagination so the
     projekte.js helper can fetch a new URL and replace the whole block.
     `data-loading="true"` dims the region during the in-flight fetch.
     -------------------------------------------------------------------- */
  [data-projekte-content] {
    transition: opacity var(--duration-fast) var(--ease-standard);
  }

  [data-projekte-content][data-loading="true"] {
    opacity: 0.6;
    pointer-events: none;
  }


  /* ----- Filter bar (Phase 4) ------------------------------------------
     Search form + kategorie chips, side-by-side at ≥800px, stacked below.
     Pure HTML/CSS — no JS, the form submits to /projekte and chips are
     anchors that update the URL.
     -------------------------------------------------------------------- */

  .filter-bar {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    margin-block: 0 var(--space-5);
    /* Full-bleed dock: break horizontally out of the container, restore the
       inner alignment via padding-inline so the form + chips line up with
       the grid below. The viewport-edge bleed is what makes the bar read
       as a docked toolbar when sticky kicks in. */
    margin-inline: calc(50% - 50vw);
    padding-inline: max(var(--space-5), calc(50vw - 50%));
    padding-block: var(--space-4);
    border-block: 1px solid var(--color-border);
    background-color: var(--color-bg);
    position: sticky;
    top: var(--header-height);
    /* Above the grid, comfortably below the site header (z 50). */
    z-index: 5;
  }

  @media (min-width: 800px) {
    .filter-bar {
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      gap: var(--space-6);
    }
  }

  .filter-bar__search {
    display: flex;
    align-items: stretch;
    border: 1px solid var(--color-border);
    background-color: var(--color-bg);
    transition: border-color var(--duration-fast) var(--ease-standard);
    flex: 1 1 auto;
    max-width: 28rem;
  }

  .filter-bar__search:focus-within {
    border-color: var(--color-accent);
  }

  .filter-bar__input {
    flex: 1 1 auto;
    border: 0;
    background: transparent;
    padding: var(--space-3) var(--space-4);
    font-family: inherit;
    font-size: var(--text-base);
    color: var(--color-text);
    min-width: 0;
  }

  .filter-bar__input:focus {
    outline: 0;
  }

  .filter-bar__submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    background-color: var(--color-accent);
    border: 0;
    color: var(--white);
    cursor: pointer;
    transition:
      filter var(--duration-fast) var(--ease-standard);
  }

  .filter-bar__submit:hover,
  .filter-bar__submit:focus-visible {
    filter: brightness(1.08);
    outline: 0;
  }

  .filter-bar__submit-icon {
    width: 1rem;
    height: 1rem;
  }

  .filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
  }

  .filter-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1rem;
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    letter-spacing: var(--tracking-tight);
    color: var(--color-text);
    text-decoration: none;
    border: 1px solid var(--color-border);
    background-color: var(--color-bg);
    transition:
      border-color    var(--duration-fast) var(--ease-standard),
      background-color var(--duration-fast) var(--ease-standard),
      color           var(--duration-fast) var(--ease-standard);
  }

  .filter-chip:hover,
  .filter-chip:focus-visible {
    border-color: var(--color-accent);
    color: var(--color-accent);
    outline: 0;
  }

  .filter-chip.is-active {
    background-color: var(--color-accent);
    border-color: var(--color-accent);
    color: var(--white);
  }

  .filter-chip.is-active:hover,
  .filter-chip.is-active:focus-visible {
    background-color: var(--color-accent-hover, var(--color-accent));
    border-color: var(--color-accent-hover, var(--color-accent));
    color: var(--white);
    filter: brightness(1.05);
  }


  /* ----- Active filter pills -------------------------------------------
     Shows currently-applied filters as removable pills. Each pill is a
     link to the same URL minus that filter — click `×` to drop it. The
     "Alle zurücksetzen" anchor goes to bare `/projekte`.
     -------------------------------------------------------------------- */

  .filter-pills {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    margin-block-end: var(--space-4);
  }

  .filter-pills__label {
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--color-text-muted);
    margin-inline-end: var(--space-2);
  }

  .filter-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 0.375rem 0.75rem;
    font-size: var(--text-sm);
    color: var(--color-text);
    text-decoration: none;
    border: 1px solid var(--color-border-strong, var(--color-border));
    background-color: var(--color-bg);
    transition:
      border-color    var(--duration-fast) var(--ease-standard),
      color           var(--duration-fast) var(--ease-standard),
      background-color var(--duration-fast) var(--ease-standard);
  }

  .filter-pill:hover,
  .filter-pill:focus-visible {
    border-color: var(--color-accent);
    color: var(--color-accent);
    outline: 0;
  }

  .filter-pill__x {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1rem;
    height: 1rem;
    line-height: 1;
    font-size: 1.125rem;
    font-weight: var(--font-medium);
  }

  .filter-pills__clear {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    text-decoration: underline;
    text-underline-offset: 3px;
    margin-inline-start: var(--space-2);
  }

  .filter-pills__clear:hover,
  .filter-pills__clear:focus-visible {
    color: var(--color-accent);
    outline: 0;
  }


  /* ----- Filter count + empty state ------------------------------------ */

  .filter-count {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    margin-block: 0 var(--space-5);
  }

  .filter-count__sub {
    color: var(--color-text-subtle, var(--color-text-muted));
  }

  .empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-8) var(--space-5);
    border: 1px dashed var(--color-border);
    text-align: center;
  }

  .empty-state__title {
    font-size: var(--text-xl);
    font-weight: var(--font-medium);
    margin: 0;
  }

  .empty-state__body {
    color: var(--color-text-muted);
    margin: 0 0 var(--space-3);
    max-width: 40ch;
  }


  /* ----- Project index grid --------------------------------------------
     Responsive 1/2/3-up grid for the /projekte index and the detail
     page's "Mehr Projekte" footer. Each item reuses the existing
     `.project-card` (outline aesthetic) — `.project-card--index` is just
     a marker for any future per-context tweaks.
     -------------------------------------------------------------------- */

  .project-index-grid {
    list-style: none;
    margin: 0 0 var(--space-7);
    padding: 0;
    /* Override base.css's `:where(ul, ol) { max-width: 70ch }` rule —
       that's a prose constraint for list elements inside markdown bodies,
       but it silently caps any layout-ul at ~817px. Without `none` here,
       the grid is stuck at 70ch regardless of how wide its container is,
       which makes auto-fit calculate the same column count at any
       viewport above ~900px. */
    max-width: none;
    display: grid;
    /* 16rem (256px) min-track. Canonical form — earlier `min(100%, 18rem)`
       wrap had a Chromium quirk inside `minmax → auto-fit`. */
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: var(--space-5);
  }

  @media (min-width: 1000px) {
    .project-index-grid {
      gap: var(--space-6);
    }
  }

  /* `min-width: 0` defangs the flex-item min-content sizing so a long
     German compound word inside a card body can't push the column wider
     than the auto-fit minimum. Without it, cells with long unbreakable
     content can stretch tracks — which doesn't reduce column count, but
     can produce uneven row heights that read as a layout break. */
  .project-index-grid__item {
    display: flex;
    min-width: 0;
  }

  .project-index-grid__item > .project-card {
    width: 100%;
  }

  .project-index-grid--related {
    margin-block: var(--space-3) 0;
  }


  /* ----- Pagination ----------------------------------------------------
     "Mehr laden" link to ?seite=N+1, accompanied by a quiet "X von Y"
     progress label. Server-side cumulative — page 2 renders 24 cards,
     page 3 renders 36, etc.
     -------------------------------------------------------------------- */

  .pagination {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    margin-block: var(--space-7) var(--space-5);
  }

  .pagination__more {
    min-width: 12rem;
    justify-content: center;
  }

  .pagination__progress {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    font-feature-settings: "tnum" 1;
  }


  /* ----- Project detail body + gallery --------------------------------- */

  .project-detail__body {
    max-width: 56rem;
    margin: 0 auto var(--space-7);
    font-size: var(--text-lg);
    line-height: var(--leading-relaxed);
    color: var(--color-text);
  }

  .project-detail__body h2 {
    font-size: clamp(1.5rem, 1rem + 1.4vw, 2rem);
    font-weight: var(--font-light);
    letter-spacing: var(--tracking-tight);
    margin-block: var(--space-7) var(--space-3);
  }

  .project-detail__body h3 {
    font-size: var(--text-xl);
    font-weight: var(--font-medium);
    margin-block: var(--space-6) var(--space-2);
  }

  .project-detail__body p {
    margin-block: 0 var(--space-4);
  }

  .project-detail__body a {
    color: var(--color-accent);
    text-underline-offset: 3px;
  }

  .gallery {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-4);
    margin-block: var(--space-7) var(--space-5);
  }

  @media (min-width: 700px) {
    .gallery {
      grid-template-columns: 1fr 1fr;
      gap: var(--space-5);
    }
  }

  .gallery__item {
    margin: 0;
    border: 1px solid var(--color-border);
    overflow: hidden;
    background-color: var(--color-bg-muted);
  }

  .gallery__item img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    aspect-ratio: 4 / 3;
  }


  /* ----- Service pages (/leistungen/*) ---------------------------------
     Long-form editorial copy with measured body width, hairline-bordered
     phase rows and a brandschutz reference list. Shares the outline
     vocabulary with project cards / faq items / job items.
     -------------------------------------------------------------------- */

  .service-page__intro {
    max-width: 60ch;
    margin: 0 auto var(--space-7);
    color: var(--color-text-muted);
    font-size: var(--text-lg);
    line-height: 1.6;
  }

  .service-page__intro p + p {
    margin-block-start: var(--space-4);
  }

  .service-page__body {
    max-width: 56rem;
    margin: 0 auto;
  }

  .service-page__body > p {
    margin: 0 0 var(--space-4);
    font-size: var(--text-base);
    line-height: 1.7;
  }

  .service-page__h2 {
    font-size: var(--text-xl);
    font-weight: var(--font-medium);
    margin: var(--space-7) 0 var(--space-4);
    letter-spacing: -0.005em;
  }

  .service-page__h2:first-child {
    margin-block-start: 0;
  }

  .service-page__list {
    list-style: none;
    margin: 0 0 var(--space-6);
    padding: 0;
    /* Override base.css `:where(ul, ol) { max-width: 70ch }` — body
       wrapper already sets the measure. */
    max-width: none;
  }

  .service-page__list li {
    position: relative;
    padding-block: var(--space-3);
    padding-inline-start: var(--space-5);
    border-block-end: 1px solid var(--color-border);
    line-height: 1.6;
  }

  .service-page__list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: calc(var(--space-3) + 0.6em);
    width: 0.625rem;
    height: 1px;
    background-color: var(--color-accent);
  }

  .service-page__list li:last-child {
    border-block-end: 0;
  }

  .service-page__list--detail li {
    display: grid;
    grid-template-columns: minmax(0, 16rem) minmax(0, 1fr);
    gap: var(--space-4);
    align-items: baseline;
  }

  @media (max-width: 720px) {
    .service-page__list--detail li {
      grid-template-columns: minmax(0, 1fr);
      gap: var(--space-1);
    }
  }

  .service-page__list-label {
    font-weight: var(--font-medium);
    color: var(--color-text);
  }

  .service-page__phasen {
    list-style: none;
    margin: 0 0 var(--space-6);
    padding: 0;
    max-width: none;
    counter-reset: none;
  }

  .service-page__phase {
    display: grid;
    grid-template-columns: 5rem minmax(0, 1fr);
    gap: var(--space-5);
    align-items: start;
    padding: var(--space-5) 0;
    border-block-end: 1px solid var(--color-border);
  }

  .service-page__phase:last-child {
    border-block-end: 0;
  }

  .service-page__phase-num {
    font-family: var(--font-sans);
    font-size: var(--text-2xl);
    font-weight: var(--font-light);
    color: var(--color-accent);
    letter-spacing: -0.01em;
    line-height: 1;
  }

  .service-page__phase-label {
    font-size: var(--text-lg);
    font-weight: var(--font-medium);
    margin: 0 0 var(--space-2);
    line-height: 1.3;
  }

  .service-page__phase-body p {
    margin: 0;
    color: var(--color-text-muted);
    line-height: 1.6;
  }

  @media (max-width: 600px) {
    .service-page__phase {
      grid-template-columns: 1fr;
      gap: var(--space-2);
    }
  }

  .service-page__columns {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
    gap: var(--space-5);
    margin: 0 0 var(--space-6);
  }

  .service-page__column {
    padding: var(--space-5);
    border: 1px solid var(--color-border);
    transition: border-color 200ms var(--ease-emphasized, ease);
  }

  .service-page__column:hover {
    border-color: var(--color-border-strong, var(--color-text));
  }

  .service-page__column-label {
    font-size: var(--text-base);
    font-weight: var(--font-medium);
    margin: 0 0 var(--space-2);
    color: var(--color-accent);
  }

  .service-page__column p {
    margin: 0;
    color: var(--color-text-muted);
    line-height: 1.55;
  }

  .service-page__cta-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-3);
    margin-block-start: var(--space-7);
    max-width: 56rem;
    margin-inline: auto;
  }

  /* Constrain `.about-block__stats` (default = full container width on
     the home teaser) to the same measured width as `.service-page__body`
     so the row aligns with the editorial type column when used on
     /ueber-uns. */
  .service-page__stats {
    max-width: 56rem;
    margin-inline: auto;
    margin-block-start: var(--space-7);
  }

  .service-page__decor {
    padding-block: var(--space-7);
  }

  .service-page__image-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
    gap: var(--space-3);
  }

  .service-page__image-item {
    margin: 0;
    overflow: hidden;
    border: 1px solid var(--color-border);
    aspect-ratio: 4 / 3;
  }

  .service-page__image-item img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* ----- Service teasers on the /leistungen overview page -------------
     Three outline cards mirroring the project-card vocabulary. Each
     has its own oversized index numeral + Phosphor icon + title +
     lede + CTA, wrapped in an entire-card link.
     -------------------------------------------------------------------- */

  .service-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
    gap: var(--space-5);
    max-width: none;
  }

  .service-card-wrap {
    display: flex;
  }

  .service-card {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    border: 1px solid var(--color-border);
    background-color: var(--color-bg);
    transition: border-color 200ms var(--ease-emphasized, ease);
    width: 100%;
  }

  .service-card:hover,
  .service-card:focus-visible {
    border-color: var(--color-accent);
  }

  .service-card__media {
    overflow: hidden;
    aspect-ratio: 4 / 3;
    background-color: var(--color-bg-muted);
  }

  .service-card__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 600ms var(--ease-emphasized, ease);
  }

  .service-card:hover .service-card__media img,
  .service-card:focus-visible .service-card__media img {
    transform: scale(1.03);
  }

  .service-card__body {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-5);
    flex: 1;
  }

  .service-card__index {
    font-size: var(--text-sm);
    font-weight: var(--font-light);
    color: var(--color-text-muted);
    letter-spacing: 0.04em;
  }

  .service-card__icon {
    display: inline-flex;
    width: 2rem;
    height: 2rem;
    align-items: center;
    justify-content: center;
    color: var(--color-accent);
  }

  .service-card__title {
    font-size: var(--text-xl);
    font-weight: var(--font-medium);
    margin: 0;
    letter-spacing: -0.01em;
    transition: color 200ms var(--ease-emphasized, ease);
  }

  .service-card:hover .service-card__title,
  .service-card:focus-visible .service-card__title {
    color: var(--color-accent);
  }

  .service-card__lede {
    margin: 0;
    color: var(--color-text-muted);
    line-height: 1.55;
    flex: 1;
  }

  .service-card__cta {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin-block-start: var(--space-3);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    color: var(--color-accent);
  }

  .service-card__cta-icon {
    width: 1rem;
    height: 1rem;
    transition: transform 200ms var(--ease-emphasized, ease);
  }

  .service-card:hover .service-card__cta-icon,
  .service-card:focus-visible .service-card__cta-icon {
    transform: translate(2px, -2px);
  }

  /* ----- Brandschutz reference list -----------------------------------
     One row per Brandschutz-Referenz: title left, year + location
     right. Hairline-divided rows, no decoration beyond what the
     reference itself provides.
     -------------------------------------------------------------------- */

  .brandschutz-list {
    list-style: none;
    margin: 0 auto var(--space-6);
    padding: 0;
    max-width: 56rem;
  }

  .brandschutz-list__item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-4);
    align-items: baseline;
    padding: var(--space-4) var(--space-2);
    border-block-end: 1px solid var(--color-border);
  }

  .brandschutz-list__item:first-child {
    border-block-start: 1px solid var(--color-border);
  }

  .brandschutz-list__title {
    font-size: var(--text-base);
    font-weight: var(--font-medium);
    color: var(--color-text);
    line-height: 1.4;
  }

  .brandschutz-list__meta {
    display: inline-flex;
    align-items: baseline;
    gap: var(--space-2);
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }

  .brandschutz-list__sep {
    color: var(--color-border-strong, var(--color-text-muted));
  }

  @media (max-width: 540px) {
    .brandschutz-list__item {
      grid-template-columns: 1fr;
      gap: var(--space-1);
    }
  }

  /* ---------------------------------------------------------------------
     Phase 6 — Kontakt page. Two-column layout: details on the left
     (address + contact + hours), Google Maps iframe on the right.
     Stacks under 800 px. Outline aesthetic to match the rest.
     --------------------------------------------------------------------- */

  .contact-block {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-7);
    align-items: start;
    max-width: none;
    margin-block-start: var(--space-7);
  }

  @media (min-width: 800px) {
    .contact-block {
      grid-template-columns: minmax(18rem, 1fr) minmax(0, 1.4fr);
      gap: var(--space-8);
    }
  }

  .contact-block__details {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    max-width: none;
  }

  .contact-block__group {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    max-width: none;
  }

  .contact-block__h2 {
    margin: 0;
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: var(--color-text-muted);
  }

  .contact-block__address {
    margin: 0;
    font-style: normal;
    line-height: 1.55;
    color: var(--color-text);
  }

  .contact-block__address strong {
    font-weight: var(--font-medium);
    color: var(--color-text);
  }

  .contact-block__dl {
    margin: 0;
    display: grid;
    grid-template-columns: minmax(6rem, max-content) 1fr;
    column-gap: var(--space-4);
    row-gap: var(--space-2);
    align-items: baseline;
    max-width: none;
  }

  .contact-block__dl dt {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
  }

  .contact-block__dl dd {
    margin: 0;
    color: var(--color-text);
    font-variant-numeric: tabular-nums;
  }

  .contact-block__link {
    color: var(--color-text);
    text-decoration: none;
    border-bottom: 1px solid var(--color-border);
    padding-bottom: 1px;
    transition: color var(--duration-fast) var(--ease-standard),
                border-color var(--duration-fast) var(--ease-standard);
  }

  .contact-block__link:hover,
  .contact-block__link:focus-visible {
    color: var(--color-accent);
    border-bottom-color: var(--color-accent);
  }

  .contact-block__map {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    max-width: none;
  }

  .contact-block__map iframe {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    height: auto;
    border: 1px solid var(--color-border);
    background-color: var(--color-bg-muted, var(--color-bg));
  }

  @media (min-width: 800px) {
    .contact-block__map iframe {
      aspect-ratio: 5 / 4;
      min-height: 24rem;
    }
  }

  .contact-block__map-caption {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
  }

  .contact-block__map-caption a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
  }

  .contact-block__map-caption a:hover,
  .contact-block__map-caption a:focus-visible {
    color: var(--color-accent);
  }

}