/* ============================================================
   Olevon Studio — Seitenspezifisches
   Hero · Claim · Leistungen · Ablauf · Studio · CTA
   Arbeiten · Case · Kontakt · Rechtstexte
   ============================================================ */

/* --- Hero ------------------------------------------------------- */

.hero {
  position: relative;
  /* Der weiße Claim darunter bleibt bereits im ersten Viewport sichtbar.
     So ist ohne zusätzlichen Hinweis klar, dass die Seite weitergeht. */
  height: 78svh;
  min-height: 34rem;
  overflow: clip;
  background: #0a0a0a;
  color: var(--c-ink-invert);
}

.hero__media {
  position: absolute;
  inset: 0;
  background: url('../media/hero.jpg?v=20260831-110') center / cover no-repeat;
}

.hero__media > video,
.hero__media > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Bewusst NICHT entfärbt: Die Seite ist schwarzweiß, damit das Bild die
     einzige Farbe der Seite sein kann. Das Video ist also der Farbakzent.
     Nur leicht abgedunkelt, damit Uhr, Ort und Navigation lesbar bleiben.
     Wollt ihr es doch entfärbt: grayscale(1) hier ergänzen. */
  filter: contrast(1.04) brightness(0.88);
}

/* Verlauf, damit Uhr und Button immer lesbar bleiben */
.hero__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0) 28%),
    linear-gradient(0deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0) 34%);
  pointer-events: none;
}

.hero__signet {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  width: clamp(8rem, 18vw, 17.5rem);
  height: auto;
  transform: translate(-50%, -50%);
  filter: brightness(0) invert(1);
  pointer-events: none;
  user-select: none;
}

.hero__foot {
  position: absolute;
  left: 0;
  right: 0;
  bottom: clamp(1.25rem, 3vw, 2.5rem);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--stack-md);
}

.hero__clock {
  font-family: var(--f-mono);
  font-size: var(--fs-mono-sm);
  letter-spacing: var(--ls-mono);
  color: var(--c-ink-invert);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.hero__cta { position: absolute; left: 50%; transform: translateX(-50%); }

.hero__place {
  font-family: var(--f-mono);
  font-size: var(--fs-mono-sm);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--c-ink-invert);
  white-space: nowrap;
}

/* --- Claim ------------------------------------------------------- */

.claim { padding-top: var(--section-y); }

/* Die Trennlinie sitzt am Abschnittsende. Gleiche Luft oberhalb der Linie
   und zum nächsten Label, ohne zusätzliche gestapelte Aussenabstände. */
.claim__trennlinie { margin: var(--section-y) 0 0; }

.claim__grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--grid-gap);
  align-items: start;
}

.claim__head { grid-column: 1 / span 7; }

/* Der Bezeichner steht als eigene Zeile über dem Claim. */
.claim__head .label,
.arbeiten-auftakt .label {
  display: block;
  margin-bottom: var(--section-head-gap);
}

/* Etwas ruhiger als die frühere Hero-Größe, damit der erste Claim schon
   am unteren Rand des Einstiegs lesbar wird. */
.claim__head .t-hero,
.arbeiten-auftakt .t-hero { font-size: clamp(3rem, 7.2vw, 7.5rem); }

.claim__aside {
  grid-column: 9 / span 4;
  display: flex;
  flex-direction: column;
  gap: var(--stack-md);
  padding-top: 0.75rem;
}

.claim__aside .t-body { max-width: 34ch; }

.claim__place {
  display: flex;
  gap: var(--stack-md);
  justify-content: space-between;
  padding-top: var(--stack-lg);
  margin-top: var(--stack-lg);
  border-top: var(--line);
}

/* --- Arbeiten (Startseite) ---------------------------------------- */

.arbeiten-auftakt { display: block; }

.works { display: flex; flex-direction: column; }

.works .work + .work { margin-top: clamp(2.5rem, 5vw, 4.5rem); }

/* Die drei Cases werden am Desktop kompakt zweispaltig kuratiert.
   Tablet und Handy behalten bewusst die große Einspalten-Bühne. */
@media (min-width: 64rem) {
  .works {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(3.5rem, 5vw, 5.5rem) var(--grid-gap);
  }

  .works .work + .work { margin-top: 0; }

  .works .work__media {
    height: auto;
    aspect-ratio: 16 / 9;
  }

  .works .work__meta {
    grid-template-columns: repeat(2, minmax(0, 1fr)) auto;
    align-items: start;
    row-gap: 0.5rem;
  }

  .works .work__cell:nth-child(3) { grid-column: 1 / span 2; }

  .works .work__arrow {
    grid-column: 3;
    grid-row: 1 / span 2;
    align-self: center;
  }
}

/* --- Leistungen als horizontale Olevon Studio-Bühne ------------------------ */

/* Auf Touch-Geräten werden die scroll-gebundenen GSAP-Einblendungen bewusst
   nicht aufgebaut. Diese Regeln lösen den vorbereiteten Startzustand auf,
   damit alle Inhalte sofort sichtbar und ohne nachträglichen Layoutsprung
   erscheinen. */
.js.bewegung-statisch .reveal {
  opacity: 1;
  transform: none;
}

.js.bewegung-statisch .reveal-line > span { transform: none; }
.js.bewegung-statisch [data-reveal-lines] { opacity: 1; }

/* Der Seitenlauf selbst bleibt unmittelbar. Glatte Zielbewegungen werden nur
   noch dort angefordert, wo sie wirklich gebraucht werden (z. B. innerhalb
   der Kartenbahn), statt jede programmatische Vertikalbewegung zu verzögern. */
html { scroll-behavior: auto; }

.leistungen-buehne {
  overflow: hidden;
  padding-bottom: clamp(3.5rem, 6vw, 5.5rem);
}

.leistungen-buehne__kopf {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--grid-gap);
  align-items: end;
  margin-bottom: clamp(2rem, 3.5vw, 3.5rem);
}

.leistungen-buehne__titel { grid-column: 1 / span 8; }

.leistungen-buehne__titel .label {
  display: block;
  margin-bottom: var(--section-head-gap);
}

.leistungen-buehne__intro {
  grid-column: 9 / -1;
  display: flex;
  flex-direction: column;
  gap: var(--stack-lg);
}

.leistungen-buehne__intro > p {
  max-width: 38ch;
  color: var(--c-grey-invert-60);
}

.leistungen-buehne__fenster {
  overflow-x: auto;
  overflow-y: hidden;
  margin-right: calc(var(--gutter) * -1);
  padding-right: var(--gutter);
  padding-bottom: 1rem;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 0 var(--gutter);
  scrollbar-width: none;
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
}

.leistungen-buehne__fenster::-webkit-scrollbar { display: none; }

@media (hover: hover) and (pointer: fine) {
  .leistungen-buehne__fenster { cursor: grab; }

  .leistungen-buehne__fenster.is-ziehend {
    cursor: grabbing;
    scroll-snap-type: none;
    user-select: none;
  }
}

.leistungen-buehne__spur {
  display: flex;
  gap: clamp(0.8rem, 1.6vw, 1.5rem);
  width: max-content;
}

/* Genug Nachlauf, damit auch die letzte Karte links einrasten kann. */
.leistungen-buehne__spur::after {
  content: "";
  flex: 0 0 clamp(0rem, 26vw, 28rem);
}

.leistungskarte {
  position: relative;
  box-sizing: border-box;
  flex: 0 0 clamp(42rem, 66vw, 72rem);
  min-height: clamp(30rem, min(40vw, 70svh), 38rem);
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: auto 1fr auto auto;
  gap: var(--grid-gap);
  overflow: hidden;
  padding: clamp(1.5rem, 2.4vw, 2.5rem);
  border-radius: clamp(0.9rem, 1.5vw, 1.5rem);
  scroll-snap-align: start;
  scroll-snap-stop: always;
  isolation: isolate;
}

.leistungskarte--hell {
  background: var(--c-paper);
  color: var(--c-ink);
}

.leistungskarte--kontur {
  border: 1px solid rgba(255, 255, 255, 0.38);
  background: #101010;
  color: var(--c-ink-invert);
}

.leistungskarte::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(118deg, transparent 48%, currentColor 48.1%, transparent 48.35%);
  opacity: 0.11;
  pointer-events: none;
}

.leistungskarte__kopf {
  grid-column: 1 / -1;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--stack-md);
  padding-bottom: 1rem;
  border-bottom: 1px solid currentColor;
}

.leistungskarte--hell .leistungskarte__kopf .label { color: var(--c-grey-90); }
.leistungskarte--kontur .leistungskarte__kopf .label { color: var(--c-grey-invert-60); }

.leistungskarte__titel {
  grid-column: 1 / span 10;
  align-self: center;
  max-width: 10ch;
  padding-block: clamp(1rem, 2vw, 2rem);
  font-size: clamp(3.25rem, 6.2vw, 6.5rem);
  /* Bei 0,88 stieß „Ort mit" in die Unterlänge von „Ein digitaler"; die
     engste Stelle der drei Karten braucht 0,972. 1,02 lässt dort rund
     0,05 em Luft — so viel wie die engste Stelle sonst auf der Seite — und
     bleibt trotzdem enger gesetzt als der übrige Fließsatz. */
  line-height: 1.02;
  letter-spacing: -0.055em;
}

