/* medimac studios – Stylesheet. Reihenfolge: Fonts, Tokens, Basis, Layout, Komponenten, Bewegung, Print. */

/* ---------- 1 Fonts (selbst gehostet, OFL) ---------- */
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url('/assets/fonts/source-sans-3-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url('/assets/fonts/source-sans-3-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- 2 Tokens ---------- */
:root {
  --paper: #F3F2EF;
  --paper-2: #E9E6E1;
  --paper-3: #DFDBD4;
  --ink: #262626;
  --ink-2: #4A4A4A;
  --muted: #6E6E6E;
  --faint: #9B9893;
  --line: rgba(38, 38, 38, .14);
  --line-strong: rgba(38, 38, 38, .36);
  --dark: #121212;
  --on-dark: #F3F2EF;
  --on-dark-muted: rgba(243, 242, 239, .62);
  --line-dark: rgba(243, 242, 239, .16);
  --footer-wordmark: #2F2F2F;

  --font: 'Source Sans 3', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --fs-display: clamp(2.6rem, 1.4rem + 4.4vw, 5.4rem);
  --fs-statement: clamp(1.8rem, 1.1rem + 2.3vw, 3.1rem);
  --fs-h3: clamp(1.25rem, 1.1rem + .5vw, 1.5rem);
  --fs-lede: clamp(1.125rem, 1rem + .4vw, 1.3rem);
  --fs-body: 1.0625rem;
  --fs-small: .875rem;
  --fs-label: .8125rem;

  --gutter: clamp(20px, 4vw, 64px);
  --max: 1600px;
  --gap: clamp(16px, 2vw, 32px);
  --space-section: clamp(88px, 11vw, 176px);
  --space-block: clamp(40px, 5vw, 80px);
  --nav-h: 88px;
  --nav-h-compact: 64px;
  --subnav-h: 64px;

  --ease: cubic-bezier(.2, .7, .2, 1);
  --dur: .9s;
  --dur-fast: .3s;

  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='table' tableValues='0 .08'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- 3 Basis ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  hyphens: auto;
  -webkit-hyphens: auto;
  scroll-padding-top: 24px;
}
body {
  margin: 0;
  min-height: 100svh;
  font: 300 var(--fs-body) / 1.6 var(--font);
  color: var(--ink);
  background-color: var(--paper);
  background-image: var(--noise);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: 'kern', 'liga';
  overflow-x: clip;
}
h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; }
h1, h2, h3, h4 {
  font-weight: 200;
  line-height: 1.15;
  letter-spacing: -.01em;
  overflow-wrap: break-word;
  text-wrap: balance;
  hyphens: auto;
  -webkit-hyphens: auto;
  hyphenate-limit-chars: 12 5 5;
}
h3, h4 { font-weight: 400; letter-spacing: 0; }
a { color: inherit; }
img, svg, video { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }
strong { font-weight: 500; }
[id] { scroll-margin-top: 24px; }
/* Mit Sprungnavigation: Ziel exakt unter der klebenden Leiste, damit die Trennlinie der Sektion direkt an ihr anliegt. */
html:has(.subnav) { scroll-padding-top: 0; }
body:has(.subnav) [id] { scroll-margin-top: var(--subnav-h); }
[hidden] { display: none !important; }
::selection { background: var(--ink); color: var(--paper); }

:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; border-radius: 2px; }
.on-dark :focus-visible, .footer :focus-visible { outline-color: var(--on-dark); }

.skip {
  position: absolute; left: var(--gutter); top: -100px; z-index: 1000;
  padding: 10px 18px; background: var(--ink); color: var(--paper);
  border-radius: 999px; text-decoration: none; font-size: var(--fs-small);
}
.skip:focus { top: 16px; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- 4 Typografie ---------- */
.display { font-size: var(--fs-display); font-weight: 200; line-height: 1.04; letter-spacing: -.015em; }
.statement { font-size: var(--fs-statement); font-weight: 200; line-height: 1.16; letter-spacing: -.012em; }
.h3, .rows__title, .card__title, .faq__q, .person__name { font-size: var(--fs-h3); font-weight: 400; line-height: 1.3; letter-spacing: 0; }
.lede { font-size: var(--fs-lede); font-weight: 300; line-height: 1.5; color: var(--ink-2); }
.small { font-size: var(--fs-small); }
.muted { color: var(--muted); }
.measure { max-width: 68ch; }
.measure-s { max-width: 50ch; }
.stack > * + * { margin-top: 1.25em; }
.stack-s > * + * { margin-top: .75em; }

.eyebrow {
  display: flex; align-items: baseline; gap: .85em;
  font-size: var(--fs-label); font-weight: 400; line-height: 1.4;
  letter-spacing: .02em; color: var(--muted);
}
.eyebrow__index { color: var(--muted); font-variant-numeric: tabular-nums; }

/* ---------- 5 Layout ---------- */
.container { width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; }
.grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap);
  row-gap: var(--space-block);
}
.grid--tight { row-gap: calc(var(--space-block) / 2); }
.g-full { grid-column: 1 / -1; }
.g-lead { grid-column: 1 / 9; }
.g-body { grid-column: 7 / 13; }
.g-body-wide { grid-column: 5 / 13; }
.g-aside { grid-column: 1 / 5; }
.g-main { grid-column: 5 / 13; }
.g-half-l { grid-column: 1 / 7; }
.g-half-r { grid-column: 7 / 13; }
.g-narrow { grid-column: 3 / 11; }

.section { padding-block: var(--space-section); }
.section--line { border-top: 1px solid var(--line); }
.section--flush-top { padding-top: 0; }
.section--tight { padding-block: var(--space-block); }
.divider { border: 0; border-top: 1px solid var(--line); margin: 0; }
.block + .block { margin-top: var(--space-block); }
.section__extra { margin-top: var(--space-block); }

