/* ==========================================================================
   Beiskammer — Phase 0 component vocabulary
   --------------------------------------------------------------------------
   The visual language. Hero, sections, feature row, card grid, buttons,
   eyebrow labels, plus minimal site chrome (header/footer) so the Phase 0
   sandbox renders coherently. Phase 1 will properly build out the site
   shell on top of these primitives.
   ========================================================================== */

@layer components {

  /* ====================================================================
     UTILITIES: layout
     --------------------------------------------------------------------
     Centered inline container with the standard page gutter. Defaults to
     the `--container-default` cap; add `--wide` or `--narrow` for the
     other max-widths. Recipe lives in tokens.css (`--container-w*`).
     ==================================================================== */

  .container {
    width: var(--container-w);
    margin-inline: auto;
  }

  .container--wide   { width: var(--container-w-wide); }
  .container--narrow { width: var(--container-w-narrow); }

  /* ====================================================================
     UTILITIES: typography & meta
     ==================================================================== */

  .display {
    font-size: var(--text-display-md);
    line-height: 0.95;
    letter-spacing: var(--tracking-tightest);
    font-weight: var(--font-black);
    text-wrap: balance;
  }

  .display--lg { font-size: var(--text-display-lg); }
  .display--sm { font-size: var(--text-display-sm); }

  .lead {
    font-size: var(--text-lg);
    line-height: var(--leading-snug);
    color: var(--color-text-muted);
    max-width: 56ch;
    text-wrap: pretty;
  }

  .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--color-brand-strong);
  }

  .eyebrow::before {
    content: "";
    width: 1.5rem;
    height: 1px;
    background: currentColor;
    display: inline-block;
  }

  /* Accent keyword — used inside component headlines (`<em>word</em>`)
     to drop one phrase into brand green. Stays out of `.prose` so
     markdown body emphasis still reads as italic. Stays out of
     `.cta-strip__title` because the CTA strip is on the brand fill
     itself — accent text there would disappear. */
  :where(.hero__title, .section__title, .feature-row__title, .reasons__title, .display) em {
    font-style: normal;
    color: var(--color-brand);
  }

  /* ====================================================================
     SECTIONS
     --------------------------------------------------------------------
     Default section: light surface, generous vertical rhythm. The ink
     variant flips the section to near-black with the brand-green
     reserved as the signature accent.
     ==================================================================== */

  .section {
    padding-block: clamp(var(--space-8), 6vw, var(--space-10));
    position: relative;
  }

  .section--compact { padding-block: var(--space-7); }
  .section--tight   { padding-block: var(--space-6); }

  .section--subtle  { background-color: var(--color-bg-subtle); }

  .section--ink {
    background-color: var(--color-ink);
    color: var(--color-on-ink);
    --color-text: var(--color-on-ink);
    --color-text-muted: var(--color-on-ink-muted);
    --color-text-subtle: var(--color-on-ink-subtle);
    --color-border: var(--color-border-on-ink);
    --color-border-strong: var(--color-border-on-ink);
  }

  .section--ink .eyebrow { color: var(--color-brand); }
  .section--ink :focus-visible { outline-color: var(--color-brand); }

  .section__head {
    width: var(--container-w-wide);
    margin-inline: auto;
    margin-bottom: var(--space-7);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
  }

  .section__head .lead { max-width: 60ch; }

  .section__title {
    font-size: var(--text-3xl);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tighter);
    font-weight: var(--font-bold);
    text-wrap: balance;
  }

  @media (min-width: 48rem) {
    .section__title { font-size: var(--text-4xl); }
  }

  /* ====================================================================
     BUTTONS
     --------------------------------------------------------------------
     Inline-flex, generous tap target, no decorative underline. Primary
     is brand-green fill with ink text — the signature CTA shape. Inside
     .section--ink variants automatically read correctly (green-on-dark).
     ==================================================================== */

  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: 0.85rem 1.4rem;
    font-family: inherit;
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    line-height: 1;
    letter-spacing: -0.005em;
    text-decoration: none;
    border-radius: var(--radius-full);
    border: 1px solid transparent;
    cursor: pointer;
    transition: transform var(--duration-fast) var(--ease-standard),
                background-color var(--duration-fast) var(--ease-standard),
                border-color var(--duration-fast) var(--ease-standard),
                color var(--duration-fast) var(--ease-standard),
                box-shadow var(--duration-fast) var(--ease-standard);
    white-space: nowrap;
  }

  .btn:active { transform: translateY(1px); }

  .btn--lg {
    padding: 1.05rem 1.75rem;
    font-size: var(--text-lg);
  }

  .btn--sm {
    padding: 0.55rem 1rem;
    font-size: var(--text-sm);
  }

  /* Primary — brand-green fill, ink text. Works on light AND ink. */
  .btn--primary {
    background-color: var(--color-brand);
    color: var(--color-brand-fg);
  }
  .btn--primary:hover {
    background-color: var(--color-brand-hover);
  }

  /* Secondary — ink fill, white text. Looks distinctive on light pages. */
  .btn--secondary {
    background-color: var(--color-ink);
    color: var(--color-on-ink);
  }
  .btn--secondary:hover {
    background-color: var(--neutral-700);
  }

  /* Ghost — transparent, current-color border. Adapts to ink. */
  .btn--ghost {
    background-color: transparent;
    color: currentColor;
    border-color: currentColor;
  }
  .btn--ghost:hover {
    background-color: var(--color-text);
    color: var(--color-bg);
  }

  .section--ink .btn--ghost:hover {
    background-color: var(--color-on-ink);
    color: var(--color-ink);
  }

  /* Arrow affordance — appended via ::after to any .btn--arrow. */
  .btn--arrow::after {
    content: "→";
    transition: transform var(--duration-fast) var(--ease-standard);
  }
  .btn--arrow:hover::after { transform: translateX(3px); }

  /* ====================================================================
     SITE CHROME
     --------------------------------------------------------------------
     The announce bar lives in `.site-chrome-top` at the top of the flow
     and scrolls away normally. The `.site-header` is a sibling (not
     nested here) so `position: sticky` can pin it against the tall
     <body>. On hero pages it overlays the photo as a transparent bar and
     condenses/solidifies once scrolled — see the `.header-stuck` rules.
     ==================================================================== */

  .site-chrome-top {
    position: relative;
    z-index: 30;
  }

  /* Vacation banner — sitewide notice strip (Betriebsurlaub, geänderte
     Öffnungszeiten). Sits above the green announce bar; deliberately dark
     (#222) so it reads as a distinct "Hinweis", not a second promo. Admin-
     toggled (see partials/vacation_banner.php). PERSISTENT + not dismissable —
     the dismissible counterpart is the modal below. Centered icon + message;
     wraps to two lines on narrow screens (vacation copy runs longer than the
     promo). */
  .vacation-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: 0.45rem var(--space-4);
    background-color: var(--color-ink);
    color: var(--color-on-ink);
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    line-height: 1.35;
    text-align: center;
  }

  .vacation-bar__icon {
    display: inline-flex;
    flex-shrink: 0;
    color: var(--color-brand);
    margin-top: -1px;
  }

  /* Links + bold the client may drop into the markdown message. */
  .vacation-bar__text :is(a) {
    color: var(--color-on-ink);
    text-decoration-color: var(--color-brand);
    text-underline-offset: 0.18em;
    font-weight: var(--font-semibold);
  }

  .vacation-bar__text :is(a):hover {
    text-decoration-color: var(--color-on-ink);
  }

  .vacation-bar__text strong { font-weight: var(--font-semibold); }

  /* With JS the vacation bar pins to the top of the viewport, together with
     the header — the green announce bar between them scrolls away. chrome.js
     publishes `--vac-h` (the bar's height) so the header sticks flush below
     it. No-JS: a normal block that scrolls away with the announce bar (the
     header then pins at the very top, as before). It lives OUTSIDE
     `.site-chrome-top` so the sticky pins to the viewport, not that short box. */
  .js .vacation-bar {
    position: sticky;
    top: 0;
    z-index: 41;
  }

  @media (min-width: 56rem) {
    .vacation-bar {
      padding-block: 0.6rem;
      font-size: var(--text-sm);
    }
  }

  /* Vacation notice MODAL — the dismissible counterpart to the bar. Rendered
     body-level (escapes the header stacking context), ships `hidden`, revealed
     by assets/js/vacation-modal.js only when not dismissed this session.
     Dark scrim + centered card; fades/lifts in. */
  .vac-modal {
    position: fixed;
    inset: 0;
    z-index: 1100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-5);
    background-color: rgb(34 34 34 / 0.55);
    opacity: 0;
    /* Don't intercept clicks until actually open — otherwise the invisible
       (opacity:0) overlay would swallow every click on the page below. */
    pointer-events: none;
    transition: opacity var(--duration-normal) var(--ease-standard);
  }

  /* Authoritative hide: this MUST beat `display: flex` above, or the `hidden`
     attribute does nothing and the dismissed overlay keeps blocking clicks. */
  .vac-modal[hidden] { display: none; }

  .vac-modal[data-state="open"] {
    opacity: 1;
    pointer-events: auto;
  }

  .vac-modal__card {
    position: relative;
    width: min(100%, 30rem);
    max-height: calc(100dvh - 2 * var(--space-5));
    overflow-y: auto;
    padding: var(--space-7) var(--space-6) var(--space-6);
    background-color: var(--color-bg);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-ink);
    text-align: center;
    transform: translateY(10px) scale(0.98);
    transition: transform var(--duration-normal) var(--ease-standard);
  }

  .vac-modal[data-state="open"] .vac-modal__card { transform: none; }

  .vac-modal__close {
    position: absolute;
    top: var(--space-3);
    right: var(--space-3);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    border: 0;
    border-radius: var(--radius-full);
    background: transparent;
    color: var(--color-text-muted);
    cursor: pointer;
    transition: color var(--duration-fast) var(--ease-standard),
                background-color var(--duration-fast) var(--ease-standard);
  }

  .vac-modal__close:hover {
    color: var(--color-text);
    background-color: var(--color-bg-muted);
  }

  .vac-modal__close:focus-visible {
    outline: 2px solid var(--color-brand);
    outline-offset: 2px;
  }

  /* Brand-tinted calendar badge above the title. */
  .vac-modal__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    margin-bottom: var(--space-4);
    border-radius: var(--radius-full);
    background-color: color-mix(in srgb, var(--color-brand) 22%, transparent);
    color: var(--color-brand-strong);
  }

  .vac-modal__title {
    margin: 0 0 var(--space-3);
    font-size: var(--text-2xl);
    font-weight: var(--font-bold);
    line-height: 1.15;
    color: var(--color-ink);
  }

  .vac-modal__text {
    margin: 0 auto;
    color: var(--color-text);
    line-height: 1.6;
  }

  .vac-modal__text > :first-child { margin-top: 0; }
  .vac-modal__text > :last-child  { margin-bottom: 0; }
  .vac-modal__text p { margin-block: 0.5em; }

  .vac-modal__text :is(a) {
    color: var(--color-brand-strong);
    text-underline-offset: 0.18em;
    font-weight: var(--font-semibold);
  }

  .vac-modal__ok {
    margin-top: var(--space-5);
    width: 100%;
  }

  /* Honor reduced-motion: appear instantly, no lift/fade. */
  @media (prefers-reduced-motion: reduce) {
    .vac-modal,
    .vac-modal__card {
      transition: none;
    }
    .vac-modal__card { transform: none; }
  }

  /* Announcement bar — full-width brand promo strip linking to the
     Arbeitskleidung channel. One line always; ellipsis-clipped if the
     viewport gets too narrow. Mobile gets a quieter footprint. */
  .announce-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    flex-wrap: nowrap;
    padding: 0.35rem var(--space-4);
    background-color: var(--color-brand);
    color: var(--color-brand-fg);
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    letter-spacing: -0.005em;
    line-height: 1.2;
    text-decoration: none;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    transition: background-color var(--duration-fast) var(--ease-standard);
  }

  /* Inner message clips with an ellipsis if there isn't enough room —
     keeps the bar honest at one line on every screen. */
  .announce-bar > span:not(.announce-bar__arrow) {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .announce-bar:hover { background-color: var(--color-brand-hover); }

  .announce-bar__kicker {
    font-weight: var(--font-bold);
  }

  /* Hide the "Jetzt:" kicker on narrow mobile — the rest of the
     message reads on its own and we recover ~3rem of horizontal room. */
  @media (max-width: 30rem) {
    .announce-bar__kicker {
      display: none;
    }
  }

  .announce-bar__arrow {
    display: inline-block;
    flex-shrink: 0;
    transition: transform var(--duration-fast) var(--ease-standard);
  }

  .announce-bar:hover .announce-bar__arrow { transform: translateX(3px); }

  @media (min-width: 56rem) {
    .announce-bar {
      padding: 0.6rem var(--space-5);
      font-size: var(--text-sm);
    }
  }

  /* Site header — sticky on every page. The announce bar above it scrolls
     away; the header then pins to the top. `.header-stuck` (toggled by
     chrome.js once the announce bar / hero is scrolled past) condenses it
     and adds a lift shadow. */
  .site-header {
    position: sticky;
    top: 0;
    z-index: 40;
    padding-block: var(--space-4);
    background-color: var(--color-bg);
    color: var(--color-text);
    border-bottom: 1px solid var(--color-border);
    transition: padding-block var(--duration-normal) var(--ease-standard),
                background-color var(--duration-normal) var(--ease-standard),
                color var(--duration-normal) var(--ease-standard),
                box-shadow var(--duration-normal) var(--ease-standard),
                border-color var(--duration-normal) var(--ease-standard);
  }

  /* When a vacation bar is present + sticky (JS only), the header sticks flush
     below it via `--vac-h`. No banner → `--vac-h` is 0px → header pins at the
     very top (unchanged). No-JS → this rule doesn't apply, header stays top:0. */
  .js .site-header {
    top: var(--vac-h, 0px);
  }

  body.header-stuck .site-header {
    padding-block: var(--space-3);
    box-shadow: var(--shadow-md);
  }

  .site-header__inner {
    width: var(--container-w-wide);
    margin-inline: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-5);
  }

  .site-header__brand {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    color: inherit;
  }

  .site-header__brand img {
    height: 2.25rem;
    width: auto;
    display: block;
  }

  .site-header__nav {
    display: flex;
    align-items: center;
    gap: clamp(var(--space-4), 2.4vw, var(--space-6));
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
  }

  .site-header__nav a {
    color: inherit;
    text-decoration: none;
    padding-block: var(--space-2);
    border-bottom: 1px solid transparent;
    transition: border-color var(--duration-fast) var(--ease-standard);
  }

  .site-header__nav a:hover,
  .site-header__nav a[aria-current="page"] {
    border-bottom-color: var(--color-brand);
  }

  /* Desktop phone CTA — brand-green pill, right of the nav. Hidden on
     mobile (the mobile-nav overlay carries it instead). */
  .site-header__phone {
    display: none;
  }

  .site-header__phone-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .site-header__phone-icon svg {
    display: block;
  }

  @media (min-width: 56rem) {
    .site-header__phone {
      display: inline-flex;
    }
  }

  /* Hamburger trigger — visible only on mobile. */
  .site-header__menu-trigger {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: transparent;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-full);
    color: inherit;
    font: inherit;
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    cursor: pointer;
    transition: border-color var(--duration-fast) var(--ease-standard),
                background-color var(--duration-fast) var(--ease-standard);
  }

  .site-header__menu-trigger:hover {
    border-color: var(--color-brand);
  }

  .site-header__menu-icon {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    width: 1.125rem;
    height: 0.875rem;
  }

  .site-header__menu-icon span {
    display: block;
    height: 2px;
    background: currentColor;
    border-radius: 1px;
  }

  .site-header__menu-icon span:nth-child(2) { width: 75%; margin-left: auto; }

  @media (min-width: 56rem) {
    .site-header__menu-trigger {
      display: none;
    }
  }

  /* On mobile, the nav itself is hidden inline — it lives in the overlay.
     Only hide it when JS is available (the inline script in <head> adds
     the .js class). Without JS, the hamburger does nothing, so we keep
     the inline nav visible as a fallback. */
  @media (max-width: 55.999rem) {
    .js .site-header__nav {
      display: none;
    }
  }

  /* No-JS fallback: hide the hamburger so the inline nav reads cleanly. */
  html:not(.js) .site-header__menu-trigger {
    display: none;
  }

  html:not(.js) .mobile-nav {
    display: none;
  }

  /* Hero pages: the sticky header overlays the hero photo as a transparent
     bar. chrome.js measures the header and exposes its height as
     --header-h; the hero is pulled up by that amount so the photo sits
     behind the header. JS-gated — without JS the header is just a normal
     solid sticky bar sitting above the hero (clean fallback). */
  .js body.has-hero .site-header {
    background-color: transparent;
    color: var(--color-on-ink);
    border-bottom-color: transparent;
    box-shadow: none;
  }

  .js body.has-hero .hero {
    margin-top: calc(var(--header-h, 4.5rem) * -1);
  }

  body.has-hero .site-header__brand img {
    filter: drop-shadow(0 2px 10px rgb(0 0 0 / 0.25));
  }

  body.has-hero .site-header__menu-trigger {
    border-color: rgb(255 255 255 / 0.4);
    background-color: rgb(0 0 0 / 0.2);
    backdrop-filter: blur(8px);
  }

  body.has-hero .site-header__menu-trigger:hover {
    border-color: var(--color-brand);
  }

  /* Once the hero has scrolled past, the overlay resolves into the normal
     light sticky bar. These win over the transparent hero rules above. */
  .js body.has-hero.header-stuck .site-header {
    background-color: var(--color-bg);
    color: var(--color-text);
    border-bottom-color: var(--color-border);
    box-shadow: var(--shadow-md);
  }

  .js body.has-hero.header-stuck .site-header__brand img {
    filter: none;
  }

  .js body.has-hero.header-stuck .site-header__menu-trigger {
    border-color: var(--color-border-strong);
    background-color: transparent;
    backdrop-filter: none;
  }

  /* Honour reduced-motion: the sticky pin still works, just no transition. */
  @media (prefers-reduced-motion: reduce) {
    .site-header { transition: none; }
  }

  /* ====================================================================
     MOBILE NAV OVERLAY
     --------------------------------------------------------------------
     Full-screen panel toggled by `data-mobile-nav-trigger`. JS swaps
     [data-state="open"|"closed"] on the root. CSS handles transition.
     Markup ships `hidden` + `inert` — JS strips both on upgrade.
     ==================================================================== */

  .mobile-nav {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background-color: var(--color-ink);
    color: var(--color-on-ink);
    overflow-y: auto;
    overscroll-behavior: contain;
    /* Default state for unupgraded markup is `hidden` (display:none).
       JS removes [hidden] + adds data-state="closed" → we transition. */
    opacity: 0;
    transition: opacity var(--duration-normal) var(--ease-standard);
    pointer-events: none;
  }

  .mobile-nav[data-state="open"] {
    opacity: 1;
    pointer-events: auto;
  }

  .mobile-nav[data-state="closed"] {
    visibility: hidden;
    transition: opacity var(--duration-normal) var(--ease-standard),
                visibility 0s linear var(--duration-normal);
  }

  .mobile-nav[data-state="open"] {
    visibility: visible;
    transition: opacity var(--duration-normal) var(--ease-standard);
  }

  .mobile-nav__inner {
    min-height: 100%;
    padding: var(--space-5) var(--space-5) var(--space-7);
    display: flex;
    flex-direction: column;
    gap: var(--space-7);
  }

  .mobile-nav__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
  }

  .mobile-nav__brand img {
    height: 2.25rem;
    width: auto;
    display: block;
  }

  .mobile-nav__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    background: transparent;
    border: 1px solid var(--color-border-on-ink);
    border-radius: var(--radius-full);
    color: inherit;
    cursor: pointer;
    transition: border-color var(--duration-fast) var(--ease-standard);
  }

  .mobile-nav__close:hover {
    border-color: var(--color-brand);
  }

  .mobile-nav__list {
    display: flex;
    flex-direction: column;
  }

  .mobile-nav__list a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-4) 0;
    border-bottom: 1px solid var(--color-border-on-ink);
    color: var(--color-on-ink);
    font-size: var(--text-2xl);
    font-weight: var(--font-semibold);
    letter-spacing: var(--tracking-tight);
    text-decoration: none;
    transition: color var(--duration-fast) var(--ease-standard);
  }

  .mobile-nav__list a:first-child { border-top: 1px solid var(--color-border-on-ink); }

  .mobile-nav__list a:hover,
  .mobile-nav__list a[aria-current="page"] {
    color: var(--color-brand);
  }

  .mobile-nav__arrow {
    color: var(--color-on-ink-subtle);
    font-size: var(--text-lg);
    transition: transform var(--duration-fast) var(--ease-standard),
                color var(--duration-fast) var(--ease-standard);
  }

  .mobile-nav__list a:hover .mobile-nav__arrow,
  .mobile-nav__list a[aria-current="page"] .mobile-nav__arrow {
    color: var(--color-brand);
    transform: translateX(4px);
  }

  .mobile-nav__contact {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding-top: var(--space-6);
    border-top: 1px solid var(--color-border-on-ink);
  }

  .mobile-nav__contact-label {
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--color-on-ink-subtle);
    margin-bottom: var(--space-2);
  }

  .mobile-nav__phone {
    font-size: var(--text-2xl);
    font-weight: var(--font-bold);
    letter-spacing: var(--tracking-tight);
    color: var(--color-brand);
    text-decoration: none;
  }

  .mobile-nav__email {
    font-size: var(--text-base);
    color: var(--color-on-ink);
    text-decoration: underline;
    text-decoration-color: var(--color-brand);
    text-underline-offset: 0.22em;
  }

  .mobile-nav__address {
    font-style: normal;
    font-size: var(--text-sm);
    color: var(--color-on-ink-muted);
    margin-top: var(--space-2);
  }

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

  /* ====================================================================
     REVEAL FOOTER
     --------------------------------------------------------------------
     The footer is fixed at the bottom, behind an opaque <main>. As the
     page scrolls to its end, <main> slides up and uncovers the footer.
     chrome.js adds `.footer-reveal` to <html> ONLY when the footer fits
     within the viewport (so it never clips on tall mobile layouts) and
     publishes its measured height as --footer-h. Without JS (or when the
     footer is too tall) the footer is a normal in-flow block — no reveal.
     ==================================================================== */

  html.footer-reveal main {
    position: relative;
    z-index: 1;
    background-color: var(--color-bg);
    margin-bottom: var(--footer-h, 0px);
  }

  html.footer-reveal .site-footer {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 0;
  }

  .site-footer {
    /* Token override: on an ink surface, the inherited muted-text token
       resolves to a dark grey — unreadable. Rebind the muted scale to
       the on-ink palette so <small>, <p>, etc. all read correctly. */
    --color-text: var(--color-on-ink);
    --color-text-muted: var(--color-on-ink-muted);
    --color-text-subtle: var(--color-on-ink-subtle);
    --color-border: var(--color-border-on-ink);
    background-color: var(--color-ink);
    color: var(--color-on-ink);
    padding-block: var(--space-9) var(--space-5);
    margin-top: 0;
  }

  .site-footer__inner {
    width: var(--container-w-wide);
    margin-inline: auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-7);
  }

  @media (min-width: 40rem) {
    .site-footer__inner {
      grid-template-columns: 1fr 1fr;
      gap: var(--space-7) var(--space-7);
      align-items: start;
    }
  }

  @media (min-width: 64rem) {
    .site-footer__inner {
      grid-template-columns: 1.4fr 1.2fr 1fr 1fr;
      gap: var(--space-7) clamp(var(--space-6), 3vw, var(--space-8));
    }
  }

  .site-footer__brand-col {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
  }

  .site-footer__brand img {
    height: 2.5rem;
    width: auto;
  }

  .site-footer__tagline {
    max-width: 34ch;
    color: var(--color-on-ink-muted);
    font-size: var(--text-sm);
    line-height: var(--leading-snug);
  }

  .site-footer__contact {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    font-size: var(--text-sm);
    color: var(--color-on-ink);
  }

  .site-footer__contact a {
    color: inherit;
    text-decoration: none;
  }

  .site-footer__phone-link {
    font-size: var(--text-lg);
    font-weight: var(--font-semibold);
    letter-spacing: var(--tracking-tight);
    color: var(--color-brand);
    transition: color var(--duration-fast) var(--ease-standard);
  }

  .site-footer__phone-link:hover {
    color: var(--color-on-ink);
  }

  .site-footer__contact a:not(.site-footer__phone-link) {
    text-decoration: underline;
    text-decoration-color: var(--color-brand);
    text-underline-offset: 0.22em;
  }

  /* Address + opening hours column — two stacked dl entries with
     shared label treatment. */
  .site-footer__contact-col {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
  }

  .site-footer__facts {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
  }

  .site-footer__facts > div {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
  }

  .site-footer__facts dt {
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--color-on-ink-subtle);
  }

  .site-footer__facts dd {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--color-on-ink);
    line-height: var(--leading-snug);
  }

  .site-footer__facts address {
    font-style: normal;
  }

  .site-footer__facts dd > span {
    display: block;
  }

  .site-footer__facts dd > span + span {
    margin-top: 2px;
  }

  .site-footer__facts strong {
    display: inline-block;
    min-width: 3.25rem;
    color: var(--color-on-ink);
    font-weight: var(--font-semibold);
  }

  .site-footer__nav-col {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
  }

  .site-footer__nav-title {
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--color-on-ink-subtle);
  }

  .site-footer__nav-col ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    font-size: var(--text-sm);
  }

  .site-footer__nav-col a {
    color: var(--color-on-ink);
    text-decoration: none;
    transition: color var(--duration-fast) var(--ease-standard);
  }

  .site-footer__nav-col a:hover {
    color: var(--color-brand);
  }

  .site-footer__nav-col a.site-footer__nav-all {
    color: var(--color-brand);
    font-weight: var(--font-semibold);
  }

  .site-footer__nav-col a.site-footer__nav-all:hover {
    color: var(--color-on-ink);
  }

  .site-footer__legal {
    width: var(--container-w-wide);
    margin: var(--space-8) auto 0;
    padding-top: var(--space-5);
    border-top: 1px solid var(--color-border-on-ink);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3) var(--space-5);
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-wide);
    color: var(--color-on-ink-muted);
  }

  .site-footer__legal small {
    color: inherit;
    font-size: inherit;
  }

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

  .site-footer__legal a {
    color: var(--color-on-ink);
    text-decoration: none;
  }

  .site-footer__legal a:hover {
    color: var(--color-brand);
  }

  /* ====================================================================
     HERO
     --------------------------------------------------------------------
     Full-bleed photo, dark gradient overlay, bottom-aligned content.
     Photo carries credibility; type is large, weight-heavy, tightly
     tracked. CTA pair: primary brand + ghost-on-ink.
     ==================================================================== */

  .hero {
    position: relative;
    isolation: isolate;
    min-height: 100svh;
    display: grid;
    /* Rebind muted/text tokens for the dark surface so headings
       (which take their color from --color-text in base.css) and
       muted copy both read on the photo, not just direct `color`
       inheritance. */
    --color-text: var(--color-on-ink);
    --color-text-muted: var(--color-on-ink-muted);
    color: var(--color-on-ink);
    overflow: hidden;
    background-color: var(--color-ink);
  }

  .hero__media,
  .hero__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -2;
  }

  .hero__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
      linear-gradient(180deg,
        rgb(0 0 0 / 0.65) 0%,
        rgb(0 0 0 / 0.40) 30%,
        rgb(0 0 0 / 0.70) 70%,
        rgb(0 0 0 / 0.92) 100%);
    z-index: -1;
  }

  .hero__inner {
    width: var(--container-w-wide);
    margin-inline: auto;
    align-self: end;
    padding-block: clamp(var(--space-9), 14vh, var(--space-11)) var(--space-8);
    display: grid;
    gap: var(--space-6);
  }

  .hero__eyebrow {
    /* White text reads on every part of the photo; the leading hairline
       stays brand green so the eyebrow still carries a green moment. */
    color: var(--color-on-ink);
  }

  .hero__eyebrow::before {
    background: var(--color-brand);
  }

  .hero__title {
    font-size: var(--text-display-md);
    line-height: 0.92;
    letter-spacing: var(--tracking-tightest);
    font-weight: var(--font-bold);
    max-width: 18ch;
    text-wrap: balance;
  }

  .hero__lead {
    font-size: var(--text-lg);
    line-height: var(--leading-snug);
    color: var(--color-on-ink-muted);
    max-width: 48ch;
  }

  .hero__cta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-top: var(--space-2);
  }

  .hero__trust {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(var(--space-5), 4vw, var(--space-7));
    color: var(--color-on-ink-muted);
    font-size: var(--text-sm);
    margin-top: var(--space-5);
    padding-top: var(--space-5);
    border-top: 1px solid var(--color-border-on-ink);
  }

  .hero__trust > * {
    display: inline-flex;
    flex-direction: column;
    gap: 2px;
  }

  .hero__trust strong {
    color: var(--color-on-ink);
    font-weight: var(--font-semibold);
    font-size: var(--text-base);
    letter-spacing: var(--tracking-tight);
  }

  /* ====================================================================
     FEATURE ROW
     --------------------------------------------------------------------
     2-column image + text. Defaults to image-left; .feature-row--flip
     swaps. Stacks on narrow viewports, image first.
     ==================================================================== */

  .feature-row {
    width: var(--container-w-wide);
    margin-inline: auto;
    display: grid;
    gap: var(--space-7);
    align-items: center;
  }

  @media (min-width: 56rem) {
    .feature-row {
      grid-template-columns: 2fr 3fr;
      gap: clamp(var(--space-7), 6vw, var(--space-9));
    }
    .feature-row--flip .feature-row__media { order: 2; }
  }

  .feature-row__media {
    position: relative;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border-radius: var(--radius-lg);
    background-color: var(--color-bg-muted);
  }

  @media (min-width: 56rem) {
    .feature-row__media {
      aspect-ratio: 5 / 6;
    }
  }

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

  .feature-row__media--frame {
    /* Decorative offset — a green block peeking from behind the photo,
       adds a small editorial moment. Toggle on per call. */
    box-shadow: 0 0 0 0 transparent;
  }

  .feature-row__media--frame::before {
    content: "";
    position: absolute;
    inset: 12% -10% -10% 12%;
    background-color: var(--color-brand);
    z-index: -1;
    border-radius: inherit;
  }

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

  .feature-row__title {
    font-size: var(--text-3xl);
    letter-spacing: var(--tracking-tighter);
    font-weight: var(--font-bold);
    line-height: var(--leading-tight);
    text-wrap: balance;
  }

  @media (min-width: 48rem) {
    .feature-row__title { font-size: var(--text-4xl); }
  }

  .feature-row__lead {
    color: var(--color-text-muted);
    font-size: var(--text-lg);
    line-height: var(--leading-snug);
    max-width: 38ch;
  }

  .feature-row__cta {
    margin-top: var(--space-3);
  }

  /* ====================================================================
     CARD GRID
     --------------------------------------------------------------------
     Service / Leistung tile grid. auto-fit + minmax gives natural
     fluidity; @container makes individual cards respond to their slot.
     ==================================================================== */

  .card-grid {
    width: var(--container-w-wide);
    margin-inline: auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
    gap: var(--space-5);
  }

  .card {
    container-type: inline-size;
    position: relative;
    display: flex;
    flex-direction: column;
    background-color: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: transform var(--duration-normal) var(--ease-out-quart),
                border-color var(--duration-fast) var(--ease-standard),
                box-shadow var(--duration-normal) var(--ease-out-quart);
    text-decoration: none;
    color: inherit;
    isolation: isolate;
  }

  .card:hover {
    transform: translateY(-2px);
    border-color: var(--color-brand);
    box-shadow: var(--shadow-md);
  }

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

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

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

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

  .card__title {
    font-size: var(--text-lg);
    font-weight: var(--font-semibold);
    letter-spacing: var(--tracking-tight);
    color: var(--color-text);
    line-height: var(--leading-snug);
  }

  .card__excerpt {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
    margin-top: auto;
    padding-top: var(--space-2);
  }

  /* Ink-context card: dark surface, hovers brighten the border. */
  .section--ink .card {
    background-color: var(--color-ink-2);
    border-color: var(--color-border-on-ink);
  }

  .section--ink .card:hover {
    border-color: var(--color-brand);
  }

  /* ====================================================================
     "WHY US" — simple 4-card block for the ink demo section
     ==================================================================== */

  .reasons {
    width: var(--container-w-wide);
    margin-inline: auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
    gap: 1px;
    background-color: var(--color-border-on-ink);
    border: 1px solid var(--color-border-on-ink);
    border-radius: var(--radius-lg);
    overflow: hidden;
  }

  .reasons__cell {
    background-color: var(--color-ink);
    padding: var(--space-6);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
  }

  .reasons__num {
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    color: var(--color-brand);
    letter-spacing: var(--tracking-wider);
  }

  .reasons__title {
    font-size: var(--text-xl);
    font-weight: var(--font-semibold);
    letter-spacing: var(--tracking-tight);
    color: var(--color-on-ink);
    line-height: var(--leading-snug);
  }

  .reasons__body {
    color: var(--color-on-ink-muted);
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
  }

  /* ====================================================================
     CTA STRIP — final contact prompt
     ==================================================================== */

  .cta-strip {
    width: var(--container-w-wide);
    margin-inline: auto;
    background-color: var(--color-brand);
    color: var(--color-brand-fg);
    border-radius: var(--radius-2xl);
    padding: clamp(var(--space-7), 6vw, var(--space-9));
    display: grid;
    gap: var(--space-6);
    align-items: center;
  }

  @media (min-width: 48rem) {
    .cta-strip {
      grid-template-columns: 1.4fr auto;
    }
  }

  .cta-strip__title {
    font-size: var(--text-3xl);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tighter);
    font-weight: var(--font-bold);
    color: var(--color-brand-fg);
    text-wrap: balance;
    max-width: 24ch;
  }

  @media (min-width: 48rem) {
    .cta-strip__title { font-size: var(--text-4xl); }
  }

  .cta-strip__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
  }

  /* ====================================================================
     SECTION TAIL — secondary action below a grid (e.g. "Alle Leistungen")
     ==================================================================== */

  .section__tail {
    width: var(--container-w-wide);
    margin: var(--space-7) auto 0;
    display: flex;
    justify-content: center;
  }

  /* ====================================================================
     PROCESS — 4-step "So funktioniert's" strip
     --------------------------------------------------------------------
     Editorial, not card-y. A short green accent rail tops each step,
     a big display digit sits as the visual anchor, then title + body.
     Stacks vertically on narrow with the accent on the left as a rail.
     ==================================================================== */

  .process {
    width: var(--container-w-wide);
    margin-inline: auto;
    list-style: none;
    padding: 0;
    display: grid;
    gap: var(--space-6);
  }

  @media (min-width: 56rem) {
    .process {
      grid-template-columns: repeat(4, 1fr);
      gap: clamp(var(--space-5), 3vw, var(--space-7));
    }
  }

  .process__step {
    position: relative;
    padding-top: var(--space-5);
    border-top: 2px solid var(--color-border-strong);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
  }

  .process__step::before {
    content: "";
    position: absolute;
    inset: -2px auto auto 0;
    height: 2px;
    width: 3rem;
    background-color: var(--color-brand);
  }

  .process__num {
    font-size: var(--text-display-sm);
    line-height: 0.9;
    letter-spacing: var(--tracking-tightest);
    font-weight: var(--font-bold);
    color: var(--color-text-subtle);
    font-variant-numeric: tabular-nums;
  }

  .process__title {
    font-size: var(--text-xl);
    font-weight: var(--font-semibold);
    letter-spacing: var(--tracking-tight);
    line-height: var(--leading-snug);
    color: var(--color-text);
  }

  .process__body {
    color: var(--color-text-muted);
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    max-width: 32ch;
  }

  /* ====================================================================
     JOBS TEASER — text-only cards inside an ink section
     --------------------------------------------------------------------
     A different beat from the Leistungen image-grid: a 3-up of
     job-position cards, employment-type pill, location, hover arrow.
     Lives inside .section--ink so it inherits the ink token rebindings.
     ==================================================================== */

  .jobs-teaser {
    width: var(--container-w-wide);
    margin-inline: auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
    gap: var(--space-5);
  }

  .job-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-6);
    background-color: var(--color-ink-2);
    border: 1px solid var(--color-border-on-ink);
    border-radius: var(--radius-lg);
    color: var(--color-on-ink);
    text-decoration: none;
    transition: transform var(--duration-normal) var(--ease-out-quart),
                border-color var(--duration-fast) var(--ease-standard);
  }

  .job-card:hover {
    transform: translateY(-2px);
    border-color: var(--color-brand);
  }

  .job-card__tag {
    align-self: flex-start;
    display: inline-flex;
    padding: 0.25rem 0.65rem;
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--color-brand);
    border: 1px solid currentColor;
    border-radius: var(--radius-full);
  }

  .job-card__title {
    font-size: var(--text-xl);
    font-weight: var(--font-semibold);
    letter-spacing: var(--tracking-tight);
    line-height: var(--leading-snug);
    color: var(--color-on-ink);
  }

  .job-card__location {
    font-size: var(--text-sm);
    color: var(--color-on-ink-muted);
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
  }

  .job-card__location::before {
    content: "";
    width: 0.5rem;
    height: 0.5rem;
    background-color: var(--color-brand);
    border-radius: 50%;
    display: inline-block;
  }

  .job-card__arrow {
    margin-top: auto;
    padding-top: var(--space-3);
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    letter-spacing: var(--tracking-tight);
    color: var(--color-brand);
    transition: transform var(--duration-fast) var(--ease-standard);
  }

  .job-card:hover .job-card__arrow {
    transform: translateX(3px);
  }

  /* ====================================================================
     JOB ROWS — /jobs listing
     --------------------------------------------------------------------
     Wide, editorial position rows (distinct from the home page's dark
     job-card grid): a brand accent bar grows on hover, title + lead on
     the left, location + arrow on the right. Stacks on narrow screens.
     ==================================================================== */

  .job-rows {
    width: var(--container-w-wide);
    margin-inline: auto;
    display: grid;
    gap: var(--space-4);
  }

  .job-row {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-6);
    padding: var(--space-6) var(--space-7);
    background-color: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    text-decoration: none;
    overflow: hidden;
    transition: transform var(--duration-normal) var(--ease-out-quart),
                border-color var(--duration-fast) var(--ease-standard),
                box-shadow var(--duration-fast) var(--ease-standard);
  }

  /* Brand accent bar at the left edge — short by default, fills on hover. */
  .job-row::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 3px;
    height: 2.25rem;
    background-color: var(--color-brand);
    border-radius: 0 var(--radius-full) var(--radius-full) 0;
    transform: translateY(-50%) scaleY(0.45);
    transform-origin: center;
    transition: transform var(--duration-normal) var(--ease-out-quart);
  }

  .job-row:hover,
  .job-row:focus-within {
    transform: translateY(-2px);
    border-color: var(--color-brand);
    box-shadow: var(--shadow-md);
  }
  .job-row:hover::before,
  .job-row:focus-within::before {
    transform: translateY(-50%) scaleY(1);
  }

  .job-row__main {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    min-width: 0;
  }

  /* Meta line: employment-type pill + location, side by side. */
  .job-row__meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-3);
  }

  .job-row__tag {
    display: inline-flex;
    padding: 0.25rem 0.65rem;
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--color-brand-strong);
    border: 1px solid currentColor;
    border-radius: var(--radius-full);
  }

  .job-row__title {
    font-size: var(--text-2xl);
    font-weight: var(--font-bold);
    line-height: var(--leading-snug);
    letter-spacing: var(--tracking-tight);
    color: var(--color-text);
  }

  .job-row__lead {
    max-width: 62ch;
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    color: var(--color-text-muted);
  }

  .job-row__actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: var(--space-3);
    white-space: nowrap;
  }

  .job-row__loc {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
  }
  .job-row__loc::before {
    content: "";
    width: 0.5rem;
    height: 0.5rem;
    background-color: var(--color-brand);
    border-radius: 50%;
  }

  .job-row__actions .btn { justify-content: center; }

  @media (max-width: 38rem) {
    .job-row {
      grid-template-columns: 1fr;
      gap: var(--space-5);
    }
    .job-row__actions {
      flex-direction: row;
    }
    .job-row__actions .btn { flex: 1; }
  }

  /* ====================================================================
     JOB DETAIL — /jobs/{slug}
     --------------------------------------------------------------------
     Ink hero (title + meta pills + apply CTA) over a two-column body:
     the story + Aufgaben + "Das bieten wir" on the left, a sticky
     "Auf einen Blick" summary card on the right. Collapses to a single
     column on narrow viewports (page-shell decision → @media).
     ==================================================================== */

  .job-hero {
    background-color: var(--color-ink);
    color: var(--color-on-ink);
    padding-block: clamp(var(--space-8), 7vw, var(--space-10));
  }

  .job-hero__inner {
    width: var(--container-w-wide);
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-4);
  }

  .job-hero__back {
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    color: var(--color-on-ink-muted);
    text-decoration: none;
    transition: color var(--duration-fast) var(--ease-standard);
  }
  .job-hero__back:hover { color: var(--color-on-ink); }

  .job-hero__eyebrow { color: var(--color-brand); }

  .job-hero__title {
    max-width: 18ch;
    font-size: var(--text-4xl);
    font-weight: var(--font-bold);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tighter);
    color: var(--color-on-ink);
  }

  .job-hero__lead {
    max-width: 56ch;
    font-size: var(--text-lg);
    line-height: var(--leading-normal);
    color: var(--color-on-ink-muted);
  }

  .job-hero__meta {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    margin-block: var(--space-2);
  }

  .job-hero__pill {
    display: inline-flex;
    padding: 0.3rem 0.8rem;
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--color-brand-fg);
    background-color: var(--color-brand);
    border-radius: var(--radius-full);
  }

  .job-hero__loc {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    color: var(--color-on-ink-muted);
  }
  .job-hero__loc::before {
    content: "";
    width: 0.5rem;
    height: 0.5rem;
    background-color: var(--color-brand);
    border-radius: 50%;
  }

  .job-hero__cta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-top: var(--space-3);
  }

  /* --- body grid --- */

  .job-detail__grid {
    width: var(--container-w-wide);
    margin-inline: auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(18rem, 26%, 22rem);
    gap: clamp(var(--space-7), 5vw, var(--space-10));
    align-items: start;
  }

  .job-detail__main {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
    min-width: 0;
  }

  .job-detail__intro { max-width: 64ch; }

  .job-block__title {
    font-size: var(--text-2xl);
    font-weight: var(--font-bold);
    line-height: var(--leading-snug);
    letter-spacing: var(--tracking-tight);
    margin-bottom: var(--space-5);
  }

  /* Markdown bullet lists (tasks / we_offer) → brand-checked rows. */
  .job-list ul {
    list-style: none;
    display: grid;
    gap: var(--space-3);
  }
  .job-list li {
    position: relative;
    padding-left: var(--space-6);
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    color: var(--color-text);
  }
  .job-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 0.7rem;
    height: 0.4rem;
    border-left: 2px solid var(--color-brand-strong);
    border-bottom: 2px solid var(--color-brand-strong);
    transform: translateY(-50%) rotate(-45deg);
  }

  /* --- sticky summary aside --- */

  .job-aside { position: relative; }

  .job-aside__card {
    position: sticky;
    /* Offset by the sticky header height so the card pins clear of the bar
       rather than tucking under it. --header-h is measured by chrome.js;
       4.5rem fallback keeps the no-JS path sane. */
    top: calc(var(--header-h, 4.5rem) + var(--space-6));
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-6);
    background-color: var(--color-bg-subtle);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
  }

  .job-aside__list {
    display: grid;
    gap: var(--space-4);
  }
  .job-aside__list > div {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
  }
  .job-aside__list dt {
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--color-text-subtle);
  }
  .job-aside__list dd {
    font-size: var(--text-base);
    font-weight: var(--font-medium);
    color: var(--color-text);
  }

  .job-aside__cta { width: 100%; justify-content: center; }

  .job-aside__note {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
  }

  .jobs-empty {
    width: var(--container-w-wide);
    margin-inline: auto;
    max-width: 56ch;
  }

  @media (max-width: 60rem) {
    .job-detail__grid { grid-template-columns: 1fr; }
    .job-aside__card { position: static; }
  }

  /* ====================================================================
     FAQ — native <details> accordion
     --------------------------------------------------------------------
     Zero-JS, fully accessible. A `+` rotates to `×` on open; question
     text picks up the brand-strong color. Reading-comfortable width.
     ==================================================================== */

  .faq {
    width: var(--container-w-wide);
    margin-inline: auto;
    display: grid;
    grid-template-columns: 1fr;
    border-top: 1px solid var(--color-border);
  }

  @media (min-width: 56rem) {
    .faq {
      grid-template-columns: 1fr 1fr;
      column-gap: clamp(var(--space-6), 4vw, var(--space-8));
    }
  }

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

  .faq__question {
    list-style: none;
    cursor: pointer;
    padding: var(--space-5) 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-5);
    font-size: var(--text-lg);
    font-weight: var(--font-semibold);
    letter-spacing: var(--tracking-tight);
    line-height: var(--leading-snug);
    color: var(--color-text);
    transition: color var(--duration-fast) var(--ease-standard);
  }

  .faq__question::-webkit-details-marker { display: none; }
  .faq__question::marker { content: ""; }

  .faq__question::after {
    content: "+";
    flex-shrink: 0;
    width: 1.75rem;
    height: 1.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-xl);
    font-weight: var(--font-light);
    line-height: 1;
    color: var(--color-brand-strong);
    border: 1px solid var(--color-border-strong);
    border-radius: 50%;
    transition: transform var(--duration-normal) var(--ease-out-quart),
                border-color var(--duration-fast) var(--ease-standard),
                background-color var(--duration-fast) var(--ease-standard),
                color var(--duration-fast) var(--ease-standard);
  }

  .faq__question:hover {
    color: var(--color-brand-strong);
  }

  .faq__question:hover::after {
    border-color: var(--color-brand-strong);
  }

  .faq__item[open] > .faq__question {
    color: var(--color-brand-strong);
  }

  .faq__item[open] > .faq__question::after {
    transform: rotate(45deg);
    background-color: var(--color-brand-strong);
    border-color: var(--color-brand-strong);
    color: var(--color-on-ink);
  }

  .faq__answer {
    padding-block: 0 var(--space-6);
    color: var(--color-text-muted);
    font-size: var(--text-base);
    line-height: var(--leading-relaxed);
    max-width: 62ch;
  }

  .faq__answer p {
    margin-block: 0;
  }

  .faq__answer p + p {
    margin-top: var(--space-3);
  }

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

  /* ====================================================================
     CONTACT BLOCK — large brand-green closing panel
     --------------------------------------------------------------------
     The home page's signature finale: brand green slab with headline +
     CTA on the left, a definition-list of contact facts on the right.
     Bigger and more information-dense than the reusable .cta-strip.
     ==================================================================== */

  .contact-block {
    width: var(--container-w-wide);
    margin-inline: auto;
    background-color: var(--color-brand);
    color: var(--color-brand-fg);
    border-radius: var(--radius-2xl);
    padding: clamp(var(--space-7), 6vw, var(--space-9));
    display: grid;
    gap: var(--space-7);
  }

  @media (min-width: 56rem) {
    .contact-block {
      grid-template-columns: 1.3fr 1fr;
      gap: clamp(var(--space-7), 6vw, var(--space-9));
      align-items: start;
    }
  }

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

  .contact-block__eyebrow {
    color: var(--color-brand-fg);
  }

  .contact-block__eyebrow::before {
    background: var(--color-brand-fg);
  }

  .contact-block__title {
    font-size: var(--text-4xl);
    font-weight: var(--font-bold);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tighter);
    color: var(--color-brand-fg);
    text-wrap: balance;
    max-width: 18ch;
  }

  /* Brand-green panel: accent keyword can't be brand-green (would
     disappear). Drop it to white instead — the punch comes from
     the unexpected color, not the brand color. */
  .contact-block__title em {
    font-style: normal;
    color: var(--color-on-ink);
  }

  .contact-block__lead {
    color: var(--color-brand-fg);
    font-size: var(--text-lg);
    line-height: var(--leading-snug);
    max-width: 42ch;
    opacity: 0.85;
  }

  .contact-block__cta {
    margin-top: var(--space-3);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
  }

  .contact-block__note {
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px solid rgb(0 0 0 / 0.15);
    font-size: var(--text-sm);
    color: var(--color-brand-fg);
    opacity: 0.85;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
  }

  .contact-block__note::before {
    content: "";
    width: 0.5rem;
    height: 0.5rem;
    background-color: var(--color-brand-fg);
    border-radius: 50%;
    flex-shrink: 0;
  }

  .contact-block__info {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    margin: 0;
    padding: var(--space-5) var(--space-6);
    background-color: rgb(255 255 255 / 0.55);
    border-radius: var(--radius-lg);
  }

  .contact-block__info > div + div {
    padding-top: var(--space-4);
    border-top: 1px solid rgb(0 0 0 / 0.12);
  }

  .contact-block__info > div {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    min-width: 0;
  }

  .contact-block__info dt {
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--color-brand-fg);
    opacity: 0.7;
  }

  .contact-block__info dd {
    margin: 0;
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    line-height: var(--leading-snug);
    color: var(--color-brand-fg);
    word-break: break-word;
  }

  .contact-block__info dd a {
    color: inherit;
    text-decoration: underline;
    text-decoration-color: rgb(0 0 0 / 0.3);
    text-underline-offset: 0.22em;
    transition: text-decoration-color var(--duration-fast) var(--ease-standard);
  }

  .contact-block__info dd a:hover {
    text-decoration-color: currentColor;
  }

  /* Inside the contact block we want the secondary button to stay ink
     (signature contrast on the green) — already what `.btn--secondary`
     gives us. The ghost variant needs to read on green: border + text
     in ink, hover flips to ink fill. */
  .contact-block .btn--ghost {
    color: var(--color-brand-fg);
    border-color: var(--color-brand-fg);
  }

  .contact-block .btn--ghost:hover {
    background-color: var(--color-ink);
    color: var(--color-on-ink);
    border-color: var(--color-ink);
  }

  /* ====================================================================
     PAGE LEAD — header strip for interior landing pages
     --------------------------------------------------------------------
     Calmer than the home hero: subtle background, eyebrow + display
     title + lead copy. Used by /leistungen and any future interior
     landing page that wants editorial presence without a photo.
     ==================================================================== */

  .page-lead {
    background-color: var(--color-bg-subtle);
    padding-block: clamp(var(--space-8), 8vw, var(--space-10)) var(--space-8);
    border-bottom: 1px solid var(--color-border);
  }

  .page-lead__inner {
    width: var(--container-w-wide);
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
  }

  .page-lead__title {
    font-size: var(--text-display-sm);
    line-height: 0.95;
    letter-spacing: var(--tracking-tightest);
    font-weight: var(--font-bold);
    text-wrap: balance;
    max-width: 18ch;
  }

  /* Accent keyword in the page-lead title — match the editorial pattern
     used in hero / section / feature-row titles. */
  .page-lead__title em {
    font-style: normal;
    color: var(--color-brand);
  }

  .page-lead__copy {
    color: var(--color-text-muted);
    font-size: var(--text-lg);
    line-height: var(--leading-snug);
    max-width: 56ch;
  }

  /* ====================================================================
     ABOUT STORY — /uber-uns stacked photo + prose block
     --------------------------------------------------------------------
     Stacked alternative to .feature-row for landscape photography that
     wants the full container width. Figure sits on container-default
     (1152) for visual impact; body sits on a comfortable reading width
     centered below.
     ==================================================================== */

  .about-story__figure {
    width: var(--container-w);
    margin: 0 auto var(--space-7);
    aspect-ratio: 3 / 2;
    overflow: hidden;
    border-radius: var(--radius-lg);
    background-color: var(--color-bg-muted);
  }

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

  .about-story__body {
    width: min(100% - 2 * var(--gutter), 62ch);
    margin-inline: auto;
  }

  /* ====================================================================
     SERVICE LIST + ROW — /leistungen alternating image/text rows
     --------------------------------------------------------------------
     Designed to repeat 8x without feeling monotonous: bigger image than
     .feature-row (closer to 1:1 split, landscape 4:3), comfortable
     vertical rhythm between rows, alternating sides. Body uses .prose
     for markdown rendering.
     ==================================================================== */

  .service-list {
    display: flex;
    flex-direction: column;
    gap: clamp(var(--space-8), 7vw, var(--space-10));
  }

  .service-row {
    width: var(--container-w-wide);
    margin-inline: auto;
    display: grid;
    gap: var(--space-6);
    /* Center text vertically against the fixed-ratio image so short
       bodies don't leave dead space below the copy. */
    align-items: center;
    scroll-margin-top: var(--space-6);
  }

  @media (min-width: 56rem) {
    .service-row {
      /* 50/50 split — equal weight to photo and copy. */
      grid-template-columns: 1fr 1fr;
      gap: clamp(var(--space-6), 5vw, var(--space-8));
    }
    /* Flip rows just swap the media to col 2; columns stay 50/50. */
    .service-row--flip .service-row__media { order: 2; }
  }

  .service-row__media {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-lg);
    background-color: var(--color-bg-muted);
    /* Fixed 4:3 landscape on every row, mobile + desktop. Predictable
       rhythm across 8 repetitions; image no longer stretches to match
       variable body height. */
    aspect-ratio: 4 / 3;
  }

  .service-row__media img,
  .service-row__media picture {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .service-row__media picture img {
    width: 100%;
    height: 100%;
  }

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

  /* Tighten the gap between the eyebrow and the H2 so they read as a
     pair rather than two separated rows. */
  .service-row__body > .eyebrow + .service-row__title {
    margin-top: calc(var(--space-3) - var(--space-4));
  }

  .service-row__title {
    font-size: var(--text-2xl);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tighter);
    font-weight: var(--font-bold);
    text-wrap: balance;
  }

  @media (min-width: 48rem) {
    .service-row__title { font-size: var(--text-3xl); }
  }

  .service-row__excerpt {
    color: var(--color-text);
    font-size: var(--text-lg);
    line-height: var(--leading-snug);
    font-weight: var(--font-medium);
    max-width: 44ch;
  }

  /* Wider than other prose caps in the template — the 60% body column
     here gives us more room, and we want the text to fill that column. */
  .service-row__prose {
    max-width: 56ch;
    color: var(--color-text-muted);
    font-size: var(--text-base);
    line-height: var(--leading-relaxed);
  }

  .service-row__prose :where(p):first-child {
    margin-top: 0;
  }

  /* ====================================================================
     ERROR PAGE — 404 (no hero, single block)
     ==================================================================== */

  .error-page__inner {
    width: var(--container-w);
    margin-inline: auto;
    padding-block: clamp(var(--space-7), 8vw, var(--space-10));
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    align-items: flex-start;
  }

  .error-page__num {
    font-size: var(--text-display-lg);
    line-height: 0.85;
    font-weight: var(--font-black);
    letter-spacing: var(--tracking-tightest);
    color: var(--color-bg-muted);
    margin-block: var(--space-2) var(--space-2);
    user-select: none;
  }

  .error-page__title {
    font-size: var(--text-3xl);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tighter);
    font-weight: var(--font-bold);
    text-wrap: balance;
    max-width: 18ch;
  }

  @media (min-width: 48rem) {
    .error-page__title { font-size: var(--text-4xl); }
  }

  .error-page__lead {
    color: var(--color-text-muted);
    font-size: var(--text-lg);
    line-height: var(--leading-snug);
    max-width: 50ch;
  }

  .error-page__cta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-top: var(--space-3);
  }

  .error-page__suggestions {
    margin-top: var(--space-7);
    padding-top: var(--space-5);
    border-top: 1px solid var(--color-border);
    width: 100%;
  }

  .error-page__suggestions-label {
    display: block;
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--color-text-subtle);
    margin-bottom: var(--space-4);
  }

  .error-page__suggestions ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4) var(--space-5);
    font-size: var(--text-base);
  }

  .error-page__suggestions a {
    color: var(--color-text);
    text-decoration-color: var(--color-brand);
  }

  /* ====================================================================
     LEGAL PAGES — Impressum, Datenschutz
     --------------------------------------------------------------------
     Restrained editorial treatment: subtle header block (eyebrow +
     title + lead), body in `.prose` with reading-comfortable width.
     ==================================================================== */

  .page-legal__header {
    background-color: var(--color-bg-subtle);
    padding-block: clamp(var(--space-7), 6vw, var(--space-9)) var(--space-7);
    border-bottom: 1px solid var(--color-border);
  }

  .page-legal__head-inner {
    width: var(--container-w);
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
  }

  .page-legal__title {
    font-size: var(--text-4xl);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tighter);
    font-weight: var(--font-bold);
    text-wrap: balance;
  }

  .page-legal__lead {
    color: var(--color-text-muted);
    font-size: var(--text-lg);
    line-height: var(--leading-snug);
    max-width: 60ch;
  }

  .page-legal__body .prose {
    width: var(--container-w-narrow);
    margin-inline: auto;
    max-width: none;
  }

  /* Definition lists inside legal copy — denser, label-aligned. */
  .prose .legal-dl {
    display: grid;
    grid-template-columns: minmax(min(35%, 12rem), auto) 1fr;
    column-gap: var(--space-5);
    row-gap: var(--space-2);
    padding: 0;
    margin: 0;
  }

  .prose .legal-dl dt {
    font-weight: var(--font-semibold);
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    align-self: start;
    padding-top: 0.2em;
  }

  .prose .legal-dl dd {
    margin: 0;
    color: var(--color-text);
  }

  @media (max-width: 32rem) {
    .prose .legal-dl {
      grid-template-columns: 1fr;
      row-gap: var(--space-1);
    }
    .prose .legal-dl dd { margin-bottom: var(--space-3); }
  }

  /* ====================================================================
     CONTACT PAGE — /kontakt form + facts aside
     --------------------------------------------------------------------
     Light surface (unlike the ink funnel): a form card beside a quiet
     contact-facts panel. Two columns on desktop, stacked on mobile.
     Form posts to the `inquiry` submission type; kontakt.js upgrades it
     to an in-page success swap (no-JS falls back to a server re-render).
     ==================================================================== */

  .contact-layout__inner {
    width: var(--container-w-wide);
    margin-inline: auto;
    display: grid;
    gap: var(--space-6);
    align-items: start;
  }

  @media (min-width: 56rem) {
    .contact-layout__inner {
      grid-template-columns: 1.3fr 0.9fr;
      gap: var(--space-7);
    }
  }

  /* --- form card --- */
  .contact-form-card {
    background-color: var(--color-surface, #fff);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-2xl);
    padding: clamp(var(--space-5), 4vw, var(--space-8));
  }

  .contact-form-card__title {
    font-size: var(--text-2xl);
    font-weight: var(--font-bold);
    letter-spacing: var(--tracking-tight);
    line-height: var(--leading-tight);
  }

  .contact-form-card__lead {
    margin-top: var(--space-2);
    color: var(--color-text-muted);
    font-size: var(--text-base);
    line-height: var(--leading-snug);
  }

  .contact-form {
    margin-top: var(--space-6);
  }
  .contact-form[hidden] { display: none; }

  .contact-form__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-5) var(--space-4);
  }
  @media (max-width: 34rem) { .contact-form__grid { grid-template-columns: 1fr; } }

  .contact-form__field { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
  .contact-form__field--full { grid-column: 1 / -1; }

  .contact-form__field > label {
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    color: var(--color-text);
  }
  .contact-form__req { color: var(--color-brand-strong); }
  .contact-form__optional { color: var(--color-text-subtle); font-weight: var(--font-normal); }

  .contact-form__field input[type="text"],
  .contact-form__field input[type="email"],
  .contact-form__field input[type="tel"],
  .contact-form__field textarea {
    width: 100%;
    padding: 0.85rem 1rem;
    background-color: var(--color-bg-subtle);
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-text);
    font: inherit;
    transition: border-color var(--duration-fast), background-color var(--duration-fast);
  }
  .contact-form__field textarea {
    resize: vertical;
    min-height: 8rem;
    line-height: var(--leading-normal);
  }
  .contact-form__field input:focus-visible,
  .contact-form__field textarea:focus-visible {
    outline: none;
    border-color: var(--color-brand);
    background-color: var(--color-surface, #fff);
  }
  .contact-form__field--invalid input,
  .contact-form__field--invalid textarea { border-color: #d4564a; }

  .contact-form__consent {
    display: flex;
    gap: var(--space-3);
    margin-top: var(--space-5);
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
    color: var(--color-text-muted);
  }
  .contact-form__consent input {
    flex: none;
    margin-top: 0.15rem;
    width: 1.15rem; height: 1.15rem;
    accent-color: var(--color-brand);
  }
  .contact-form__consent a { color: var(--color-text); text-decoration: underline; text-underline-offset: 0.18em; }

  .contact-form__error { margin: 0; font-size: var(--text-sm); color: #c2410c; }
  .contact-form__error[hidden] { display: none; }

  .contact-form__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3) var(--space-4);
    margin-top: var(--space-6);
  }
  .contact-form__formerror {
    flex-basis: 100%;
    order: -1;
    margin: 0;
    font-size: var(--text-sm);
    color: #c2410c;
  }
  .contact-form__formerror[hidden] { display: none; }
  .contact-form__foot .btn { margin-left: auto; }
  .contact-form__foot .btn[aria-busy="true"] { opacity: 0.6; cursor: progress; }

  /* --- success panel (no-JS server render + JS swap target) --- */
  .contact-form__done {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
    margin-top: var(--space-6);
    padding: clamp(var(--space-5), 4vw, var(--space-7));
    background-color: var(--color-bg-subtle);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
  }
  .contact-form__done[hidden] { display: none; }
  .contact-form__done-mark {
    display: inline-flex; align-items: center; justify-content: center;
    width: 3.25rem; height: 3.25rem;
    border-radius: var(--radius-full);
    background-color: var(--color-brand);
    color: var(--color-brand-fg);
    animation: contact-pop var(--duration-slow) var(--ease-out-quart) both;
  }
  @keyframes contact-pop {
    from { opacity: 0; transform: scale(0.6); }
    to   { opacity: 1; transform: none; }
  }
  .contact-form__done-title {
    font-size: var(--text-xl);
    font-weight: var(--font-bold);
    letter-spacing: var(--tracking-tight);
    outline: none;
  }
  .contact-form__done-copy { color: var(--color-text-muted); }
  .contact-form__done-copy a { color: var(--color-text); text-decoration: underline; text-underline-offset: 0.18em; }

  @media (prefers-reduced-motion: reduce) {
    .contact-form__done-mark { animation: none; }
  }

  /* --- facts aside --- */
  .contact-aside__panel {
    position: sticky;
    top: calc(var(--header-h, 4.5rem) + var(--space-5));
    background-color: var(--color-ink);
    color: var(--color-on-ink);
    border-radius: var(--radius-2xl);
    padding: clamp(var(--space-6), 4vw, var(--space-7));
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
  }
  /* No sticky on mobile (it stacks below the form). */
  @media (max-width: 55.999rem) {
    .contact-aside__panel { position: static; }
  }

  .contact-aside__panel .eyebrow { color: var(--color-brand); }
  .contact-aside__panel .eyebrow::before { background: var(--color-brand); }

  .contact-aside__title {
    font-size: var(--text-2xl);
    font-weight: var(--font-bold);
    letter-spacing: var(--tracking-tight);
    line-height: var(--leading-tight);
    color: var(--color-on-ink);
  }
  .contact-aside__lead {
    color: var(--color-on-ink-muted);
    font-size: var(--text-base);
    line-height: var(--leading-snug);
  }

  .contact-aside__info {
    margin: var(--space-4) 0 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
  }
  .contact-aside__info > div + div {
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border-on-ink);
  }
  .contact-aside__info > div { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
  .contact-aside__info dt {
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--color-on-ink-subtle);
  }
  .contact-aside__info dd {
    margin: 0;
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    line-height: var(--leading-snug);
    color: var(--color-on-ink);
    word-break: break-word;
  }
  .contact-aside__info dd a {
    color: inherit;
    text-decoration: underline;
    text-decoration-color: var(--color-border-on-ink);
    text-underline-offset: 0.22em;
    transition: text-decoration-color var(--duration-fast) var(--ease-standard);
  }
  .contact-aside__info dd a:hover { text-decoration-color: currentColor; }

  .contact-aside__note {
    margin-top: var(--space-5);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border-on-ink);
    font-size: var(--text-sm);
    color: var(--color-on-ink-muted);
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
  }
  .contact-aside__note::before {
    content: "";
    width: 0.5rem; height: 0.5rem;
    background-color: var(--color-brand);
    border-radius: 50%;
    flex-shrink: 0;
  }

  /* ====================================================================
     Bewerbungsfunnel — full-screen application overlay
     --------------------------------------------------------------------
     Driven by the vanilla state machine in /assets/js/funnel.js. Ink
     takeover (the site's signature contrast), brand-green accents, big
     tap targets for the trade audience. Every step lives in the DOM; JS
     toggles [hidden]. Progressive enhancement: no JS = overlay never
     opens, the mailto CTA still works.
     ==================================================================== */

  .sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  .funnel {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: grid;
    color: var(--color-on-ink);
  }
  .funnel[hidden] { display: none; }

  .funnel__backdrop {
    position: absolute;
    inset: 0;
    background-color: rgb(10 10 9 / 0.72);
    backdrop-filter: blur(4px);
    opacity: 0;
    transition: opacity var(--duration-normal) var(--ease-standard);
  }
  .funnel[data-state="open"] .funnel__backdrop { opacity: 1; }

  .funnel__dialog {
    position: relative;
    margin: auto;
    width: min(100% - 2 * var(--space-4), 46rem);
    max-height: min(100% - 2 * var(--space-4), 54rem);
    display: flex;
    flex-direction: column;
    background-color: var(--color-ink);
    border: 1px solid var(--color-border-on-ink);
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-ink);
    overflow: hidden;
    opacity: 0;
    transform: translateY(16px) scale(0.985);
    transition: opacity var(--duration-normal) var(--ease-out-quart),
                transform var(--duration-slow) var(--ease-out-quart);
  }
  .funnel[data-state="open"] .funnel__dialog { opacity: 1; transform: none; }

  /* Full-bleed takeover on phones. */
  @media (max-width: 40rem) {
    .funnel__dialog {
      width: 100%;
      height: 100%;
      max-height: 100%;
      border: 0;
      border-radius: 0;
    }
  }

  /* --- top bar: wordmark · progress · close --- */
  .funnel__bar {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--color-border-on-ink);
  }
  .funnel__mark {
    font-weight: var(--font-bold);
    font-size: var(--text-sm);
    letter-spacing: var(--tracking-tight);
  }
  .funnel__progress {
    display: flex;
    gap: 0.4rem;
    margin-inline: auto;
  }
  .funnel__dot {
    width: 0.5rem; height: 0.5rem;
    border-radius: var(--radius-full);
    background-color: rgb(255 255 255 / 0.22);
    transition: background-color var(--duration-normal) var(--ease-standard),
                width var(--duration-normal) var(--ease-standard);
  }
  .funnel__dot[data-done="true"] { background-color: var(--color-brand); }
  .funnel__dot[data-current="true"] {
    width: 1.5rem;
    background-color: var(--color-brand);
  }
  .funnel__close {
    flex: none;
    display: inline-flex; align-items: center; justify-content: center;
    width: 2.25rem; height: 2.25rem;
    border-radius: var(--radius-full);
    background-color: transparent;
    color: var(--color-on-ink-muted);
    transition: background-color var(--duration-fast), color var(--duration-fast);
  }
  .funnel__close:hover { background-color: rgb(255 255 255 / 0.1); color: var(--color-on-ink); }

  /* --- form / scroll viewport --- */
  .funnel__form { flex: 1; display: flex; flex-direction: column; min-height: 0; }
  .funnel__form[hidden] { display: none; }
  .funnel__viewport {
    flex: 1;
    overflow-y: auto;
    padding: clamp(var(--space-6), 4vw, var(--space-8)) clamp(var(--space-5), 4vw, var(--space-8));
  }

  .funnel__intro {
    margin-bottom: var(--space-6);
    max-width: 42ch;
    color: var(--color-on-ink-muted);
    font-size: var(--text-base);
    line-height: var(--leading-normal);
  }
  .funnel__intro[hidden] { display: none; }

  .funnel__step { border: 0; padding: 0; margin: 0; min-width: 0; }
  .funnel__step[hidden] { display: none; }
  .funnel__step:not([hidden]) {
    animation: funnel-step-in var(--duration-slow) var(--ease-out-quart) both;
  }
  @keyframes funnel-step-in {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: none; }
  }

  .funnel__legend { display: block; width: 100%; margin-bottom: var(--space-6); padding: 0; }
  .funnel__count {
    display: block;
    margin-bottom: var(--space-3);
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--color-brand);
  }
  .funnel__prompt {
    display: block;
    font-size: var(--text-2xl);
    font-weight: var(--font-bold);
    line-height: var(--leading-snug);
    letter-spacing: var(--tracking-tight);
    text-wrap: balance;
  }
  .funnel__help {
    display: block;
    margin-top: var(--space-3);
    color: var(--color-on-ink-subtle);
    font-size: var(--text-sm);
  }

  /* --- question options --- */
  .funnel__options { display: grid; gap: var(--space-3); }
  .funnel__option {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    width: 100%;
    padding: var(--space-4) var(--space-5);
    text-align: left;
    background-color: var(--color-ink-2);
    border: 1.5px solid var(--color-border-on-ink);
    border-radius: var(--radius-lg);
    color: var(--color-on-ink);
    font-size: var(--text-lg);
    font-weight: var(--font-medium);
    cursor: pointer;
    transition: border-color var(--duration-fast) var(--ease-standard),
                background-color var(--duration-fast) var(--ease-standard),
                transform var(--duration-fast) var(--ease-standard);
  }
  @media (hover: hover) {
    .funnel__option:hover { border-color: var(--color-brand); transform: translateY(-1px); }
  }
  .funnel__option[aria-checked="true"] {
    border-color: var(--color-brand);
    background-color: color-mix(in srgb, var(--color-brand) 16%, var(--color-ink-2));
  }
  .funnel__option-key {
    flex: none;
    display: inline-flex; align-items: center; justify-content: center;
    width: 1.9rem; height: 1.9rem;
    border-radius: var(--radius-md);
    background-color: rgb(255 255 255 / 0.08);
    font-size: var(--text-sm);
    font-weight: var(--font-bold);
    color: var(--color-on-ink-muted);
    transition: background-color var(--duration-fast), color var(--duration-fast);
  }
  .funnel__option[aria-checked="true"] .funnel__option-key {
    background-color: var(--color-brand);
    color: var(--color-brand-fg);
  }
  .funnel__option-label { flex: 1; }
  .funnel__option-check {
    flex: none;
    color: var(--color-brand);
    opacity: 0;
    transform: scale(0.6);
    transition: opacity var(--duration-fast), transform var(--duration-fast);
  }
  .funnel__option[aria-checked="true"] .funnel__option-check { opacity: 1; transform: none; }

  /* --- contact step --- */
  .funnel__fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-5) var(--space-4);
  }
  @media (max-width: 34rem) { .funnel__fields { grid-template-columns: 1fr; } }
  .funnel__field { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
  .funnel__field--full { grid-column: 1 / -1; }
  .funnel__field > label {
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    color: var(--color-on-ink-muted);
  }
  .funnel__req { color: var(--color-brand); }
  .funnel__optional { color: var(--color-on-ink-subtle); font-weight: var(--font-normal); }

  .funnel__field input[type="text"],
  .funnel__field input[type="email"],
  .funnel__field input[type="tel"] {
    width: 100%;
    padding: 0.85rem 1rem;
    background-color: var(--color-ink-2);
    border: 1.5px solid var(--color-border-on-ink);
    border-radius: var(--radius-md);
    color: var(--color-on-ink);
    font: inherit;
    transition: border-color var(--duration-fast);
  }
  .funnel__field input:focus-visible { outline: none; border-color: var(--color-brand); }
  .funnel__field input[type="file"] {
    width: 100%;
    padding: 0.5rem 0.6rem;
    background-color: var(--color-ink-2);
    border: 1.5px solid var(--color-border-on-ink);
    border-radius: var(--radius-md);
    color: var(--color-on-ink-subtle);
    font-size: var(--text-sm);
    cursor: pointer;
  }
  .funnel__field input[type="file"]:focus-visible { outline: none; border-color: var(--color-brand); }
  .funnel__field input[type="file"]::file-selector-button {
    margin-right: var(--space-3);
    padding: 0.5rem 0.9rem;
    background-color: rgb(255 255 255 / 0.1);
    border: 1px solid var(--color-border-on-ink);
    border-radius: var(--radius-sm);
    color: var(--color-on-ink);
    font: inherit;
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    cursor: pointer;
    transition: background-color var(--duration-fast);
  }
  .funnel__field input[type="file"]::file-selector-button:hover {
    background-color: rgb(255 255 255 / 0.16);
  }
  .funnel__field--invalid input { border-color: #f08a7a; }

  .funnel__consent {
    display: flex;
    gap: var(--space-3);
    margin-top: var(--space-6);
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
    color: var(--color-on-ink-muted);
  }
  .funnel__consent input {
    flex: none;
    margin-top: 0.15rem;
    width: 1.15rem; height: 1.15rem;
    accent-color: var(--color-brand);
  }
  .funnel__consent a { color: var(--color-on-ink); text-decoration: underline; }

  .funnel__error { margin: 0; font-size: var(--text-sm); color: #f3a39a; }
  .funnel__error[hidden] { display: none; }

  /* --- nav row --- */
  .funnel__nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3) var(--space-4);
    padding: var(--space-4) clamp(var(--space-5), 4vw, var(--space-8));
    border-top: 1px solid var(--color-border-on-ink);
  }
  .funnel__formerror {
    flex-basis: 100%;
    order: -1;
    margin: 0;
    font-size: var(--text-sm);
    color: #f3a39a;
  }
  .funnel__formerror[hidden] { display: none; }
  .funnel__back { margin-right: auto; }
  .funnel__next, .funnel__submit { margin-left: auto; }
  .funnel__back[hidden], .funnel__next[hidden], .funnel__submit[hidden] { display: none; }
  .funnel__next:disabled { opacity: 0.4; cursor: not-allowed; }
  .funnel__submit[aria-busy="true"] { opacity: 0.6; cursor: progress; }

  /* --- success screen --- */
  .funnel__done {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
    padding: clamp(var(--space-7), 6vw, var(--space-10)) var(--space-6);
    text-align: center;
  }
  .funnel__done[hidden] { display: none; }
  .funnel__done-mark {
    display: inline-flex; align-items: center; justify-content: center;
    width: 4rem; height: 4rem;
    border-radius: var(--radius-full);
    background-color: var(--color-brand);
    color: var(--color-brand-fg);
    animation: funnel-pop var(--duration-slow) var(--ease-out-quart) both;
  }
  @keyframes funnel-pop {
    from { opacity: 0; transform: scale(0.6); }
    to   { opacity: 1; transform: none; }
  }
  .funnel__done-title {
    font-size: var(--text-2xl);
    font-weight: var(--font-bold);
    letter-spacing: var(--tracking-tight);
    text-wrap: balance;
    /* Funnel is an ink surface; headings default to --color-ink (dark) and
       would vanish into the background without this explicit on-ink color. */
    color: var(--color-on-ink);
  }
  .funnel__done-copy { max-width: 42ch; color: var(--color-on-ink-muted); }
  .funnel__done-copy a { color: var(--color-on-ink); text-decoration: underline; }

  @media (prefers-reduced-motion: reduce) {
    .funnel__backdrop,
    .funnel__dialog,
    .funnel__step:not([hidden]),
    .funnel__option,
    .funnel__option-check,
    .funnel__done-mark {
      transition: none;
      animation: none;
    }
    .funnel__dialog { transform: none; }
  }

  /* ====================================================================
     ARBEITSKLEIDUNG — /arbeitskleidung (listing) + /arbeitskleidung/{slug}
     --------------------------------------------------------------------
     Listing: a 2-column choice — the external B2B shop vs. the in-house
     MASCOT range — each a tile with a transparent people cut-out. Detail:
     an ink hero mirroring the job hero, then a brochure gallery whose covers
     link out to MASCOT's online flipbooks, then a short feature band.
     ==================================================================== */

  /* --- listing: 2-column choice tiles (B2B shop vs. in-house range) ---
     Each tile is a full-tile link: a text block at the top and a transparent
     cut-out of people in the gear standing on the tile floor at the bottom. */

  .choice-grid {
    width: var(--container-w-wide);
    margin-inline: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(var(--space-4), 3vw, var(--space-6));
  }
  @media (max-width: 760px) {
    .choice-grid { grid-template-columns: 1fr; }
  }

  .choice-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 24rem;
    background: linear-gradient(180deg, var(--color-bg) 0%, var(--color-bg-muted) 100%);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: transform var(--duration-normal) var(--ease-out-quart),
                border-color var(--duration-fast) var(--ease-standard),
                box-shadow var(--duration-normal) var(--ease-out-quart);
  }
  .choice-tile:hover {
    transform: translateY(-3px);
    border-color: var(--color-brand);
    box-shadow: var(--shadow-md);
  }

  .choice-tile__body {
    padding: clamp(var(--space-5), 3vw, var(--space-7));
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
  }

  .choice-tile__eyebrow { color: var(--color-brand-strong); }

  .choice-tile__title {
    font-size: var(--text-2xl);
    font-weight: var(--font-bold);
    letter-spacing: var(--tracking-tight);
    line-height: var(--leading-snug);
    color: var(--color-text);
  }

  .choice-tile__text {
    max-width: 38ch;
    color: var(--color-text-muted);
    font-size: var(--text-base);
    line-height: var(--leading-normal);
  }

  .choice-tile__cta {
    margin-top: var(--space-2);
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    color: var(--color-brand-strong);
  }
  .choice-tile__cta::after {
    content: " \2192";
    transition: margin-left var(--duration-fast) var(--ease-standard);
  }
  .choice-tile:hover .choice-tile__cta::after { margin-left: 0.3rem; }

  .choice-tile__art {
    margin-top: auto;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-inline: var(--space-5);
  }
  .choice-tile__art img {
    display: block;
    width: min(100%, 25rem);
    height: auto;
    object-fit: contain;
    transform-origin: bottom center;
    transition: transform var(--duration-slow) var(--ease-out-quart);
  }
  .choice-tile:hover .choice-tile__art img { transform: scale(1.03); }

  /* --- detail: ink hero (mirrors .job-hero) --- */

  .ww-hero {
    background-color: var(--color-ink);
    color: var(--color-on-ink);
    padding-block: clamp(var(--space-8), 7vw, var(--space-10));
  }

  .ww-hero__inner {
    width: var(--container-w-wide);
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-4);
  }

  .ww-hero__back {
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    color: var(--color-on-ink-muted);
    text-decoration: none;
    transition: color var(--duration-fast) var(--ease-standard);
  }
  .ww-hero__back:hover { color: var(--color-on-ink); }

  .ww-hero__eyebrow { color: var(--color-brand); }

  .ww-hero__title {
    font-size: var(--text-4xl);
    font-weight: var(--font-bold);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tighter);
    color: var(--color-on-ink);
  }

  .ww-hero__lead {
    max-width: 56ch;
    font-size: var(--text-lg);
    line-height: var(--leading-normal);
    color: var(--color-on-ink-muted);
  }

  .ww-hero__cta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-top: var(--space-3);
  }

  /* --- detail: feature band (below the gallery; not .prose) --- */

  /* Match the section head's container so the copy's left edge lines up
     under the heading; cap the reading measure on the paragraph itself. */
  .ww-about {
    width: var(--container-w-wide);
    margin-inline: auto;
  }
  .ww-about p {
    max-width: 62ch;
    font-size: var(--text-lg);
    line-height: var(--leading-relaxed);
    color: var(--color-text-muted);
    text-wrap: pretty;
  }
  .ww-about p + p { margin-top: var(--space-4); }

  /* --- detail: brochure gallery --- */

  .brochures {
    list-style: none;
    width: var(--container-w-wide);
    margin-inline: auto;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 9.5rem), 1fr));
    gap: clamp(var(--space-4), 3vw, var(--space-6));
  }

  .brochure {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    text-decoration: none;
    color: inherit;
  }

  .brochure__media {
    aspect-ratio: 295 / 416;
    overflow: hidden;
    border-radius: var(--radius-md);
    background-color: var(--color-bg-muted);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-sm);
    transition: transform var(--duration-normal) var(--ease-out-quart),
                box-shadow var(--duration-normal) var(--ease-out-quart),
                border-color var(--duration-fast) var(--ease-standard);
  }

  .brochure:hover .brochure__media {
    transform: translateY(-3px);
    border-color: var(--color-brand);
    box-shadow: var(--shadow-md);
  }

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

  .brochure__label {
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    letter-spacing: var(--tracking-tight);
    color: var(--color-text);
    line-height: var(--leading-snug);
  }
  .brochure:hover .brochure__label { color: var(--color-brand-strong); }

  @media (prefers-reduced-motion: reduce) {
    .choice-tile,
    .choice-tile__art img,
    .brochure__media { transition: none; }
    .choice-tile:hover,
    .choice-tile:hover .choice-tile__art img,
    .brochure:hover .brochure__media { transform: none; }
  }
}