.leistungskarte__inhalt {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--grid-gap);
  align-items: end;
  padding-top: clamp(1rem, 2vw, 1.75rem);
  border-top: 1px solid currentColor;
}

.leistungskarte__inhalt > p {
  grid-column: 1 / span 6;
  max-width: 42ch;
}

.leistungskarte--hell .leistungskarte__inhalt > p { color: var(--c-grey-90); }
.leistungskarte--kontur .leistungskarte__inhalt > p { color: var(--c-grey-invert-60); }

.leistungskarte__liste {
  grid-column: 9 / -1;
  display: grid;
  align-self: stretch;
}

.leistungskarte__liste li {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding-block: 0.35rem;
  font-size: 0.94rem;
}

.leistungskarte__liste li::before {
  content: "";
  flex: 0 0 0.35rem;
  width: 0.35rem;
  height: 0.35rem;
  border-radius: 50%;
  background: currentColor;
}

.leistungskarte__link {
  grid-column: 1 / -1;
  justify-self: stretch;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  min-height: 3.75rem;
  margin-top: clamp(1rem, 2vw, 1.5rem);
  padding: 0.45rem 0.45rem 0.45rem 1.2rem;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-family: var(--f-mono);
  font-size: var(--fs-mono);
  line-height: 1.4;
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  transition: transform var(--t-fast) var(--ease);
}

.leistungskarte--hell .leistungskarte__link {
  border-color: var(--c-ink);
  background: var(--c-ink);
  color: var(--c-ink-invert);
}

.leistungskarte--kontur .leistungskarte__link {
  border-color: var(--c-paper);
  background: var(--c-paper);
  color: var(--c-ink);
}

.leistungskarte__link > span {
  display: grid;
  flex: 0 0 3rem;
  width: 3rem;
  height: 3rem;
  place-items: center;
  border: 0;
  border-radius: 50%;
  font-family: var(--f-body);
  font-size: 1.1rem;
  line-height: 1;
  transition: transform var(--t-fast) var(--ease);
}

/* Eine einzige, verbundene Pfeilform statt getrennter Schaft-/Spitzenlinien.
   Die SVG-Maske bleibt auf iOS monochrom und übernimmt die Kartenfarbe. */
.pfeil-nordost {
  position: relative;
  display: inline-block;
  width: 1em;
  height: 1em;
  flex: none;
}

.pfeil-nordost::before {
  content: "";
  position: absolute;
  inset: 0;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 19L19 5M9 5H19V15' fill='none' stroke='%23000' stroke-width='3.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 19L19 5M9 5H19V15' fill='none' stroke='%23000' stroke-width='3.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

.pfeil-nordost::after {
  content: none;
}

.pfeil-nordwest {
  position: relative;
  display: inline-block;
  width: 1em;
  height: 1em;
  flex: none;
  transform: scaleX(-1);
}

.pfeil-nordwest::before {
  content: "";
  position: absolute;
  inset: 0;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 19L19 5M9 5H19V15' fill='none' stroke='%23000' stroke-width='3.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 19L19 5M9 5H19V15' fill='none' stroke='%23000' stroke-width='3.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

.pfeil-nordwest::after {
  content: none;
}

/* Der CTA bekommt einen massiven Kontrastpunkt statt des früheren dünnen
   Outline-Kreises. Die Umkehrung folgt automatisch der hellen/dunklen Karte. */
.leistungskarte--hell .leistungskarte__link > .pfeil-nordost {
  background: var(--c-paper);
  color: var(--c-ink);
}

.leistungskarte--kontur .leistungskarte__link > .pfeil-nordost {
  background: var(--c-ink);
  color: var(--c-paper);
}

.leistungskarte__link > .pfeil-nordost::before {
  left: 50%;
  top: 50%;
  right: auto;
  bottom: auto;
  width: 1.3rem;
  height: 1.3rem;
  transform: translate(-50%, -50%);
}

@media (hover: hover) {
  .leistungskarte:hover .leistungskarte__link {
    transform: translateY(-0.12rem);
  }

  .leistungskarte:hover .leistungskarte__link > span {
    transform: translate(0.18rem, -0.18rem);
  }
}

.leistungen-buehne__hinweis {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(1rem, 1.8vw, 1.5rem);
  min-height: 3.25rem;
  margin-top: 0.45rem;
  color: var(--c-grey-invert-60);
}

.leistungen-buehne__punkte {
  display: none;
  grid-template-columns: repeat(3, minmax(3.5rem, 1fr));
  flex: 0 1 30rem;
  width: min(100%, 30rem);
  gap: 0.5rem;
  max-width: 30rem;
}

.js .leistungen-buehne__punkte { display: grid; }

.leistungen-buehne__punkte button {
  position: relative;
  min-width: 0;
  min-height: 3.25rem;
}

.leistungen-buehne__punkte button::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  left: 0;
  height: 2px;
  background: var(--c-grey-invert-20);
  transform: translateY(-50%);
  transition: height var(--t-fast) var(--ease),
              background var(--t-fast) var(--ease);
}

.leistungen-buehne__punkte button.is-aktiv::after {
  height: 4px;
  background: var(--c-ink-invert);
}

@media (hover: hover) {
  .leistungen-buehne__punkte button:hover::after {
    background: var(--c-grey-invert-60);
  }
}

/* --- Ablauf -------------------------------------------------------- */

.ablauf {
  padding-top: var(--section-y);
  padding-bottom: clamp(4rem, 6vw, 6rem);
}

/* Bezeichner oben, Titel darunter — dieselbe Ordnung wie bei Claim,
   Leistungen und Studio, damit die Seite durchgehend gleich liest. */
.ablauf__kopf {
  display: grid;
  justify-items: start;
  gap: var(--section-head-gap);
  padding-bottom: clamp(1.5rem, 2.5vw, 2.5rem);
  margin-bottom: 0;
  border-bottom: var(--line);
}

.ablauf__kopf .t-display {
  font-size: var(--fs-display);
  line-height: 0.9;
}

.ablauf__kopf .label {
  justify-self: start;
  text-align: left;
}

.steps { display: grid; gap: 0; }

.step {
  display: grid;
  grid-template-columns: 4rem minmax(0, 14rem) minmax(0, 1fr);
  gap: var(--grid-gap);
  align-items: center;
  min-height: clamp(10.5rem, 13vw, 12rem);
  padding-block: clamp(1.75rem, 2.5vw, 2.5rem);
  border-bottom: var(--line);
}

.step__num { color: var(--c-grey-60); }

.step__text { max-width: 46ch; color: var(--c-grey-90); }

/* --- Studio -------------------------------------------------------- */

.studio-bereich { padding-top: var(--section-y); }

.studio {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--grid-gap) var(--grid-gap);
  align-items: start;
}

.studio__head { grid-column: 1 / span 6; }

.studio__head .label {
  display: block;
  margin-bottom: var(--section-head-gap);
}

.studio__body {
  grid-column: 8 / span 5;
  display: flex;
  flex-direction: column;
  gap: var(--stack-md);
}

.studio__body p { max-width: 44ch; color: var(--c-grey-invert-60); }

/* Die Studio-Seite vertieft den Startseiten-Teaser. Gleiche Abschnitts-
   und Kopfabstände wie auf den übrigen Seiten, ohne feste Kartenhöhen. */
.studio__link { align-self: flex-start; }

.studio-seite__hero {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--grid-gap);
  align-items: center;
  padding-bottom: var(--section-y);
}

.studio-seite__hero-text { grid-column: 1 / span 8; min-width: 0; }
.studio-seite__hero-text > .label:first-child {
  display: block;
  margin-bottom: var(--section-head-gap);
}
.studio-seite__ort { margin-top: var(--stack-md); }
.studio-seite__zeichen { grid-column: 10 / -1; }
.studio-seite__zeichen img { width: 100%; height: auto; }

.studio-seite__kopf {
  display: grid;
  gap: var(--section-head-gap);
  margin-bottom: var(--stack-lg);
}

.studio-seite__karten {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--grid-gap);
}

.studio-seite__karte {
  display: flex;
  flex-direction: column;
  gap: var(--stack-md);
  min-width: 0;
  padding: clamp(1.5rem, 2.8vw, 2.75rem);
  border: var(--line);
  border-radius: var(--r-card);
}

.studio-seite__karte p { max-width: 44ch; color: var(--c-grey-90); }

.studio-seite__disziplinen {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--stack-lg) var(--grid-gap);
}

.studio-seite__disziplin {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--stack-md);
  min-width: 0;
  padding-top: var(--stack-md);
  border-top: 1px solid var(--c-grey-invert-20);
}