@media (max-width: 1024px) {
  .g-lead { grid-column: 1 / 12; }
  .g-body { grid-column: 3 / 13; }
  .g-body-wide, .g-aside, .g-main, .g-narrow { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .g-lead, .g-body, .g-half-l, .g-half-r { grid-column: 1 / -1; }
}

/* ---------- 6 Buttons und Links ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: 46px; padding: .75em 1.55em;
  border: 1px solid var(--line-strong); border-radius: 999px;
  font-size: var(--fs-label); font-weight: 500; line-height: 1; letter-spacing: .01em;
  color: var(--ink); background: transparent; text-decoration: none; cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.btn:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--dark); color: var(--on-dark); border-color: var(--dark); }
.btn--primary:hover { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--small { min-height: 38px; padding: .55em 1.1em; font-weight: 400; }
@media (pointer: coarse) {
  .btn--small { min-height: 44px; }
  .footer li + li { margin-top: 14px; }
  /* :not(.btn): Sonst verliert der Button „Projekt anfragen“ im Footer sein inline-flex und der Text sitzt oben statt mittig. */
  .footer__cols a:not(.btn), .footer__legal a { display: inline-block; padding-block: 4px; }
}
.btn--light { color: var(--on-dark); border-color: var(--line-dark); }
.btn--light:hover { background: var(--on-dark); color: var(--dark); border-color: var(--on-dark); }
.btn-group { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: center; }

.link {
  display: inline-flex; align-items: center; gap: .55em;
  color: var(--ink); text-decoration: none; font-weight: 400; line-height: 1.4;
}
.link__text {
  text-decoration: underline; text-underline-offset: .24em; text-decoration-thickness: 1px;
  text-decoration-color: var(--line-strong); transition: text-decoration-color var(--dur-fast) var(--ease);
}
.link svg { width: .9em; height: .9em; flex: none; transition: transform .4s var(--ease); }
.link:hover .link__text { text-decoration-color: var(--ink); }
.link:hover svg { transform: translateX(4px); }
.link--small { font-size: var(--fs-small); }

