/* ==========================================================================
   IB Weingärtner — Components
   --------------------------------------------------------------------------
   Editorial-technical visual language. Hairlines are structural, not
   decorative. Accent appears as signal — never as a field. Type carries
   most of the narrative weight; images support, never dominate.

   Component vocabulary (Phase 0 set):
     · .eyebrow              — small-caps label with optional numeral
     · .rule                 — hairline divider utility
     · .marker / .marker-dot — accent CAD-callout marks
     · .btn / .btn--*        — actions: primary, ghost, accent, link-arrow
     · .hero / .hero--*      — typographic + image hero treatments
     · .stat-row / .stat     — typographic stat block
     · .section-head         — eyebrow + heading + lead introduction
     · .card / .card--*      — card with image AND typographic fallback
   ========================================================================== */

@layer components {
  /* ====================================================================
     EYEBROW — small-caps label
     -------------------------------------------------------------------- */

  .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;
    color: var(--color-text-muted);
    line-height: 1;
  }

  /* ====================================================================
     HAIRLINE — structural rule
     -------------------------------------------------------------------- */

  .rule {
    display: block;
    width: 100%;
    height: 1px;
    background-color: var(--color-border);
    border: 0;
    margin: 0;
  }

  .rule--strong { background-color: var(--color-border-strong); }
  .rule--ink    { background-color: var(--color-text); }
  .rule--accent { background-color: var(--color-accent); height: 2px; }

  /* ====================================================================
     MARKERS — CAD-callout-style dots / corner ticks
     -------------------------------------------------------------------- */

  .marker-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--color-accent);
    flex-shrink: 0;
  }

  .marker-tick {
    display: inline-block;
    width: 14px;
    height: 1px;
    background-color: var(--color-text);
  }

  /* ====================================================================
     SECTION — top-level vertical rhythm wrapper
     -------------------------------------------------------------------- */

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

  .section--tight  { padding-block: var(--space-7); }
  .section--loose  { padding-block: var(--space-10); }

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

  .section--ink :where(h1, h2, h3, h4, h5, h6) { color: inherit; }
  .section--ink .eyebrow                       { color: var(--color-accent); }
  .section--ink .rule                          { background-color: rgb(255 255 255 / 0.16); }

  /* ====================================================================
     SECTION-HEAD — eyebrow + heading + lead block
     -------------------------------------------------------------------- */

  .section-head {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    padding-block: var(--space-5);
    border-block-start: 1px solid var(--color-border);
  }

  .section-head__title {
    font-size: var(--text-3xl);
    font-weight: var(--font-light);
    letter-spacing: var(--tracking-tight);
    line-height: var(--leading-tight);
    margin: var(--space-4) 0 0 0;
    text-wrap: balance;
  }

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

  /* ====================================================================
     HERO — TYPOGRAPHIC TREATMENT
     -------------------------------------------------------------------- */

  .hero {
    position: relative;
    padding-block: var(--space-9) var(--space-7);
    border-block-end: 1px solid var(--color-border);
  }

  .hero__inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-7);
    align-items: end;
  }

  @media (min-width: 900px) {
    .hero__inner {
      grid-template-columns: minmax(0, 9fr) minmax(0, 3fr);
      gap: var(--space-8);
    }
  }

  /* Split-hero: text left, image right (Phase 3 Polish — Home).
     Wider image column than the meta-only treatment above.
     Image and text both top-align so the image hugs the eyebrow line. */
  @media (min-width: 900px) {
    .hero--split .hero__inner {
      grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
      align-items: start;
      gap: var(--space-8);
    }
  }

  .hero__eyebrow { margin-block-end: var(--space-7); }

  .hero__title {
    font-size: var(--text-display-sm);
    font-weight: var(--font-light);
    line-height: var(--leading-display);
    letter-spacing: var(--tracking-display);
    color: var(--color-text-strong);
    margin: 0;
    text-wrap: balance;
    /* Use a tabular figure feature on numerals for "130" etc. */
    font-feature-settings: "ss01", "tnum" off;
  }

  .hero__title .accent {
    color: var(--color-accent);
    font-style: normal;
  }

  .hero__title .underline {
    text-decoration: underline;
    text-decoration-color: var(--color-accent);
    text-decoration-thickness: 0.06em;
    text-underline-offset: 0.12em;
  }

  .hero__lead {
    margin-block-start: var(--space-6);
    font-size: var(--text-xl);
    font-weight: var(--font-normal);
    line-height: var(--leading-snug);
    color: var(--color-text-muted);
    max-width: 48ch;
    text-wrap: pretty;
  }

  .hero__actions {
    margin-block-start: var(--space-7);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-5);
    align-items: center;
  }

  .hero__meta {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    border-inline-start: 1px solid var(--color-border-strong);
    padding-inline-start: var(--space-5);
  }

  .hero__meta dt {
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: var(--tracking-eyebrow);
    color: var(--color-text-subtle);
    font-weight: var(--font-medium);
  }

  .hero__meta dd {
    margin: 0 0 var(--space-3) 0;
    color: var(--color-text);
    font-size: var(--text-base);
  }

  /* Inline meta line (Split-Hero) — Standort · Disziplinen · VDI as a
     single horizontal list under the CTAs. */
  .hero__meta-inline {
    list-style: none;
    margin: var(--space-7) 0 0 0;
    padding: var(--space-4) 0 0 0;
    border-block-start: 1px solid var(--color-border);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3) var(--space-6);
    font-size: var(--text-sm);
    color: var(--color-text);
  }

  .hero__meta-inline li {
    display: inline-flex;
    align-items: baseline;
    gap: var(--space-3);
  }

  .hero__meta-inline span {
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: var(--tracking-eyebrow);
    color: var(--color-text-subtle);
    font-weight: var(--font-medium);
  }

  /* Split-Hero image column — same editorial duotone as .hero--image so
     the language stays consistent across treatments. */
  .hero__image {
    position: relative;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background-color: var(--ink-700);
    isolation: isolate;
  }

  @media (min-width: 900px) {
    .hero__image {
      aspect-ratio: 3 / 4;
    }
  }

  .hero__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(0.65) contrast(1.05) brightness(0.85);
  }

  .hero__image::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
      180deg,
      rgb(33 44 54 / 0.10) 0%,
      rgb(33 44 54 / 0.25) 60%,
      rgb(33 44 54 / 0.55) 100%
    );
    pointer-events: none;
    z-index: 1;
  }

  .hero__image-corner {
    position: absolute;
    inset-block-start: var(--space-5);
    inset-inline-end: var(--space-5);
    z-index: 2;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;
    color: var(--color-text-on-strong);
  }

  .hero__image-corner::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--color-accent);
  }

  /* ====================================================================
     HERO — IMAGE TREATMENT
     -------------------------------------------------------------------- */

  .hero--image {
    border-block-end: 0;
    padding: 0;
  }

  .hero--image .hero__media {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background-color: var(--ink-700);
    isolation: isolate;
  }

  @media (min-width: 1024px) {
    .hero--image .hero__media { aspect-ratio: 21 / 9; }
  }

  .hero--image .hero__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Editorial duotone: drop saturation, lean toward ink. */
    filter: grayscale(0.65) contrast(1.05) brightness(0.85);
  }

  /* Cool-tinted overlay so the image reads as ink-paper, not stock-corporate. */
  .hero--image .hero__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
      180deg,
      rgb(33 44 54 / 0.15) 0%,
      rgb(33 44 54 / 0.35) 60%,
      rgb(33 44 54 / 0.75) 100%
    );
    pointer-events: none;
    z-index: 1;
  }

  /* Bottom-left CAD-callout frame holding the headline. */
  .hero--image .hero__callout {
    position: absolute;
    inset-inline-start: var(--space-6);
    inset-block-end: var(--space-6);
    z-index: 2;
    max-width: min(38rem, 80%);
    padding: var(--space-5) var(--space-6);
    background-color: var(--color-bg);
    border: 1px solid var(--color-border-strong);
    color: var(--color-text);
  }

  @media (min-width: 768px) {
    .hero--image .hero__callout {
      inset-inline-start: var(--space-8);
      inset-block-end: var(--space-8);
      padding: var(--space-6) var(--space-7);
    }
  }

  .hero--image .hero__callout-title {
    font-size: var(--text-3xl);
    font-weight: var(--font-light);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
    margin: var(--space-3) 0 0 0;
    text-wrap: balance;
  }

  /* Top-right corner CAD mark — accent dot + line */
  .hero--image .hero__corner {
    position: absolute;
    inset-block-start: var(--space-6);
    inset-inline-end: var(--space-6);
    z-index: 2;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;
    color: var(--color-text-on-strong);
  }

  .hero--image .hero__corner::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--color-accent);
  }

  /* ====================================================================
     FILLER — full-bleed image strip with overlay text/quote
     --------------------------------------------------------------------
     Visuelle Brücke zwischen Sektionen, die selbst keine Bilder führen.
     Nicht klickbar (aria-hidden), kein Eyebrow, kein CTA — bewusst leise.
     Höhe ~35vh, oben/unten gekappt damit Lese-Sektionen nicht „fluten".
     -------------------------------------------------------------------- */

  .filler {
    position: relative;
    width: 100%;
    height: clamp(15rem, 35vh, 26rem);
    overflow: hidden;
    background-color: var(--ink-700);
    isolation: isolate;
  }

  .filler img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(0.65) contrast(1.05) brightness(0.85);
  }

  .filler__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-6);
    background: linear-gradient(
      180deg,
      rgb(33 44 54 / 0.30) 0%,
      rgb(33 44 54 / 0.50) 100%
    );
  }

  .filler__quote {
    margin: 0;
    max-width: 44ch;
    text-align: center;
    color: var(--color-text-on-strong);
    font-size: var(--text-2xl);
    font-weight: var(--font-light);
    line-height: var(--leading-snug);
    letter-spacing: var(--tracking-tight);
    text-wrap: balance;
  }

  @media (min-width: 768px) {
    .filler__quote { font-size: var(--text-3xl); }
  }

  .filler__quote p { margin: 0; }

  /* ====================================================================
     STAT-ROW — typographic statistics block
     -------------------------------------------------------------------- */

  .stat-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    border-block: 1px solid var(--color-border);
  }

  @media (min-width: 768px) {
    .stat-row {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }

  .stat {
    padding: var(--space-7) var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    position: relative;
  }

  /* Internal hairlines: horizontal between rows on mobile, vertical between
     columns on desktop. */
  .stat + .stat {
    border-block-start: 1px solid var(--color-border);
  }

  @media (min-width: 768px) {
    .stat + .stat {
      border-block-start: 0;
      border-inline-start: 1px solid var(--color-border);
    }
  }

  .stat__value {
    font-size: var(--text-display-sm);
    font-weight: var(--font-light);
    line-height: 1;
    letter-spacing: var(--tracking-display);
    color: var(--color-text-strong);
    font-variant-numeric: lining-nums proportional-nums;
  }

  .stat__value .unit {
    font-size: 0.4em;
    font-weight: var(--font-normal);
    letter-spacing: 0;
    margin-inline-start: 0.2em;
    color: var(--color-text-muted);
    vertical-align: baseline;
  }

  .stat__label {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    line-height: var(--leading-snug);
    text-wrap: pretty;
    max-width: 24ch;
    margin-block-start: var(--space-2);
  }

  .stat__caption {
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: var(--tracking-eyebrow);
    color: var(--color-text-subtle);
    font-weight: var(--font-medium);
  }

  /* When the stat-row sits inside an .ink section */
  .section--ink .stat-row { border-color: rgb(255 255 255 / 0.16); }
  .section--ink .stat + .stat { border-color: rgb(255 255 255 / 0.16); }
  .section--ink .stat__value { color: var(--color-text-on-strong); }
  .section--ink .stat__value .unit,
  .section--ink .stat__label    { color: rgb(255 255 255 / 0.7); }
  .section--ink .stat__caption  { color: rgb(255 255 255 / 0.5); }

  /* ====================================================================
     BUTTONS
     -------------------------------------------------------------------- */

  .btn {
    --_btn-bg:        transparent;
    --_btn-fg:        var(--color-text);
    --_btn-border:    var(--color-border-strong);
    --_btn-bg-hover:  var(--color-bg-muted);
    --_btn-fg-hover:  var(--color-text-strong);
    --_btn-border-hover: var(--color-text);

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-5);
    min-height: 2.75rem;

    font-family: inherit;
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;
    text-decoration: none;
    line-height: 1;
    white-space: nowrap;

    background-color: var(--_btn-bg);
    color: var(--_btn-fg);
    border: 1px solid var(--_btn-border);
    border-radius: 0;
    cursor: pointer;

    transition:
      background-color var(--duration-fast) var(--ease-standard),
      color var(--duration-fast) var(--ease-standard),
      border-color var(--duration-fast) var(--ease-standard),
      transform var(--duration-fast) var(--ease-standard);
  }

  .btn:hover {
    background-color: var(--_btn-bg-hover);
    color: var(--_btn-fg-hover);
    border-color: var(--_btn-border-hover);
    text-decoration: none;
  }

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

  .btn--primary {
    --_btn-bg:        var(--color-text);
    --_btn-fg:        var(--color-bg);
    --_btn-border:    var(--color-text);
    --_btn-bg-hover:  var(--color-text-strong);
    --_btn-fg-hover:  var(--color-bg);
    --_btn-border-hover: var(--color-text-strong);
  }

  .btn--accent {
    --_btn-bg:        var(--color-accent);
    --_btn-fg:        var(--color-accent-fg);
    --_btn-border:    var(--color-accent);
    --_btn-bg-hover:  var(--color-accent-hover);
    --_btn-fg-hover:  var(--color-accent-fg);
    --_btn-border-hover: var(--color-accent-hover);
  }

  .btn--ghost {
    /* default values already match ghost */
  }

  /* Base arrow — works standalone wherever .btn__arrow is used
     (.btn, .link-arrow, .service-list__arrow, .jobs-teaser__arrow,
     site-footer map-link, etc.). */
  .btn__arrow {
    display: inline-block;
    width: 14px;
    height: 1px;
    background-color: currentColor;
    position: relative;
    transition: transform var(--duration-normal) var(--ease-emphasized);
  }

  .btn__arrow::after {
    content: "";
    position: absolute;
    inset-inline-end: -1px;
    inset-block-start: -3px;
    width: 7px;
    height: 7px;
    border-block-start: 1px solid currentColor;
    border-inline-end: 1px solid currentColor;
    transform: rotate(45deg);
    transform-origin: center;
  }

  .btn:hover .btn__arrow { transform: translateX(4px); }

  /* Inline link with animated underline + arrow */
  .link-arrow {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    font-size: var(--text-base);
    font-weight: var(--font-medium);
    color: var(--color-text);
    text-decoration: none;
    line-height: 1.2;
    border-block-end: 1px solid var(--color-text);
    padding-block-end: var(--space-1);
    transition: color var(--duration-fast) var(--ease-standard),
                border-color var(--duration-fast) var(--ease-standard);
  }

  .link-arrow:hover {
    color: var(--color-accent);
    border-color: var(--color-accent);
    text-decoration: none;
  }

  .link-arrow .btn__arrow {
    width: 18px;
    transition: transform var(--duration-normal) var(--ease-emphasized);
  }

  .link-arrow:hover .btn__arrow { transform: translateX(5px); }

  /* ====================================================================
     CARD GRID
     -------------------------------------------------------------------- */

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

  @media (min-width: 640px) {
    .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }

  @media (min-width: 1024px) {
    .card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  }

  /* ====================================================================
     CARD — base + variants
     -------------------------------------------------------------------- */

  .card {
    container-type: inline-size;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    isolation: isolate;
    transition: transform var(--duration-normal) var(--ease-standard);
  }

  a.card { color: inherit; }
  a.card:hover { text-decoration: none; }
  a.card:hover .card__title { color: var(--color-text-strong); }
  a.card:hover .card__media img { transform: scale(1.02); }

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

  .card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(0.4);
    transition: transform var(--duration-slow) var(--ease-emphasized);
  }

  /* Year-as-placeholder — the typographic "image" for cards without a photo.
     Massive numeral, hairline above and below as plate edges. */
  .card__placeholder {
    aspect-ratio: 4 / 3;
    margin-block-end: var(--space-4);
    background-color: var(--color-bg-subtle);
    border-block: 1px solid var(--color-border-strong);
    display: grid;
    place-items: center;
    position: relative;
    overflow: hidden;
  }

  .card__placeholder-year {
    font-size: clamp(4rem, 18cqi, 9rem);
    font-weight: var(--font-light);
    letter-spacing: var(--tracking-display);
    line-height: 0.85;
    color: var(--color-text-strong);
    font-variant-numeric: lining-nums proportional-nums;
  }

  /* Tiny corner accent — repurposes the CAD-callout language */
  .card__placeholder::before,
  .card__placeholder::after {
    content: "";
    position: absolute;
    width: 12px;
    height: 12px;
  }

  .card__placeholder::before {
    inset-block-start: var(--space-3);
    inset-inline-start: var(--space-3);
    border-block-start: 1px solid var(--color-text);
    border-inline-start: 1px solid var(--color-text);
  }

  .card__placeholder::after {
    inset-block-end: var(--space-3);
    inset-inline-end: var(--space-3);
    border-block-end: 1px solid var(--color-accent);
    border-inline-end: 1px solid var(--color-accent);
  }

  /* Image-card: small accent dot at top-right of media */
  .card--image .card__media::after {
    content: "";
    position: absolute;
    inset-block-start: var(--space-3);
    inset-inline-end: var(--space-3);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--color-accent);
    z-index: 1;
  }

  /* Card body */
  .card__meta {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: var(--tracking-eyebrow);
    font-weight: var(--font-medium);
    color: var(--color-text-muted);
    margin-block-end: var(--space-2);
  }

  .card__meta-sep {
    width: 4px;
    height: 4px;
    background-color: var(--color-text-subtle);
    flex-shrink: 0;
  }

  .card__title {
    font-size: var(--text-xl);
    font-weight: var(--font-medium);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
    color: var(--color-text);
    margin: 0 0 var(--space-3) 0;
    text-wrap: balance;
    transition: color var(--duration-fast) var(--ease-standard);
  }

  .card__excerpt {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    line-height: var(--leading-snug);
    margin: 0;
    text-wrap: pretty;
  }

  .card__tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-block-start: var(--space-4);
    padding-block-start: var(--space-4);
    border-block-start: 1px solid var(--color-border);
  }

  .card__tag {
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    letter-spacing: 0.04em;
    color: var(--color-text-muted);
    padding: var(--space-1) var(--space-3);
    border: 1px solid var(--color-border);
  }

  /* ====================================================================
     ACCENT TOGGLE (Phase 0 sandbox only — removed once accent is locked)
     --------------------------------------------------------------------
     Collapsed by default to a tiny chip button. Click expands the panel
     above it. Native <details>/<summary> — no JS, keyboard + Esc work.
     -------------------------------------------------------------------- */

  .accent-switch {
    position: fixed;
    inset-block-end: var(--space-5);
    inset-inline-end: var(--space-5);
    z-index: 50;
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: var(--tracking-eyebrow);
    font-weight: var(--font-medium);
  }

  /* Strip the default disclosure marker (triangle) — chip alone is the affordance. */
  .accent-switch__toggle {
    list-style: none;
    cursor: pointer;
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-bg);
    border: 1px solid var(--color-border-strong);
    box-shadow: var(--shadow-md);
    transition: box-shadow var(--duration-fast) var(--ease-standard),
                transform var(--duration-fast) var(--ease-standard);
  }

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

  .accent-switch__toggle:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-1px);
  }

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

  /* Expanded panel — sits above the toggle when open. */
  .accent-switch__panel {
    position: absolute;
    inset-block-end: calc(100% + var(--space-3));
    inset-inline-end: 0;
    min-width: 14rem;
    background-color: var(--color-bg);
    border: 1px solid var(--color-border-strong);
    box-shadow: var(--shadow-lg);
  }

  .accent-switch__label {
    padding: var(--space-2) var(--space-4);
    background-color: var(--color-text);
    color: var(--color-bg);
    text-align: center;
    font-size: 0.625rem;
  }

  .accent-switch__options {
    display: flex;
  }

  .accent-switch__btn {
    flex: 1;
    padding: var(--space-3) var(--space-5);
    text-decoration: none;
    color: var(--color-text-muted);
    background-color: transparent;
    border: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font: inherit;
    text-transform: inherit;
    letter-spacing: inherit;
    transition: background-color var(--duration-fast) var(--ease-standard),
                color var(--duration-fast) var(--ease-standard);
  }

  .accent-switch__btn + .accent-switch__btn {
    border-inline-start: 1px solid var(--color-border);
  }

  .accent-switch__btn:hover {
    color: var(--color-text);
    background-color: var(--color-bg-muted);
    text-decoration: none;
  }

  .accent-switch__btn[aria-pressed="true"] {
    color: var(--color-text);
    background-color: var(--color-bg-subtle);
  }

  .accent-switch__chip {
    width: 12px;
    height: 12px;
    border: 1px solid rgb(33 44 54 / 0.3);
    flex-shrink: 0;
  }
  .accent-switch__chip--teal { background-color: var(--teal-500); }
  .accent-switch__chip--sky  { background-color: var(--sky-500); }

  /* Chip inside the toggle is a touch larger so it reads as a button face. */
  .accent-switch__toggle .accent-switch__chip {
    width: 14px;
    height: 14px;
  }

  /* ====================================================================
     SWATCH GRID — small token reference (sandbox)
     -------------------------------------------------------------------- */

  .swatch-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: var(--space-4);
  }

  .swatch {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    font-size: var(--text-xs);
    font-family: var(--font-mono);
  }

  .swatch__chip {
    aspect-ratio: 5 / 3;
    border: 1px solid var(--color-border);
  }

  .swatch__name {
    font-weight: var(--font-medium);
    color: var(--color-text);
    letter-spacing: 0.02em;
  }

  .swatch__value {
    color: var(--color-text-muted);
    text-transform: uppercase;
  }

  /* ====================================================================
     TYPE-SCALE DEMO (sandbox)
     -------------------------------------------------------------------- */

  .type-scale {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
  }

  .type-row {
    display: grid;
    /* minmax(0, 1fr) — without it, the huge display-tier samples push the
       sample track wider than its allotment and break narrow viewports. */
    grid-template-columns: 7rem minmax(0, 1fr);
    gap: var(--space-5);
    padding-block: var(--space-4);
    border-block-start: 1px solid var(--color-border);
    align-items: baseline;
  }

  .type-row:last-child { border-block-end: 1px solid var(--color-border); }

  .type-row__label {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }

  .type-row__sample {
    color: var(--color-text);
    line-height: 1.1;
    /* Display-tier samples (display-lg "Balingen" etc.) intentionally exceed
       the column at narrow viewports — clip cleanly rather than wrap. */
    overflow: hidden;
  }

  /* ====================================================================
     SERVICE-LIST — typografische Leistungs-Liste (Home-Teaser)
     -------------------------------------------------------------------- */

  .service-list {
    list-style: none;
    margin: 0;
    padding: 0;
    border-block-start: 1px solid var(--color-border);
  }

  .service-list__item {
    border-block-end: 1px solid var(--color-border);
  }

  .service-list__link {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-5);
    padding-block: var(--space-5);
    color: inherit;
    text-decoration: none;
    transition: background-color var(--duration-fast) var(--ease-standard);
  }

  @media (min-width: 768px) {
    .service-list__link {
      gap: var(--space-7);
      padding-block: var(--space-6);
    }
  }

  .service-list__link:hover {
    background-color: var(--color-bg-muted);
    text-decoration: none;
  }

  .service-list__link:hover .service-list__title {
    color: var(--color-text-strong);
  }

  .service-list__num {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    letter-spacing: var(--tracking-eyebrow);
    color: var(--color-text-subtle);
    align-self: start;
    padding-block-start: 0.4em;
  }

  .service-list__body {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-2);
  }

  @media (min-width: 768px) {
    .service-list__body {
      grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
      gap: var(--space-7);
      align-items: baseline;
    }
  }

  .service-list__title {
    font-size: var(--text-2xl);
    font-weight: var(--font-light);
    letter-spacing: var(--tracking-tight);
    line-height: var(--leading-tight);
    color: var(--color-text);
    transition: color var(--duration-fast) var(--ease-standard);
  }

  .service-list__lead {
    font-size: var(--text-base);
    color: var(--color-text-muted);
    line-height: var(--leading-snug);
    text-wrap: pretty;
  }

  .service-list__arrow {
    /* Reuse .btn__arrow, but force the inheritable color. */
    color: var(--color-text-muted);
    transition: transform var(--duration-normal) var(--ease-emphasized),
                color var(--duration-fast) var(--ease-standard);
  }

  .service-list__link:hover .service-list__arrow {
    color: var(--color-accent);
    transform: translateX(4px);
  }

  /* ====================================================================
     TEAM-GRID — Mini-Team-Teaser auf Home
     -------------------------------------------------------------------- */

  .team-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-5);
  }

  @media (min-width: 768px) {
    .team-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-6); }
  }

  .team-card { margin: 0; }

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

  .team-card__link:hover { text-decoration: none; }
  .team-card__link:hover .team-card__name { color: var(--color-text-strong); }
  .team-card__link:hover .team-card__avatar { border-color: var(--color-text); }

  .team-card__photo,
  .team-card__avatar {
    display: block;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background-color: var(--color-bg-subtle);
    position: relative;
  }

  .team-card__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(0.4);
  }

  .team-card__avatar {
    border: 1px solid var(--color-border-strong);
    display: grid;
    place-items: center;
    transition: border-color var(--duration-fast) var(--ease-standard);
  }

  /* Tiny accent corner-mark — same CAD-callout vocabulary as card placeholder */
  .team-card__avatar::after {
    content: "";
    position: absolute;
    inset-block-end: var(--space-3);
    inset-inline-end: var(--space-3);
    width: 12px;
    height: 12px;
    border-block-end: 1px solid var(--color-accent);
    border-inline-end: 1px solid var(--color-accent);
  }

  .team-card__initials {
    font-size: clamp(2rem, 12cqi, 3.5rem);
    font-weight: var(--font-light);
    letter-spacing: var(--tracking-display);
    color: var(--color-text);
    font-variant-numeric: lining-nums;
  }

  .team-card__body {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
  }

  .team-card__prefix {
    font-size: var(--text-xs);
    color: var(--color-text-subtle);
    text-transform: uppercase;
    letter-spacing: var(--tracking-eyebrow);
    font-weight: var(--font-medium);
  }

  .team-card__name {
    font-size: var(--text-lg);
    font-weight: var(--font-medium);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
    color: var(--color-text);
    transition: color var(--duration-fast) var(--ease-standard);
  }

  .team-card__role {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    line-height: var(--leading-snug);
  }

  /* Kontakt-Block unter Rolle — auf der /team-Übersicht. Plain text
     (das ganze Card ist ein Link auf das Detail), tappable tel:/mailto:
     warten auf der Detail-Seite. */
  .team-card__contact {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-block-start: var(--space-3);
    padding-block-start: var(--space-3);
    border-block-start: 1px solid var(--color-border);
    font-size: var(--text-xs);
    color: var(--color-text-subtle);
  }

  .team-card__contact-line {
    font-variant-numeric: tabular-nums;
    line-height: 1.5;
  }

  .team-card__contact-line--email {
    word-break: break-all;
    font-variant-numeric: normal;
  }

  /* ====================================================================
     JOBS-TEASER — kompakter Recruiting-Block (Ink-Section auf Home)
     -------------------------------------------------------------------- */

  .jobs-teaser {
    display: flex;
    flex-direction: column;
    gap: var(--space-7);
    margin-block-start: var(--space-5);
  }

  .jobs-teaser__list {
    list-style: none;
    margin: 0;
    padding: 0;
    border-block-start: 1px solid rgb(255 255 255 / 0.16);
  }

  .jobs-teaser__item {
    border-block-end: 1px solid rgb(255 255 255 / 0.16);
  }

  .jobs-teaser__link {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: baseline;
    gap: var(--space-3) var(--space-5);
    padding-block: var(--space-5);
    color: var(--color-text-on-strong);
    text-decoration: none;
  }

  .jobs-teaser__link:hover {
    text-decoration: none;
  }

  .jobs-teaser__link:hover .jobs-teaser__job-title {
    color: var(--color-accent);
  }

  .jobs-teaser__link:hover .jobs-teaser__arrow {
    color: var(--color-accent);
    transform: translateX(4px);
  }

  .jobs-teaser__job-title {
    font-size: var(--text-2xl);
    font-weight: var(--font-light);
    letter-spacing: var(--tracking-tight);
    line-height: var(--leading-tight);
    color: var(--color-text-on-strong);
    transition: color var(--duration-fast) var(--ease-standard);
    grid-column: 1 / 2;
  }

  .jobs-teaser__meta {
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: var(--tracking-eyebrow);
    font-weight: var(--font-medium);
    color: rgb(255 255 255 / 0.6);
    grid-column: 1 / 2;
  }

  @media (min-width: 640px) {
    .jobs-teaser__job-title { grid-column: 1 / 2; }
    .jobs-teaser__meta {
      grid-column: 2 / 3;
      grid-row: 1 / 2;
      align-self: center;
      text-align: end;
    }
  }

  .jobs-teaser__arrow {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
    align-self: center;
    color: rgb(255 255 255 / 0.6);
    transition: transform var(--duration-normal) var(--ease-emphasized),
                color var(--duration-fast) var(--ease-standard);
  }

  @media (min-width: 640px) {
    .jobs-teaser__arrow {
      grid-column: 3 / 4;
    }
    .jobs-teaser__link {
      grid-template-columns: minmax(0, 1fr) auto auto;
    }
  }

  .jobs-teaser__actions {
    margin-block-start: var(--space-5);
  }

  /* link-arrow inside Ink section: white border + lift */
  .section--ink .link-arrow {
    color: var(--color-text-on-strong);
    border-color: rgb(255 255 255 / 0.4);
  }

  .section--ink .link-arrow:hover {
    color: var(--color-accent);
    border-color: var(--color-accent);
  }

  /* ====================================================================
     HERO--IMAGE as link wrapper (Home Lead-Project)
     -------------------------------------------------------------------- */

  .hero--image .hero__link {
    display: block;
    color: inherit;
    text-decoration: none;
  }

  .hero--image .hero__link:hover {
    text-decoration: none;
  }

  .hero--image .hero__link:hover .hero__media img {
    transform: scale(1.02);
  }

  .hero--image .hero__media img {
    transition: transform var(--duration-slow) var(--ease-emphasized);
  }

  .hero--image .hero__link:hover .hero__callout-title {
    color: var(--color-text-strong);
  }

  .hero--image .hero__callout-title {
    transition: color var(--duration-fast) var(--ease-standard);
  }

  /* ====================================================================
     INK-AWARE OVERRIDES — Section-Head + Cards on .section--ink
     --------------------------------------------------------------------
     Make .section--ink a true theme wrapper: anything inside it adapts
     to dark ground. Phase 3 puts Stats + Projekte on ink; later phases
     reuse the same toggle.
     -------------------------------------------------------------------- */

  /* Section-Head on ink: border + lead color flip */
  .section--ink .section-head {
    border-block-start-color: rgb(255 255 255 / 0.16);
  }

  .section--ink .section-head__lead {
    color: rgb(255 255 255 / 0.7);
  }

  /* Cards on ink */
  .section--ink .card__title  { color: var(--color-text-on-strong); }
  .section--ink .card__excerpt,
  .section--ink .card__meta   { color: rgb(255 255 255 / 0.7); }

  .section--ink .card__meta-sep {
    background-color: rgb(255 255 255 / 0.4);
  }

  .section--ink .card__tags {
    border-block-start-color: rgb(255 255 255 / 0.16);
  }

  .section--ink .card__tag {
    color: rgb(255 255 255 / 0.7);
    border-color: rgb(255 255 255 / 0.24);
  }

  .section--ink a.card:hover .card__title {
    color: var(--color-accent);
  }

  /* Card placeholder (year-as-image) on ink: invert plate */
  .section--ink .card__placeholder {
    background-color: rgb(255 255 255 / 0.04);
    border-block-color: rgb(255 255 255 / 0.24);
  }

  .section--ink .card__placeholder-year {
    color: var(--color-text-on-strong);
  }

  .section--ink .card__placeholder::before {
    border-block-start-color: rgb(255 255 255 / 0.6);
    border-inline-start-color: rgb(255 255 255 / 0.6);
  }
  /* card__placeholder::after already uses --color-accent — fine on ink. */

  /* Image-card hover: gentler grayscale on ink */
  .section--ink .card--image .card__media {
    background-color: rgb(255 255 255 / 0.04);
  }

  /* ====================================================================
     PAGE-INTRO — Eyebrow + Titel + Lead, leichter als Hero
     --------------------------------------------------------------------
     Eingesetzt auf Übersichts- und Detail-Seiten unterhalb der Home, wo
     ein voller Hero zu laut wäre. Editorial-quiet im Sinne des Briefs.
     Trägt einen sparsamen CAD-Reference-Dot-Grid als Hintergrund — leise
     technisch, nicht dekorativ. `--split` fügt rechts eine Bildspalte ein
     (gleiche Editorial-Duotone-Sprache wie .hero--split / .hero--image),
     `--split` ohne Bild fällt auf reinen Pattern-BG zurück.
     -------------------------------------------------------------------- */

  .page-intro {
    position: relative;
    padding-block: var(--space-9);
    border-block-end: 1px solid var(--color-border);
    /* CAD-Reference-Dot-Grid: ~4% ink alpha, 24px Raster. Subtil genug,
       um unter Lese-Spalten unsichtbar zu bleiben, prägnant genug, um in
       offenen Flächen Struktur zu geben. */
    background-image: radial-gradient(
      circle at center,
      rgb(33 44 54 / 0.07) 1px,
      transparent 1.5px
    );
    background-size: 24px 24px;
    background-position: 0 0;
    isolation: isolate;
  }

  /* Pattern oben/unten leicht ausblenden, damit der Hairline-Border + die
     anschließende Sektion sauber lesen, ohne harte Kante. */
  .page-intro::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
      180deg,
      var(--color-bg) 0%,
      transparent 12%,
      transparent 88%,
      var(--color-bg) 100%
    );
    pointer-events: none;
    z-index: -1;
  }

  .page-intro__inner {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    max-width: 64ch;
  }

  /* SPLIT — Text links, Bild rechts.
     Mobil bleibt die Bildspalte UNTER dem Text (1-Spalten-Stack), ab
     900px wechselt es auf 7fr/5fr wie .hero--split auf Home. */
  .page-intro--split .page-intro__layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-7);
    align-items: start;
  }

  @media (min-width: 900px) {
    .page-intro--split .page-intro__layout {
      grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
      gap: var(--space-8);
      align-items: stretch;
    }
  }

  /* Bildspalte — gleiches Duotone wie .hero__image, aber etwas flacher
     (Page-Intros sollen ruhiger sitzen als der Home-Hero). Mobile hat
     ein eigenes Aspect-Ratio (Stack ohne Nachbar zum Stretchen); ab
     900px füllt das Bild die Höhe der Text-Spalte (Row stretcht), damit
     keine vertikale Lücke neben dem Lead entsteht. */
  .page-intro__image {
    position: relative;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background-color: var(--ink-700);
    isolation: isolate;
  }

  @media (min-width: 900px) {
    .page-intro__image {
      aspect-ratio: auto;
      height: 100%;
      min-height: 20rem;
    }
  }

  /* `<img>` absolut positionieren, sonst zieht die intrinsische Aspect-
     Ratio des Bildes die Grid-Row über die Text-Höhe hinaus (Browser
     beziehen die natural ratio des `<img>` ins Track-Sizing ein, auch
     wenn width/height explizit auf 100% stehen). Mit `inset: 0` ist
     der Beitrag des Bildes zur Row-Min-Content gleich 0, die Row sizet
     allein nach der Text-Spalte und das Bild füllt die Höhe. */
  .page-intro__image img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(0.65) contrast(1.05) brightness(0.85);
  }

  .page-intro__image::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
      180deg,
      rgb(33 44 54 / 0.10) 0%,
      rgb(33 44 54 / 0.25) 60%,
      rgb(33 44 54 / 0.55) 100%
    );
    pointer-events: none;
    z-index: 1;
  }

  .page-intro__image-corner {
    position: absolute;
    inset-block-start: var(--space-5);
    inset-inline-end: var(--space-5);
    z-index: 2;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;
    color: var(--color-text-on-strong);
  }

  .page-intro__image-corner::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--color-accent);
  }

  .page-intro__title {
    font-size: var(--text-display-sm);
    font-weight: var(--font-light);
    line-height: var(--leading-display);
    letter-spacing: var(--tracking-display);
    color: var(--color-text-strong);
    margin: var(--space-3) 0 0 0;
    text-wrap: balance;
  }

  .page-intro__title .accent {
    color: var(--color-accent);
    font-style: normal;
  }

  /* Service-Detail: Titel ist ein Eigenname, nicht Narrativ —
     etwas kompakter als die Übersicht-Headline. */
  .page-intro__title--service {
    font-size: var(--text-4xl);
    line-height: var(--leading-tight);
  }

  .page-intro__lead {
    font-size: var(--text-xl);
    font-weight: var(--font-normal);
    line-height: var(--leading-snug);
    color: var(--color-text-muted);
    max-width: 56ch;
    text-wrap: pretty;
    margin: var(--space-3) 0 0 0;
  }

  /* Eyebrow als Back-Link auf Detail-Seiten — der Link ist der ganze
     Eyebrow, sonst wirkt das Caps-Label inkonsistent. */
  .page-intro__eyebrow { margin: 0; }

  .page-intro__back {
    color: inherit;
    text-decoration: none;
    transition: color var(--duration-fast) var(--ease-standard);
  }
  .page-intro__back::before {
    content: "← ";
    color: var(--color-text-muted);
  }
  .page-intro__back:hover { color: var(--color-accent); text-decoration: none; }
  .page-intro__back:hover::before { color: var(--color-accent); }

  /* ====================================================================
     PAGE-BODY — Wrapper für .prose auf statischen + Detail-Templates.
     Begrenzt Lese-Spalte ohne den umliegenden Container zu zwingen.
     -------------------------------------------------------------------- */

  .page-body {
    max-width: 68ch;
  }

  /* ====================================================================
     SERVICE-LIST — DETAILED VARIANT (Übersicht /leistungen)
     Luftiger als der Home-Teaser; rechts Projekt-Count + Pfeil als
     Aside. Wiederverwendet das Basis-Pattern, überschreibt nur Maße.
     -------------------------------------------------------------------- */

  .service-list--detailed .service-list__link {
    padding-block: var(--space-6);
  }

  @media (min-width: 768px) {
    .service-list--detailed .service-list__link {
      padding-block: var(--space-7);
      gap: var(--space-7);
    }
  }

  .service-list--detailed .service-list__title {
    font-size: var(--text-3xl);
  }

  @media (min-width: 768px) {
    .service-list--detailed .service-list__lead {
      font-size: var(--text-lg);
      line-height: var(--leading-normal);
      max-width: 52ch;
    }
  }

  /* Aside-Spalte: Projekt-Count über dem Pfeil, rechtsbündig.
     Auf Mobile fällt der Count weg (Platz), Pfeil bleibt. */
  .service-list__aside {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--space-2);
    color: var(--color-text-muted);
    transition: color var(--duration-fast) var(--ease-standard);
  }

  .service-list__count {
    display: none;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;
    white-space: nowrap;
  }

  @media (min-width: 768px) {
    .service-list__count { display: inline; }
  }

  .service-list__link:hover .service-list__aside {
    color: var(--color-accent);
  }

  /* ====================================================================
     FILTER-BAR — Leistungs-Filter auf /projekte
     --------------------------------------------------------------------
     Hairline-bordered Chip-Liste mit „Alle" + Service-Titeln. Aktive Chip
     trägt Akzent-Untergrund + Ink-Foreground; nicht-aktive sind ruhige
     Outline-Chips. Server-rendered Links — kein JS.
     -------------------------------------------------------------------- */

  .filter-bar {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding-block: var(--space-4);
    border-block: 1px solid var(--color-border);
  }

  @media (min-width: 768px) {
    .filter-bar {
      flex-direction: row;
      align-items: center;
      gap: var(--space-5);
    }
  }

  .filter-bar__label {
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;
    color: var(--color-text-subtle);
    line-height: 1;
    flex-shrink: 0;
  }

  .filter-bar__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
  }

  .filter-chip {
    display: inline-flex;
    align-items: center;
    padding: var(--space-2) var(--space-4);
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    text-decoration: none;
    line-height: 1;
    border: 1px solid var(--color-border);
    background-color: transparent;
    transition:
      color var(--duration-fast) var(--ease-standard),
      border-color var(--duration-fast) var(--ease-standard),
      background-color var(--duration-fast) var(--ease-standard);
  }

  .filter-chip:hover {
    color: var(--color-text-strong);
    border-color: var(--color-text);
    text-decoration: none;
  }

  .filter-chip.is-active {
    color: var(--color-text-on-strong);
    background-color: var(--color-text);
    border-color: var(--color-text);
  }

  .filter-chip.is-active:hover {
    color: var(--color-text-on-strong);
    background-color: var(--color-text-strong);
  }

  /* Empty-State (Filter ergibt keine Treffer) */
  .filter-empty {
    font-size: var(--text-base);
    color: var(--color-text-muted);
    padding-block: var(--space-7);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
  }

  /* ====================================================================
     PROJECT-META — Eckdaten-Block auf /projekte/<slug>
     --------------------------------------------------------------------
     Definition-list-Style: Term (klein, Caps) über Description. Gruppen
     stapeln auf Mobile, fließen auf Desktop in Auto-Spalten. Hairline
     oben + unten, ruhig, kein Akzent — der Akzent gehört der Disziplin-
     Tag-Verlinkung im letzten Eintrag.
     -------------------------------------------------------------------- */

  .project-meta {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-5) var(--space-7);
    margin: 0;
    padding-block: var(--space-6);
    border-block: 1px solid var(--color-border);
  }

  @media (min-width: 640px) {
    .project-meta {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media (min-width: 1024px) {
    .project-meta {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }

  .project-meta__group {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
  }

  /* Wide group spans the full row on desktop — used for `Leistungen`
     because tag-lists can grow long. */
  @media (min-width: 1024px) {
    .project-meta__group--wide {
      grid-column: 1 / -1;
      padding-block-start: var(--space-5);
      border-block-start: 1px solid var(--color-border);
    }
  }

  .project-meta__term {
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;
    color: var(--color-text-subtle);
    line-height: 1;
    margin: 0;
  }

  .project-meta__desc {
    margin: 0;
    font-size: var(--text-base);
    color: var(--color-text);
    line-height: var(--leading-snug);
  }

  /* Tags inside meta — Service-Cross-Links */
  .project-meta__tags {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
  }

  .project-meta__tag {
    display: inline-flex;
    align-items: center;
    padding: var(--space-2) var(--space-4);
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    text-decoration: none;
    border: 1px solid var(--color-border);
    background-color: transparent;
    transition:
      color var(--duration-fast) var(--ease-standard),
      border-color var(--duration-fast) var(--ease-standard);
  }

  .project-meta__tag:hover {
    color: var(--color-text-strong);
    border-color: var(--color-accent);
    text-decoration: none;
  }

  /* ====================================================================
     PAGE-INTRO — MINIMAL VARIANT (Team-Detail)
     --------------------------------------------------------------------
     Detail-Seiten mit eigenem Identitäts-Block (Team-Member) brauchen
     den Page-Intro nur als Back-Link-Träger. Padding kompakt, kein
     großzügiges Top-Spacing — der nachfolgende Detail-Block übernimmt
     die visuelle Hauptlast.
     -------------------------------------------------------------------- */

  .page-intro--minimal {
    padding-block: var(--space-6) var(--space-4);
    border-block-end: none;
  }

  .page-intro--minimal::before { display: none; }

  /* ====================================================================
     TEAM-DETAIL — vCard-Block auf /team/<slug>
     --------------------------------------------------------------------
     QR-Ziel von Visitenkarten — Mobile-First. Layout: Foto/Avatar links,
     Identität + Kontakt rechts; ab 768px Split, darunter zentrierter
     Stack. Avatar/Foto trägt das gleiche CAD-Akzent-Vokabular wie
     .team-card (Eck-Mark, kein Rahmen am Foto).
     -------------------------------------------------------------------- */

  .team-detail__layout {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-6);
    text-align: center;
  }

  @media (min-width: 768px) {
    .team-detail__layout {
      display: grid;
      grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
      gap: var(--space-8);
      align-items: start;
      text-align: start;
    }
  }

  .team-detail__media {
    width: 100%;
    max-width: 18rem;
  }

  @media (min-width: 768px) {
    .team-detail__media { max-width: none; }
  }

  .team-detail__photo,
  .team-detail__avatar {
    display: block;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background-color: var(--color-bg-subtle);
    position: relative;
  }

  .team-detail__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(0.4);
  }

  .team-detail__avatar {
    border: 1px solid var(--color-border-strong);
    display: grid;
    place-items: center;
  }

  /* CAD-Akzent-Eckmark — gleiches Vokabular wie .team-card__avatar,
     hier proportional zur größeren Avatar-Fläche skaliert. */
  .team-detail__avatar::after {
    content: "";
    position: absolute;
    inset-block-end: var(--space-4);
    inset-inline-end: var(--space-4);
    width: 18px;
    height: 18px;
    border-block-end: 1px solid var(--color-accent);
    border-inline-end: 1px solid var(--color-accent);
  }

  .team-detail__initials {
    font-size: clamp(3.5rem, 22cqi, 5.5rem);
    font-weight: var(--font-light);
    letter-spacing: var(--tracking-display);
    color: var(--color-text);
    font-variant-numeric: lining-nums;
  }

  .team-detail__content {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    align-items: center;
  }

  @media (min-width: 768px) {
    .team-detail__content { align-items: flex-start; }
  }

  .team-detail__prefix {
    margin: 0;
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: var(--tracking-eyebrow);
    font-weight: var(--font-medium);
    color: var(--color-text-subtle);
  }

  .team-detail__name {
    margin: 0;
    font-size: var(--text-display-sm);
    font-weight: var(--font-light);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-display);
    color: var(--color-text-strong);
    text-wrap: balance;
  }

  .team-detail__role {
    margin: 0;
    font-size: var(--text-lg);
    font-weight: var(--font-normal);
    color: var(--color-text-muted);
    line-height: var(--leading-snug);
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    justify-content: center;
  }

  @media (min-width: 768px) {
    .team-detail__role { justify-content: flex-start; }
  }

  /* VDI-Badge inline — kleine Caps-Pille, keine Fläche */
  .team-detail__vdi {
    display: inline-flex;
    align-items: center;
    padding: var(--space-1) var(--space-3);
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;
    color: var(--color-text);
    border: 1px solid var(--color-border-strong);
  }

  /* Schwerpunkt-Chips — Liste, nicht Tags zum Klicken */
  .team-detail__focus {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    justify-content: center;
  }

  @media (min-width: 768px) {
    .team-detail__focus { justify-content: flex-start; }
  }

  .team-detail__focus-item {
    display: inline-flex;
    align-items: center;
    padding: var(--space-2) var(--space-4);
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    border: 1px solid var(--color-border);
  }

  /* Aktions-Buttons (Anrufen / E-Mail / Kontakt speichern) — Mobile-First:
     volle Breite gestapelt, ab 768px nebeneinander. Margin top etwas
     großzügiger, weil das die wichtigsten CTAs nach einem QR-Scan sind. */
  .team-detail__actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    width: 100%;
    margin-block-start: var(--space-3);
  }

  @media (min-width: 480px) {
    .team-detail__actions {
      flex-direction: row;
      flex-wrap: wrap;
      width: auto;
      justify-content: center;
    }
  }

  @media (min-width: 768px) {
    .team-detail__actions { justify-content: flex-start; }
  }

  /* Mobile-CTA-Buttons sollen breiter wirken (Touch-Target) */
  @media (max-width: 479px) {
    .team-detail__actions .btn {
      justify-content: center;
      width: 100%;
    }
  }

  /* Lesbarer Kontakt-Block unter den Buttons (zum Tippen UND Vorlesen) */
  .team-detail__contacts {
    margin: var(--space-4) 0 0 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    width: 100%;
  }

  @media (min-width: 480px) {
    .team-detail__contacts {
      flex-direction: row;
      flex-wrap: wrap;
      gap: var(--space-3) var(--space-7);
      width: auto;
      justify-content: center;
    }
  }

  @media (min-width: 768px) {
    .team-detail__contacts { justify-content: flex-start; }
  }

  .team-detail__contact {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-3);
    align-items: baseline;
    justify-content: center;
  }

  @media (min-width: 768px) {
    .team-detail__contact { justify-content: flex-start; }
  }

  .team-detail__contact dt {
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: var(--tracking-eyebrow);
    font-weight: var(--font-medium);
    color: var(--color-text-subtle);
    margin: 0;
  }

  .team-detail__contact dd {
    margin: 0;
    font-size: var(--text-base);
    color: var(--color-text);
  }

  .team-detail__contact dd a {
    color: inherit;
    text-decoration: none;
    border-block-end: 1px solid transparent;
    transition:
      color var(--duration-fast) var(--ease-standard),
      border-color var(--duration-fast) var(--ease-standard);
  }

  .team-detail__contact dd a:hover {
    color: var(--color-accent);
    border-block-end-color: var(--color-accent);
  }

  /* Bio innerhalb der Detail-Content-Spalte. Großzügiges Top-Spacing,
     damit sie sich klar von den Action-Buttons / Kontakten absetzt.
     Text linksbündig auch auf Mobile (das Layout zentriert die Achse,
     aber Lesefluss soll nicht zentriert sein). */
  .team-detail__bio {
    margin-block-start: var(--space-6);
    max-width: 56ch;
    text-align: start;
  }

  @media (min-width: 768px) {
    .team-detail__bio { margin-block-start: var(--space-7); }
  }

  /* ====================================================================
     TEAM-SHARE — Web-Share-Button mit Desktop-Dropdown-Fallback
     --------------------------------------------------------------------
     `<details>`-basiert: ohne JS toggelt der Browser das Menü, mit JS
     übernimmt die Web Share API auf Mobile. Das Summary-Element ist als
     `.btn.btn--ghost` gestyled; das native Triangle-Marker wird entfernt,
     damit es als Button liest, nicht als Disclosure-Widget.
     -------------------------------------------------------------------- */

  .team-share {
    position: relative;
  }

  .team-share__summary {
    /* `.btn`-Klassen liefern die Basis-Optik. Diese Regeln nehmen nur
       das Disclosure-Triangle weg und geben Cursor-Pointer. */
    cursor: pointer;
    list-style: none;
  }

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

  /* Dropdown-Menü — absolut positioniert über/unter dem Button.
     Auf Mobile (volle Breite Buttons) öffnet es sich darunter,
     auf Desktop floats es als kleines Popover rechtsbündig zum Button. */
  .team-share__menu {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-block-start: var(--space-2);
    background-color: var(--color-bg);
    border: 1px solid var(--color-border-strong);
    box-shadow: 0 8px 24px rgb(33 44 54 / 0.08);
    min-width: 12rem;
  }

  @media (min-width: 480px) {
    .team-share[open] > .team-share__menu {
      position: absolute;
      inset-block-start: calc(100% + var(--space-2));
      inset-inline-start: 0;
      z-index: 20;
      margin-block-start: 0;
    }
  }

  .team-share__option {
    display: flex;
    align-items: center;
    padding: var(--space-3) var(--space-4);
    font: inherit;
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    color: var(--color-text);
    background-color: transparent;
    border: 0;
    border-block-end: 1px solid var(--color-border);
    text-align: start;
    text-decoration: none;
    cursor: pointer;
    transition:
      background-color var(--duration-fast) var(--ease-standard),
      color var(--duration-fast) var(--ease-standard);
  }

  .team-share__option:last-child { border-block-end: 0; }

  .team-share__option:hover,
  .team-share__option:focus-visible {
    background-color: var(--color-bg-muted);
    color: var(--color-text-strong);
    text-decoration: none;
    outline: none;
  }

  .team-share__option[data-share-copied] {
    color: var(--color-accent);
  }

  /* ====================================================================
     JOB-LIST — luftige Übersicht für /jobs (Light-Section). Spiegelt das
     Editorial-Vokabular von .service-list--detailed: Nummer · Body · Pfeil.
     Pensum + Ort sitzen als Caps-Chips unter dem Lead, sodass der Eintrag
     auch ohne Scan der Headline erkennbar ist.
     -------------------------------------------------------------------- */

  .job-list {
    list-style: none;
    margin: 0;
    padding: 0;
    border-block-start: 1px solid var(--color-border-strong);
  }

  .job-list__item {
    border-block-end: 1px solid var(--color-border-strong);
  }

  .job-list__link {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: var(--space-4) var(--space-6);
    align-items: start;
    padding-block: var(--space-6);
    color: var(--color-text-strong);
    text-decoration: none;
  }

  .job-list__link:hover { text-decoration: none; }

  .job-list__link:hover .job-list__title { color: var(--color-accent); }

  .job-list__link:hover .job-list__arrow {
    color: var(--color-accent);
    transform: translateX(4px);
  }

  .job-list__num {
    font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-eyebrow);
    color: var(--color-text-muted);
    padding-block-start: 0.4rem;
  }

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

  .job-list__title {
    font-size: var(--text-2xl);
    font-weight: var(--font-light);
    letter-spacing: var(--tracking-tight);
    line-height: var(--leading-tight);
    color: var(--color-text-strong);
    transition: color var(--duration-fast) var(--ease-standard);
  }

  .job-list__lead {
    font-size: var(--text-base);
    line-height: var(--leading-snug);
    color: var(--color-text);
    max-width: 56ch;
  }

  .job-list__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-block-start: var(--space-1);
  }

  .job-list__chip {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem var(--space-3);
    border: 1px solid var(--color-border-strong);
    border-radius: 999px;
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    text-transform: uppercase;
    letter-spacing: var(--tracking-eyebrow);
    color: var(--color-text-muted);
    line-height: 1;
  }

  .job-list__arrow {
    align-self: center;
    color: var(--color-text-muted);
    transition: transform var(--duration-normal) var(--ease-emphasized),
                color var(--duration-fast) var(--ease-standard);
  }

  @media (max-width: 640px) {
    .job-list__link {
      grid-template-columns: auto minmax(0, 1fr);
      column-gap: var(--space-4);
    }
    .job-list__arrow {
      grid-column: 1 / -1;
      justify-self: end;
    }
    .job-list__title { font-size: var(--text-xl); }
  }

  .job-list__empty {
    color: var(--color-text-muted);
    font-size: var(--text-base);
    max-width: 60ch;
  }

  /* ====================================================================
     JOB-LIST · INITIATIV-VARIANTE — letzte Reihe der Job-Liste, unaufdringlich
     accent-getönt, "+" statt Nummer, akzent-konturierte Chip.
     -------------------------------------------------------------------- */

  .job-list__item--initiativ {
    background: linear-gradient(
      to right,
      color-mix(in srgb, var(--color-accent) 8%, transparent),
      transparent 65%
    );
  }

  .job-list__item--initiativ .job-list__num {
    font-family: inherit;
    font-size: var(--text-2xl);
    font-weight: var(--font-light);
    color: var(--color-accent);
    letter-spacing: 0;
    line-height: 1;
    padding-block-start: 0.1rem;
  }

  .job-list__item--initiativ .job-list__chip {
    border-color: var(--color-accent);
    color: var(--color-accent);
  }

  /* ====================================================================
     JOB-META — kompakte DL für Job-Detail (Pensum / Ort / Mail-To).
     Voll umrahmtes Raster: outer border auf .job-meta, Trenner zwischen
     Rows. Zellen haben Padding auf allen Seiten.
     -------------------------------------------------------------------- */

  .job-meta {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    margin: 0;
    border: 1px solid var(--color-border);
  }

  @media (min-width: 720px) {
    .job-meta {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }

  .job-meta__row {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding: var(--space-4) var(--space-5);
    border-block-end: 1px solid var(--color-border);
  }

  .job-meta__row:last-child { border-block-end: 0; }

  @media (min-width: 720px) {
    .job-meta__row {
      border-block-end: 0;
      border-inline-end: 1px solid var(--color-border);
    }
    .job-meta__row:last-child { border-inline-end: 0; }
  }

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

  .job-meta__val {
    margin: 0;
    font-size: var(--text-lg);
    color: var(--color-text-strong);
    font-weight: var(--font-regular);
  }

  .job-meta__mail {
    color: inherit;
    text-decoration: none;
    border-block-end: 1px solid var(--color-border-strong);
    transition: color var(--duration-fast) var(--ease-standard),
                border-color var(--duration-fast) var(--ease-standard);
  }

  .job-meta__mail:hover {
    color: var(--color-accent);
    border-color: var(--color-accent);
  }

  /* ====================================================================
     PAGE-INTRO ACTIONS + JOB-CTA-ROW — kleine Button-Reihen, einmal im
     Hero unter dem Lead, einmal als Hairline-getrennter Abschluss nach
     dem Markdown-Body. Beide nutzen das bestehende btn / link-arrow-Vokabular.
     -------------------------------------------------------------------- */

  .page-intro__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-4) var(--space-6);
    margin-block-start: var(--space-5);
  }

  .job-cta-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-4) var(--space-6);
    margin-block-start: var(--space-7);
    padding-block-start: var(--space-6);
    border-block-start: 1px solid var(--color-border);
  }

  /* ====================================================================
     BENEFITS-GRID — 3x2 (Desktop) / 2x3 (Tablet) / 1xN (Mobile)
     Editorial-Kachelung mit Akzent-Hairline oben pro Item — visuelles
     Echo der CAD-Callout-Sprache, ohne Lärm.
     -------------------------------------------------------------------- */

  .benefits-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-7) var(--space-6);
  }

  @media (min-width: 640px) {
    .benefits-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }

  @media (min-width: 1024px) {
    .benefits-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  }

  .benefits-grid__item {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding-block-start: var(--space-5);
    border-block-start: 1px solid var(--color-border-strong);
  }

  .benefits-grid__item::before {
    content: "";
    position: absolute;
    inset-block-start: -2px;
    inset-inline-start: 0;
    width: var(--space-6);
    height: 3px;
    background: var(--color-accent);
  }

  .benefits-grid__title {
    font-size: var(--text-xl);
    font-weight: var(--font-regular);
    letter-spacing: var(--tracking-tight);
    line-height: var(--leading-tight);
    color: var(--color-text-strong);
    margin: 0;
  }

  .benefits-grid__lead {
    font-size: var(--text-base);
    line-height: var(--leading-snug);
    color: var(--color-text);
    margin: 0;
    max-width: 38ch;
  }

  /* ====================================================================
     ÜBER UNS — Inhaber-Spotlight (Phase 8)
     --------------------------------------------------------------------
     Inhaber: leichteres Pendant zur /team-Detail-Vitrine. Auf Mobile
     stackt alles, ab 768px Split 4fr/8fr (Foto links, Identität rechts).
     -------------------------------------------------------------------- */

  .ueber-inhaber {
    border-block-start: 1px solid var(--color-border);
  }

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

  @media (min-width: 768px) {
    .ueber-inhaber__layout {
      grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
      gap: var(--space-8);
    }
  }

  .ueber-inhaber__media {
    position: relative;
    aspect-ratio: 4 / 5;
    max-width: 22rem;
    overflow: hidden;
    background-color: var(--ink-700);
    isolation: isolate;
  }

  .ueber-inhaber__photo,
  .ueber-inhaber__photo img {
    display: block;
    width: 100%;
    height: 100%;
  }

  .ueber-inhaber__photo img {
    object-fit: cover;
    filter: grayscale(0.4) contrast(1.05);
  }

  .ueber-inhaber__avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background-color: var(--ink-700);
    color: var(--color-text-on-strong);
    position: relative;
  }

  .ueber-inhaber__avatar::after {
    /* CAD-Akzent-Eckmark — kleine, scharfe Setzung gegen die Fläche. */
    content: "";
    position: absolute;
    inset-block-start: var(--space-4);
    inset-inline-start: var(--space-4);
    width: 18px;
    height: 18px;
    border-block-start: 2px solid var(--color-accent);
    border-inline-start: 2px solid var(--color-accent);
  }

  .ueber-inhaber__initials {
    font-size: clamp(2.75rem, 8vw, 4.5rem);
    font-weight: var(--font-light);
    letter-spacing: var(--tracking-tight);
    line-height: 1;
    color: var(--color-text-on-strong);
  }

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

  .ueber-inhaber__prefix {
    display: block;
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;
    margin-block-end: var(--space-2);
  }

  .ueber-inhaber__name {
    font-size: var(--text-3xl);
    font-weight: var(--font-light);
    letter-spacing: var(--tracking-tight);
    line-height: var(--leading-tight);
    color: var(--color-text-strong);
    margin: var(--space-3) 0 0 0;
    text-wrap: balance;
  }

  .ueber-inhaber__role {
    font-size: var(--text-base);
    color: var(--color-text-muted);
    margin: 0;
  }

  .ueber-inhaber__bio {
    font-size: var(--text-lg);
    line-height: var(--leading-snug);
    color: var(--color-text);
    max-width: 56ch;
    text-wrap: pretty;
    margin-block-start: var(--space-4);
  }

  .ueber-inhaber__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-5) var(--space-7);
    margin-block-start: var(--space-5);
  }

  /* ====================================================================
     FAQ — Kategorie-gruppierte Akkordeon-Liste (Phase 8)
     --------------------------------------------------------------------
     CSS-only via <details>/<summary>. Eine Frage pro Reihe, Hairline
     trennt Items, Marker (+/–) rechts in Akzent. Smooth-open via
     interpolate-size (Baseline 2026 — universal in modernen Browsern).
     -------------------------------------------------------------------- */

  .faq-section + .faq-section {
    margin-block-start: var(--space-9);
  }

  .faq-section__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-5);
    flex-wrap: wrap;
    padding-block-end: var(--space-4);
    border-block-end: 1px solid var(--color-border-strong);
  }

  .faq-section__title {
    font-size: var(--text-2xl);
    font-weight: var(--font-light);
    letter-spacing: var(--tracking-tight);
    line-height: var(--leading-tight);
    color: var(--color-text-strong);
    margin: 0;
  }

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

  .faq-list {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .faq-list__item {
    border-block-end: 1px solid var(--color-border);
  }

  /* <details> als Akkordeon-Item. Marker custom rechts, Hover-Akzent links. */
  .faq-item {
    position: relative;
  }

  .faq-item__summary {
    /* Native disclosure-marker abschalten */
    list-style: none;
    cursor: pointer;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: var(--space-5);
    padding: var(--space-5) 0;
    font-size: var(--text-lg);
    font-weight: var(--font-regular);
    line-height: var(--leading-snug);
    color: var(--color-text-strong);
    transition: color var(--duration-fast) var(--ease-standard);
  }

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

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

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

  /* Akzent-Marker rechts: + → × beim Aufklappen. Reine CSS-Pseudo. */
  .faq-item__marker {
    position: relative;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    color: var(--color-accent);
  }

  .faq-item__marker::before,
  .faq-item__marker::after {
    content: "";
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 0;
    width: 18px;
    height: 1.5px;
    background-color: currentColor;
    transform-origin: center;
    transition: transform var(--duration-fast) var(--ease-standard);
  }

  .faq-item__marker::after {
    transform: translateY(-50%) rotate(90deg);
  }

  .faq-item[open] .faq-item__marker::after {
    transform: translateY(-50%) rotate(0deg);
  }

  /* Antwort-Block. .prose trägt die Markdown-Typografie. */
  .faq-item__answer {
    padding: 0 0 var(--space-6) 0;
    max-width: 68ch;
  }

  /* Empty-State, falls keine Items in einer Kategorie publiziert sind. */
  .faq-section__empty {
    padding-block: var(--space-5);
    color: var(--color-text-muted);
    font-style: italic;
  }

  /* ====================================================================
     UTIL — visually-hidden (Screenreader-only, kein Layout-Footprint)
     -------------------------------------------------------------------- */
  .visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  /* ====================================================================
     KONTAKT — CHANNELS (Tel / Mail / Adresse als drei Karten)
     --------------------------------------------------------------------
     Drei gleichgewichtete Spalten ab 720px, gestapelt darunter. Karten
     sind Hairline-getrennt (keine Box-Shadows, keine Plates) — passt
     zum editorial-technischen Vokabular. Akzent erscheint nur im
     Eyebrow-Hover und auf den Action-Links.
     -------------------------------------------------------------------- */

  .kontakt-channels {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    border-block-start: 1px solid var(--color-border);
    border-block-end: 1px solid var(--color-border);
  }

  @media (min-width: 720px) {
    .kontakt-channels {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }

  .kontakt-channel {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding-block: var(--space-7);
    padding-inline: 0;
    border-block-end: 1px solid var(--color-border);
  }

  .kontakt-channel:last-child {
    border-block-end: none;
  }

  @media (min-width: 720px) {
    .kontakt-channel {
      padding-inline: var(--space-6);
      border-block-end: none;
      border-inline-end: 1px solid var(--color-border);
    }
    .kontakt-channel:first-child {
      padding-inline-start: 0;
    }
    .kontakt-channel:last-child {
      padding-inline-end: 0;
      border-inline-end: none;
    }
  }

  .kontakt-channel__value {
    margin: 0;
    font-size: var(--text-2xl);
    line-height: var(--leading-snug);
    font-weight: var(--font-normal);
    color: var(--color-text-strong);
    letter-spacing: -0.005em;
  }

  .kontakt-channel__value a {
    color: inherit;
    text-decoration: none;
    border-block-end: 1px solid transparent;
    transition:
      color var(--duration-fast) var(--ease-standard),
      border-color var(--duration-fast) var(--ease-standard);
  }

  .kontakt-channel__value a:hover {
    color: var(--color-accent);
    border-block-end-color: var(--color-accent);
  }

  .kontakt-channel__value--address {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    font-size: var(--text-xl);
  }

  .kontakt-channel__caption {
    margin: 0;
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
    color: var(--color-text-muted);
  }

  /* ====================================================================
     OPENING HOURS — kompakter Block, Hairline-getrennt
     --------------------------------------------------------------------
     Bleibt visuell ruhig (keine eigene Plate). Ab 720px Head links,
     Liste rechts; gestapelt darunter. `.ueber-stub`-Marker (Phase 8)
     macht den Stub-Status grep-bar für Phase 10.
     -------------------------------------------------------------------- */

  .opening-hours {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-6);
    padding-block: var(--space-7);
    border-block-end: 1px solid var(--color-border);
  }

  @media (min-width: 720px) {
    .opening-hours {
      grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
      gap: var(--space-8);
      align-items: start;
    }
  }

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

  .opening-hours__title {
    margin: 0;
    font-size: var(--text-3xl);
    line-height: var(--leading-tight);
    font-weight: var(--font-normal);
    color: var(--color-text-strong);
    letter-spacing: -0.005em;
    max-width: 22ch;
  }

  .opening-hours__list {
    margin: 0;
    display: flex;
    flex-direction: column;
  }

  .opening-hours__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-5);
    align-items: baseline;
    padding-block: var(--space-3);
    border-block-end: 1px solid var(--color-border);
    font-size: var(--text-base);
    line-height: var(--leading-normal);
  }

  .opening-hours__row:last-child {
    border-block-end: none;
  }

  .opening-hours__row dt {
    font-weight: var(--font-medium);
    color: var(--color-text-strong);
    margin: 0;
  }

  .opening-hours__row dd {
    margin: 0;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
  }

  .opening-hours__note {
    margin: var(--space-5) 0 0 0;
    grid-column: 1 / -1;
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    max-width: 50ch;
  }

  @media (min-width: 720px) {
    .opening-hours__note {
      grid-column: 2;
      margin-block-start: var(--space-3);
    }
  }

  /* ====================================================================
     MAPS LOADER — Click-to-Load Pattern
     --------------------------------------------------------------------
     Vor Klick: stilisierter Placeholder (CAD-Pattern-BG + Pin-Mark +
     Adress-Label) + Overlay mit Hint und Lade-Button. KEIN Drittanbieter-
     Request, bis User klickt.
     Nach Klick: JS appendet ein iframe; .is-loaded verbirgt Placeholder
     und Overlay. Cookie-frei, kein Consent-Banner nötig.
     -------------------------------------------------------------------- */

  .maps-loader {
    position: relative;
    aspect-ratio: 16 / 9;
    margin-block-start: var(--space-7);
    overflow: hidden;
    border: 1px solid var(--color-border);
    isolation: isolate;
    /* CAD-Doppelraster als Karten-Surrogat. Ein-Klick-Friction-Pattern:
       Pin + Adresse + „Karte laden"-Button sitzen zentriert darüber. */
    background-color: var(--paper-200, #ECEAE3);
    background-image:
      linear-gradient(rgb(33 44 54 / 0.05) 1px, transparent 1px),
      linear-gradient(90deg, rgb(33 44 54 / 0.05) 1px, transparent 1px),
      radial-gradient(circle at center, rgb(33 44 54 / 0.08) 1px, transparent 1.5px);
    background-size: 64px 64px, 64px 64px, 16px 16px;
  }

  @media (max-width: 559.98px) {
    .maps-loader {
      aspect-ratio: 4 / 5;
    }
  }

  /* Pre-Click-Stack — Pin + Adresse + Lade-Button + Alt-Link zentriert
     auf der Karten-Fläche. Kein separates Overlay — der Button ist
     visuell dominant und sitzt direkt im Mittelpunkt. */

  .maps-loader__stack {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
    padding: var(--space-6);
    text-align: center;
    color: var(--color-text-muted);
  }

  .maps-loader__pin {
    width: 2.75rem;
    height: 3.6rem;
    color: var(--color-accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    filter: drop-shadow(0 6px 14px rgb(33 44 54 / 0.18));
  }

  .maps-loader__pin svg {
    width: 100%;
    height: 100%;
  }

  .maps-loader__address {
    margin: 0 0 var(--space-2) 0;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    font-size: var(--text-sm);
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;
    color: var(--color-text-strong);
  }

  .maps-loader__alt {
    margin: 0;
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;
    color: var(--color-text-muted);
  }

  .maps-loader__noscript {
    position: absolute;
    inset: auto 0 0 0;
    z-index: 2;
    margin: 0;
    padding: var(--space-5) var(--space-6);
    background-color: var(--ink-900, #212C36);
    color: var(--color-text-on-strong);
    font-size: var(--text-sm);
  }

  .maps-loader__frame {
    position: absolute;
    inset: 0;
    z-index: 3;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
  }

  /* Geladen-State — Pre-Click-Stack verbergen, iframe übernimmt. */
  .maps-loader.is-loaded .maps-loader__stack {
    display: none;
  }

  /* ====================================================================
     KONTAKT — TEAM-LINK SECTION (Pointer auf /ueber-uns#team)
     --------------------------------------------------------------------
     Kompakter Ink-Block am Ende der Kontakt-Seite. Nicht der primäre CTA
     dieser Seite (Tel/Mail darüber sind es) — eine sekundäre Spur für
     Besucher, die mit einer bestimmten Person sprechen möchten.
     -------------------------------------------------------------------- */

  .kontakt-team-link__title {
    margin: var(--space-4) 0 0 0;
    font-size: var(--text-2xl);
    font-weight: var(--font-normal);
    line-height: var(--leading-snug);
    color: var(--color-text-on-strong);
    max-width: 36ch;
    text-wrap: balance;
  }

  @media (min-width: 720px) {
    .kontakt-team-link__title {
      font-size: var(--text-3xl);
    }
  }

  .kontakt-team-link__lead {
    margin: var(--space-4) 0 0 0;
    max-width: 50ch;
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    color: rgb(255 255 255 / 0.78);
  }

  .kontakt-team-link__actions {
    margin: var(--space-6) 0 0 0;
  }

  /* ====================================================================
     404 — Quicklinks-Liste auf Ink-Section
     --------------------------------------------------------------------
     Listet die fünf Hauptrouten als Inline-Pfeil-Links — für Besucher,
     die nicht wissen wohin zurück. Wrap auf Mobile, Hairline-Trenner
     dazwischen ab 720px für scanbare Sektion.
     -------------------------------------------------------------------- */

  .error-quicklinks {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
  }

  .error-quicklinks > li {
    margin: 0;
  }

  @media (min-width: 720px) {
    .error-quicklinks {
      flex-direction: row;
      flex-wrap: wrap;
      column-gap: var(--space-7);
      row-gap: var(--space-3);
    }
  }
}