.studio-seite__disziplin p { max-width: 44ch; color: var(--c-grey-invert-60); }
.studio-seite__links { display: flex; flex-wrap: wrap; gap: var(--stack-sm); }
.studio-seite__cta-text {
  max-width: 44ch;
  margin-top: var(--stack-md);
  color: var(--c-grey-90);
}
.studio-seite__cta-text + .pill { margin-top: var(--stack-lg); }

@media (max-width: 60rem) {
  .studio-seite__hero-text { grid-column: 1 / -1; }
  .studio-seite__zeichen { display: none; }
}

@media (max-width: 40rem) {
  .studio-seite__karten,
  .studio-seite__disziplinen { grid-template-columns: minmax(0, 1fr); }
}

.stats {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--grid-gap);
  margin-top: var(--stack-lg);
}

.stat {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--c-grey-invert-20);
}

.stat__value {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: clamp(1.75rem, 3vw, 2.75rem);
  line-height: 1;
  letter-spacing: var(--ls-tight);
}

/* --- Schlusselement / CTA -------------------------------------------- */

/* Der Schlussblock ist der hellste Moment der Seite. Er sitzt
   zwischen dem dunklen Studio-Abschnitt und dem schwarzen Footer
   und bricht beide auf — in Schwarzweiß muss der Kontrast diese
   Arbeit übernehmen, vorher tat es die Farbfläche.
   Wollt ihr später doch einen Farbton: hier auf var(--c-accent)
   und var(--c-accent-ink) zurückstellen, dann zieht der Block
   die Akzentfarbe wieder mit. */
.cta {
  background: var(--c-paper);
  color: var(--c-ink);
  padding-block: var(--section-y);
}

/* Ein gemeinsamer Abstand für alle Case-CTAs. Der letzte helle Medienblock
   gibt seinen unteren Innenabstand ab, damit sich Abstände nicht addieren. */
.cta--case {
  margin-top: 0;
  padding-top: var(--section-y);
}

.case-abschluss.section { padding-bottom: 0; }

.cta__inner {
  display: flex;
  flex-direction: column;
  align-items: start;
  gap: 0;
}

.cta__inner > .label + .cta__title { margin-top: var(--section-head-gap); }
.cta__inner > .cta__title + .pill { margin-top: var(--stack-lg); }

.cta__title { font-size: var(--fs-display); }

.cta .label { color: var(--c-grey-60); }

/* --- Leistungs-Detailseiten ---------------------------------------- */

.leistungsdetail-hero {
  position: relative;
  isolation: isolate;
  min-height: 94svh;
  overflow: hidden;
  padding-top: calc(var(--nav-top) + var(--nav-h) + clamp(4.5rem, 9vw, 8rem));
  padding-bottom: clamp(1.5rem, 3vw, 2.75rem);
}

.leistungsdetail-hero__signet {
  position: absolute;
  right: clamp(2rem, 6vw, 7rem);
  top: clamp(12rem, 23vh, 18rem);
  width: clamp(18rem, 28vw, 31rem);
  height: auto;
  filter: brightness(0) invert(1);
  opacity: 0.085;
  pointer-events: none;
  user-select: none;
}

.leistungsdetail-hero__inner {
  position: relative;
  z-index: 1;
  min-height: calc(94svh - var(--nav-h) - var(--nav-top) - clamp(6rem, 12vw, 10.75rem));
  display: flex;
  flex-direction: column;
}

.leistungsdetail-hero__pfad {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  color: var(--c-grey-invert-60);
}

.leistungsdetail-hero__pfad a {
  padding-bottom: 0.15rem;
  border-bottom: 1px solid transparent;
}

@media (hover: hover) {
  .leistungsdetail-hero__pfad a:hover { border-color: currentColor; }
}

.leistungsdetail-hero__titel {
  max-width: 100%;
  margin-top: var(--section-head-gap);
  font-size: clamp(4rem, 10.5vw, 11.5rem);
  /* Bleibt der engste Satz der Seite, berührt sich aber nicht mehr: Bei 0,84
     lief das g von „Webdesign" in die Zeile darunter. Die engste Stelle
     („Webdesign &" über „Entwicklung.") braucht 0,972; 1,0 lässt dort rund
     0,03 em Luft. Käme hier je ein großes Ü in den Titel, bräuchte es 1,16. */
  line-height: 1;
  letter-spacing: -0.065em;
  hyphens: manual;
}

.leistungsdetail-hero__fuss {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--grid-gap);
  align-items: end;
  margin-top: auto;
  padding-top: clamp(3rem, 7vw, 6rem);
}

.leistungsdetail-hero__lead {
  grid-column: 1 / span 6;
  max-width: 36ch;
  font-size: var(--fs-lead);
  line-height: 1.32;
}

.leistungsdetail-meta {
  grid-column: 8 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--c-grey-invert-20);
}

.leistungsdetail-meta__feld {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  min-width: 0;
  padding: 1rem 1rem 0 0;
}

.leistungsdetail-meta__wert {
  font-family: var(--f-display);
  font-size: clamp(0.95rem, 1.3vw, 1.2rem);
  font-weight: 500;
  line-height: 1.15;
}

.leistungsdetail-auftakt {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--grid-gap);
  align-items: start;
}

.leistungsdetail-auftakt__aussage {
  grid-column: 1 / span 7;
  max-width: 11ch;
  font-size: clamp(3rem, 6.6vw, 7rem);
  /* 0,92 ließ „Ein guter Shop" in „macht den Kauf einfach" laufen. Die
     Grenze aus Unterlänge (0,216) und Oberlänge (0,73) liegt bei 0,946;
     1,0 lässt Luft und bleibt enger gesetzt als der Fließtext. */
  line-height: 1;
}

.leistungsdetail-auftakt__text {
  grid-column: 9 / -1;
  display: grid;
  gap: var(--stack-md);
  padding-top: 0.65rem;
  color: var(--c-grey-90);
}

.leistungsdetail-bausteine__kopf,
.leistungsdetail-fragen__kopf,
.leistungsdetail-querverweise__kopf {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--grid-gap);
  align-items: end;
  margin-bottom: var(--stack-lg);
}

.leistungsdetail-bausteine__kopf h2,
.leistungsdetail-fragen__kopf h2,
.leistungsdetail-querverweise__kopf h2 { grid-column: 1 / span 8; }

.leistungsdetail-bausteine__kopf p,
.leistungsdetail-fragen__kopf p {
  grid-column: 9 / -1;
  color: var(--c-grey-invert-60);
}

.leistungsdetail-bausteine__raster {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--c-grey-invert-20);
  border-left: 1px solid var(--c-grey-invert-20);
}

.leistungsdetail-baustein {
  position: relative;
  min-height: clamp(22rem, 32vw, 34rem);
  display: flex;
  flex-direction: column;
  align-items: start;
  padding: clamp(1.5rem, 3.5vw, 3.5rem);
  border-right: 1px solid var(--c-grey-invert-20);
  border-bottom: 1px solid var(--c-grey-invert-20);
  overflow: hidden;
}

.leistungsdetail-baustein__zahl {
  position: absolute;
  right: -0.05em;
  bottom: -0.25em;
  font-family: var(--f-display);
  font-size: clamp(12rem, 25vw, 25rem);
  font-weight: 500;
  line-height: 0.8;
  opacity: 0.045;
  pointer-events: none;
}

.leistungsdetail-baustein h3 {
  max-width: 10ch;
  margin-top: clamp(4.5rem, 6vw, 6rem);
  font-size: clamp(2.4rem, 5vw, 5rem);
}

/* Die vier Webdesign-/Shop-Titel sind bewusst zweizeilig und erhalten denselben
   Titelraum. So beginnen die Erklärungen in beiden Spalten exakt auf einer
   Linie und kein langes Kompositum wird in einzelne Buchstaben zerlegt. */
@media (min-width: 60.0625rem) {
  .leistungsdetail-bausteine--webdesign .leistungsdetail-baustein h3,
  .leistungsdetail-bausteine--ecommerce .leistungsdetail-baustein h3 {
    min-height: 2.04em;
  }
}

/* Deutsche Komposita sind länger als das Handy breit: „Plattformgerechte"
   misst bei 375 px rund 364 px, der Kasten gibt 294 px her — und weil die
   Kachel `overflow: hidden` trägt (wegen der großen Hintergrundziffer),
   wurde das Wort abgeschnitten statt umbrochen.

   Die Trennstellen stehen als `­` im HTML, so wie schon bei
   „Werbe­kampagnen". `hyphens: auto` wäre bequemer, wurde aber wieder
   verworfen: Zusammen mit dem `text-wrap: balance` der Überschriften trennt
   der Browser dann auch Wörter, die längst passen („pass-ieren",
   „weit-ergewischt"), und trifft ohne verlässliche Sprachliste falsche
   Stellen („Plattformger-echte", „Produktins-zenierung"). Gesetzte
   Trennstellen sind in jedem Browser gleich und stehen dort, wo ein
   deutscher Leser sie erwartet.

   `overflow-wrap` bleibt als letzte Reißleine: Es greift nur, wenn ein Wort
   auch mit Trennstelle nicht passt — dann lieber hart umbrochen als
   abgeschnitten. */