/* ---------- 7 Platzhalter für Medien ---------- */
.ph {
  position: relative; overflow: hidden; isolation: isolate;
  aspect-ratio: 3 / 2; border-radius: 2px;
  background-color: var(--paper-2); background-image: var(--noise);
  color: var(--muted);
}
.ph::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(120% 90% at 28% 18%, rgba(255, 255, 255, .55), transparent 62%),
    linear-gradient(160deg, rgba(38, 38, 38, .015), rgba(38, 38, 38, .07));
}
.ph::after { content: ''; position: absolute; inset: 12px; border: 1px solid rgba(38, 38, 38, .12); pointer-events: none; }
.ph--21-9 { aspect-ratio: 21 / 9; }
.ph--16-9 { aspect-ratio: 16 / 9; }
.ph--3-2 { aspect-ratio: 3 / 2; }
.ph--4-3 { aspect-ratio: 4 / 3; }
.ph--4-5 { aspect-ratio: 4 / 5; }
.ph--1-1 { aspect-ratio: 1 / 1; }
.img { display: block; width: 100%; height: auto; object-fit: cover; object-position: 50% 30%; background: var(--paper-2); }
.ph__label {
  position: absolute; left: 22px; bottom: 18px; z-index: 1;
  font-size: .75rem; font-weight: 400; letter-spacing: .04em; line-height: 1.3;
}
.ph__play {
  position: absolute; inset: 0; margin: auto; width: 72px; height: 72px;
  border: 1px solid var(--line-strong); border-radius: 50%;
}
.ph__play::after {
  content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-40%, -50%);
  border-left: 14px solid var(--ink); border-top: 9px solid transparent; border-bottom: 9px solid transparent;
}
@media (max-width: 640px) {
  .ph--21-9 { aspect-ratio: 16 / 9; }
  .ph::after { inset: 8px; }
  .ph__label { left: 16px; bottom: 12px; font-size: .7rem; }
  .ph__play { width: 52px; height: 52px; }
  .ph__play::after { border-left-width: 11px; border-top-width: 7px; border-bottom-width: 7px; }
}
.ph--dark { background-color: #1B1B1B; color: var(--on-dark-muted); }
.ph--dark::after { border-color: var(--line-dark); }
.ph--dark .ph__play { border-color: var(--line-dark); }
.ph--dark .ph__play::after { border-left-color: var(--on-dark); }

/* ---------- 8 Komponenten ---------- */
/* Hero der Startseite */
.hero__inner {
  position: relative; min-height: calc(100svh - var(--nav-h));
  display: grid; align-content: center; justify-items: center; text-align: center;
  padding-block: clamp(40px, 8vh, 96px) 120px;
}
.hero__eyebrow { justify-content: center; }
.hero__h1 { margin-top: 28px; font-size: clamp(2.7rem, 1.1rem + 5.3vw, 6.6rem); max-width: 26ch; }
.hero__h1 span { display: block; }
.hero__lede { margin-top: 32px; max-width: 56ch; }
.hero__actions { margin-top: 36px; justify-content: center; }
.hero__bar {
  position: absolute; left: 0; right: 0; bottom: 28px;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  font-size: var(--fs-label); color: var(--muted);
}
.hero__index { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0; padding: 0; list-style: none; }
.hero__media { padding-bottom: var(--space-section); }
/* Bildwechsel im Hero: Bilder übereinander, das aktive blendet ein; 21:9.
   Wunsch vom 06.11.2026: auf dem Smartphone 3:2, links und rechts gleichmäßig beschnitten;
   nur das Bild der Kieferorthopädie (Hand mit Smartphone, rechts die runde Steinform) verliert allein rechts,
   damit das Smartphone im Bild bleibt. */
.slides { position: relative; aspect-ratio: 21 / 9; overflow: hidden; border-radius: 2px; background: var(--paper-2); }
.slides > .img { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; opacity: 0; transition: opacity .7s var(--ease); }
.slides > .img.is-active { opacity: 1; }
@media (max-width: 640px) {
  .slides { aspect-ratio: 3 / 2; }
  .slides > .img { object-position: 50% 50%; }
  .slides > .img[src*="slide-kfo-iphone"] { object-position: 0% 50%; }
}
.block-s { margin-top: calc(var(--space-block) * .6); }
@media (max-width: 1024px) { .hero__inner { min-height: calc(100svh - var(--nav-h-compact)); } }
@media (max-width: 640px) {
  .hero__inner { padding-bottom: 96px; }
  .hero__index { display: none; }
  .hero__h1 { max-width: none; }
}

/* Seiten-Hero (Unterseiten) */
.page-hero { padding-top: clamp(48px, 8vw, 128px); }
.page-hero--tall { padding-top: clamp(96px, 16vw, 220px); padding-bottom: var(--space-section); }
.page-hero__grid {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: 28px;
  align-items: end; padding-bottom: clamp(28px, 4vw, 56px);
}
.page-hero__head { grid-column: 1 / 9; }
.page-hero__head .display { margin-top: 26px; }
.page-hero__aside { grid-column: 9 / 13; padding-bottom: .5em; }
.page-hero__aside .btn-group { margin-top: 26px; }
.page-hero__media { margin-top: clamp(28px, 4vw, 56px); }
.page-hero__meta { margin-top: 18px; color: var(--muted); }
@media (max-width: 1024px) { .page-hero__head { grid-column: 1 / -1; } .page-hero__aside { grid-column: 1 / 11; padding-bottom: 0; } }
@media (max-width: 640px) { .page-hero__aside { grid-column: 1 / -1; } }

/* Parallax-Rahmen */
.parallax { overflow: hidden; border-radius: 2px; }
.parallax.is-parallax > .ph, .parallax.is-parallax > .img { transform: scale(1.12); will-change: transform; }
/* Oben verankerte Parallaxe (Regel für Hero und Abschlussbild der Projektseiten): Skalierung um die Oberkante, Bildausschnitt von oben. */
.parallax.is-parallax > [data-parallax="top"] { transform-origin: 50% 0; }
.parallax > .img[data-parallax="top"] { object-position: 50% 0; }
/* Zoom-Parallaxe (30.10.2026, freies Projektlayout): Bild im Originalformat, startet um 22 % vergrößert (oder um --zoom, z. B. 1.15
   für die Referenzen der Startseite) und zoomt beim Scrollen bis zur Bildmitte auf 100 % heraus (Skript setzt den Wert); ohne
   Skript oder bei reduzierter Bewegung steht das ganze Bild. */
.parallax.is-parallax > [data-parallax="zoom"] { transform: scale(var(--zoom, 1.22)); transform-origin: 50% 50%; }
.parallax.is-parallax .ph::after { inset: calc(12px + 5.5%); }
.parallax.is-parallax .ph__label { left: calc(22px + 5.5%); bottom: calc(18px + 5.5%); }

/* Referenzen der Startseite (03.11.2026): vier Reihen ganzer Mockups (1 · 2 · 1 · 2) über die volle Inhaltsbreite im Raster der
   Komposition (.reihe), Zoom-Parallaxe 15 %, darunter linksbündig Metazeile und Projektname; auf dem Smartphone stehen die
   Doppelreihen untereinander. Keine Unterstreichung des Namens beim Hover (Wunsch vom 03.11.2026). */
.referenzen { display: grid; gap: calc(var(--gap) * 2) var(--gap); }
.referenz { display: block; color: inherit; text-decoration: none; }
.referenz__text { display: block; }
.referenz__meta { display: block; margin-top: 20px; font-size: var(--fs-small); color: var(--muted); }
.referenz__title { margin-top: 6px; }
@media (max-width: 640px) { .referenzen .reihe { gap: calc(var(--gap) * 2); } }
/* Wunsch vom 06.11.2026: Auf dem Smartphone stehen alle Referenzbilder im Format 3:2, die Hochformate werden dafür mittig
   zugeschnitten. Gilt für die Startseite und die Projektübersicht (beide nutzen dieselben Reihen). */
@media (max-width: 640px) {
  .referenz .parallax { aspect-ratio: 3 / 2; }
  .referenz .parallax > .img { height: 100%; object-position: 50% 50%; }
  /* Staude-Klinik: Ausschnitt nach oben, damit die Oberkanten von Smartphone und Notizbuch mit etwas Luft im Bild stehen */
  .referenz[href="/projekte/staude-klinik"] .parallax > .img { object-position: 50% 14%; }
}

/* Linklisten */
.links { display: grid; gap: 10px; justify-items: start; }
.card__teaser { margin-top: 8px; color: var(--ink-2); }

/* Karten */
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(var(--gap) * 2) var(--gap); }
.card { display: block; color: inherit; text-decoration: none; }
.card__media { overflow: hidden; border-radius: 2px; }
/* Wunsch vom 06.11.2026: Die quadratischen Journal-Bilder stehen auf dem Smartphone bei 70 % der Breite, linksbündig.
   Gilt für alle Journal-Karten: Startseite, Journal-Übersicht und „Weitere Beiträge“ unter den Artikeln. */
@media (max-width: 640px) { .card[href^="/journal/"] .card__media { width: 70%; } }
.card__media .ph, .card__media .img { transition: transform 1.1s var(--ease); }
.card:hover .card__media .ph, .card:focus-visible .card__media .ph, .card:hover .card__media .img, .card:focus-visible .card__media .img { transform: scale(1.035); }
.card__meta { margin-top: 20px; font-size: var(--fs-small); color: var(--muted); }
.card__title { margin-top: 6px; }
.card__link { margin-top: 12px; }
.card:hover .link__text { text-decoration-color: var(--ink); }
.card:hover .link svg { transform: translateX(4px); }
@media (max-width: 1024px) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .cards { grid-template-columns: 1fr; } }

