:root {
    --kalk: #d2d4d3;
    --kalk-hell: #e5e7e6;
    --nagelfluh: #9b9c97;
    --fuge: #25282a;
    --fuge-weich: #45494b;
    --patina: #34594c;
    --patina-hell: #9fbcb0;

    --inschrift: "Jost", "Futura", "Century Gothic", sans-serif;
    --text: "Source Serif 4", "Iowan Old Style", Georgia, serif;

    --rand: clamp(1.25rem, 4vw, 3.5rem);
    --breite: 1440px;
    --nav-h: 4rem;
    /* Fensterbreite ohne Rollbalken; das Skript setzt den genauen Wert, 100vw ist der Rückfall */
    --fensterbreite: 100vw;
    --tafel-rand: max(var(--rand), (var(--fensterbreite) - var(--breite)) / 2 + var(--rand));
    --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  }

  *, *::before, *::after { box-sizing: border-box; }
  html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 3.5rem); }
  @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

  body {
    margin: 0;
    background: var(--kalk);
    color: var(--fuge);
    font-family: var(--text);
    font-size: 1.0625rem;
    line-height: 1.6;
    font-optical-sizing: auto;
    caret-color: var(--patina);
    scrollbar-color: var(--nagelfluh) var(--kalk);
  }
  ::selection { background: var(--patina); color: var(--kalk-hell); }
  img { max-width: 100%; display: block; }

  a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.22em; }
  a:hover { text-decoration-color: var(--patina); }
  :focus-visible { outline: 2px solid var(--patina); outline-offset: 3px; }

  .skip { position: absolute; left: var(--rand); top: -4rem; background: var(--fuge); color: var(--kalk); padding: 0.6rem 1rem; font-family: var(--inschrift); z-index: 30; }
  .skip:focus { top: 0.75rem; }

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

  .num { font-variant-numeric: tabular-nums lining-nums; }

  /* Versal-Inschrift: Satz statt Steinimitation */
  .versal {
    font-family: var(--inschrift);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    line-height: 1.12;
  }

  /* Platzhalter: sichtbar markiert, nie als echter Wert lesbar */
  .ph {
    font-family: var(--inschrift);
    letter-spacing: 0.04em;
    text-transform: none;
    color: var(--fuge-weich);
    border-bottom: 1px dashed var(--fuge-weich);
    white-space: nowrap;
  }
  /* Große Platzhalter: vorgezeichnet, nicht gemeißelt */
  .jahreszahl .ph, .jahr .ph {
    font-size: inherit;
    letter-spacing: 0.02em;
    border-bottom: 0;
    color: transparent;
    -webkit-text-stroke: 1px var(--fuge-weich);
  }
  @supports not (-webkit-text-stroke: 1px black) {
    .jahreszahl .ph, .jahr .ph { color: var(--fuge-weich); }
  }

  .bildplatz {
    position: relative;
    background: var(--nagelfluh);
    outline: 1px dashed var(--fuge-weich);
    outline-offset: -12px;
    display: grid;
    place-items: center;
    overflow: hidden;
  }
  .bildplatz__hinweis {
    font-family: var(--inschrift);
    font-size: 0.8125rem;
    letter-spacing: 0.02em;
    color: var(--fuge);
    background: var(--kalk-hell);
    padding: 0.45rem 0.8rem;
    max-width: 80%;
    text-align: center;
    line-height: 1.4;
  }

  /* Randcode: Fakten fest am Bildrand */
  .randcode {
    display: flex;
    flex-wrap: wrap;
    font-family: var(--inschrift);
    font-size: 0.75rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--fuge);
    border-top: 1px solid var(--fuge);
  }
  .randcode > span {
    padding: 0.55rem 1.1rem 0.55rem 0;
    margin-right: 1.1rem;
    border-right: 1px solid var(--nagelfluh);
  }
  .randcode > span:last-child { border-right: 0; margin-right: 0; }
  .randcode b { font-weight: 600; margin-right: 0.45em; }

  /* ---------- Navigation ---------- */
  .kopf {
    position: sticky;
    top: 0;
    z-index: 20;
    background: var(--kalk);
    border-bottom: 1px solid var(--fuge);
    transition: background-color 240ms ease, border-color 240ms ease, color 240ms ease;
  }
  /* Über dem Film transparent */
  .kopf--film {
    background: transparent;
    border-bottom-color: rgba(229, 231, 230, 0.35);
    color: var(--kalk-hell);
  }
  .kopf--film .marke__logo { border-color: rgba(229, 231, 230, 0.6); color: rgba(229, 231, 230, 0.85); }
  .kopf--film .menu-knopf { color: var(--kalk-hell); border-color: rgba(229, 231, 230, 0.6); }
  .kopf--film nav a:hover { border-bottom-color: var(--patina-hell); }
  .kopf--film :focus-visible { outline-color: var(--patina-hell); }
  .kopf__innen {
    max-width: var(--breite);
    margin: 0 auto;
    height: var(--nav-h);
    padding: 0 var(--rand);
    display: flex;
    align-items: center;
    gap: 2rem;
  }
  .marke { display: flex; align-items: center; gap: 0.75rem; text-decoration: none; }
  .marke__logo { height: 1.75rem; width: auto; display: block; }
  .kopf--film .marke__logo { filter: invert(1) brightness(1.1); }
  .marke__name { font-size: 0.875rem; letter-spacing: 0.2em; }
  .kopf nav { margin-left: auto; }
  .kopf ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 1.75rem; }
  .kopf nav a {
    font-family: var(--inschrift);
    font-size: 0.875rem;
    letter-spacing: 0.03em;
    text-decoration: none;
    padding: 0.4rem 0;
    border-bottom: 1px solid transparent;
    transition: border-color 160ms ease;
  }
  .kopf nav a:hover { border-bottom-color: var(--patina); }
  .kopf__tel { font-family: var(--inschrift); font-size: 0.875rem; letter-spacing: 0.04em; text-decoration: none; white-space: nowrap; }
  .menu-knopf { display: none; }

  /* ---------- Aufmacher ---------- */
  .aufmacher {
    max-width: var(--breite);
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(22rem, 1fr);
    min-height: min(calc(100svh - var(--nav-h)), 56rem);
    border-bottom: 1px solid var(--fuge);
  }
  .aufmacher__bild { display: grid; grid-template-rows: 1fr auto; padding: var(--rand) 0 0 var(--rand); }
  .aufmacher__bild .bildplatz { min-height: 22rem; }
  .aufmacher__bild .randcode { margin-top: 0; }

  .aufmacher__inschrift {
    padding: var(--rand);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 2.5rem;
  }
  .inschrift-block { padding-top: clamp(1rem, 6vh, 4rem); }
  .inschrift-block .projekt { font-size: clamp(1.2rem, 1.6vw, 1.5rem); letter-spacing: 0.12em; margin: 0; overflow-wrap: break-word; }
  .jahreszahl {
    font-family: var(--inschrift);
    font-weight: 400;
    font-size: clamp(4.5rem, 9vw, 6rem);
    line-height: 0.95;
    letter-spacing: 0.02em;
    margin: 1.25rem 0 1.5rem;
  }
  .beteiligt { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--fuge); }
  .beteiligt li {
    display: flex; justify-content: space-between; gap: 1rem;
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--nagelfluh);
    font-family: var(--inschrift); font-size: 0.875rem; letter-spacing: 0.02em;
  }
  .beteiligt li span:first-child { color: var(--fuge-weich); }
  .beteiligt li.mm { color: var(--fuge); font-weight: 600; }

  .aussage h1 {
    font-family: var(--text);
    font-weight: 400;
    font-size: clamp(1.35rem, 1.7vw, 1.65rem);
    line-height: 1.35;
    margin: 0 0 1.75rem;
    text-wrap: balance;
    max-width: 30ch;
  }
  .aktion { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem 1.75rem; }
  .knopf {
    display: inline-block;
    font-family: var(--inschrift);
    font-size: 0.9375rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-decoration: none;
    background: var(--fuge);
    color: var(--kalk-hell);
    padding: 1rem 1.6rem;
    transition: transform 160ms var(--ease-out), background-color 160ms ease;
  }
  .knopf:active { transform: scale(0.97); }
  @media (hover: hover) and (pointer: fine) { .knopf:hover { background: var(--patina); } }
  .knopf--hell { background: var(--kalk); color: var(--fuge); }
  @media (hover: hover) and (pointer: fine) { .knopf--hell:hover { background: var(--patina-hell); } }
  .aktion__tel { font-family: var(--inschrift); letter-spacing: 0.04em; font-size: 0.9375rem; }

  /* ---------- Film-Aufmacher ---------- */
  .film {
    position: sticky;
    top: 0;
    /* über dem Sockel, unter der Platte */
    z-index: 1;
    /* Der Film läuft bis unter die Kopfzeile */
    margin-top: calc(var(--nav-h) * -1);
    height: 100svh;
    min-height: 34rem;
    overflow: hidden;
    background: var(--fuge);
  }
  .film__video, .film__standbild {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .film__schleier {
    position: absolute;
    inset: 0;
    background:
      linear-gradient(to bottom, rgba(37, 40, 42, 0.62) 0%, rgba(37, 40, 42, 0.3) 45%, rgba(37, 40, 42, 0.7) 100%);
  }
  .film__inhalt {
    position: relative;
    height: 100%;
    max-width: var(--breite);
    margin: 0 auto;
    padding: calc(var(--nav-h) + clamp(2rem, 8vh, 5rem)) var(--rand) clamp(1.5rem, 5vh, 3rem);
    display: grid;
    grid-template-rows: 1fr auto;
    justify-items: center;
    text-align: center;
    color: var(--kalk-hell);
  }
  .film__marke { align-self: center; display: grid; justify-items: center; gap: clamp(1.75rem, 5vh, 3.25rem); }
  .film__logo {
    width: clamp(11rem, 24vw, 17rem);
    height: auto;
    display: block;
    filter: invert(1) brightness(1.12);
  }

  /* Grundleistungen: eine nach der anderen ein- und ausblenden */
  .leistungen-wechsel {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    min-height: clamp(2.25rem, 5vw, 3.5rem);
  }
  .leistungen-wechsel li {
    grid-area: 1 / 1;
    font-family: var(--inschrift);
    font-weight: 500;
    font-size: clamp(1.35rem, 3.2vw, 2.6rem);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    line-height: 1.1;
  }
  @media (prefers-reduced-motion: no-preference) {
    .js .leistungen-wechsel li { opacity: 0; animation: leistungWechsel 12s linear infinite; }
    .js .leistungen-wechsel li:nth-child(2) { animation-delay: 4s; }
    .js .leistungen-wechsel li:nth-child(3) { animation-delay: 8s; }
  }
  @keyframes leistungWechsel {
    0% { opacity: 0; }
    4%, 29% { opacity: 1; }
    33%, 100% { opacity: 0; }
  }
  /* Ohne Bewegung: alle drei nebeneinander */
  @media (prefers-reduced-motion: reduce) {
    .leistungen-wechsel { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem 1.5rem; }
    .leistungen-wechsel li { grid-area: auto; font-size: clamp(1.1rem, 2.2vw, 1.5rem); }
    .leistungen-wechsel li + li { border-left: 1px solid rgba(229, 231, 230, 0.5); padding-left: 1.5rem; }
  }

  .film__fuss { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1rem 1.75rem; }
  .film .knopf { background: var(--kalk-hell); color: var(--fuge); }
  @media (hover: hover) and (pointer: fine) { .film .knopf:hover { background: var(--patina-hell); } }
  .film__tel { font-family: var(--inschrift); letter-spacing: 0.04em; font-size: 0.9375rem; color: var(--kalk-hell); }
  .film ::selection { background: var(--patina-hell); color: var(--fuge); }
  .film :focus-visible { outline-color: var(--patina-hell); }

  /* Die Seite schiebt sich über den Film; zwischen den Platten bleibt er sichtbar */
  main { position: relative; z-index: 1; }
  /* Scrollraum, in dem der feste Sockel freiliegt; als eigenes Element, damit kein Rand kollabiert */
  .sockel-platz { height: var(--sockel-hoehe, 0px); }
  .platte { position: relative; z-index: 2; background: transparent; }

  /* Sockel: liegt fest hinter der Seite, die Platte schiebt sich darüber und legt ihn am Ende frei */
  .js .sockel { position: fixed; left: 0; right: 0; bottom: 0; z-index: 0; }
  .js .sockel--statisch { position: static; }
  .luecke { height: clamp(9rem, 32vh, 18rem); background: transparent; }
  .luecke--schmal { height: clamp(5rem, 16vh, 9rem); }

  .einstieg { background: var(--kalk); border-top: 1px solid var(--fuge); border-bottom: 1px solid var(--fuge); }
  .einstieg__satz {
    max-width: 46ch;
    margin: 0;
    font-size: clamp(1.35rem, 2.4vw, 2rem);
    line-height: 1.3;
    text-wrap: balance;
  }

  /* ---------- Abschnitte ---------- */
  .abschnitt { max-width: var(--breite); margin: 0 auto; padding: clamp(4.5rem, 10vw, 8rem) var(--rand); }
  .abschnitt__titel {
    font-family: var(--inschrift);
    font-weight: 500;
    font-size: clamp(2rem, 4vw, 3.25rem);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1.05;
    margin: 0 0 1.25rem;
  }
  .abschnitt__lead { max-width: 60ch; margin: 0 0 clamp(3rem, 6vw, 4.5rem); font-size: 1.1875rem; }

  /* ---------- Projekte + Leistungsphasen-Fuge ---------- */
  /* Beim Ankommen läuft der Film; die Tafeln schieben sich darüber und
     schließen zum Schluss zu einer durchgehenden Fläche ohne Durchblicke */
  .projekte { padding: clamp(2.5rem, 8vh, 6rem) 0 0; }
  .projekte .abschnitt { padding-top: 0; padding-bottom: 0; }
  .projekte .abschnitt + .abschnitt { margin-top: 0; }

  /* Tafel: die Steinfläche, die sich über den Film schiebt. Sie ist so breit wie
     das Fenster, steht also beim Einschieben ganz draußen und verdeckt den Film
     vollständig, sobald sie angekommen ist. Der Text bleibt in der Spalte der Seite. */
  .tafel,
  .projekt-liste > li.projekt-eintrag,
  .projekt-liste > li.projekt-paar {
    background: var(--kalk-hell);
    margin-inline: calc(50% - var(--fensterbreite) / 2);
    padding: clamp(1.5rem, 3.5vw, 3rem) var(--tafel-rand);
    border-top: 1px solid var(--nagelfluh);
  }
  .projekte__kopf { border-top: 0; }
  .projekt-paar__liste { list-style: none; margin: 0; padding: 0; }
  .projekte__kopf .abschnitt__lead { margin-bottom: clamp(1.75rem, 3vw, 2.5rem); }
  .projekte__kopf .bilanz { margin-bottom: 0; }

  .fuge {
    position: sticky;
    top: var(--nav-h);
    z-index: 10;
    background: var(--kalk-hell);
    border-top: 1px solid var(--fuge);
    border-bottom: 1px solid var(--nagelfluh);
  }
  .fuge__innen { max-width: var(--breite); margin: 0 auto; padding: 0.55rem var(--rand) 0.5rem; display: grid; grid-template-columns: auto 1fr auto; gap: 1.5rem; align-items: center; }
  .fuge__label { font-family: var(--inschrift); font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap; }
  .fuge ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(9, 1fr); }
  .fuge li {
    position: relative;
    font-family: var(--inschrift);
    font-size: 0.75rem;
    text-align: center;
    padding-top: 0.55rem;
    color: var(--fuge-weich);
  }
  .fuge li::before {
    content: "";
    position: absolute; left: 0; right: 0; top: 0;
    height: 3px;
    background: var(--nagelfluh);
    transition: background-color 240ms var(--ease-out);
  }
  .fuge li + li::after { content: ""; position: absolute; left: 0; top: -3px; width: 1px; height: 9px; background: var(--fuge); }
  .fuge li.aktiv { color: var(--fuge); font-weight: 600; }
  .fuge li.aktiv::before { background: var(--patina); }
  .fuge__status { font-family: var(--inschrift); font-size: 0.75rem; letter-spacing: 0.04em; color: var(--fuge-weich); white-space: nowrap; min-width: 16ch; text-align: right; }

  .projekt-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
  .projekt-eintrag {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 0 clamp(1.25rem, 3vw, 3rem);
  }
  .projekt-eintrag .bildplatz { aspect-ratio: 3 / 2; }
  .projekt-eintrag__bild { grid-column: 1 / span 7; }
  .projekt-eintrag__text { grid-column: 9 / span 4; display: flex; flex-direction: column; justify-content: flex-end; }
  .projekt-eintrag--rechts .projekt-eintrag__bild { grid-column: 6 / span 7; grid-row: 1; }
  .projekt-eintrag--rechts .projekt-eintrag__text { grid-column: 1 / span 4; grid-row: 1; }

  .projekt-eintrag h3 { font-size: clamp(1.25rem, 1.9vw, 1.6rem); line-height: 1.2; margin: 0 0 0.25rem; }
  .projekt-eintrag .art { font-family: var(--inschrift); font-size: 0.875rem; letter-spacing: 0.02em; color: var(--fuge-weich); margin: 0 0 1.5rem; }
  .projekt-eintrag .jahr { font-family: var(--inschrift); font-size: clamp(3rem, 5vw, 4rem); line-height: 1; margin: 0 0 1.5rem; }
  .projekt-eintrag dl { margin: 0 0 1.75rem; border-top: 1px solid var(--fuge); }
  .projekt-eintrag dl div { display: grid; grid-template-columns: 8.5rem 1fr; gap: 1rem; padding: 0.5rem 0; border-bottom: 1px solid var(--nagelfluh); }
  .projekt-eintrag dt { font-family: var(--inschrift); font-size: 0.8125rem; letter-spacing: 0.02em; color: var(--fuge-weich); }
  .projekt-eintrag dd { margin: 0; font-family: var(--inschrift); font-size: 0.875rem; }
  .projekt-eintrag .mehr { font-family: var(--inschrift); font-size: 0.9375rem; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 500; }

  /* Meilenstein-Schichten je Projekt */
  .projekt-meilen { list-style: none; margin: 0 0 1.75rem; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--fuge); }
  .projekt-meilen li {
    padding: 0.6rem 0.75rem 0 0;
    margin-right: 0.75rem;
    border-right: 1px solid var(--nagelfluh);
    font-family: var(--inschrift);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }
  .projekt-meilen li:last-child { border-right: 0; margin-right: 0; }
  .projekt-meilen .ph { display: block; width: fit-content; margin-top: 0.3rem; font-size: 0.8125rem; font-weight: 400; letter-spacing: 0.02em; }

  .projekt-paar { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.25rem, 3vw, 3rem); }
  .projekt-paar .projekt-eintrag { display: block; }
  .projekt-paar .projekt-eintrag .bildplatz { aspect-ratio: 4 / 3; margin-bottom: 0; }
  .projekt-paar .projekt-eintrag__text { margin-top: 1.5rem; }
  .projekt-paar .jahr { font-size: 2.5rem; }

  /* Projektbilder */
  .projekte { overflow-x: clip; }
  figure.projekt-eintrag__bild { margin: 0; align-self: start; }
  figure.projekt-eintrag__bild img, img.projekt-eintrag__bild { width: 100%; height: auto; display: block; }
  /* Der Nachweis steht im Bild, auf einem Schattenfuge-Band in der unteren Ecke */
  figure.projekt-eintrag__bild, .weitere__bild { position: relative; }
  .bildnachweis {
    position: absolute;
    left: 0;
    bottom: 0;
    margin: 0;
    padding: 0.4rem 0.75rem 0.35rem;
    background: rgba(37, 40, 42, 0.82);
    color: var(--kalk-hell);
    font-family: var(--inschrift);
    font-weight: 500;
    font-size: 0.6875rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }

  /* Scrollgebundene Bewegung: Bilder zoomen zurück, Abschnittsköpfe laufen zusammen */
  @media (prefers-reduced-motion: no-preference) {
    @supports (animation-timeline: view()) {
      figure.projekt-eintrag__bild, .weitere__bild { overflow: hidden; }
      figure.projekt-eintrag__bild img, .weitere__bild img {
        animation: bildZoom linear both;
        animation-timeline: view();
        animation-range: entry 0% cover 60%;
      }
      @keyframes bildZoom { from { transform: scale(1.14); } to { transform: scale(1); } }

      /* Titel und Lead laufen aus entgegengesetzten Richtungen zusammen */
      .platte .abschnitt__titel {
        animation: vonLinks linear both;
        animation-timeline: view();
        animation-range: entry 5% entry 90%;
      }
      .platte .abschnitt__lead, .platte .bilanz {
        animation: vonRechts linear both;
        animation-timeline: view();
        animation-range: entry 10% entry 100%;
      }
      @keyframes vonLinks { from { transform: translateX(-5%); opacity: 0.2; } to { transform: none; opacity: 1; } }
      @keyframes vonRechts { from { transform: translateX(5%); opacity: 0.2; } to { transform: none; opacity: 1; } }

      /* Der Film zieht beim Scrollen langsam an; am Dokument statt am Element gemessen,
         weil der Aufmacher klebt und deshalb keine eigene Sichtbarkeitsspanne hat */
      .film__video, .film__standbild {
        animation: filmZoom linear both;
        animation-timeline: scroll(root block);
        animation-range: 0% 60%;
      }
      @keyframes filmZoom { from { transform: scale(1); } to { transform: scale(1.14); } }

      /* Der Aufmacher gibt den Film frei, sobald die Platte steigt: In den Lücken
         läuft dann nur noch das Bild, nicht mehr Logo und Grundleistungen */
      .film__inhalt {
        animation: aufmacherAus linear both;
        animation-timeline: scroll(root block);
        animation-range: 0px 100svh;
      }
      @keyframes aufmacherAus {
        0%, 45% { opacity: 1; transform: none; }
        98% { opacity: 0; transform: translateY(-1.25rem); visibility: visible; }
        100% { opacity: 0; transform: translateY(-1.25rem); visibility: hidden; }
      }
    }
  }

  /* Referenzen schieben sich beim Scrollen von der Seite ins Bild */
  @media (prefers-reduced-motion: no-preference) {
    .js .projekt-eintrag, .js .projekt-paar, .js .weitere__raster li {
      opacity: 0;
      transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out);
    }
    .js .projekt-eintrag { transform: translateX(-3rem); }
    .js .projekt-eintrag--rechts, .js .projekt-paar { transform: translateX(3rem); }
    /* Das Paar bewegt sich als eine Tafel, seine Hälften bleiben stehen */
    .js .projekt-paar .projekt-eintrag { opacity: 1; transform: none; transition: none; }
    .js .weitere__raster li { transform: translateY(1.75rem); }
    .js .weitere__raster li:nth-child(2) { transition-delay: 90ms; }
    .js .weitere__raster li:nth-child(3) { transition-delay: 180ms; }
    .js .weitere__raster li:nth-child(4) { transition-delay: 270ms; }
    .js .projekt-eintrag.sichtbar, .js .projekt-paar.sichtbar, .js .weitere__raster li.sichtbar { opacity: 1; transform: none; }
  }

  /* Scrollgebunden: Die Tafeln schieben sich beim Scrollen über den Film und stehen,
     sobald die Referenz vollständig im Blick und damit lesbar ist */
  @media (prefers-reduced-motion: no-preference) {
    @supports (animation-timeline: view()) {
      .js .projekt-eintrag, .js .projekt-paar, .js .weitere__raster li { opacity: 1; transform: none; transition: none; }
      .js .weitere__raster li { transition-delay: 0s; }

      .projekte .tafel,
      .projekt-liste > li.projekt-eintrag,
      .projekt-liste > li.projekt-paar {
        animation: tafelVonLinks linear both;
        animation-timeline: view();
        animation-range: entry 0% entry 92%;
        will-change: transform;
      }
      .projekt-liste > li.projekt-eintrag--rechts,
      .projekt-liste > li.projekt-paar,
      .projekte .tafel--rechts { animation-name: tafelVonRechts; }
      @keyframes tafelVonLinks { from { transform: translateX(-100%); } to { transform: none; } }
      @keyframes tafelVonRechts { from { transform: translateX(100%); } to { transform: none; } }
    }
  }

  /* Kennzahl der Referenzen */
  .bilanz { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.75rem 2.5rem; margin: 0 0 clamp(3rem, 6vw, 4.5rem); padding-top: 1.25rem; border-top: 1px solid var(--fuge); }
  .bilanz__zahl { font-family: var(--inschrift); font-size: clamp(2rem, 4vw, 3.25rem); line-height: 1; letter-spacing: 0.02em; margin: 0; }
  .bilanz__text { margin: 0; max-width: 46ch; }
  .bilanz__fuss { margin: 0; font-family: var(--inschrift); font-size: 0.8125rem; letter-spacing: 0.02em; color: var(--fuge-weich); }

  .projekt-eintrag__satz { margin: 0 0 1.25rem; max-width: 62ch; }

  /* Eintrag ohne Bild: Text links, Daten rechts */
  .projekt-eintrag--text .projekt-eintrag__text { grid-column: 1 / span 6; }
  .projekt-eintrag--text .projekt-eintrag__daten { grid-column: 8 / span 5; align-self: end; }
  .projekt-eintrag--text .jahr { font-size: clamp(3.25rem, 6vw, 5rem); }
  .projekt-eintrag__daten { margin: 0; border-top: 1px solid var(--fuge); }
  .projekt-eintrag__daten div { display: grid; grid-template-columns: 8.5rem 1fr; gap: 1rem; padding: 0.6rem 0; border-bottom: 1px solid var(--nagelfluh); }
  .projekt-eintrag__daten dt { font-family: var(--inschrift); font-size: 0.8125rem; letter-spacing: 0.02em; color: var(--fuge-weich); }
  .projekt-eintrag__daten dd { margin: 0; }

  /* Erbrachte Leistungen je Projekt */
  .leistungs-marken {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 0;
    border-top: 1px solid var(--nagelfluh);
    padding-top: 0.9rem;
  }
  .leistungs-marken li {
    font-family: var(--inschrift);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding-right: 0.9rem;
    margin-right: 0.9rem;
    border-right: 1px solid var(--nagelfluh);
  }
  .leistungs-marken li:last-child { border-right: 0; margin-right: 0; padding-right: 0; }

  /* Weitere Referenzen */
  .weitere { padding-top: 0; }
  .weitere__raster { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1.25rem, 2.5vw, 2.25rem); }
  .weitere__raster img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; display: block; margin-bottom: 1rem; }
  .weitere__raster li { display: grid; grid-template-rows: auto auto auto 1fr; align-content: start; }
  .weitere__raster h4 { font-family: var(--inschrift); font-weight: 500; font-size: 1.25rem; line-height: 1.3; letter-spacing: 0.08em; margin: 0 0 0.35rem; min-height: 2.6em; overflow-wrap: anywhere; hyphens: auto; }
  .weitere__fakten, .weitere__zahlen { overflow-wrap: anywhere; }
  .weitere__fakten { margin: 0 0 0.35rem; font-family: var(--inschrift); font-size: 0.8125rem; letter-spacing: 0.02em; color: var(--fuge-weich); }
  .weitere__zahlen { margin: 0; font-family: var(--inschrift); font-size: 0.875rem; letter-spacing: 0.02em; }

  /* Referenzübersicht */
  .uebersicht { padding-top: 0; }
  .uebersicht__titel { font-size: clamp(1.35rem, 2.2vw, 1.85rem); margin: 0 0 1.5rem; }
  .uebersicht__rollen { overflow-x: auto; }
  .uebersicht table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
  .uebersicht th, .uebersicht td { text-align: left; vertical-align: top; padding: 0.75rem 1.25rem 0.75rem 0; border-bottom: 1px solid var(--nagelfluh); }
  .uebersicht thead th {
    font-family: var(--inschrift);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--fuge);
    white-space: nowrap;
  }
  .uebersicht tbody th { font-family: var(--inschrift); font-weight: 500; letter-spacing: 0.02em; }
  .uebersicht tbody tr:last-child th, .uebersicht tbody tr:last-child td { border-bottom: 1px solid var(--fuge); }
  .uebersicht__fuss { margin: 1.25rem 0 0; font-family: var(--inschrift); font-size: 0.8125rem; letter-spacing: 0.02em; color: var(--fuge-weich); }

  /* ---------- Haltung ---------- */
  .haltung { background: var(--kalk); border-bottom: 1px solid var(--fuge); }
  .haltung__raster { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; }
  .haltung__satz {
    font-family: var(--text);
    font-size: clamp(1.9rem, 3.4vw, 3rem);
    line-height: 1.18;
    margin: 0;
    text-wrap: balance;
  }
  .haltung__satz em { font-style: italic; }
  .grundsaetze { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--fuge); }
  .grundsaetze li { padding: 1.75rem 0; border-bottom: 1px solid var(--nagelfluh); }
  .grundsaetze h3 { font-family: var(--inschrift); font-weight: 600; font-size: 1rem; letter-spacing: 0.1em; text-transform: uppercase; margin: 0 0 0.5rem; }
  .grundsaetze p { margin: 0; max-width: 62ch; }

  /* ---------- Leistungsphasen + Leistungen ---------- */
  .leistungen { background: var(--nagelfluh); border-bottom: 1px solid var(--fuge); }
  .leistungen .abschnitt__lead { color: var(--fuge); }

  .phasen { margin: 0 0 clamp(3.5rem, 7vw, 5.5rem); }
  .phasen__linie { position: relative; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); border-top: 3px solid var(--fuge); }
  .phasen__linie li { position: relative; padding: 1rem 0.5rem 0 0; }
  .phasen__linie li::before { content: ""; position: absolute; left: 0; top: -12px; width: 1px; height: 21px; background: var(--fuge); }
  .phasen__nr { display: block; font-family: var(--inschrift); font-size: clamp(1.6rem, 2.6vw, 2.4rem); line-height: 1; margin-bottom: 0.4rem; }
  .phasen__name { display: block; font-family: var(--inschrift); font-size: 0.8125rem; letter-spacing: 0.02em; line-height: 1.3; hyphens: auto; }
  .meilensteine { position: relative; height: 5.25rem; margin-top: 1.5rem; }
  .meilenstein {
    position: absolute;
    top: 0;
    transform: translateX(-1px);
    padding-left: 0.7rem;
    border-left: 1px solid var(--fuge);
    font-family: var(--inschrift);
    font-size: 0.8125rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 600;
    line-height: 1.3;
    display: flex;
    align-items: flex-end;
    white-space: nowrap;
  }
  .meilenstein small { display: block; font-weight: 400; letter-spacing: 0.02em; text-transform: none; font-size: 0.75rem; }
  .meilenstein:nth-child(1) { left: 77.8%; height: 5.25rem; }
  .meilenstein:nth-child(2) { left: 83.3%; height: 3.5rem; }
  .meilenstein:nth-child(3) { left: 88.9%; height: 1.75rem; }

  /* Signaturmoment: die Fuge wird einmal gezogen */
  @media (prefers-reduced-motion: no-preference) {
    .js .phasen__linie { clip-path: inset(-24px 100% 0 0); transition: clip-path 1100ms cubic-bezier(0.77, 0, 0.175, 1); }
    .js .phasen.sichtbar .phasen__linie { clip-path: inset(-24px 0 0 0); }
    .js .meilenstein { opacity: 0; transform: translate(-1px, 6px); transition: opacity 400ms var(--ease-out), transform 400ms var(--ease-out); }
    .js .phasen.sichtbar .meilenstein { opacity: 1; transform: translate(-1px, 0); }
    .js .phasen.sichtbar .meilenstein:nth-child(1) { transition-delay: 900ms; }
    .js .phasen.sichtbar .meilenstein:nth-child(2) { transition-delay: 1000ms; }
    .js .phasen.sichtbar .meilenstein:nth-child(3) { transition-delay: 1100ms; }
  }

  .leistungs-gruppen { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 5rem); }
  .leistungs-gruppe h3 { font-family: var(--inschrift); font-weight: 500; font-size: clamp(1.35rem, 2vw, 1.75rem); letter-spacing: 0.08em; text-transform: uppercase; margin: 0 0 1.25rem; }
  .leistungs-gruppe dl { margin: 0; border-top: 1px solid var(--fuge); }
  .leistungs-gruppe dl div { padding: 1.35rem 0; border-bottom: 1px solid var(--fuge-weich); }
  .leistungs-gruppe dt { font-family: var(--inschrift); font-weight: 600; font-size: 1.0625rem; letter-spacing: 0.04em; margin-bottom: 0.35rem; }
  .leistungs-gruppe dd { margin: 0; max-width: 58ch; }

  /* ---------- Kompetenz als Urkunde ---------- */
  .kompetenz { background: var(--kalk-hell); border-top: 1px solid var(--fuge); border-bottom: 1px solid var(--fuge); }
  .kompetenz-liste { margin: 0; }
  .kompetenz-liste > div { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(1rem, 3vw, 3rem); padding: 1.5rem 0; border-bottom: 1px solid var(--nagelfluh); }
  .kompetenz-liste > div:last-child { border-bottom: 0; padding-bottom: 0; }
  .kompetenz-liste dt { font-family: var(--inschrift); font-weight: 600; font-size: 1rem; letter-spacing: 0.1em; text-transform: uppercase; }
  .kompetenz-liste dd { margin: 0; }
  .kompetenz-liste dd p { margin: 0 0 0.5rem; max-width: 62ch; }
  .kompetenz-liste dd p:last-child { margin-bottom: 0; }

  /* Mitgliedschaften: Fremdzeichen neben der Angabe, nicht als eigene Zeile */
  .mitgliedschaften { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.25rem; }
  .mitgliedschaften li { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: 1.25rem; align-items: center; }
  .mitgliedschaften img { display: block; width: auto; max-width: 100%; justify-self: center; }
  .mitgliedschaften li:nth-child(1) img { height: 2.1rem; }
  .mitgliedschaften li:nth-child(2) img { height: 3.1rem; }
  .mitgliedschaften span { max-width: 56ch; }

  .weitere__bild { margin: 0 0 1rem; }
  .weitere__raster img { margin-bottom: 0.5rem; }

  /* ---------- Team als Urkunde ---------- */
  .team { background: var(--kalk-hell); border-bottom: 1px solid var(--fuge); }
  .urkunde { border-top: 3px solid var(--fuge); border-bottom: 1px solid var(--fuge); padding: clamp(2rem, 4vw, 3rem) 0; }
  .urkunde__kopf { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem 2rem; margin-bottom: 2rem; }
  .urkunde__kopf p { margin: 0; max-width: 58ch; }
  .namen { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: clamp(2rem, 5vw, 5rem); }
  .namen li { break-inside: avoid; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem; padding: 0.7rem 0; border-bottom: 1px solid var(--nagelfluh); }
  .namen .person { font-family: var(--inschrift); font-weight: 500; letter-spacing: 0.04em; }
  .namen .rolle { font-size: 0.9375rem; color: var(--fuge-weich); }
  .team__verweis { margin-top: 2rem; font-family: var(--inschrift); letter-spacing: 0.02em; }

  /* ---------- Kontakt ---------- */
  .kontakt { background: var(--fuge); color: var(--kalk); }
  .kontakt a { color: var(--kalk-hell); }
  .kontakt .knopf--hell { color: var(--fuge); }
  .kontakt ::selection { background: var(--patina-hell); color: var(--fuge); }
  .kontakt :focus-visible { outline-color: var(--patina-hell); }
  .kontakt__raster { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2rem, 6vw, 6rem); align-items: end; }
  .kontakt .abschnitt__titel { color: var(--kalk-hell); }
  .adresse { font-family: var(--inschrift); font-size: clamp(1.5rem, 3vw, 2.5rem); letter-spacing: 0.08em; text-transform: uppercase; line-height: 1.25; margin: 0 0 2rem; }
  .kontakt__daten { margin: 0; border-top: 1px solid var(--kalk); }
  .kontakt__daten div { display: grid; grid-template-columns: 7rem 1fr; gap: 1rem; padding: 0.8rem 0; border-bottom: 1px solid var(--fuge-weich); }
  .kontakt__daten dt { font-family: var(--inschrift); font-size: 0.8125rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--nagelfluh); }
  .kontakt__daten dd { margin: 0; font-family: var(--inschrift); letter-spacing: 0.03em; }

  /* ---------- Fuß ---------- */
  .fuss { background: var(--fuge); color: var(--kalk); border-top: 1px solid var(--fuge-weich); }
  .fuss__innen { max-width: var(--breite); margin: 0 auto; padding: 2rem var(--rand) 2.5rem; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1.25rem 2rem; font-family: var(--inschrift); font-size: 0.875rem; letter-spacing: 0.04em; }
  .fuss ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem 1.75rem; }
  .fuss a { color: var(--kalk-hell); }
  .fuss :focus-visible { outline-color: var(--patina-hell); }

  /* ---------- Responsiv ---------- */
  @media (max-width: 1100px) {
    .kopf ul { gap: 1.25rem; }
    .kopf__tel { display: none; }
    .aufmacher { grid-template-columns: 1fr; min-height: 0; }
    .aufmacher__bild { padding: var(--rand) var(--rand) 0; }
    .aufmacher__bild .bildplatz { aspect-ratio: 3 / 2; min-height: 0; }
    .inschrift-block { padding-top: 0; }
    .haltung__raster, .kontakt__raster { grid-template-columns: 1fr; }
    .fuge__status { display: none; }
  }
  @media (max-width: 820px) {
    :root { --nav-h: 3.5rem; }
    .kopf nav { position: absolute; top: var(--nav-h); left: 0; right: 0; background: var(--kalk); border-bottom: 1px solid var(--fuge); display: none; }
    .kopf nav.offen { display: block; }
    .kopf ul { flex-direction: column; gap: 0; padding: 0.5rem var(--rand) 1rem; }
    .kopf nav a { display: block; padding: 0.85rem 0; border-bottom: 1px solid var(--nagelfluh); }
    .menu-knopf {
      display: inline-block; margin-left: auto;
      font-family: var(--inschrift); font-size: 0.875rem; letter-spacing: 0.1em; text-transform: uppercase;
      background: none; color: var(--fuge); border: 1px solid var(--fuge); padding: 0.55rem 0.9rem; min-height: 44px; cursor: pointer;
    }
    .marke__name { font-size: 0.75rem; letter-spacing: 0.14em; }
    .film__inhalt { padding-bottom: 1.25rem; }
    .film__marke { gap: clamp(1.25rem, 4vh, 2rem); }
    .film__logo { width: clamp(9rem, 52vw, 14rem); }
    .film__fuss { gap: 0.75rem 1.25rem; }
    .projekt-eintrag, .projekt-eintrag--rechts { display: block; }
    .projekt-eintrag__text { margin-top: 1.5rem; }
    .projekt-eintrag__daten { margin-top: 1.5rem; }
    .weitere__raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .uebersicht table { font-size: 0.875rem; }
    /* Tabelle wird am Handy zu gestapelten Einträgen */
    .uebersicht thead, .uebersicht thead tr, .uebersicht thead th {
      position: absolute;
      width: 1px; height: 1px;
      padding: 0; margin: -1px;
      overflow: hidden;
      clip-path: inset(50%);
      white-space: nowrap;
    }
    .uebersicht table, .uebersicht tbody, .uebersicht tr, .uebersicht tbody th, .uebersicht td { display: block; width: auto; }
    .uebersicht tbody tr { padding: 1.1rem 0; border-bottom: 1px solid var(--fuge); }
    .uebersicht tbody th { font-size: 1.0625rem; padding: 0 0 0.6rem; border: 0; }
    .uebersicht tbody td { border: 0; padding: 0.2rem 0; display: grid; grid-template-columns: 7rem 1fr; gap: 0.75rem; }
    .uebersicht tbody td::before {
      content: attr(data-label);
      font-family: var(--inschrift);
      font-size: 0.75rem;
      font-weight: 600;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--fuge-weich);
      padding-top: 0.15rem;
    }
    /* Der Sockel bleibt am Handy flach genug, damit er ins Fenster passt und freigelegt wird */
    .sockel .abschnitt { padding-top: clamp(2.5rem, 9vw, 3.5rem); padding-bottom: 2rem; }
    .sockel .adresse { margin-bottom: 1.5rem; }
    .sockel .fuss__innen { padding-top: 1.5rem; padding-bottom: 1.75rem; }
    .projekt-paar { grid-template-columns: 1fr; gap: 3rem; }
    .fuge__innen { grid-template-columns: 1fr; gap: 0.35rem; }
    .fuge li { font-size: 0.75rem; }
    .leistungs-gruppen { grid-template-columns: 1fr; }
    .kompetenz-liste > div { grid-template-columns: 1fr; gap: 0.6rem; }
    .namen { columns: 1; }
    .phasen__linie { grid-template-columns: 1fr; border-top: 0; border-left: 3px solid var(--fuge); }
    .phasen__linie li { display: flex; align-items: baseline; gap: 0.9rem; padding: 0.55rem 0 0.55rem 1.1rem; }
    .phasen__linie li::before { left: -3px; top: 50%; width: 12px; height: 1px; }
    .phasen__nr { font-size: 1.5rem; margin: 0; min-width: 1.2ch; }
    .phasen__name { font-size: 0.9375rem; }
    .meilensteine { height: auto; display: flex; flex-wrap: wrap; gap: 0.6rem 1.25rem; margin-top: 1.25rem; }
    .meilenstein { position: static; height: auto !important; }
    .randcode > span { border-right: 0; margin-right: 0; padding-right: 1.25rem; }
    .kontakt__daten div { grid-template-columns: 5.5rem 1fr; }
    .aufmacher__inschrift { gap: 0; }
    .inschrift-block { display: contents; }
    .inschrift-block .projekt { order: 1; }
    .jahreszahl { order: 2; font-size: 3.5rem; margin: 0.75rem 0 1.25rem; }
    .aussage { order: 3; margin-bottom: 2.25rem; }
    .beteiligt { order: 4; }
    .kontakt__daten dd { overflow-wrap: break-word; }
  }
  @media (max-width: 820px) and (prefers-reduced-motion: no-preference) {
    .js .phasen__linie { clip-path: inset(0 0 100% -24px); }
    .js .phasen.sichtbar .phasen__linie { clip-path: inset(0 0 0 -24px); }
  }
  @media (max-width: 480px) {
    .namen li { grid-template-columns: 1fr; gap: 0.1rem; }
    .projekt-eintrag dl div { grid-template-columns: 7rem 1fr; }
    .weitere__raster { grid-template-columns: 1fr; }
    .weitere__raster h4 { min-height: 0; }
  }