.leistungsdetail-baustein h3,
.leistungsdetail-eignung h2,
.leistungsdetail-querverweis h3,
.leistungsdetail-hero__titel,
.leistungskarte__titel,
.t-display {
  overflow-wrap: break-word;
}

.leistungsdetail-baustein p {
  position: relative;
  max-width: 42ch;
  margin-top: var(--stack-md);
  color: var(--c-grey-invert-60);
}

.leistungsdetail-ablauf__kopf {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--stack-md);
  padding-bottom: var(--stack-md);
  border-bottom: var(--line);
}

.leistungsdetail-schritt {
  display: grid;
  grid-template-columns: 4rem minmax(12rem, 0.75fr) minmax(0, 1fr);
  gap: var(--grid-gap);
  align-items: start;
  padding-block: clamp(1.5rem, 3.2vw, 3rem);
  border-bottom: var(--line);
}

.leistungsdetail-schritt__zahl { color: var(--c-grey-60); }

.leistungsdetail-schritt p {
  max-width: 48ch;
  color: var(--c-grey-90);
}

.leistungsdetail-modelle__kopf {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--stack-md);
  padding-bottom: var(--stack-md);
  border-bottom: var(--line);
}

.leistungsdetail-modelle__raster {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--grid-gap);
  margin-top: var(--stack-lg);
}

.leistungsdetail-modellkarte {
  position: relative;
  min-width: 0;
  min-height: clamp(27rem, 34vw, 35rem);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: clamp(1.5rem, 2.8vw, 2.75rem);
  border: var(--line);
  border-radius: var(--r-card);
  background: var(--c-paper);
  overflow: hidden;
  isolation: isolate;
}

.leistungsdetail-modellkarte::after {
  content: "";
  position: absolute;
  right: -18%;
  bottom: -9%;
  z-index: -1;
  width: 74%;
  aspect-ratio: 888 / 884;
  background: url("../img/olevon-signet-schwarz.svg") center / contain no-repeat;
  opacity: 0.04;
  pointer-events: none;
  transition: opacity var(--t-mid) var(--ease);
}

.leistungsdetail-modellkarte--fokus {
  border-color: var(--c-ink);
  background: var(--c-ink);
  color: var(--c-ink-invert);
}

.leistungsdetail-modellkarte--fokus::after {
  filter: invert(1);
  opacity: 0.075;
}

.leistungsdetail-modellkarte__typ {
  position: relative;
  z-index: 1;
}

.leistungsdetail-modellkarte h3 {
  position: relative;
  z-index: 1;
  max-width: 11ch;
  margin-top: clamp(2.75rem, 5vw, 5rem);
  font-size: clamp(2.35rem, 3.5vw, 4.1rem);
  line-height: 0.98;
  overflow-wrap: break-word;
}

.leistungsdetail-modellkarte p {
  position: relative;
  z-index: 1;
  max-width: 34ch;
  margin-top: var(--stack-md);
  color: var(--c-grey-90);
}

.leistungsdetail-modellkarte--fokus p { color: var(--c-grey-invert-60); }

.leistungsdetail-modellkarte__cta {
  position: relative;
  z-index: 1;
  width: 100%;
  margin-top: auto;
}

.leistungsdetail-modellkarte__link { width: 100%; }

@media (hover: hover) {
  .leistungsdetail-modellkarte:hover::after { opacity: 0.085; }
  .leistungsdetail-modellkarte--fokus:hover::after { opacity: 0.13; }
}

.leistungsdetail-eignung {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.leistungsdetail-eignung__feld {
  min-height: clamp(26rem, 38vw, 38rem);
  display: flex;
  flex-direction: column;
  padding: clamp(1.5rem, 4vw, 4rem);
  border: var(--line);
}

.leistungsdetail-eignung__feld + .leistungsdetail-eignung__feld {
  border-left: 0;
}

.leistungsdetail-eignung__feld--dunkel {
  border-color: var(--c-ink);
  background: var(--c-ink);
  color: var(--c-ink-invert);
}

.leistungsdetail-eignung h2 {
  max-width: 9ch;
  margin-top: auto;
  font-size: clamp(2.8rem, 5.8vw, 6.25rem);
}

.leistungsdetail-eignung ul {
  display: grid;
  gap: 0.7rem;
  margin-top: var(--stack-lg);
}

.leistungsdetail-eignung li {
  display: flex;
  gap: 0.8rem;
  max-width: 42ch;
}

.leistungsdetail-eignung li::before {
  content: "—";
  flex: none;
}

@media (min-width: 40.0625rem) {
  .leistungsdetail-eignung h2 {
    min-height: 4.16em;
    margin-top: clamp(1rem, 1.5vw, 1.5rem);
  }
}

.leistungsdetail-fragen__kopf p { color: var(--c-grey-90); }

.leistungsdetail-fragen__liste { border-top: var(--line); }

.leistungsdetail-fragen details { border-bottom: var(--line); }

.leistungsdetail-fragen summary {
  position: relative;
  /* Reißleine für lange Komposita: Die Frage ist ein anonymes Flex-Element
     neben dem Kreis-Zeichen und kann deshalb nicht unter ihre längste
     Wortbreite schrumpfen — „Suchmaschinenoptimierung" schob die Seite bei
     320 px um 55 px zur Seite. `anywhere` senkt die Mindestbreite und greift
     erst, wenn es ohne Umbruch nicht passt; die gesetzte `­`-Trennstelle
     hat Vorrang, solange sie reicht. */
  overflow-wrap: anywhere;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--stack-md);
  padding-block: clamp(1.25rem, 2.5vw, 2rem);
  cursor: pointer;
  font-family: var(--f-display);
  font-size: clamp(1.35rem, 2.4vw, 2.3rem);
  font-weight: 500;
  line-height: 1.1;
  list-style: none;
}

.leistungsdetail-fragen summary::-webkit-details-marker { display: none; }

.leistungsdetail-fragen summary::after {
  --faq-icon-ink: var(--c-ink);
  content: "";
  flex: none;
  width: clamp(2.75rem, 3vw, 3.25rem);
  aspect-ratio: 1;
  border: 1px solid var(--c-ink);
  border-radius: 50%;
  background-color: transparent;
  background-image:
    linear-gradient(var(--faq-icon-ink), var(--faq-icon-ink)),
    linear-gradient(var(--faq-icon-ink), var(--faq-icon-ink));
  background-position: center;
  background-repeat: no-repeat;
  background-size: 1.125rem 2px, 2px 1.125rem;
  transition:
    transform var(--t-fast) var(--ease),
    background-color var(--t-fast) var(--ease),
    border-color var(--t-fast) var(--ease);
}

.leistungsdetail-fragen details[open] summary::after {
  --faq-icon-ink: var(--c-ink-invert);
  background-color: var(--c-ink);
  transform: rotate(45deg);
}

@media (hover: hover) {
  .leistungsdetail-fragen summary:hover::after {
    --faq-icon-ink: var(--c-ink-invert);
    background-color: var(--c-ink);
  }
}

.leistungsdetail-fragen details p {
  max-width: 58ch;
  padding: 0 0 clamp(1.5rem, 3vw, 2.5rem);
  color: var(--c-grey-90);
}

.leistungsdetail-querverweise__kopf h2 { grid-column: 1 / -1; }

.leistungsdetail-querverweise__raster {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--c-grey-invert-20);
  border-left: 1px solid var(--c-grey-invert-20);
}

.leistungsdetail-querverweis {
  position: relative;
  min-height: 18rem;
  display: flex;
  flex-direction: column;
  align-items: start;
  padding: clamp(1.25rem, 2.5vw, 2.5rem);
  border-right: 1px solid var(--c-grey-invert-20);
  border-bottom: 1px solid var(--c-grey-invert-20);
}

/* Das Signet markiert die Kacheln, über die man in einen anderen
   Leistungsbereich wechselt: gleiche Marke, anderer Bereich.

   Bewusst ein ganz gewöhnliches Hintergrundbild. Die erste Fassung nutzte
   `mask-image` mit `background: currentColor`, damit das Zeichen die
   Schriftfarbe der Umgebung übernimmt. Das ist eleganter, hängt aber an
   drei Dingen, die schiefgehen können: Maskenunterstützung, die Auflösung
   von `currentColor` in einem isoliert gerenderten SVG und `aspect-ratio`
   für die Höhe. Der Abschnitt ist ohnehin immer dunkel
   (`section--dark`), deshalb reicht ein fest weiß gezeichnetes Signet —
   und das zeigt jeder Browser. Käme der Abschnitt je auf hellen Grund,
   muss hier die schwarze statt der weissen SVG-Datei eingesetzt werden.

   Die lokale weisse SVG-Datei ist dieselbe Vorlage wie in Hero und Menü.
   `width` und `height` stehen zusätzlich zur `viewBox` im SVG, damit auch
   Safari das Hintergrundbild zuverlässig zeichnet. */