/* Nummerierte Zeilen (Ablauf, Leistungsumfang) */
.rows { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--line); }
.rows__item {
  display: grid; grid-template-columns: 4.5rem minmax(0, 1fr) minmax(0, 1.6fr);
  gap: var(--gap); padding: clamp(22px, 2.6vw, 40px) 0; border-bottom: 1px solid var(--line);
}
.rows--plain .rows__item { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); }
.rows__num { font-size: var(--fs-small); color: var(--muted); font-variant-numeric: tabular-nums; padding-top: .4em; }
.rows__text { color: var(--ink-2); }
.rows__text > * + * { margin-top: .75em; }
.rows__text .link { margin-top: 14px; }
@media (max-width: 768px) {
  .rows__item { grid-template-columns: 3rem minmax(0, 1fr); row-gap: 10px; }
  .rows__text { grid-column: 2; }
  .rows--plain .rows__item { grid-template-columns: 1fr; }
  .rows--plain .rows__text { grid-column: 1; }
}

/* Split: links sticky, rechts Inhalt */
.split { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--gap); }
/* Bild oberhalb der Leistungsliste: volle Spaltenbreite (= Trennlinien), Abstand wie das Innenmaß einer Zeile. */
.scope__media { margin-bottom: clamp(22px, 2.6vw, 40px); }
.split__aside { position: sticky; top: 32px; align-self: start; }
body:has(.subnav) .split__aside { top: calc(var(--subnav-h) + 24px); }
.split__aside > * + * { margin-top: 20px; }
@media (max-width: 1024px) { .split { grid-template-columns: 1fr; } .split__aside { position: static; } }

/* Spalten mit Linie oben */
.cols { display: grid; gap: var(--space-block) var(--gap); }
.cols--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cols--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cols--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cols__item { border-top: 1px solid var(--line); padding-top: 22px; }
.cols__item > * + * { margin-top: 14px; }
.cols__item .link { margin-top: 20px; }
.cols__item p { color: var(--ink-2); }

/* Leistungsgruppen auf der Startseite (showcase): Texte links scrollen, rechts hängt der Bildrahmen in der Viewportmitte und blendet zur aktiven Gruppe über.
   Bis 1024 px steht jedes Bild über seinem Text; der feste Rahmen ist dort ausgeblendet (und lädt nicht). */
.showcase__item { border-top: 1px solid var(--line); padding-top: 22px; }
.showcase__item > * + * { margin-top: 14px; }
.showcase__item-media { margin-bottom: 22px; }
.showcase__title { font-size: clamp(1.5rem, 1.1rem + 1.3vw, 2.3rem); font-weight: 300; line-height: 1.2; letter-spacing: -.008em; }
.showcase__text { color: var(--ink-2); }
.showcase__services { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 0; font-size: var(--fs-small); color: var(--muted); }
.showcase__services li:not(:last-child)::after { content: '·'; margin: 0 .55em; color: var(--faint); }
.showcase__item .link { margin-top: 22px; }
.showcase__media { display: none; }
/* Wunsch vom 06.11.2026: mehr Luft zwischen den gestapelten Leistungsgruppen (Smartphone und Tablet).
   Unter dem Link 48 px bis zur Trennlinie (wie zwischen Überschrift und Absatz der Sektion), von der Linie 32 px bis zum Bild. */
@media (max-width: 1024px) {
  .showcase__item { padding-top: 32px; }
  .showcase__item + .showcase__item { margin-top: 48px; }
}
@media (min-width: 1025px) {
  .showcase { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--gap); align-items: start; }
  .showcase__item-media { display: none; }
  .showcase__item {
    min-height: 100vh; display: flex; flex-direction: column; justify-content: center;
    border-top: 0; padding: 0 clamp(16px, 3vw, 56px) 0 0;
    opacity: .34; transition: opacity .7s var(--ease);
  }
  .showcase__item::before { content: ''; display: block; width: 44px; height: 1px; background: var(--line-strong); margin-bottom: 22px; }
  .showcase__item.is-active { opacity: 1; }
  .showcase__media { display: flex; align-items: center; position: sticky; top: 0; height: 100vh; }
  .showcase__sticky { width: 100%; }
  .showcase__frame { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 2px; background: var(--paper-2); }
  .showcase__frame > .img {
    position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto;
    opacity: 0; transform: scale(1.06); will-change: opacity, transform;
    transition: opacity .9s var(--ease), transform 1.8s var(--ease);
  }
  .showcase__frame > .img.is-prev { opacity: 1; transform: none; }
  .showcase__frame > .img.is-active { opacity: 1; transform: none; z-index: 1; }
  .showcase__bar { display: flex; align-items: center; gap: 20px; margin-top: 16px; font-size: var(--fs-label); color: var(--muted); font-variant-numeric: tabular-nums; }
  .showcase__progress { flex: 1; height: 1px; background: var(--line); overflow: hidden; }
  .showcase__progress i { display: block; height: 100%; background: var(--ink); transform-origin: left center; transform: scaleX(var(--p, .3333)); transition: transform .9s var(--ease); }
}
@media (max-width: 1024px) { .cols--3, .cols--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .cols--2, .cols--3, .cols--4 { grid-template-columns: 1fr; } }

