/* pascalbehring.com — Stylesheet
   Herkunft: Prototyp v1, ergänzt um die Muss-Punkte aus Konzept v2.
   Condensed = Bedienelemente, Listen, Labels. Junicode breit = Name und About-Text. */

/* ---------- Fonts ---------- */
@font-face { font-family: "Junicode Cond"; src: url("/fonts/Junicode-RegularCondensed.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: block; }
@font-face { font-family: "Junicode Cond"; src: url("/fonts/Junicode-ItalicCondensed.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: block; }
@font-face { font-family: "Junicode"; src: url("/fonts/Junicode.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: block; }

/* ---------- Tokens ---------- */
:root {
  --page-mg: 16px;
  --row-gap: 40px;
  --grid-pt: 50px;
  --fs: 18px;          /* Junicode Condensed ist schmal, 18 px wirkt wie 16 px einer normalen Serif */
  --fs-about: 26px;
  --ink: #000;
  --muted: rgba(0, 0, 0, .56);
  --muted-blend: rgba(255, 255, 255, .55);
  --bg: #fff;
  --frame: #ededed;
  --about-bg: rgba(255, 255, 255, .8);
  --cover-h: 75vh;
  --nav-h: 52px;
  --nav-text-top: 15px;   /* Oberkante der Nav-Zeile; der Titelstapel im Verzeichnis richtet sich daran aus */
  /* Motion-Tokens (Konzept 3) */
  --t-hover: 150ms;
  --t-short: 200ms;
  --t-fade: 300ms;
  --t-page: 400ms;
  --t-move: 600ms;
  --t-morph: 800ms;
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --ease-inout: cubic-bezier(.65, 0, .35, 1);
  --ease-fade: cubic-bezier(.455, .03, .515, .955);
}
@media (min-width: 390px) {
  :root {
    --page-mg: calc(16px + (20 - 16) * (100vw - 390px) / (1920 - 390));
    --row-gap: calc(40px + (80 - 40) * (100vw - 390px) / (1920 - 390));
    --grid-pt: calc(50px + (100 - 50) * (100vw - 390px) / (1920 - 390));
  }
}
@media (max-width: 768px), (max-height: 500px) { :root { --fs: 17px; --fs-about: 23px; --cover-h: 60svh; } }
@media (prefers-reduced-motion: reduce) {
  :root { --t-hover: 0ms; --t-short: 0ms; --t-fade: 150ms; --t-page: 150ms; --t-move: 0ms; --t-morph: 0ms; }
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--bg); color: var(--ink); scrollbar-gutter: stable; overflow-y: scroll; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: "Junicode Cond", "Junicode", Georgia, serif;
  font-size: var(--fs);
  line-height: 1.2;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "kern", "liga";
  -webkit-tap-highlight-color: transparent;
}
body.is-locked { position: fixed; left: 0; right: 0; overflow: hidden; }
p, ol, ul, h1 { margin: 0; padding: 0; font-weight: 400; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; -webkit-user-drag: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
::selection { background: #000; color: #fff; }
:focus { outline: none; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }   /* 2 px: im Difference-Blend der Nav bleibt 1 px sonst unsichtbar */
[hidden] { display: none !important; }

/* ---------- Preloader (nur Desktop, nur Startseite) ---------- */
#preloader {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .35);
  backdrop-filter: blur(17px); -webkit-backdrop-filter: blur(17px);
  transition: opacity var(--t-move) var(--ease-fade);
}
#preloader p { font-family: "Junicode", serif; font-size: var(--fs-about); white-space: nowrap; }
#preloader.done { opacity: 0; pointer-events: none; }
@media (max-width: 768px), (max-height: 500px) { #preloader { display: none; } }

/* ---------- Nav: 16-Spalten-Raster, komplett im Difference-Blend ---------- */
.nav { position: fixed; inset: 0; z-index: 500; pointer-events: none; mix-blend-mode: difference; color: #fff; }
.nav a, .nav button, .nav p { pointer-events: auto; }
.nav .project-meta__client, .nav .project-meta__count, .nav .nav__place { color: var(--muted-blend); }
.nav__top {
  position: absolute; top: 0; left: 0; right: 0;
  display: grid; grid-template-columns: repeat(16, 1fr); column-gap: var(--page-mg);
  padding: max(15px, env(safe-area-inset-top)) var(--page-mg) 15px;
  align-items: start;
}
.nav__left  { grid-column: 1 / 5;  grid-row: 1; overflow: hidden; }
.nav__title { grid-column: 1 / 7;  grid-row: 1; justify-self: end; }
.nav__about { grid-column: 7 / 17; grid-row: 1; justify-self: end; margin-right: calc(100vw / 8 - 3px); }
.nav__right { grid-column: 14 / 17; grid-row: 1; justify-self: end; display: grid; }
.nav__right > * { grid-area: 1 / 1; justify-self: end; }
@media (min-width: 769px) and (max-width: 1024px) {
  .nav__title { grid-column: 1 / 10; margin-right: calc((100vw - var(--page-mg)) / 16); }
  .nav__about { margin-right: calc(100vw / 6 - 2px); }
}
.nav__home { font-family: "Junicode", serif; white-space: nowrap; margin: -10px; padding: 10px; display: inline-block; }   /* Hitbox wie .btn (Touch-Ziel), ohne die Position zu verschieben */
.nav__count { white-space: nowrap; transition: opacity var(--t-hover) var(--ease-fade); }
.nav__count.is-swapping { opacity: 0; }

.btn { margin: -10px; padding: 10px; white-space: nowrap; transition: opacity var(--t-hover) var(--ease-fade); }
@media (hover: hover) and (pointer: fine) { .btn:hover { opacity: .5; } }
.nav__close { opacity: 0; pointer-events: none; visibility: hidden; transition: opacity var(--t-hover) var(--ease-fade), visibility 0s linear var(--t-hover); }
body.about-open .nav__toggle, body.legal-open .nav__toggle, body.zoom-open .nav__toggle, body.toc-open .nav__toggle { opacity: 0; pointer-events: none; visibility: hidden; transition: opacity var(--t-hover) var(--ease-fade), visibility 0s linear var(--t-hover); }
body.about-open .nav__close, body.legal-open .nav__close, body.zoom-open .nav__close, body.toc-open .nav__close { opacity: 1; pointer-events: auto; visibility: visible; transition-delay: 0s; }
.nav__toggle.is-swapping { opacity: 0; }
body.about-open #btnAbout { opacity: .5; }
.nav__title, .nav__about, .nav__count, .nav__bottom { transition: opacity var(--t-fade) var(--ease-fade), visibility 0s linear 0s; }
body.zoom-open .nav__title, body.zoom-open .nav__about, body.zoom-open .nav__count, body.zoom-open .nav__bottom { opacity: 0; pointer-events: none; visibility: hidden; transition: opacity var(--t-fade) var(--ease-fade), visibility 0s linear var(--t-fade); }
body.zoom-open .nav__title a, body.zoom-open .nav__about a, body.zoom-open .nav__bottom * { pointer-events: none; }

.nav__bottom {
  position: absolute; left: var(--page-mg); right: var(--page-mg);
  bottom: max(16px, env(safe-area-inset-bottom));
  display: none; justify-content: space-between; align-items: baseline;
}
.nav__place, .nav__current { display: none; }
.nav__current { text-align: left; }

/* ---------- Views ---------- */
.wrapper { min-height: 100vh; position: relative; }
/* Messung einer inaktiven Ansicht: unsichtbar über die Seite gelegt */
.view.is-measuring { display: block; position: absolute; top: 0; left: 0; right: 0; visibility: hidden; pointer-events: none; opacity: 1; }
.view--feed.is-measuring { display: grid; grid-template-columns: repeat(16, 1fr); column-gap: var(--page-mg); padding: 0 var(--page-mg); }
.is-morph-hidden { opacity: 0 !important; transition: none !important; }
img.morph { display: block; }
.view { display: none; opacity: 0; transition: opacity var(--t-fade) var(--ease-fade); }
.view.is-active { display: block; }
.view.is-visible { opacity: 1; }

/* ---------- Index: gleichförmiges Raster ----------
   Jede Kachel hat dasselbe Hochformat (--cell-ratio). Querformate liefert das CDN als
   Ausschnitt um den Hotspot aus dem Studio, im Fullscreen bleibt das ganze Bild.
   Ein Format für alles wirkt ruhiger als gemischte Breiten. */
.view--index { container-type: inline-size; }
.index__grid {
  --cols: 8;
  display: grid; grid-template-columns: repeat(var(--cols), 1fr);
  column-gap: var(--page-mg); row-gap: var(--row-gap);
  padding: calc(var(--grid-pt) + 20px) var(--page-mg) var(--grid-pt);
}
.thumb { display: block; cursor: pointer; }
.thumb__img { display: block; position: relative; width: 100%; aspect-ratio: var(--cell-ratio, 0.75); background: var(--frame); overflow: hidden; }
.thumb__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity var(--t-short) var(--ease-fade); }
.thumb__img img.is-loaded { opacity: 1; }
/* „Ganz“: Querformat unbeschnitten, so breit wie die Zelle, oben ausgerichtet (wie bei Zan) */
.thumb--full .thumb__img { aspect-ratio: var(--ar, 1.5); }
@media (max-width: 1440px) { .index__grid { --cols: 7; } }
@media (max-width: 1024px) { .index__grid { --cols: 6; } }
@media (max-width: 768px), (max-height: 500px)  { .index__grid { --cols: 3; padding-top: 70px; padding-bottom: calc(120px + env(safe-area-inset-bottom)); } }

/* ---------- Projektansicht: Verzeichnis + Cover ----------
   Cover nach Höhe (75vh) wie Zan, Breite folgt dem Format, mittig im Fenster.
   Das Verzeichnis liegt links in vier Spalten (bei langen Titeln bis 35 % des Fensters, views.js fitToc; nur der erste Eintrag endet vor dem Namen);
   Querformate werden so weit begrenzt,
   dass sie mittig bleiben und das Verzeichnis nicht berühren. */
/* Verzeichnisbreite: 4 von 16 Spalten. views.js fitToc() setzt --toc-w breiter (bis 35 % des Fensters; der erste Eintrag endet vor dem Namen in der Nav),
   wenn der längste Eintrag sonst umbrechen würde; die Cover werden automatisch so weit begrenzt, dass sie es nicht berühren. */
:root { --toc-w: calc((100vw - 17 * var(--page-mg)) / 16 * 4 + 3 * var(--page-mg)); }
.view--feed.is-active {
  display: grid; grid-template-columns: repeat(16, 1fr); column-gap: var(--page-mg);
  padding: 0 var(--page-mg);
}
/* Verzeichnis wie bei Zan: die Titel stapeln sich beim Scrollen oben links. Jeder Eintrag ist so hoch
   wie ein Cover samt Abstand, sitzt also auf Höhe seines Covers, und bleibt oben kleben (sticky), sobald
   er die Stapelhöhe seines Index erreicht. Der nächste Titel fährt mit seinem Cover nach oben, bis er
   sich unten an den Stapel setzt. */
.toc { list-style: none; }
/* Der Stapel wird per JavaScript positioniert (views.js updateToc): jeder Eintrag steht auf Höhe seines
   Covers und bleibt oben stehen, sobald er seine Stapelposition erreicht. Fixed statt Sticky, weil Sticky
   von Rasterzelle oder Randbox begrenzt wird und sich am Seitenende zusammenschiebt (Safari). */
.toc:not(.toc--mobile) {
  grid-column: 1 / 5; grid-row: 1; align-self: start;
  --toc-line: 1.45em;
}
.toc:not(.toc--mobile) li {
  position: fixed; top: 0; left: var(--page-mg);
  width: var(--toc-w);
  transform: translate3d(0, -300vh, 0);   /* bis das Skript die Position setzt */
  line-height: var(--toc-line);
  pointer-events: none; z-index: 2;
}
.toc a { pointer-events: auto; display: block; white-space: normal; padding-left: 1.1em; text-indent: -1.1em; color: var(--muted); transition: color var(--t-fade) var(--ease-fade); }
.toc a > span { white-space: normal; }
/* Umbruch nur zwischen Titel und Kunde: Kunde + Zähler bilden eine Einheit, die als Ganzes in die nächste Zeile
   rutscht (hängender Einzug), statt mitten im Kunden zu brechen; der Titel bricht nur, wenn er allein nicht passt.
   Außerhalb des Verzeichnisses ist die Einheit unsichtbar (display: contents), damit die Flex-Abstände in
   Nav-Label und Fullscreen-Label unverändert bleiben. */
.project-meta__rest { display: contents; }
.toc .project-meta__rest:has(.project-meta__client) { display: inline-block; white-space: nowrap; text-indent: 0; }
.toc .project-meta__title { margin-right: .5em; }
.toc .project-meta__client + .project-meta__count { margin-left: .5em; }
.toc .project-meta__count { white-space: nowrap; }
.toc .project-meta__client, .toc .project-meta__count { color: inherit; }
/* Messmodus (views.js fitToc): jeder Eintrag in einer Zeile, so breit wie nötig */
.toc.is-measuring li { width: max-content; }
.toc.is-measuring a, .toc.is-measuring a span { white-space: nowrap; }
@media (hover: hover) and (pointer: fine) { .toc a:hover { color: var(--ink); } }
.toc li.is-current a { color: var(--ink); }
.toc li.is-current .project-meta__client, .toc li.is-current .project-meta__count { color: var(--muted); }
/* Der Stapel ersetzt den Zähler „1/19“ oben links */
body[data-status="feed"] .nav__count { visibility: hidden; }

/* Unten endet die Seite genau dort, wo das letzte Cover seine normale Position hat (Oberkante unter der Nav):
   Rest = Fenster − Cover − Nav-Abstand − Abstand nach dem letzten Cover (8vh). views.js layoutToc() setzt den Wert
   mit der echten Höhe des letzten Covers (Querformate sind niedriger als --cover-h). */
.feed { grid-column: 1 / -1; grid-row: 1; padding-top: calc(var(--grid-pt) + 20px); padding-bottom: max(0px, calc(100vh - var(--cover-h) - var(--grid-pt) - 20px - 8vh)); }
/* Die Box ist so hoch wie ihr Bild, nicht fest 75vh: Querformate (niedriger) bekommen so denselben Abstand zum Nachbarn
   wie Hochformate, statt in einer 75vh-Box mit Luft darüber und darunter zu schwimmen. */
.feed__item {
  display: flex; align-items: center; justify-content: center;
  height: auto; margin-bottom: 8vh;
  cursor: pointer; scroll-margin-top: calc(var(--grid-pt) + 20px);
  pointer-events: none;                 /* nur das Bild ist klickbar, nicht der Weißraum daneben */
}
.feed__img {
  /* Höhe bis 75vh, Breite aus dem Format (--ar). Querformate werden so weit begrenzt, dass sie
     mittig bleiben und das Verzeichnis nicht berühren: Breite ≤ Fenster − 2 × (Verzeichnisbreite + 2 Ränder). */
  --maxw: calc(100vw - 2 * (var(--toc-w) + 2 * var(--page-mg)));
  display: block; position: relative;
  height: min(var(--cover-h), calc(var(--maxw) / var(--ar, 0.6667)));
  aspect-ratio: var(--ar, 0.6667);
  background: var(--frame); pointer-events: auto;
}
.feed__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity var(--t-short) var(--ease-fade); }
.feed__img img.is-loaded { opacity: 1; }
.feed__label.project-meta { display: none; }

/* ---------- Projekt-Meta: Titel · Kunde · Anzahl ---------- */
.project-meta { display: inline-flex; gap: .5em; align-items: baseline; white-space: nowrap; }
.project-meta__client { color: var(--muted); font-style: italic; }
.project-meta__count  { color: var(--muted); font-variant-numeric: tabular-nums; }

/* ---------- Cursor-Label über Covern ---------- */
.cursor-label {
  position: fixed; top: 0; left: 0; z-index: 600; pointer-events: none;
  white-space: nowrap; color: #fff; mix-blend-mode: difference;
  opacity: 0; transition: opacity var(--t-short) var(--ease-fade);
}
.cursor-label.is-on.has-pos { opacity: 1; }
@media (hover: none), (pointer: coarse) { .cursor-label { display: none; } }

/* ---------- Fullscreen: randlos, Bild auf Viewporthöhe ---------- */
.zoom {
  position: fixed; inset: 0; z-index: 400; background: var(--bg);
  opacity: 0; pointer-events: none; transition: opacity var(--t-fade) var(--ease-fade);
}
body.zoom-open .zoom { opacity: 1; pointer-events: auto; }
.zoom__stage { position: absolute; inset: 0; overflow: hidden; }
.zoom__img {
  position: absolute; inset: 0; margin: auto;
  height: 100svh; width: auto; max-width: 100vw; max-height: 100svh; object-fit: contain;
  opacity: 0; transition: opacity var(--t-page) var(--ease-fade);
}
.zoom__img.is-on { opacity: 1; }
/* Tearsheet (Doppelseite, Social-Cover): kleiner mit Luft, steht als Blatt statt als randloses Foto */
.zoom__img.is-tearsheet { height: 84svh; max-height: 84svh; }
.zoom__label, .zoom__credits {
  position: absolute; left: var(--page-mg); z-index: 2;
  color: #fff; mix-blend-mode: difference; pointer-events: none;
}
.zoom__label { top: max(15px, env(safe-area-inset-top)); }
.zoom__label .project-meta__client, .zoom__label .project-meta__count, .zoom__credits { color: var(--muted-blend); }
.zoom__credits { bottom: max(16px, env(safe-area-inset-bottom)); max-width: min(360px, 28vw); display: flex; flex-direction: column; line-height: 1.3; font-size: .92em; }
.zoom__credit { display: block; }
.zoom__credit a { pointer-events: auto; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }   /* .zoom__credits fängt keine Zeiger, Links schon; Zeiger sichtbar trotz cursor: none der Bühne */
@media (max-width: 768px), (max-height: 500px) { .zoom__credits { max-width: 70vw; font-size: .85em; } }
.zoom__credits:empty { display: none; }
@media (hover: hover) and (pointer: fine) { body.zoom-open .zoom { cursor: none; } }
.zoom__cursor {
  position: fixed; top: 0; left: 0; z-index: 10000; pointer-events: none;
  transform: translate(-50%, -50%); mix-blend-mode: difference; display: none;
}
@media (hover: hover) and (pointer: fine) { body.zoom-open .zoom__cursor.has-pos { display: block; } }
.zoom__cursor.is-prev svg { transform: scaleX(-1); }
@media (max-width: 768px), (max-height: 500px) {
  .zoom__label { max-width: calc(100vw - 2 * var(--page-mg) - 60px); overflow: hidden;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 15px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 15px), transparent); }
}

/* ---------- Overlays: About, Rechtstexte, Mobil-Verzeichnis ---------- */
.overlay { position: fixed; inset: 0; z-index: 450; opacity: 0; pointer-events: none; transition: opacity var(--t-fade) var(--ease-out); overflow-y: auto; -webkit-overflow-scrolling: touch; }
.overlay.is-open { opacity: 1; pointer-events: auto; }
.about__inner, .legal__inner, .toc--mobile { opacity: 0; transition: opacity var(--t-short) var(--ease-out); }
.overlay.is-open .about__inner, .overlay.is-open .legal__inner, .overlay.is-open .toc--mobile { opacity: 1; transition: opacity var(--t-fade) var(--ease-out) var(--t-hover); }
.overlay__bg { position: fixed; inset: 0; background: var(--about-bg); backdrop-filter: blur(17px); -webkit-backdrop-filter: blur(17px); }
.overlay__inner-anim { transition: opacity var(--t-fade) var(--ease-out) var(--t-hover); }

.about__inner, .legal__inner {
  position: relative;
  padding: calc(var(--nav-h) + 48px) var(--page-mg) 60px;
  min-height: 100vh;
}
.legal__inner { display: grid; grid-template-columns: repeat(16, 1fr); column-gap: var(--page-mg); row-gap: 50px; }
/* About wie bei Zan: linkes Drittel frei (hier das Portrait), Text ab Spalte 6, Kontakt rechts;
   darunter Kunden ab Spalte 6, Presse und Standort rechts; zuletzt Behind the scenes ab Spalte 6 */
/* Ein Raster: Portrait links über zwei Zeilen, rechts davon Text und Kontakt, direkt darunter Kunden,
   Presse und Standort, damit unter dem Text keine große Lücke bleibt */
.about__top { display: grid; grid-template-columns: repeat(16, 1fr); column-gap: var(--page-mg); align-items: start; }
.about__portrait { grid-column: 1 / 5; grid-row: 1 / 3; margin: 0; }
.about__portrait-img { display: block; position: relative; width: 100%; aspect-ratio: var(--ar, 0.75); background: var(--frame); overflow: hidden; }
.about__portrait-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity var(--t-short) var(--ease-fade); }
.about__portrait-img img.is-loaded { opacity: 1; }
.about__desc { grid-column: 6 / 12; grid-row: 1; font-family: "Junicode", serif; font-size: var(--fs-about); line-height: 1.32; }
.about__desc p + p { margin-top: .8em; }
.about__contact { grid-column: 14 / 17; grid-row: 1; }
.about__clients { grid-column: 6 / 9; grid-row: 2; margin-top: 72px; }
.about__press { grid-column: 9 / 14; grid-row: 2; margin-top: 72px; }
.about__misc { grid-column: 14 / 17; grid-row: 2; margin-top: 72px; }
.about__lbl { color: var(--muted); margin-bottom: 14px; }
.about__lbl--rep { margin-top: 36px; }
.about__list { list-style: none; }
.about__list li { margin-bottom: .3em; white-space: nowrap; break-inside: avoid; }
.about__link { display: block; margin-bottom: .3em; }
@media (hover: hover) and (pointer: fine) { .about__link:hover { text-decoration: underline; } }
.about__link--muted { color: var(--muted); }
.about__dl { margin-top: 24px; }
.about__row { display: flex; gap: 24px; margin-bottom: .3em; }
.about__yr { flex: 0 0 90px; white-space: nowrap; }
.about__legal { display: flex; gap: 24px; margin-top: 36px; }
/* Behind the scenes: ein Bild, Klick blättert (links = zurück, rechts = weiter), Pfeiltasten ebenso */
.about__bts { margin-top: 120px; display: grid; grid-template-columns: repeat(16, 1fr); column-gap: var(--page-mg); }
.about__bts > * { grid-column: 6 / 17; }
.about__bts-count { color: var(--muted); font-variant-numeric: tabular-nums; margin-left: .5em; }
.about__bts-stage { position: relative; height: 70vh; cursor: pointer; }
.about__bts-img { position: absolute; left: 0; top: 0; height: 100%; width: auto; max-width: 100%; object-fit: contain; object-position: left top; opacity: 0; transition: opacity var(--t-fade) var(--ease-fade); pointer-events: none; }
.about__bts-img.is-on { opacity: 1; }
@media (max-width: 1024px) {
  .about__portrait { grid-column: 1 / 5; grid-row: 1 / 5; }
  .about__desc { grid-column: 5 / 17; grid-row: 1; }
  .about__contact { grid-column: 5 / 17; grid-row: 2; margin-top: 40px; }
  .about__clients { grid-column: 5 / 9; grid-row: 3; margin-top: 56px; } .about__press { grid-column: 9 / 17; grid-row: 3; margin-top: 56px; } .about__misc { grid-column: 5 / 17; grid-row: 4; margin-top: 40px; }
  .about__bts > * { grid-column: 5 / 17; }
}
@media (max-width: 768px), (max-height: 500px) {
  .about__inner, .legal__inner { padding-top: 70px; }
  .legal__inner { grid-template-columns: 1fr; row-gap: 48px; }
  .about__top { grid-template-columns: 1fr; row-gap: 40px; }
  .about__portrait, .about__desc, .about__contact, .about__clients, .about__press, .about__misc { grid-column: 1; grid-row: auto; margin-top: 0; }
  .about__portrait { max-width: 60%; }
  .about__bts { margin-top: 64px; }
  .about__bts > * { grid-column: 1 / -1; }
  .about__bts-stage { height: 50vh; }
  .about__link { padding: 6px 0; margin-bottom: 0; }   /* Touch-Ziel: Zeilenabstand ≈ 32 px statt 25 px */
}
.legal__title { font-family: "Junicode", serif; font-size: var(--fs-about); margin-bottom: 32px; }
.legal__lbl { color: var(--muted); margin-top: 28px; margin-bottom: 8px; }
.legal__lang { color: var(--muted); margin-top: 0; margin-bottom: 8px; }   /* graue englische Zeile über dem deutschen Titel („Legal notice (German)“) */
.legal__section p { max-width: 640px; line-height: 1.35; }
.legal__section p + p { margin-top: .6em; }
@media (max-width: 768px), (max-height: 500px) { .legal__section { grid-column: 1; } }

.toc--mobile { grid-column: 1 / -1; position: relative; padding: 70px var(--page-mg) 120px; max-height: none; }
.toc--mobile li { line-height: 1.25; padding: 10px 0; }
.toc--mobile a { color: var(--muted); }

/* ---------- Mobil ---------- */
@media (max-width: 768px), (max-height: 500px) {
  .nav__top { display: flex; justify-content: space-between; align-items: flex-start; }
  .nav__left { display: none; }
  .nav__title { order: 1; }
  .nav__about { order: 2; margin-left: auto; margin-right: 18px; }
  .nav__right { order: 3; }
  .nav__bottom { display: flex; }
  body[data-status="index"] .nav__place { display: block; }
  /* Projektlabel unten links darf umbrechen: Titel, dann Kunde + Zähler als Einheit in der nächsten Zeile (statt am Rand abzuschneiden) */
  body[data-status="feed"] .nav__current { display: block; white-space: normal; max-width: calc(100vw - 2 * var(--page-mg)); line-height: 1.25; }
  .nav__current .project-meta__title { margin-right: .5em; }
  .nav__current .project-meta__rest { display: inline-block; white-space: nowrap; }
  .nav__current .project-meta__client + .project-meta__count { margin-left: .5em; }
  body.about-open .nav__bottom, body.legal-open .nav__bottom, body.toc-open .nav__bottom { opacity: 0; pointer-events: none; }
  .view--feed.is-active { display: block; }
  .toc:not(.toc--mobile) { display: none; }
  .feed { padding-top: 70px; padding-bottom: calc(120px + env(safe-area-inset-bottom)); }
  .feed__item { height: auto; margin-bottom: 6vh; }
  .feed__img { height: auto; width: auto; max-width: 100%; aspect-ratio: auto; }
  .feed__img img { position: static; width: auto; height: auto; max-width: 100%; max-height: var(--cover-h); object-fit: contain; }
  .view--feed.is-measuring { display: block; }
}