.leistungsdetail-querverweis::before {
  /* Höhe gerechnet statt über `aspect-ratio`: Fällt das Verhältnis in einem
     älteren Browser aus, bliebe die Fläche 0 hoch und damit unsichtbar.
     884/888 ist das Seitenverhältnis der neuen Vektorvorlage. */
  --signet-breite: clamp(1.6rem, 2.6vw, 2.6rem);
  content: "";
  position: absolute;
  top: clamp(1.25rem, 2.5vw, 2.5rem);
  right: clamp(1.25rem, 2.5vw, 2.5rem);
  width: var(--signet-breite);
  height: calc(var(--signet-breite) * 884 / 888);
  background-image: url("../img/olevon-signet-weiss.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  /* Bei 0,3 verschwand es auf der breiten Desktop-Kachel praktisch. */
  opacity: 0.42;
  pointer-events: none;
  transition: opacity var(--t-fast) var(--ease);
}

@media (hover: hover) {
  .leistungsdetail-querverweis:hover::before { opacity: 0.75; }
}

.leistungsdetail-querverweis h3 {
  max-width: 9ch;
  margin-top: auto;
  font-size: clamp(2rem, 3.5vw, 3.8rem);
}

.leistungsdetail-querverweis span:last-child {
  margin-top: var(--stack-md);
  transition: transform var(--t-fast) var(--ease);
}

@media (hover: hover) {
  .leistungsdetail-querverweis:hover span:last-child {
    transform: translate(0.25rem, -0.25rem);
  }
}

.leistungsdetail-abschluss {
  background: var(--c-paper);
  color: var(--c-ink);
}

.leistungsdetail-abschluss__inner {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--grid-gap);
  align-items: end;
}

.leistungsdetail-abschluss__inner h2 { grid-column: 1 / span 9; }

.leistungsdetail-abschluss__inner .pill {
  grid-column: 10 / -1;
  justify-self: end;
  margin-bottom: 0.55rem;
}

/* --- Arbeiten-Übersicht ---------------------------------------------- */

.page-head {
  padding-top: calc(var(--nav-top) + var(--nav-h) + var(--section-y));
  padding-bottom: clamp(2.5rem, 6vw, 5rem);
}

/* Steht ein Bezeichner direkt im Seitenkopf, bekommt er eine eigene
   Zeile über der Überschrift (Kontakt). */
.page-head > .label {
  display: block;
  margin-bottom: var(--section-head-gap);
}

/* Nur diese zweizeilige Kontaktüberschrift darf enger stehen. Global bleibt
   die großzügigere Zeilenhöhe als Schutz für Umlaute und Unterlängen erhalten. */
.page-head--kontakt .t-hero { line-height: 0.88; }

/* Einleitung unter der Seitenüberschrift. Bewusst schmal: Der Satz soll
   in zwei, drei Zeilen stehen und nicht über die halbe Breite laufen. */
.page-head__lead {
  max-width: 44ch;
  margin-top: clamp(1.25rem, 2.5vw, 2rem);
  color: var(--c-grey-90);
}

.arbeiten-filter {
  display: grid;
  gap: clamp(1rem, 2vw, 1.5rem);
  margin-bottom: clamp(2.5rem, 6vw, 5rem);
  padding-bottom: clamp(1.5rem, 3vw, 2.5rem);
  border-bottom: var(--line);
}

.arbeiten-filter__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
}

.arbeiten-filter__button {
  appearance: none;
  min-height: 2.75rem;
  padding: 0.75rem 1.15rem;
  border: var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--c-ink);
  font: 400 var(--fs-mono)/1 var(--f-mono);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color var(--t-mid) var(--ease),
              color var(--t-mid) var(--ease),
              border-color var(--t-mid) var(--ease);
}

.arbeiten-filter__button.is-aktiv {
  border-color: var(--c-ink);
  background: var(--c-ink);
  color: var(--c-ink-invert);
}

@media (hover: hover) {
  .arbeiten-filter__button:hover {
    border-color: var(--c-ink);
    background: var(--c-ink);
    color: var(--c-ink-invert);
  }
}

.arbeiten-filter__button:focus-visible {
  outline: 2px solid var(--c-ink);
  outline-offset: 3px;
}

.arbeiten-leer {
  min-height: clamp(22rem, 42vw, 34rem);
  padding: clamp(1.5rem, 3vw, 2.5rem);
  border: var(--line);
  border-radius: var(--r-card);
  background: var(--c-grey-04);
}

.arbeiten-leer[hidden] { display: none; }

.arbeiten-leer__inhalt {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: inherit;
  max-width: 44rem;
  padding-top: clamp(5rem, 12vw, 10rem);
}

.arbeiten-leer__inhalt .t-body {
  max-width: 44ch;
  margin-top: var(--stack-md);
  color: var(--c-grey-90);
}

.arbeiten-leer__aktionen {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: var(--stack-lg);
}


/* --- Case Page --------------------------------------------------------- */

.case-hero {
  padding-top: calc(var(--nav-top) + var(--nav-h) + clamp(4rem, 10vw, 9rem));
  padding-bottom: clamp(2rem, 5vw, 4rem);
}

.case-hero--kompakt {
  padding-top: calc(var(--nav-top) + var(--nav-h) + clamp(2.5rem, 5vw, 4rem));
  padding-bottom: clamp(1.5rem, 3vw, 2.5rem);
}

.case-meta {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--grid-gap);
  padding-block: clamp(1.5rem, 3vw, 2.25rem);
  border-top: var(--line);
  border-bottom: var(--line);
}

.case-meta__cell {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.case-meta__value {
  font-family: var(--f-mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
}

.case-about {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--grid-gap);
  align-items: start;
}

.case-about__label { grid-column: 1 / span 3; }

.case-about__text {
  grid-column: 5 / span 7;
  font-size: var(--fs-lead);
  line-height: 1.4;
  letter-spacing: -0.01em;
  max-width: 44ch;
}

/* Case-Seiten: Film links, Storytelling rechts. Der Film bleibt vollständig
   im Viewport sichtbar; der Textbereich ist für die spätere echte Case Story
   vorbereitet und nicht mehr von seinem Hauptmedium getrennt. */
.case-erzaehlung {
  display: grid;
  grid-template-columns: minmax(16rem, 28rem) minmax(0, 1fr);
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: center;
  padding-block: clamp(2rem, 4vw, 4rem);
}

.case-erzaehlung__film {
  justify-self: start;
  width: min(100%, calc(72svh * 0.5625));
}

.case-erzaehlung__inhalt {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(1.75rem, 4vw, 3.5rem);
  max-width: 42rem;
}

.case-erzaehlung__text {
  max-width: 38ch;
  font-size: clamp(1.125rem, 1.45vw, 1.3125rem);
  line-height: 1.45;
  letter-spacing: -0.01em;
}

/* Der Übergang vom Film zur Fotostrecke ist bewusst enger als der globale
   Sektionsabstand; beides gehört inhaltlich zum selben Case-Medienblock. */
.case-fotostrecke { padding-top: clamp(1.5rem, 3vw, 3rem); }

.case-media { position: relative; border-radius: var(--r-card); overflow: hidden; }

.case-media--tall { aspect-ratio: 3 / 4; }
.case-media--wide { aspect-ratio: 16 / 9; }
.case-media--square { aspect-ratio: 1 / 1; }
.case-media--portrait { aspect-ratio: 2 / 3; }
.case-media--vertical { aspect-ratio: 9 / 16; background: #050505; }

.case-media > video,
.case-media > img { width: 100%; height: 100%; object-fit: cover; }

/* Im normalen Split füllt der Film seinen 9:16-Rahmen. Im nativen Vollbild
   darf er dagegen niemals auf das Displayformat aufgezoomt oder beschnitten
   werden: schwarze Seitenflächen sind bei einem Hochformatfilm korrekt. */
.case-media--vertical > video:fullscreen {
  width: 100vw !important;
  height: 100vh !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain !important;
  background: #000;
}

.case-media--vertical > video:-webkit-full-screen {
  width: 100vw !important;
  height: 100vh !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain !important;
  background: #000;
}

.case-stack {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(1rem, 2.5vw, 2rem) var(--grid-gap);
}

.case-stack > .col-full  { grid-column: 1 / -1; }
.case-stack > .col-half  { grid-column: span 6; }
.case-stack > .col-inset { grid-column: 3 / span 8; }
.case-stack > .col-vertical {
  grid-column: 1 / -1;
  justify-self: center;
  width: min(30rem, calc(72svh * 0.5625));
  margin-block: clamp(2rem, 5vw, 5rem);
}

/* Interaktiver Fotostrecken-Teaser: fünf versetzte Bildspalten reagieren
   auf Maus und Finger. Die vollständige Serie liegt auf einer eigenen Seite. */
.case-galerie-teaser {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(0.35rem, 0.9vw, 0.8rem);
  height: clamp(24rem, 46vw, 38rem);
  padding: clamp(0.6rem, 1.2vw, 1rem);
  overflow: hidden;
  border-radius: var(--r-card);
  background: #050505;
  color: var(--c-ink-invert);
  cursor: pointer;
  touch-action: pan-y;
}

.case-galerie-teaser__spalte {
  display: grid;
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: clamp(0.35rem, 0.9vw, 0.8rem);
  min-width: 0;
  transform: translate3d(var(--galerie-x, 0), var(--galerie-y, 0), 0)
             scale(var(--galerie-skalierung, 1));
  transition: transform 420ms var(--ease);
  will-change: transform;
}

/* Bei einer noch kurzen Serie füllt jedes Motiv seine Spalte vollständig. */
.case-galerie-teaser--fuenf .case-galerie-teaser__spalte {
  grid-template-rows: minmax(0, 1fr);
}

.case-galerie-teaser__spalte:nth-child(1),
.case-galerie-teaser__spalte:nth-child(5) { padding-block: 7% 3%; }
.case-galerie-teaser__spalte:nth-child(2),
.case-galerie-teaser__spalte:nth-child(4) { padding-block: 1% 9%; }
.case-galerie-teaser__spalte:nth-child(3) { padding-block: 5%; }

.case-galerie-teaser__spalte--leer {
  display: grid;
  place-items: center;
  border-radius: clamp(0.25rem, 1vw, 0.75rem);
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,0.07) 0 1px, transparent 1px 48px),
    repeating-linear-gradient(0deg, rgba(255,255,255,0.07) 0 1px, transparent 1px 48px),
    #101010;
  color: var(--c-grey-invert-60);
}