/* Akkordeon */
.faq { border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__q {
  list-style: none; display: flex; justify-content: space-between; align-items: flex-start; gap: 24px;
  padding: 22px 0; cursor: pointer;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__icon { position: relative; flex: none; width: 14px; height: 14px; margin-top: .5em; }
.faq__icon::before, .faq__icon::after {
  content: ''; position: absolute; background: var(--ink); transition: transform .4s var(--ease);
}
.faq__icon::before { left: 0; top: 6px; width: 14px; height: 1px; }
.faq__icon::after { left: 6px; top: 0; width: 1px; height: 14px; }
.faq__item[open] .faq__icon::after { transform: scaleY(0); }
.faq__a { padding: 0 0 28px; max-width: 68ch; color: var(--ink-2); }

/* CTA-Abschluss */
.cta { padding-block: var(--space-section); border-top: 1px solid var(--line); }
.cta__h2 { font-size: var(--fs-display); font-weight: 200; line-height: 1.05; letter-spacing: -.015em; max-width: 18ch; }
.cta__text { margin-top: 28px; max-width: 52ch; font-size: var(--fs-lede); color: var(--ink-2); line-height: 1.5; }
.cta__actions { margin-top: 40px; display: flex; flex-wrap: wrap; gap: 16px 28px; align-items: center; }

/* Sub-Navigation (Sprungmarken) */
.subnav {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.subnav__list {
  display: flex; gap: 8px; list-style: none; margin: 0; padding: 12px 0;
  overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.subnav__list::-webkit-scrollbar { display: none; }
.subnav__list a { white-space: nowrap; }
.subnav__list a.is-active { background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* Personen */
.person { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--gap); align-items: start; }
.person__body > * + * { margin-top: 1.1em; }
.person__role { color: var(--muted); font-size: var(--fs-small); margin-top: 4px !important; }
.people { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: calc(var(--gap) * 2) var(--gap); }
.figure { margin: 0; }
.figure figcaption { margin-top: 12px; }
/* Wunsch vom 06.11.2026: Die beiden Porträts der Studio-Seite stehen auf dem Smartphone bei 70 % der Breite, linksbündig,
   im unveränderten Format (kein Zuschnitt). Die Bildunterschrift behält die volle Breite. */
@media (max-width: 640px) { #gruender .figure .img, #redaktion .figure .img { width: 70%; } }
/* Unterschrift unter den Texten der Studio-Seite */
.signature { margin-top: 1.7em; }
.signature img { display: block; width: auto; height: clamp(30px, 2.8vw, 40px); margin-left: auto; }
.people__item .person__name { margin-top: 18px; }
@media (max-width: 768px) { .person { grid-template-columns: 1fr; } }
@media (max-width: 1024px) { .people { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .people { grid-template-columns: 1fr; } }

/* Formular */
.form { display: grid; gap: 30px; }
.form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px var(--gap); }
.field { display: grid; gap: 8px; position: relative; }
.field__label { font-size: var(--fs-small); font-weight: 400; color: var(--ink-2); }
.field__label .req { color: var(--muted); }
.field input, .field textarea {
  width: 100%; border: 0; border-bottom: 1px solid var(--line-strong); border-radius: 0;
  background: transparent; padding: 10px 0; font: inherit; color: var(--ink);
  transition: border-color var(--dur-fast) var(--ease);
}
.field textarea { min-height: 120px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: var(--muted); }
.field input:focus, .field textarea:focus { outline: none; border-bottom-color: var(--ink); }
.field input:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
.field__error { display: none; font-size: var(--fs-small); color: var(--ink); }
.field.is-invalid .field__error { display: block; }
.field.is-invalid input, .field.is-invalid textarea { border-bottom-color: var(--ink); }
.pills { display: flex; flex-wrap: wrap; gap: 10px; }
.pills input { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; }
.pills label { cursor: pointer; }
.pills input:checked + label { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.pills input:focus-visible + label { outline: 2px solid var(--ink); outline-offset: 4px; }
.form__hint { font-size: var(--fs-small); color: var(--muted); }
.form__hint a { color: var(--ink); }
.form__status { font-size: var(--fs-body); color: var(--ink); }
.form__status:empty { display: none; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.form__actions { display: flex; flex-wrap: wrap; gap: 16px 24px; align-items: center; }
@media (max-width: 640px) { .form__row { grid-template-columns: 1fr; } }

/* Kontakt */
.contact { margin-top: 28px; display: grid; gap: 10px; }
.contact__portrait { width: min(100%, 180px); margin-bottom: 10px; }
/* Porträt (Wunsch vom 03.11.2026): In der haftenden Spalte so groß, dass Überschrift, Bild, Name, Telefon und E-Mail auf einem
   MacBook-Bildschirm zusammen sichtbar sind. Bildhöhe = Viewporthöhe minus Haftabstand, Überschrift, Kontaktzeilen und Luft (320 px);
   die Breite folgt im Format 4:5, mindestens 180 px, höchstens die Spaltenbreite. Unter 1025 px (Spalte nicht haftend) bleibt 180 px. */
@media (min-width: 1025px) { .contact__portrait { width: min(100%, max(180px, calc((100vh - 320px) * .8))); } }
.contact__name { font-weight: 400; }
.contact__line { display: flex; gap: 12px; }
.contact__line .muted { min-width: 4.5em; font-size: var(--fs-small); padding-top: .15em; }
.contact__line a { text-decoration: underline; text-underline-offset: .24em; text-decoration-thickness: 1px; }
.field--group { border: 0; padding: 0; margin: 0; min-width: 0; }
.field--group legend { padding: 0; margin-bottom: 4px; }

/* Lesetext */
/* Journalbeitrag: Zusammenfassung in der linken Spalte, die ab 1025 px beim Lesen mitläuft; darunter steht sie über dem Text. */
.post__summary { padding-top: 22px; border-top: 1px solid var(--line-strong); }
.post__points { list-style: none; margin: 18px 0 0; padding: 0; color: var(--ink-2); }
.post__points li { position: relative; padding-left: 1.3em; }
.post__points li + li { margin-top: 1em; }
.post__points li::before { content: ''; position: absolute; left: 0; top: .62em; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
@media (min-width: 1025px) {
  .post__summary { position: sticky; top: 40px; max-width: 22rem; }
}
.prose { max-width: 68ch; }
.prose > * + * { margin-top: 1.1em; }
.prose h2 { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); font-weight: 300; margin-top: 2.2em; }
.prose h3 { margin-top: 1.8em; }
.prose h2 + *, .prose h3 + * { margin-top: .8em; }
.prose ul, .prose ol { padding-left: 1.2em; }
.prose li + li { margin-top: .4em; }
.prose blockquote {
  margin-top: 1.8em; padding-left: 1.4em; border-left: 1px solid var(--line-strong);
  font-size: var(--fs-lede); font-weight: 300; line-height: 1.5; color: var(--ink-2);
}
.prose a { text-decoration: underline; text-underline-offset: .22em; text-decoration-thickness: 1px; }
.prose .note { border: 1px solid var(--line-strong); padding: 16px 20px; font-size: var(--fs-small); color: var(--ink-2); }
.prose address { font-style: normal; }
.prose dl { display: grid; grid-template-columns: max-content 1fr; gap: 8px 24px; }
.prose dt { color: var(--muted); font-size: var(--fs-small); padding-top: .2em; }
.prose dd { margin: 0; }

/* Metadaten-Liste (Projektseite) */
.meta { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--line); }
.meta__item { padding: 14px 0; border-bottom: 1px solid var(--line); display: grid; gap: 4px; }
.meta__key { font-size: var(--fs-label); color: var(--muted); letter-spacing: .02em; }
/* Ohne Unterstreichung; sie erscheint erst beim Darüberfahren und bei Tastaturfokus */
.meta__link {
  justify-self: start; overflow-wrap: anywhere;
  text-decoration: underline; text-underline-offset: .22em; text-decoration-thickness: 1px;
  text-decoration-color: transparent; transition: text-decoration-color var(--dur-fast) var(--ease);
}
.meta__link:hover, .meta__link:focus-visible { text-decoration-color: var(--ink); }


/* ---------- 8b Navigation ---------- */
/* Die Navigation haftet nicht: Sie gehört zum Seitenanfang und scrollt mit dem Inhalt weg (Vorbild AMCE). Nur bei offenem Menü bleibt sie stehen. */
.nav { position: relative; z-index: 50; border-bottom: 1px solid transparent; }
.menu-open .nav { position: sticky; top: 0; border-bottom-color: var(--line); }
.menu-open .nav { background: var(--paper); }
.nav__bar { display: flex; align-items: center; gap: 32px; height: var(--nav-h); }

.brand {
  display: inline-flex; align-items: center; gap: 10px; flex: none;
  color: var(--ink); text-decoration: none; font-size: 1.25rem; font-weight: 300; letter-spacing: -.015em; line-height: 1;
}
.brand__mark { width: 30px; height: 22px; flex: none; }
.brand__sub { color: var(--muted); }
.brand--light { color: var(--on-dark); }
.brand--light .brand__sub { color: var(--on-dark-muted); }

.nav__links { margin-left: auto; }
.nav__list { display: flex; align-items: center; gap: 30px; list-style: none; margin: 0; padding: 0; }
.nav__item { display: flex; align-items: center; gap: 2px; }
.nav__link {
  position: relative; display: inline-block; padding: 8px 0;
  font-size: var(--fs-small); font-weight: 400; color: var(--ink-2); text-decoration: none;
  transition: color var(--dur-fast) var(--ease);
}
.nav__link::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 4px; height: 1px; background: var(--ink);
  transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease);
}
.nav__link:hover, .nav__link[aria-current="page"], .nav__item.is-open .nav__link { color: var(--ink); }
.nav__link:hover::after, .nav__link[aria-current="page"]::after { transform: scaleX(1); }
.nav__count { font-size: .62em; color: var(--muted); margin-left: 3px; vertical-align: top; line-height: 1; }
.nav__panel-toggle {
  display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px;
  border: 0; background: none; padding: 0; cursor: pointer; color: var(--muted); border-radius: 50%;
}
.nav__panel-toggle svg { width: 12px; height: 12px; transition: transform .4s var(--ease); }
.nav__panel-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.nav__cta { flex: none; }

.panel {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 60;
  padding-block: 40px 52px;
  background-color: var(--paper); background-image: var(--noise);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  box-shadow: 0 40px 60px -48px rgba(0, 0, 0, .35);
  animation: panel-in .35s var(--ease);
}
@keyframes panel-in { from { opacity: 0; transform: translateY(-6px); } }
.panel__grid { display: grid; grid-template-columns: 1.3fr repeat(3, minmax(0, 1fr)); gap: var(--gap); }
.panel__intro p { max-width: 26ch; color: var(--ink-2); margin-bottom: 18px; }
.panel__title { font-size: var(--fs-label); letter-spacing: .02em; color: var(--muted); margin-bottom: 14px; }
.panel ul { list-style: none; margin: 0; padding: 0; }
.panel li + li { margin-top: 9px; }
.panel__group a { font-size: 1rem; font-weight: 300; color: var(--ink); text-decoration: none; }
.panel__group a:hover { text-decoration: underline; text-underline-offset: .24em; text-decoration-thickness: 1px; }

.nav__toggle {
  display: none; position: relative; width: 44px; height: 44px; margin-left: auto; margin-right: -10px;
  border: 0; background: none; padding: 0; cursor: pointer; color: var(--ink); flex: none;
}
.nav__toggle-line {
  position: absolute; left: 11px; width: 22px; height: 1.5px; background: currentColor;
  transition: transform .4s var(--ease), top .4s var(--ease);
}
.nav__toggle-line:nth-child(1) { top: 17px; }
.nav__toggle-line:nth-child(2) { top: 26px; }
.nav__toggle[aria-expanded="true"] .nav__toggle-line:nth-child(1) { top: 21.5px; transform: rotate(45deg); }
.nav__toggle[aria-expanded="true"] .nav__toggle-line:nth-child(2) { top: 21.5px; transform: rotate(-45deg); }

@media (max-width: 1024px) {
  .nav__links, .nav__cta { display: none; }
  .nav__toggle { display: inline-flex; }
  .nav__bar { height: var(--nav-h-compact); }
  .no-js .nav__links { display: block; margin-left: 0; }
  .no-js .nav__toggle { display: none; }
  .no-js .nav__bar { flex-wrap: wrap; height: auto; padding-block: 16px; gap: 12px 24px; }
  .no-js .nav__list { flex-wrap: wrap; gap: 6px 20px; }
}
.no-js .nav__panel-toggle, .no-js .panel { display: none; }

/* Overlay (mobiles Menü) */
.overlay {
  position: fixed; inset: 0; z-index: 40; overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding-top: var(--nav-h-compact);
  background-color: var(--paper); background-image: var(--noise);
}
.overlay:not([hidden]) { display: block; animation: overlay-in .4s var(--ease); }
@keyframes overlay-in { from { opacity: 0; transform: translateY(-8px); } }
.menu-open, .menu-open body { overflow: hidden; }
.overlay__inner { display: flex; flex-direction: column; gap: 36px; min-height: calc(100svh - var(--nav-h-compact)); padding-block: 24px 40px; }
.overlay__list { list-style: none; margin: 0; padding: 0; }
.overlay__list > li { border-top: 1px solid var(--line); }
.overlay__list > li:last-child { border-bottom: 1px solid var(--line); }
.overlay__link {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 16px 0; font-size: clamp(1.7rem, 7vw, 2.4rem); font-weight: 200; letter-spacing: -.012em;
  color: var(--ink); text-decoration: none; cursor: pointer; list-style: none;
}
.overlay__link::-webkit-details-marker { display: none; }
.overlay__chevron svg { width: 18px; height: 18px; transition: transform .4s var(--ease); }
.overlay__details[open] .overlay__chevron svg { transform: rotate(180deg); }
.overlay__sub { list-style: none; margin: 0; padding: 0 0 20px; }
.overlay__all { display: inline-block; margin-bottom: 8px; font-weight: 400; text-decoration: underline; text-underline-offset: .24em; text-decoration-thickness: 1px; }
.overlay__group ul { list-style: none; margin: 0; padding: 0; }
.overlay__group-title { margin: 14px 0 6px; font-size: var(--fs-label); letter-spacing: .02em; color: var(--muted); }
.overlay__group a { display: block; padding: 6px 0; font-size: 1.1rem; font-weight: 300; color: var(--ink); text-decoration: none; }
.overlay__foot { margin-top: auto; display: grid; gap: 20px; justify-items: start; }
/* Gilt nicht für den Button: Sonst überschreibt die Regel dessen helle Schrift auf dunklem Grund (unlesbar bis zum Hover). */
.overlay__foot a:not(.btn) { color: var(--ink); }
.overlay__foot p a { text-decoration: underline; text-underline-offset: .22em; text-decoration-thickness: 1px; }

/* ---------- 8c Footer ---------- */
/* --footer-lift: der dunkle Grund beginnt 7 % der Bildschirmhöhe früher. Der Zusatz steckt allein im oberen Innenabstand und in der Mindesthöhe,
   der Inhalt behält deshalb seine Lage zum Seitenende. */
.footer {
  --footer-lift: 7vh;
  margin-top: 0; padding-block: calc(clamp(56px, 7vw, 112px) + var(--footer-lift)) 28px;
  min-height: calc(100vh + var(--footer-lift)); min-height: calc(100svh + var(--footer-lift)); display: flex; flex-direction: column;
  background-color: var(--dark); background-image: var(--noise); color: var(--on-dark);
}
@supports (height: 1svh) { .footer { --footer-lift: 7svh; } }
.footer__inner { display: flex; flex-direction: column; flex: 1; }
.footer a { color: inherit; text-decoration: none; }
.footer a:hover { text-decoration: underline; text-underline-offset: .24em; text-decoration-thickness: 1px; }
.footer__top { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-block) var(--gap); }
.footer__text { margin-top: 26px; max-width: 42ch; color: var(--on-dark-muted); }
.footer__cols { display: grid; grid-template-columns: repeat(3, max-content); justify-content: space-between; gap: var(--gap) var(--space-block); }
.footer__cta { margin-top: 22px !important; }
.footer .btn:hover { text-decoration: none; }
.footer__title { margin-bottom: 16px; font-size: var(--fs-label); letter-spacing: .02em; color: var(--on-dark-muted); }
.footer ul { list-style: none; margin: 0; padding: 0; }
.footer li + li { margin-top: 10px; }
.footer__cols li { font-weight: 300; }
.footer__wordmark {
  display: block; width: 100%; height: auto; margin-top: auto; padding-top: calc(var(--space-section) * 1.3);
  color: var(--footer-wordmark); fill: currentColor; user-select: none; pointer-events: none;
}
/* Schnitt 400 statt 600; Größe um den Breitenunterschied (2,5 %) angehoben, damit die Wortmarke die volle Breite ohne gedehnte Abstände füllt. */
.footer__wordmark text { font-family: var(--font); font-size: 102.5px; font-weight: 400; letter-spacing: -3.1px; }
.footer__bottom {
  margin-top: 36px; padding-top: 22px; border-top: 1px solid var(--line-dark);
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 12px 24px;
  font-size: var(--fs-small); color: var(--on-dark-muted);
}
.footer__legal { display: flex; align-items: baseline; gap: 24px; }
.footer__legal li + li { margin-top: 0; }
@media (max-width: 1024px) { .footer__top { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .footer__cols { grid-template-columns: 1fr 1fr; } .footer__cols .footer__col:last-child { grid-column: 1 / -1; } }

/* Projektseite */
/* Projekt-Detailseite: Mockup-Collage neben der haftenden Seitenspalte, Abschlussbild über die volle Inhaltsbreite. */
.collage { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); margin-top: var(--space-block); }
.collage__item--full { grid-column: 1 / -1; }
.collage__finale { margin-top: var(--gap); }
/* Abschlussbild der Projektseiten (Wunsch vom 21.10.2026): ganzes Bild im eigenen Seitenverhältnis, ohne Parallaxe-Zoom und ohne 16:9-Zuschnitt
   auf dem Handy; seit 03.11.2026 als .img--frei (Rahmen aus den width/height-Attributen, kein Layoutsprung beim Laden). */
/* Komposition (30.10.2026, zuerst Physiotherapie Leonardo): je Projekt eigene Bildfolge über die volle Inhaltsbreite.
   Eine Reihe zeigt ganze Bilder in gleicher Höhe: Breiten im Verhältnis der Seitenverhältnisse (--r = Breite/Höhe), kein
   Zuschnitt, kein Leerraum. Kein aspect-ratio für .img--frei: Der Rahmen kommt aus den width/height-Attributen. */
.komposition { display: grid; gap: var(--gap); margin-top: var(--space-block); }
.page-hero__media .reihe__bild { width: 100%; }
.reihe { display: flex; gap: var(--gap); }
.reihe__bild { flex: var(--r, 1) 1 0; min-width: 0; }
@media (max-width: 640px) { .reihe { flex-direction: column; } .reihe__bild { flex: none; } }
/* Reihe, die auch auf dem Smartphone nebeneinander bleibt (Leistungsgruppe 2: Tasche + Terminkarten, 03.11.2026). */
@media (max-width: 640px) { .reihe--nebeneinander { flex-direction: row; } .reihe--nebeneinander .reihe__bild { flex: var(--r, 1) 1 0; } }
/* Projekttext (30.10.2026): kleine Dachzeile „Das Projekt im Überblick“ statt Überschrift, bündig mit der Linie über „Kunde“;
   der Text steht in mehreren Absätzen. Der Button unter der Komposition steht mittig über die volle Breite. */
.project .prose > :first-child { margin-top: 0; }
.project .prose > .eyebrow + p { margin-top: 20px; }
.project__cta-row { margin-top: var(--space-block); text-align: center; }
.project__cta { margin: 0; }
@media (max-width: 640px) { .collage { grid-template-columns: 1fr; } }
.project-nav { border-top: 1px solid var(--line); }
.project-nav__grid { display: grid; grid-template-columns: 1fr 1fr; }
.project-nav__item {
  display: grid; gap: 8px; padding: clamp(28px, 4vw, 56px) 0; text-decoration: none; color: var(--ink);
  border-right: 1px solid var(--line); padding-right: var(--gap);
}
.project-nav__item--next { border-right: 0; padding-right: 0; padding-left: var(--gap); text-align: right; justify-items: end; }
.project-nav__label { font-size: var(--fs-label); color: var(--muted); letter-spacing: .02em; }
.project-nav__name { display: inline-flex; align-items: center; gap: .5em; font-size: var(--fs-h3); font-weight: 300; }
.project-nav__name svg { width: .8em; height: .8em; transition: transform .4s var(--ease); }
.project-nav__item:hover .project-nav__name svg { transform: translateX(4px); }
/* Vorheriges Projekt (03.11.2026): Pfeil gespiegelt vor dem Namen, beim Hover nach links. */
.project-nav__item--prev .project-nav__name svg { transform: scaleX(-1); }
.project-nav__item--prev:hover .project-nav__name svg { transform: scaleX(-1) translateX(4px); }
@media (max-width: 640px) {
  .project .shots { grid-template-columns: 1fr; }
  .project-nav__grid { grid-template-columns: 1fr; }
  .project-nav__item { border-right: 0; padding-right: 0; border-bottom: 1px solid var(--line); }
  .project-nav__item--next { padding-left: 0; text-align: left; justify-items: start; border-bottom: 0; }
}

/* ---------- 9 Bewegung ---------- */
@keyframes reveal-in { from { opacity: 0; transform: translateY(24px); } }
@keyframes reveal-focus { from { opacity: 0; transform: scale(1.015); filter: blur(14px); } }
.js [data-reveal="load"] { animation: reveal-in var(--dur) var(--ease) both; animation-delay: calc(var(--i, 0) * 90ms); }
.js [data-reveal="load-focus"] { animation: reveal-focus var(--dur) var(--ease) both; animation-delay: calc(var(--i, 0) * 90ms); }
.js [data-reveal]:not([data-reveal^="load"]) {
  opacity: 0; transform: translateY(24px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), filter var(--dur) var(--ease);
  transition-delay: calc(var(--i, 0) * 90ms);
}
.js [data-reveal="focus"] { transform: scale(1.015); filter: blur(14px); }
.js [data-reveal].is-in { opacity: 1; transform: none; filter: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  html { scroll-behavior: auto; }
  .js [data-reveal] { opacity: 1; transform: none; filter: none; }
}

@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root) { animation: .22s var(--ease) both vt-out; }
  ::view-transition-new(root) { animation: .38s var(--ease) both vt-in; }
}
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; transform: translateY(10px); } }

