/* ============================================================
   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: var(--c-ink);
  color: var(--c-ink-invert);
}

.hero__media {
  position: absolute;
  inset: 0;
  background: url('../media/hero.jpg?v=20260920-202') 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.92);
  /* Der Film ist reine Dekoration (`aria-hidden`), soll aber auch nichts
     annehmen: Ohne das reichte am iPhone ein Tipper, und Safari blendete
     seine eigene Bedienung ein — Abspielen, Pause, fünf Sekunden vor und
     zurück — mitten im Header. Die Berührung fällt jetzt durch auf
     `.hero`; der dortige Zuhörer, der nach einer Autoplay-Sperre einen
     zweiten Startversuch unternimmt, greift unverändert. */
  pointer-events: none;
}

/* 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;
}

@media (min-width: 40.0625rem) {
  /* Der Desktop-Film bleibt heller; nur hinter Navigation und Fußzeile
     stärker abdunkeln, damit die weiße Schrift weiter lesbar bleibt. */
  .hero__scrim {
    background:
      linear-gradient(180deg, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.58) 18%, rgba(0,0,0,0) 42%),
      linear-gradient(0deg, rgba(0,0,0,0.58) 0%, rgba(0,0,0,0) 34%);
  }
}

.hero__signet {
  display: none;
  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;
  }
}

/* Während des Selbstlaufs rechnet main.js die Position Bild für Bild
   selbst. Das Raster muss dafür aus dem Weg: `scroll-snap-stop: always`
   an der Karte würde den Rücklauf von der letzten auf die erste Karte
   nach einer Karte abbrechen. Am Ende der Bewegung steht die Bahn genau
   auf einem Rasterpunkt, das Wiedereinschalten verschiebt nichts.
   Steht bewusst außerhalb der Hover-Abfrage darüber: Der Selbstlauf gilt
   auch auf dem Handy. */
.leistungen-buehne__fenster.is-selbstlauf {
  scroll-snap-type: 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: var(--c-ink);
  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;
}

/* Die grosse Ziffer im Hintergrund jeder Kachel.

   Sie stand bis zum 14. Oktober 2026 auf `bottom: -0.25em` und lief damit
   aus der Kachel heraus, die `overflow: hidden` hat — bei 1440 px wurden
   89 px abgeschnitten, bei 2560 px schon 110 px. Man sah also keine Ziffer,
   sondern ihren oberen Teil, und je grösser der Bildschirm, desto mehr
   fehlte. Jetzt steht sie bündig und bleibt vollständig.

   `tabular-nums` ist der zweite Teil: Mit den voreingestellten
   Proportionalziffern war „01" nur 351 px breit, „04" dagegen 438 px.
   Rechtsbündig gesetzt standen die vier Kacheln dadurch sichtbar
   unterschiedlich. Mit Tabellenziffern sind alle exakt gleich breit.

   Die Deckkraft lag bei 0,045 — auf Schwarz ergab das rgb(11,11,11), also
   praktisch unsichtbar. 0,12 bleibt deutlich hinter dem Fliesstext zurück
   und ist trotzdem als Ziffer lesbar. */
.leistungsdetail-baustein__zahl {
  position: absolute;
  right: 0;
  bottom: 0;
  font-family: var(--f-display);
  font-size: clamp(12rem, 25vw, 25rem);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  line-height: 0.8;
  opacity: 0.12;
  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;
  /* Seit 19. Oktober 2026 eine große Überschrift wie die übrigen
     Abschnitte; „Drei Modelle“ steht klein an deren Unterkante. */
  align-items: flex-end;
  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: var(--c-ink); }

.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: var(--c-ink);
}

.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: var(--c-ink);
}

.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: var(--c-ink);
  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),
    var(--c-ink);
  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) 0;
  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),
    var(--c-ink);
  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;
}

/* Stand bis 27. September 2026 auf `position: sticky; top: 9rem`. Der
   Block blieb damit am Desktop kleben, während rechts das Formular
   weiterlief — auf Wunsch von Fabio entfernt: Er scrollt jetzt ganz
   normal mit. Am Handy war er ohnehin nie klebend. */
.contact__head { grid-column: 1 / span 5; }

.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);
}

.contact__email {
  color: var(--c-grey-60);
  font-size: var(--fs-small);
}

.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; }


  .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=20260929-214') 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; }

  /* Der Fuß-Verlauf zieht am Handy kräftiger an: Dort liegen Uhr und
     Knopf direkt auf dem Film, und der neue Header ist helles Material.
     Mit 0,5 blieb die weisse Uhr auf dem Architektur-Bild bei 3,0:1,
     mit 0,7 sind es 4,7:1. Nur der Fuß wird tiefer — die oberen zwei
     Drittel des Bildes bleiben unangetastet. */
  .hero__scrim {
    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.7) 0%, rgba(0,0,0,0) 34%);
  }
  .js .hero__media:not(.is-bereit) > video { opacity: 0; }
  .hero__signet {
    display: block;
    width: clamp(8rem, 32vw, 10.5rem);
  }
  .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 0;
  }

  .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; }

  /* Längere Formatnamen vollständig zeigen statt mit … abzuschneiden. */
  .work__cell:nth-child(3) dd {
    overflow: visible;
    white-space: normal;
    line-height: 1.35;
  }

  .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;
  }
}