.case-galerie-teaser__spalte img {
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: cover;
  border-radius: clamp(0.25rem, 1vw, 0.75rem);
  filter: grayscale(0.72) brightness(0.76);
  transform: scale(1.025);
  transition: filter var(--t-mid) var(--ease), transform var(--t-slow) var(--ease);
}

.case-galerie-teaser__aktion {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: clamp(1.25rem, 2.5vw, 2rem);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  width: min(22rem, calc(100% - 2rem));
  padding: 1rem 1.25rem;
  border: 1px solid rgba(255,255,255,0.35);
  border-radius: var(--r-pill);
  background: rgba(0,0,0,0.72);
  backdrop-filter: blur(12px);
  font-family: var(--f-mono);
  font-size: var(--fs-mono-sm);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  transform: translateX(-50%);
  transition: background-color var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease);
  pointer-events: none;
}

.case-galerie-teaser:focus-visible .case-galerie-teaser__aktion {
  border-color: var(--c-ink-invert);
  background: var(--c-ink-invert);
  color: var(--c-ink);
}

.case-galerie-teaser.is-aktiv .case-galerie-teaser__spalte img,
.case-galerie-teaser:focus-visible .case-galerie-teaser__spalte img {
  filter: grayscale(0) brightness(1);
  transform: scale(1.055);
}

@media (hover: hover) {
  .case-galerie-teaser:hover .case-galerie-teaser__aktion {
    border-color: var(--c-ink-invert);
    background: var(--c-ink-invert);
    color: var(--c-ink);
  }

  .case-galerie-teaser:hover .case-galerie-teaser__spalte img {
    filter: grayscale(0) brightness(1);
    transform: scale(1.055);
  }
}

/* Eigene Fotostrecken-Seite: freie Editorial-Bühne mit normalem Scroll.
   Das Bildraster wirkt kuratiert statt wie ein gleichförmiges Archiv; die
   schwebende Leiste hält Stand und Rückweg trotzdem jederzeit eindeutig. */
.fotostrecke-buehne {
  position: relative;
  padding-block: clamp(2.5rem, 5vw, 5rem) clamp(8rem, 11vw, 11rem);
  overflow: hidden;
  background: var(--c-paper);
  color: var(--c-ink);
}

.fotogalerie {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(2.75rem, 5vw, 5rem) clamp(1rem, 2vw, 2rem);
  align-items: start;
  padding: clamp(2rem, 4vw, 4rem);
  border-radius: var(--r-card);
  background: var(--c-paper);
}

.fotogalerie__bild {
  position: relative;
  margin: 0;
  min-width: 0;
  border-radius: clamp(0.5rem, 1.15vw, var(--r-card));
}

.fotogalerie__bild img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: inherit;
  filter: grayscale(0.25) brightness(1.08);
  transform: scale(1);
  transition: transform var(--t-slow) var(--ease), filter var(--t-mid) var(--ease);
}

.fotogalerie__bild--leer {
  display: grid;
  min-height: clamp(16rem, 34vw, 32rem);
  place-items: center;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,0.07) 0 1px, transparent 1px 48px),
    repeating-linear-gradient(0deg, rgba(255,255,255,0.07) 0 1px, transparent 1px 48px),
    #101010;
  color: var(--c-grey-invert-60);
}

.fotogalerie__bild figcaption {
  position: absolute;
  top: calc(100% + 0.65rem);
  left: 0;
  font-family: var(--f-mono);
  font-size: var(--fs-mono-sm);
  letter-spacing: var(--ls-mono);
  color: var(--c-grey-60);
}

.fotogalerie__bild--01 { grid-column: 1 / span 3; grid-row: 1; }
.fotogalerie__bild--02 { grid-column: 5 / span 3; grid-row: 1; margin-top: 3rem; }
.fotogalerie__bild--03 { grid-column: 9 / span 3; grid-row: 1; }
.fotogalerie__bild--04 { grid-column: 2 / span 3; grid-row: 2; }
.fotogalerie__bild--05 { grid-column: 6 / span 3; grid-row: 2; margin-top: 3rem; }
.fotogalerie__bild--06 { grid-column: 10 / span 3; grid-row: 2; }
.fotogalerie__bild--07 { grid-column: 1 / span 3; grid-row: 3; }
.fotogalerie__bild--08 { grid-column: 5 / span 3; grid-row: 3; margin-top: 3rem; }
.fotogalerie__bild--09 { grid-column: 9 / span 3; grid-row: 3; }
.fotogalerie__bild--10 { grid-column: 5 / span 3; grid-row: 4; }

@media (hover: hover) {
  .fotogalerie__bild:hover img,
  .fotogalerie__bild:focus-visible img {
    filter: grayscale(0);
    transform: scale(1.025);
  }
}

.fotostrecke-dock {
  position: sticky;
  bottom: 1.25rem;
  z-index: calc(var(--z-nav) - 2);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
  width: min(43rem, calc(100% - 2rem));
  margin: clamp(5rem, 10vw, 9rem) auto 0;
  padding: 0.6rem;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: var(--r-pill);
  background: rgba(12,12,12,0.78);
  box-shadow: 0 1rem 3rem rgba(0,0,0,0.25);
  backdrop-filter: blur(18px) saturate(1.1);
  -webkit-backdrop-filter: blur(18px) saturate(1.1);
  font-family: var(--f-mono);
  font-size: var(--fs-mono-sm);
  line-height: 1;
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
}

.js .fotostrecke-dock {
  position: fixed;
  left: 50%;
  bottom: clamp(1rem, 2.5vw, 2rem);
  margin: 0;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 1rem);
  transition: opacity var(--t-mid) var(--ease), transform var(--t-mid) var(--ease);
}

.js .fotostrecke-dock.is-sichtbar {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, 0);
}

.fotostrecke-dock__projekt {
  padding-inline: 0.75rem;
  color: var(--c-ink-invert);
  white-space: nowrap;
}

.fotostrecke-dock a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 2.4rem;
  padding-inline: 1rem;
  border-radius: var(--r-pill);
  background: var(--c-paper);
  color: var(--c-ink);
  white-space: nowrap;
}

@media (min-width: 40.0625rem) {
  .fotostrecke-dock a [aria-hidden="true"] {
    font-size: 1.35em;
    line-height: 0.75;
  }
}

/* Scroll-Fortschritt, unten rechts mitlaufend */
.progress {
  position: fixed;
  right: var(--gutter);
  bottom: clamp(1.25rem, 3vw, 2.25rem);
  z-index: calc(var(--z-nav) - 2);
  display: flex;
  align-items: center;
  gap: 0.625rem;
  font-family: var(--f-mono);
  font-size: var(--fs-mono-sm);
  letter-spacing: var(--ls-mono);
  color: var(--c-grey-60);
  font-variant-numeric: tabular-nums;
  mix-blend-mode: difference;
  transition: opacity var(--t-mid) var(--ease);
}

/* Auf Seiten mit Hero sitzt unten rechts bereits die Ortszeile. Der Zähler
   hält sich deshalb zurück, solange der Hero im Bild ist — main.js setzt
   die Klasse. Auf den Case Pages gibt es keinen Hero, dort greift das nie. */
.progress.is-verborgen {
  opacity: 0;
  pointer-events: none;
}

.progress__track {
  width: clamp(3rem, 7vw, 5rem);
  height: 1px;
  background: var(--c-grey-20);
  overflow: hidden;
}