/* ---------- 9b Projektseite für Kunden (/projekt/<code>) ---------- */
.status { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.status__item { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 16px; padding: 22px 0; border-bottom: 1px solid var(--line); }
.status__dot { position: relative; width: 14px; height: 14px; margin-top: 6px; border-radius: 50%; border: 1px solid var(--ink); background: transparent; }
.status__item.is-done .status__dot { background: var(--ink); }
.status__item.is-done .status__dot::after { content: ''; position: absolute; left: 4px; top: 1px; width: 3px; height: 7px; border: solid var(--paper); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); }
.status__item.is-next .status__dot { border-color: var(--faint); }
.status__item.is-next { color: var(--muted); }
.status__state { font-size: var(--fs-label); color: var(--muted); letter-spacing: .02em; margin: 0 0 6px; }
.status__item.is-active .status__state { color: var(--ink); }
.status__title { margin: 0 0 8px; }
.status__text { margin: 0; color: var(--ink-2); max-width: 60ch; }
.status__item.is-next .status__text { color: var(--muted); }
.aufgaben .eyebrow { margin-bottom: 14px; }
.todo { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.todo__item { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--line); color: var(--ink-2); }
.todo__box { position: relative; width: 14px; height: 14px; margin-top: 6px; border: 1px solid var(--ink); }
.todo__item.is-done { color: var(--muted); }
.todo__item.is-done .todo__box { background: var(--ink); }
.todo__item.is-done .todo__box::after { content: ''; position: absolute; left: 4px; top: 1px; width: 3px; height: 7px; border: solid var(--paper); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); }
.todo__item.is-active { color: var(--ink); }
.todo__text { display: grid; gap: 2px; }
.todo__due { font-size: var(--fs-small); color: var(--muted); }
.verlauf .meta__item { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 641px) { .verlauf .meta__item { grid-template-columns: 180px minmax(0, 1fr); gap: 24px; } }

/* ---------- 10 Print ---------- */
@media print {
  body { background: #fff; color: #000; }
  .nav, .skip, .footer__wordmark, .subnav, .btn { display: none !important; }
  .ph { border: 1px solid #ccc; }
}