.progress__bar {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--c-ink);
  transform: scaleX(0);
  transform-origin: left;
}

/* --- Kontakt ------------------------------------------------------------ */

.contact {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(2.5rem, 5vw, 4rem) var(--grid-gap);
  align-items: start;
}

.contact__head { grid-column: 1 / span 5; position: sticky; top: 9rem; }

.contact__form { grid-column: 7 / span 6; display: grid; gap: clamp(2rem, 4vw, 3rem); }

.fieldset { display: flex; flex-direction: column; gap: var(--stack-md); border: 0; padding: 0; }

.contact__form .field > .label {
  font-size: clamp(0.8125rem, 0.85vw, 0.9375rem);
  line-height: 1.2;
}

/* Der Absende-Button behält seine Eigenbreite, die Felder nicht. */
.fieldset > .pill { align-self: start; }

.fieldset > legend {
  font-family: var(--f-mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--c-grey-60);
  padding: 0;
  margin-bottom: 0.25rem;
}

.contact__direct {
  display: flex;
  flex-direction: column;
  gap: var(--stack-sm);
  align-items: start;
  padding-top: var(--stack-md);
  border-top: var(--line);
}

.form-note { color: var(--c-grey-60); font-size: var(--fs-small); max-width: 46ch; }

/* --- Rechtstexte --------------------------------------------------------- */

.legal { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--grid-gap); }

.legal__body { grid-column: 4 / span 7; display: flex; flex-direction: column; gap: var(--stack-lg); }

.legal__body h2 { font-size: var(--fs-title); }

.legal__body h3 { font-size: 1.125rem; margin-bottom: 0.35rem; }

.legal__body p { color: var(--c-grey-90); max-width: 60ch; }

/* --- Fehlerseite 404 ---------------------------------------------------- */

.fehlerseite-body {
  background: var(--c-ink);
  color: var(--c-ink-invert);
}

.fehlerseite {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: end;
  overflow: hidden;
  padding-block: calc(var(--nav-top) + var(--nav-h) + clamp(7rem, 14vw, 12rem)) clamp(2rem, 5vw, 4rem);
  background: var(--c-ink);
  color: var(--c-ink-invert);
}

.fehlerseite__zahl {
  position: absolute;
  right: -0.03em;
  bottom: -0.15em;
  font-family: var(--f-display);
  font-size: clamp(17rem, 46vw, 54rem);
  font-weight: 500;
  line-height: 0.72;
  letter-spacing: -0.095em;
  color: rgba(255, 255, 255, 0.075);
  user-select: none;
  pointer-events: none;
}

.fehlerseite__raster {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: end;
  gap: var(--grid-gap);
}

.fehlerseite__code {
  grid-column: 1 / span 3;
  align-self: start;
  padding-top: 0.6em;
}

.fehlerseite__inhalt {
  grid-column: 6 / -1;
  display: flex;
  flex-direction: column;
  align-items: start;
}

.fehlerseite__titel {
  max-width: 8ch;
  font-family: var(--f-display);
  font-size: clamp(3.5rem, 7.4vw, 8rem);
  font-weight: 500;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
}

.fehlerseite__text {
  max-width: 40ch;
  margin-top: var(--stack-md);
  color: var(--c-grey-invert-60);
}

.fehlerseite__inhalt .pill { margin-top: var(--stack-lg); }

/* ============================================================
   Breakpoints
   ============================================================ */

@media (max-width: 60rem) {
  .claim__head,
  .claim__aside,
  .studio__head,
  .studio__body,
  .contact__head,
  .contact__form,
  .case-about__label,
  .case-about__text,
  .legal__body { grid-column: 1 / -1; }

  .contact__head { position: static; }

  .leistungen-buehne__titel,
  .leistungen-buehne__intro { grid-column: 1 / -1; }

  .leistungen-buehne__intro {
    display: block;
    margin-top: var(--stack-md);
  }

  .leistungsdetail-hero__lead { grid-column: 1 / span 7; }
  .leistungsdetail-meta { grid-column: 1 / -1; margin-top: var(--stack-lg); }

  .leistungsdetail-auftakt__aussage { grid-column: 1 / span 8; }
  .leistungsdetail-auftakt__text { grid-column: 9 / -1; }

  .leistungsdetail-bausteine__kopf h2,
  .leistungsdetail-fragen__kopf h2 { grid-column: 1 / span 7; }

  .leistungsdetail-bausteine__kopf p,
  .leistungsdetail-fragen__kopf p { grid-column: 8 / -1; }

  .leistungsdetail-abschluss__inner h2 { grid-column: 1 / span 8; }
  .leistungsdetail-abschluss__inner .pill { grid-column: 9 / -1; }

  .claim__aside { padding-top: var(--stack-lg); }

  .case-stack > .col-half,
  .case-stack > .col-inset,
  .case-stack > .col-vertical { grid-column: 1 / -1; }

  .case-erzaehlung {
    grid-template-columns: minmax(13rem, 22rem) minmax(0, 1fr);
    gap: clamp(2rem, 6vw, 4rem);
  }

  .fotogalerie {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(3rem, 7vw, 5rem) var(--grid-gap);
  }

  .fotogalerie__bild {
    grid-column: auto;
    grid-row: auto;
    width: 82%;
    margin-top: 0;
  }

  .fotogalerie__bild:nth-child(odd) { justify-self: start; }
  .fotogalerie__bild:nth-child(even) { justify-self: end; }

  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .case-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--stack-md); }

  .step {
    grid-template-columns: 3rem minmax(0, 1fr);
    align-items: start;
    min-height: 0;
    row-gap: 0.75rem;
    padding-block: clamp(1.75rem, 5vw, 2.25rem);
  }
  .step__num { padding-top: 0.4em; }
  .step__text { grid-column: 2; }

  .fehlerseite__code { grid-column: 1 / -1; }
  .fehlerseite__inhalt { grid-column: 1 / span 9; }
}

@media (max-width: 40rem) {
  html { scroll-behavior: auto; }

  .nav { max-width: none; }
  .nav__bar { padding-left: 1.125rem; }

  .hero { height: 82svh; overflow: hidden; }
  .hero__media {
    transform: none !important;
    /* Passendes Standbild bis zum Filmstart oder bei blockiertem Autoplay. */
    background:
      linear-gradient(rgba(0,0,0,0.08), rgba(0,0,0,0.08)),
      url('../media/hero-mobil.jpg?v=20260831-111') center / cover no-repeat;
  }
  /* Keine laufenden Filter oder Parallaxe auf dem Handy. Die Abdunklung
     übernimmt die ohnehin vorhandene, statische Scrim-Ebene. */
  .hero__media > video { filter: none; }
  .js .hero__media:not(.is-bereit) > video { opacity: 0; }
  .hero__foot { align-items: center; }
  .hero__cta { position: static; transform: none; }
  .hero__place { display: none; }

  .leistungen-buehne__kopf { margin-bottom: 2.25rem; }

  .leistungen-buehne__intro {
    display: flex;
    align-items: stretch;
  }

  .leistungskarte {
    flex-basis: calc(100vw - (var(--gutter) * 1.55));
    min-height: clamp(32rem, 70svh, 35rem);
    grid-template-rows: auto 1fr auto auto;
    border-radius: 1rem;
  }

  /* Der Finger wischt die Karten nativ — wie überall sonst auf dem Handy.
     Die Achse entscheidet der Browser selbst: senkrecht läuft die Seite,
     waagerecht die Kartenbahn, beides mit echtem Nachlauf im Compositor.
     `scroll-snap-stop: always` aus der Grundregel begrenzt auch einen
     kräftigen Wisch auf genau eine Karte; die Punkte unter der Bahn lesen
     ihren Stand aus dem Scroll-Ereignis.

     Hier stand vorher `overflow-x: hidden`, `scroll-snap-type: none` und
     `touch-action: pan-y pinch-zoom`. Damit war der native Querlauf
     abgeschaltet und alles hing an einem Pointer-Nachbau. `pan-y` nimmt
     iOS-Safari aber die Achsentscheidung ab: Safari beginnt den
     Seitenlauf und bricht die Zeigerfolge mit `pointercancel` ab, bevor
     der Nachbau seine eigene Schwelle erreicht — deshalb ließ sich gar
     nicht mehr wischen, und jede leicht schräge Geste wurde hart auf die
     Senkrechte gezwungen. `touch-action` bleibt deshalb unangetastet. */
  .leistungen-buehne__fenster {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }

  .leistungskarte__kopf {
    align-items: start;
    flex-direction: column;
    gap: 0.55rem;
  }

  .leistungskarte__titel {
    grid-column: 1 / -1;
    max-width: 9ch;
    padding-block: 1.5rem;
    font-size: clamp(2.7rem, 12.5vw, 4.2rem);
  }

  .leistungskarte__inhalt {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
  }

  .leistungskarte__liste {
    padding-top: 0.5rem;
    border-top: 1px solid currentColor;
  }

  .leistungen-buehne__spur::after { flex-basis: calc(var(--gutter) * 0.55); }

  .leistungen-buehne__hinweis {
    gap: 0.85rem;
    margin-top: 0.25rem;
  }

  .leistungen-buehne__punkte {
    grid-template-columns: repeat(3, minmax(2.75rem, 1fr));
    gap: 0.35rem;
    max-width: none;
  }

  .ablauf { padding-bottom: 3.5rem; }

  .ablauf__kopf {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--section-head-gap);
    margin-bottom: 0;
  }

  .ablauf__kopf .t-display { font-size: clamp(3.8rem, 19vw, 6rem); }

  .ablauf__kopf .label {
    justify-self: start;
    padding-bottom: 0;
    text-align: left;
  }

  .progress { display: none; }

  .leistungsdetail-hero {
    min-height: 100svh;
    padding-top: calc(var(--nav-top) + var(--nav-h) + 4rem);
  }

  .leistungsdetail-hero__inner {
    min-height: calc(100svh - var(--nav-h) - var(--nav-top) - 5.5rem);
  }

  .leistungsdetail-hero__titel {
    margin-top: var(--section-head-gap);
    font-size: clamp(3.5rem, 18vw, 5.6rem);
  }

  .leistungsdetail-hero__fuss {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }

  .leistungsdetail-hero__lead { max-width: 30ch; }
  .leistungsdetail-meta { grid-template-columns: minmax(0, 1fr); }

  .leistungsdetail-meta__feld {
    display: grid;
    grid-template-columns: 5.5rem minmax(0, 1fr);
    align-items: baseline;
    padding-block: 0.75rem;
    border-bottom: 1px solid var(--c-grey-invert-20);
  }

  .leistungsdetail-hero__signet {
    right: clamp(0.75rem, 4vw, 1.25rem);
    top: 32%;
    width: 58vw;
  }

  .leistungsdetail-auftakt { display: block; }

  .leistungsdetail-auftakt__aussage {
    max-width: 10ch;
    font-size: clamp(2.8rem, 13vw, 4.6rem);
  }

  .leistungsdetail-auftakt__text { margin-top: var(--stack-lg); }

  .leistungsdetail-bausteine__kopf,
  .leistungsdetail-fragen__kopf { display: block; }

  .leistungsdetail-bausteine__kopf p,
  .leistungsdetail-fragen__kopf p { margin-top: var(--stack-md); }

  .leistungsdetail-bausteine__raster { grid-template-columns: minmax(0, 1fr); }

  .leistungsdetail-modelle__raster { grid-template-columns: minmax(0, 1fr); }

  .leistungsdetail-modellkarte { min-height: 24rem; }

  .leistungsdetail-baustein {
    min-height: 0;
    padding: 1.5rem;
  }

  .leistungsdetail-baustein h3 {
    margin-top: clamp(3rem, 13vw, 4.25rem);
    font-size: clamp(2.7rem, 13vw, 4.5rem);
  }

  .leistungsdetail-modellkarte__cta {
    padding-top: clamp(4.5rem, 22vw, 5.5rem);
  }

  .leistungsdetail-schritt {
    grid-template-columns: 2.75rem minmax(0, 1fr);
    row-gap: 0.75rem;
  }

  .leistungsdetail-schritt p { grid-column: 2; }

  .leistungsdetail-modelle__kopf {
    align-items: flex-start;
    flex-direction: column;
  }

  .leistungsdetail-modellkarte {
    min-height: 22rem;
    padding: 1.5rem;
  }

  .leistungsdetail-modellkarte h3 { font-size: clamp(2.6rem, 12vw, 4rem); }

  .leistungsdetail-eignung { grid-template-columns: minmax(0, 1fr); }

  .leistungsdetail-eignung__feld {
    min-height: 30rem;
    padding: 1.5rem;
  }

  .leistungsdetail-eignung__feld + .leistungsdetail-eignung__feld {
    border-top: 0;
    border-left: var(--line);
  }

  .leistungsdetail-querverweise__raster { grid-template-columns: minmax(0, 1fr); }

  .leistungsdetail-querverweis { min-height: 15rem; }

  .leistungsdetail-abschluss__inner {
    display: flex;
    flex-direction: column;
    align-items: start;
  }

  .leistungsdetail-abschluss__inner .pill {
    justify-self: auto;
    margin: var(--stack-md) 0 0;
  }

  .arbeiten-filter__buttons {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  .arbeiten-filter__button { width: 100%; }

  .arbeiten-leer__aktionen {
    align-items: stretch;
    flex-direction: column;
  }

  .arbeiten-leer__aktionen .pill { justify-content: center; }

  .case-galerie-teaser {
    grid-template-columns: repeat(5, minmax(8rem, 36vw));
    justify-content: center;
    height: min(34rem, 128vw);
  }

  .case-erzaehlung {
    grid-template-columns: minmax(0, 1fr);
    gap: 2.5rem;
    padding-block: 2.5rem;
  }

  .case-erzaehlung__film {
    justify-self: stretch;
    width: 100%;
  }

  .case-erzaehlung__inhalt,
  .case-erzaehlung__text { max-width: none; }

  .fotostrecke-buehne {
    padding-block: 3rem 9rem;
  }

  .fotogalerie {
    grid-template-columns: minmax(0, 1fr);
    gap: 3rem;
    padding: 0 var(--gutter);
    border-radius: 0;
    background: transparent;
  }

  /* Auf Handy ein ruhiger Stapel mit gleicher Breite und beidseitigem Rand. */
  .fotogalerie__bild:nth-child(n) {
    grid-column: 1;
    grid-row: auto;
    width: 100%;
    margin: 0;
    justify-self: center;
  }

  .fotogalerie__bild img { filter: grayscale(0.25) brightness(1.08); }
  .fotogalerie__bild figcaption {
    position: static;
    margin-top: 0.65rem;
    text-align: center;
    color: var(--c-grey-60);
  }
  .fotogalerie__bildtitel { display: none; }

  .case-stack > .col-vertical {
    width: 100%;
    margin-block: 0;
  }

  .fotostrecke-dock {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.25rem;
    width: calc(100% - 1rem);
    padding: 0.45rem;
  }

  .fotostrecke-dock__projekt { padding-inline: 0.35rem; }

  .fotostrecke-dock a {
    justify-self: end;
    min-height: 2.3rem;
    padding-inline: 0.8rem;
  }

  .claim__place { flex-direction: column; gap: 0.5rem; }

  .work__meta {
    grid-template-columns: 8.25rem minmax(0, 1fr);
    row-gap: 0.5rem;
    min-height: 7rem;
  }

  .work__cell { grid-column: 2; }

  .work__arrow {
    grid-column: 1;
    grid-row: 1 / span 3;
    justify-self: start;
    align-self: center;
  }

  .stats { grid-template-columns: minmax(0, 1fr); }

  .footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .fehlerseite {
    align-items: center;
    padding-top: calc(var(--nav-top) + var(--nav-h) + 6rem);
  }

  .fehlerseite__raster { row-gap: var(--stack-lg); }
  .fehlerseite__inhalt { grid-column: 1 / -1; }
  .fehlerseite__titel { font-size: clamp(3rem, 16vw, 5.25rem); }
  .fehlerseite__zahl { right: -0.12em; bottom: -0.08em; font-size: 72vw; }
}

/* Kurze Handy-Displays: Inhalt vollständig behalten, aber so verdichten,
   dass Karte und Swipe-Hinweis nicht gemeinsam den ganzen Viewport sperren. */
@media (max-width: 40rem) and (max-height: 44rem) {
  .leistungskarte {
    min-height: 32rem;
    row-gap: 0.75rem;
    padding: 1.25rem;
  }

  .leistungskarte__kopf { padding-bottom: 0.75rem; }

  .leistungskarte__titel {
    padding-block: 1rem;
    font-size: clamp(2.6rem, 11.5vw, 3.4rem);
  }

  .leistungskarte__inhalt {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    gap: 0.75rem;
    align-items: start;
    padding-top: 0.75rem;
  }

  .leistungskarte__inhalt > p {
    font-size: 0.875rem;
    line-height: 1.45;
  }

  .leistungskarte__liste {
    padding: 0 0 0 0.75rem;
    border-top: 0;
    border-left: 1px solid currentColor;
  }

  .leistungskarte__liste li {
    gap: 0.45rem;
    padding-block: 0.2rem;
    font-size: 0.8rem;
  }

  .leistungskarte__link {
    min-height: 3.35rem;
    margin-top: 0.5rem;
    padding: 0.35rem 0.35rem 0.35rem 1rem;
  }

  .leistungskarte__link > span {
    flex-basis: 2.75rem;
    width: 2.75rem;
    height: 2.75rem;
  }
}

/* Sehr schmale Geräte: Uhr braucht den Platz nicht */
@media (max-width: 24rem) {
  .hero__clock { font-size: 0.5625rem; }
  .fotostrecke-dock__projekt { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hero__media > video { display: none; }
  .case-galerie-teaser__spalte {
    transform: none !important;
    transition: none;
  }
}