/* =========================================================================
   VON OHR ARCHITEKTUR
   Design: monochrome, editorial, fluid. Schrift: Urbanist (self-hosted).
   ========================================================================= */

/* ---------- 1. Font ---------- */
@font-face {
  font-family: 'Urbanist';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('../fonts/urbanist-latin-wght-normal.woff2') format('woff2-variations');
  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: 'Urbanist';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('../fonts/urbanist-latin-ext-wght-normal.woff2') format('woff2-variations');
  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-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* ---------- 2. Tokens ---------- */
:root {
  --ink:        #0d0d0c;
  --ink-70:     rgba(13,13,12,.68);
  --ink-45:     rgba(13,13,12,.58);   /* 4,7:1 auf Papier */
  --ink-14:     rgba(13,13,12,.14);
  --ink-08:     rgba(13,13,12,.08);
  --paper:      #fbfaf8;
  --paper-pure: #ffffff;
  --stone:      #5c5955;             /* Weiß darauf 6,9:1 */
  --stone-dark: #3a3835;
  --chalk:      rgba(255,255,255,.78);
  --chalk-40:   rgba(255,255,255,.50);  /* 5,3:1 auf Tiefschwarz */
  --chalk-16:   rgba(255,255,255,.16);  /* nur Trennlinien */
  --chalk-ui:   rgba(255,255,255,.42);  /* Bedienelemente, 4,1:1 */

  --gutter: clamp(1.25rem, 4.2vw, 4.5rem);
  --maxw: 1680px;
  --rule: 1px solid var(--ink-14);

  /* Fluide Typo-Skala. Bewusst groesser als die Referenz:
     0.8vw Fliesstext waere auf Desktop ~10px und fuer die Zielgruppe zu klein. */
  --fs-wordmark: clamp(3.4rem, 21.5vw, 24rem);
  --fs-lead:     clamp(1.0625rem, 1.85vw, 2.1rem);
  --fs-statement:clamp(1.9rem, 4.6vw, 5.4rem);
  --fs-h3:       clamp(1.4rem, 2.4vw, 2.6rem);
  --fs-h4:       clamp(1.05rem, 1.35vw, 1.5rem);
  --fs-body:     clamp(0.975rem, 1.02vw, 1.1rem);
  --fs-small:    clamp(0.85rem, 0.86vw, 0.95rem);
  --fs-eyebrow:  clamp(0.66rem, 0.72vw, 0.78rem);
  --fs-counter:  clamp(0.7rem, 0.8vw, 0.86rem);

  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-io: cubic-bezier(.65,.05,.36,1);
  --dur: .9s;
}

/* ---------- 3. Reset ---------- */
*,*::before,*::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  font-family: 'Urbanist', ui-sans-serif, system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.58;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-variant-numeric: tabular-nums;
  overflow-x: hidden;
}
img, picture, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, textarea { font: inherit; color: inherit; }
h1,h2,h3,h4 { font-weight: 400; line-height: 1.04; letter-spacing: -.02em; }
::selection { background: var(--ink); color: var(--paper); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

/* ---------- 4. Layout ---------- */
.shell { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: clamp(4.5rem, 11vw, 11rem); position: relative; }
.section--tight { padding-block: clamp(3rem, 7vw, 7rem); }
.grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(1.25rem, 2.4vw, 2.5rem); }
.rule { height: 1px; background: var(--ink-14); border: 0; }

/* ---------- 5. Bausteine ---------- */
.eyebrow {
  display: flex; align-items: baseline; gap: .8em;
  font-size: var(--fs-eyebrow); font-weight: 600;
  text-transform: uppercase; letter-spacing: .2em; color: var(--ink-45);
}
.eyebrow::before {
  content: ''; width: clamp(1.5rem, 3vw, 3.5rem); height: 1px;
  background: currentColor; transform: translateY(-.3em);
}
.eyebrow--plain::before { display: none; }
.statement { font-size: var(--fs-statement); letter-spacing: -.035em; line-height: 1.02; text-wrap: balance; }
.statement em { font-style: normal; color: var(--ink-45); }
.lead { font-size: var(--fs-lead); line-height: 1.34; letter-spacing: -.02em; }
.body-copy { color: var(--ink-70); max-width: 62ch; }
.body-copy + .body-copy { margin-top: 1.1em; }
.small { font-size: var(--fs-small); color: var(--ink-45); }

.tagrow { display: flex; flex-wrap: wrap; gap: .5rem; }
.tag {
  font-size: var(--fs-eyebrow); text-transform: uppercase; letter-spacing: .16em;
  font-weight: 500; padding: .55em .95em .5em; border: var(--rule); border-radius: 100px;
  color: var(--ink-70); white-space: nowrap;
}

.link-arrow {
  display: inline-flex; align-items: center; gap: .6em;
  font-size: var(--fs-small); font-weight: 600; text-transform: uppercase; letter-spacing: .16em;
  padding-bottom: .45em; border-bottom: 1px solid var(--ink-14);
  transition: border-color .45s var(--ease), gap .45s var(--ease);
}
.link-arrow svg { width: .85em; height: .85em; transition: transform .45s var(--ease); }
.link-arrow:hover { border-color: var(--ink); gap: 1.1em; }
.link-arrow:hover svg { transform: translateX(.2em); }

.figure { position: relative; overflow: hidden; background: var(--ink-08); }
.figure img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease); }
.figure--r43 { aspect-ratio: 4/3; }
.figure--r32 { aspect-ratio: 3/2; }
.figure--r169 { aspect-ratio: 16/9; }
.figure--r45 { aspect-ratio: 4/5; }
a:hover .figure img, .figure:hover img { transform: scale(1.045); }
.figcap { margin-top: .85rem; font-size: var(--fs-eyebrow); text-transform: uppercase; letter-spacing: .16em; color: var(--ink-45); }

/* ---------- 6. Header ---------- */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 90;
  padding-block: clamp(1rem, 1.5vw, 1.5rem);
  color: #fff;
  transition: transform .55s var(--ease), opacity .4s var(--ease);
}
.site-header.is-hidden { transform: translateY(-110%); opacity: 0; }
.site-header.on-light { color: var(--ink); }
.site-header.on-light .brand, .site-header.on-light .nav a { color: var(--ink); }
.site-header .shell { display: flex; align-items: center; justify-content: space-between; gap: 2rem; }
.brand {
  font-size: var(--fs-eyebrow); font-weight: 600;
  text-transform: uppercase; letter-spacing: .22em; white-space: nowrap;
}
.nav { display: flex; gap: clamp(1.2rem, 2.4vw, 2.6rem); }
.nav a {
  position: relative; font-size: var(--fs-eyebrow); font-weight: 500;
  text-transform: uppercase; letter-spacing: .2em; padding-bottom: .25em;
}
.nav a::after {
  content: ''; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%;
  background: currentColor; transform: scaleX(0); transform-origin: right;
  transition: transform .5s var(--ease);
}
.nav a:hover::after, .nav a.is-active::after { transform: scaleX(1); transform-origin: left; }
.nav-toggle { display: none; font-size: var(--fs-eyebrow); font-weight: 600; text-transform: uppercase; letter-spacing: .2em; }

.nav-overlay {
  position: fixed; inset: 0; z-index: 95; background: var(--ink); color: var(--paper);
  display: flex; flex-direction: column; justify-content: center;
  padding: var(--gutter);
  clip-path: inset(0 0 100% 0); transition: clip-path .7s var(--ease-io);
  visibility: hidden;
}
.nav-overlay.is-open { clip-path: inset(0 0 0 0); visibility: visible; }
.nav-overlay a {
  font-size: clamp(2rem, 8vw, 5rem); letter-spacing: -.03em; line-height: 1.15;
  opacity: 0; transform: translateY(1rem); transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.nav-overlay.is-open a { opacity: 1; transform: none; }
.nav-overlay.is-open a:nth-child(1) { transition-delay: .18s; }
.nav-overlay.is-open a:nth-child(2) { transition-delay: .25s; }
.nav-overlay.is-open a:nth-child(3) { transition-delay: .32s; }
.nav-overlay.is-open a:nth-child(4) { transition-delay: .39s; }
.nav-overlay.is-open a:nth-child(5) { transition-delay: .46s; }
.nav-overlay.is-open a:nth-child(6) { transition-delay: .53s; }
.nav-close { position: absolute; top: var(--gutter); right: var(--gutter); font-size: var(--fs-eyebrow); text-transform: uppercase; letter-spacing: .2em; font-weight: 600; }

/* ---------- 7. Hero ---------- */
.hero {
  min-height: 100svh; background: var(--stone); color: var(--paper-pure);
  display: flex; flex-direction: column; justify-content: space-between;
  padding-block: clamp(6rem, 12vw, 9rem) clamp(2rem, 4vw, 3.5rem);
  position: relative; overflow: hidden;
}
.hero::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(120% 80% at 50% 0%, rgba(255,255,255,.10), transparent 60%);
  pointer-events: none;
}
.hero__mark {
  font-size: var(--fs-wordmark); line-height: .78; font-weight: 500;
  letter-spacing: -.045em; text-transform: uppercase; white-space: nowrap;
  display: flex; gap: .06em;
}
.hero__mark span { display: inline-block; transform: translateY(105%); }
.hero.is-ready .hero__mark span { transform: none; transition: transform .8s var(--ease-io); }
.hero__mark span:nth-child(1){transition-delay:.02s}.hero__mark span:nth-child(2){transition-delay:.06s}
.hero__mark span:nth-child(3){transition-delay:.10s}.hero__mark span:nth-child(4){transition-delay:.14s}
.hero__mark span:nth-child(5){transition-delay:.18s}.hero__mark span:nth-child(6){transition-delay:.22s}
.hero__mark-clip { overflow: hidden; display: inline-block; padding-bottom: .04em; margin-bottom: -.04em; }
.hero__bottom { display: grid; grid-template-columns: repeat(12,1fr); gap: clamp(1.25rem,2.4vw,2.5rem); align-items: end; }
.hero__claim {
  grid-column: 6 / -1;
  font-size: clamp(1.05rem, 1.95vw, 2.15rem); line-height: 1.24; font-weight: 400;
  text-transform: uppercase; letter-spacing: -.005em;
  opacity: 0; transform: translateY(1.2rem);
}
.hero.is-ready .hero__claim { opacity: 1; transform: none; transition: opacity .8s var(--ease) .38s, transform .8s var(--ease) .38s; }
.hero__meta {
  grid-column: 1 / 5; display: flex; flex-direction: column; gap: .3rem;
  font-size: var(--fs-eyebrow); text-transform: uppercase; letter-spacing: .2em;
  color: rgba(255,255,255,.80); opacity: 0;
}
.hero.is-ready .hero__meta { opacity: 1; transition: opacity .8s var(--ease) .5s; }
.hero__scroll {
  position: absolute; left: 50%; bottom: clamp(1.4rem,3vw,2.4rem); transform: translateX(-50%);
  width: 1px; height: clamp(2.5rem,5vw,4rem); background: var(--chalk-16); overflow: hidden;
}
.hero__scroll::after { content:''; position:absolute; inset:0; background: var(--chalk); animation: scrollcue 2.4s var(--ease-io) infinite; }
@keyframes scrollcue { 0%{transform:translateY(-100%)} 55%,100%{transform:translateY(100%)} }

/* ---------- 8. Sektionskopf ---------- */
.sec-head { display: grid; grid-template-columns: repeat(12,1fr); gap: clamp(1.25rem,2.4vw,2.5rem); align-items: start; }
.sec-head__label { grid-column: 1 / 4; padding-top: .55rem; }
.sec-head__main { grid-column: 4 / -1; display: flex; flex-direction: column; gap: clamp(1.5rem,3vw,2.75rem); }
.sec-head__main .body-copy { max-width: 58ch; }

/* ---------- 9. Leistungen ---------- */
.phase { display: grid; grid-template-columns: repeat(12,1fr); gap: clamp(1.25rem,2.4vw,2.5rem); padding-block: clamp(2.75rem,5.5vw,5rem); border-top: var(--rule); align-items: start; }
.phase__num { grid-column: 1 / 2; font-size: var(--fs-counter); font-weight: 600; letter-spacing: .2em; color: var(--ink-45); padding-top: .55rem; }
.phase__body { grid-column: 2 / 7; display: flex; flex-direction: column; gap: 1.5rem; }
.phase__media { grid-column: 8 / -1; }
.phase__title { font-size: var(--fs-h3); letter-spacing: -.03em; }
.phase:nth-child(even) .phase__body { grid-column: 8 / -1; }
.phase:nth-child(even) .phase__media { grid-column: 2 / 7; grid-row: 1; }
.phase__media-stack { display: grid; gap: clamp(.75rem,1.4vw,1.25rem); grid-template-columns: 1fr 1fr; }
.phase__media-stack .figure:first-child { grid-column: 1 / -1; }

/* ---------- 10. Kennzahlen ---------- */
.stats { display: grid; grid-template-columns: repeat(4,1fr); gap: 0; border-top: var(--rule); border-bottom: var(--rule); }
.stat { padding: clamp(1.75rem,3.5vw,3rem) clamp(1rem,2vw,2rem) clamp(1.75rem,3.5vw,3rem) 0; border-right: var(--rule); display: flex; flex-direction: column; gap: .6rem; }
.stat:last-child { border-right: 0; }
.stat:not(:first-child) { padding-left: clamp(1rem,2vw,2rem); }
.stat__num { font-size: clamp(2rem,4vw,4.25rem); line-height: 1; letter-spacing: -.045em; font-weight: 400; }
.stat__label { font-size: var(--fs-eyebrow); text-transform: uppercase; letter-spacing: .18em; color: var(--ink-45); }

/* ---------- 11. Wort-Aufbau (Marquee) ---------- */
.wordbuild { background: var(--ink); color: var(--paper); padding-block: clamp(3.5rem,8vw,8rem); overflow: hidden; }
.wordbuild .eyebrow { color: var(--chalk-40); margin-bottom: clamp(1.5rem,3vw,3rem); }
.wordbuild__line { display: flex; justify-content: center; gap: .02em; font-size: clamp(3.5rem,19vw,18rem); line-height: .86; font-weight: 500; letter-spacing: -.05em; text-transform: uppercase; }
.wordbuild__line span { display: inline-block; opacity: 0; transform: translateY(28%); transition: opacity .7s var(--ease), transform .9s var(--ease-io); }
.wordbuild.is-in .wordbuild__line span { opacity: 1; transform: none; }
.wordbuild.is-in span:nth-child(1){transition-delay:.05s}.wordbuild.is-in span:nth-child(2){transition-delay:.15s}
.wordbuild.is-in span:nth-child(3){transition-delay:.25s}.wordbuild.is-in span:nth-child(4){transition-delay:.35s}
.wordbuild.is-in span:nth-child(5){transition-delay:.45s}.wordbuild.is-in span:nth-child(6){transition-delay:.55s}
.wordbuild__foot { display: flex; justify-content: space-between; gap: 2rem; margin-top: clamp(1.5rem,3vw,3rem); font-size: var(--fs-eyebrow); text-transform: uppercase; letter-spacing: .2em; color: var(--chalk-40); }

/* ---------- 12. Projekt-Slider ---------- */
.projects__viewport { position: relative; }
.project { display: grid; grid-template-columns: repeat(12,1fr); gap: clamp(1.25rem,2.4vw,2.5rem); align-items: start; }
.project[hidden] { display: none; }
.project__media { grid-column: 1 / 8; }
.project__info { grid-column: 8 / -1; display: flex; flex-direction: column; gap: 1.35rem; padding-top: clamp(0rem,1.5vw,1.5rem); }
.project__title { font-size: clamp(1.75rem,3.4vw,3.6rem); letter-spacing: -.04em; line-height: 1; }
.project__sub { font-size: var(--fs-h4); color: var(--ink-45); letter-spacing: -.01em; }
.project.is-entering .project__media, .project.is-entering .project__info > * { animation: rise .8s var(--ease) both; }
.project.is-entering .project__info > *:nth-child(2){animation-delay:.06s}
.project.is-entering .project__info > *:nth-child(3){animation-delay:.12s}
.project.is-entering .project__info > *:nth-child(4){animation-delay:.18s}
.project.is-entering .project__info > *:nth-child(5){animation-delay:.24s}
@keyframes rise { from { opacity: 0; transform: translateY(1.4rem);} to { opacity:1; transform:none;} }
.slider-bar { display: flex; align-items: center; justify-content: space-between; gap: 2rem; margin-top: clamp(2rem,4vw,3.5rem); padding-top: 1.25rem; border-top: var(--rule); }
.slider-count { font-size: var(--fs-counter); font-weight: 600; letter-spacing: .2em; }
.slider-count em { font-style: normal; color: var(--ink-45); }
.slider-nav { display: flex; gap: .6rem; }
.slider-btn {
  width: clamp(2.5rem,3.4vw,3.25rem); height: clamp(2.5rem,3.4vw,3.25rem); border-radius: 50%;
  border: var(--rule); display: grid; place-items: center;
  transition: background .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease);
}
.slider-btn:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.slider-btn svg { width: 1em; height: 1em; }
.slider-dots { display: flex; gap: .45rem; }
.slider-dot { width: 1.75rem; height: 2px; background: var(--ink-14); transition: background .4s var(--ease); }
.slider-dot.is-active { background: var(--ink); }

/* ---------- 13. Galerie / Listen ---------- */
.gallery { display: grid; grid-template-columns: repeat(12,1fr); gap: clamp(.75rem,1.6vw,1.5rem); }
.gallery > *:nth-child(1) { grid-column: 1 / 7; }
.gallery > *:nth-child(2) { grid-column: 7 / 10; }
.gallery > *:nth-child(3) { grid-column: 10 / -1; }
.gallery > *:nth-child(4) { grid-column: 1 / -1; }

.index-list { border-top: var(--rule); }
.index-row {
  display: grid; grid-template-columns: repeat(12,1fr); gap: clamp(1rem,2vw,2rem);
  padding-block: clamp(1.1rem,2.2vw,1.85rem); border-bottom: var(--rule);
  align-items: baseline; position: relative; transition: padding-inline .5s var(--ease);
}
.index-row::before { content:''; position:absolute; inset:0; background: var(--ink-08); transform: scaleY(0); transform-origin: bottom; transition: transform .5s var(--ease-io); z-index:-1; }
.index-row:hover::before { transform: scaleY(1); }
.index-row:hover { padding-inline: clamp(.5rem,1.2vw,1.25rem); }
.index-row__num { grid-column: 1 / 2; font-size: var(--fs-counter); font-weight: 600; letter-spacing: .2em; color: var(--ink-45); }
.index-row__name { grid-column: 2 / 7; font-size: var(--fs-h4); letter-spacing: -.02em; }
.index-row__place { grid-column: 7 / 9; font-size: var(--fs-small); color: var(--ink-45); text-transform: uppercase; letter-spacing: .14em; }
.index-row__desc { grid-column: 9 / -1; font-size: var(--fs-small); color: var(--ink-70); }

/* Verlinkte Zeilen (Netzwerk) */
.index-row--link { z-index: 0; }
.index-row--link .index-row__name  { grid-column: 2 / 6; }
.index-row--link .index-row__place { grid-column: 6 / 8; }
.index-row--link .index-row__desc  { grid-column: 8 / 11; }
.index-row__go {
  grid-column: 11 / -1; justify-self: end; text-align: right;
  font-size: var(--fs-eyebrow); text-transform: uppercase; letter-spacing: .16em;
  font-weight: 600; color: var(--ink-45); white-space: nowrap;
  transition: color .4s var(--ease);
}
.index-row--link:hover .index-row__go { color: var(--ink); }
.unternehmen { border-top: var(--rule); }

/* Netzwerk-Zeile im Footer */
.netrow {
  grid-column: 1 / -1; margin-top: clamp(1.5rem,3vw,2.5rem);
  padding-top: clamp(1.5rem,2.5vw,2rem); border-top: 1px solid var(--chalk-16);
  display: flex; flex-wrap: wrap; gap: 1rem clamp(1.5rem,3vw,3rem); align-items: baseline;
}
.netrow h3 {
  font-size: var(--fs-eyebrow); text-transform: uppercase; letter-spacing: .2em;
  color: var(--chalk-40); font-weight: 600; flex: 0 0 auto;
}
.netrow__links { display: flex; flex-wrap: wrap; gap: .6rem clamp(1.25rem,2.5vw,2.5rem); }
.netrow__links a { color: var(--chalk); font-size: var(--fs-small); transition: color .35s var(--ease); }
.netrow__links a:hover { color: #fff; }

/* ---------- 14. Baustellen-Kacheln ---------- */
.tilegrid {
  display: grid; grid-template-columns: repeat(6, 1fr);
  gap: clamp(.75rem, 1.5vw, 1.35rem);
}
.tilegrid > figure { position: relative; overflow: hidden; background: var(--ink-08); }
.tilegrid > figure img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease); }
.tilegrid > figure:hover img { transform: scale(1.045); }
.tilegrid > figure:nth-child(1) { grid-column: span 3; aspect-ratio: 3/2; }
.tilegrid > figure:nth-child(2) { grid-column: span 3; aspect-ratio: 3/2; }
.tilegrid > figure:nth-child(3) { grid-column: span 2; aspect-ratio: 4/3; }
.tilegrid > figure:nth-child(4) { grid-column: span 2; aspect-ratio: 4/3; }
.tilegrid > figure:nth-child(5) { grid-column: span 2; aspect-ratio: 4/3; }
.tilegrid > figure:nth-child(6) { grid-column: span 6; aspect-ratio: 21/9; }

/* ---------- 15. Person / Werdegang ---------- */
.person { display: grid; grid-template-columns: repeat(12,1fr); gap: clamp(1.25rem,2.4vw,2.5rem); align-items: start; }
.person__media { grid-column: 1 / 5; position: sticky; top: clamp(5rem,8vw,7rem); }
.person__body { grid-column: 6 / -1; display: flex; flex-direction: column; gap: clamp(2rem,4vw,3.5rem); }
.cv { border-top: var(--rule); }
.cv__row { display: grid; grid-template-columns: minmax(7rem, 1fr) 3fr; gap: clamp(1rem,2.4vw,2.5rem); padding-block: clamp(1.1rem,2vw,1.6rem); border-bottom: var(--rule); }
.cv__year { font-size: var(--fs-small); font-weight: 600; letter-spacing: .08em; color: var(--ink-45); white-space: nowrap; }
.cv__role { font-size: var(--fs-h4); letter-spacing: -.015em; margin-bottom: .35rem; }
.cv__desc { font-size: var(--fs-small); color: var(--ink-70); max-width: 54ch; }
.pill-grid { display: flex; flex-wrap: wrap; gap: clamp(2rem,5vw,5rem); }
.pill-col h3 { font-size: var(--fs-eyebrow); text-transform: uppercase; letter-spacing: .2em; color: var(--ink-45); margin-bottom: 1rem; font-weight: 600; }
.pill-col ul { list-style: none; display: flex; flex-direction: column; gap: .45rem; }
.pill-col li { font-size: var(--fs-small); display: flex; justify-content: space-between; gap: 2rem; min-width: 15rem; border-bottom: 1px solid var(--ink-08); padding-bottom: .45rem; }
.pill-col li span { color: var(--ink-45); }

/* ---------- 16. Kontakt / Footer ---------- */
.site-footer { background: var(--ink); color: var(--paper); padding-top: clamp(4.5rem,10vw,10rem); }
.site-footer .eyebrow { color: var(--chalk-40); }
.site-footer .rule { background: var(--chalk-16); }
.footer-lead { display: grid; grid-template-columns: repeat(12,1fr); gap: clamp(1.25rem,2.4vw,2.5rem); align-items: end; }
.footer-lead__head { grid-column: 1 / 8; display: flex; flex-direction: column; gap: clamp(1.5rem,3vw,2.5rem); }
.footer-lead__head .statement { color: var(--paper); }
.footer-lead__aside { grid-column: 9 / -1; color: var(--chalk); font-size: var(--fs-body); }
.cta-huge {
  display: block; margin-block: clamp(2.5rem,6vw,5.5rem);
  font-size: clamp(2.1rem,7.4vw,8.5rem); line-height: .95; letter-spacing: -.045em; font-weight: 400;
  padding-bottom: clamp(1rem,2vw,2rem); border-bottom: 1px solid var(--chalk-16);
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  transition: opacity .5s var(--ease);
}
.cta-huge span:last-child { font-size: .35em; transition: transform .6s var(--ease); }
.cta-huge:hover span:last-child { transform: translateX(.4em); }
.cta-huge:hover { opacity: .65; }

.contact-grid { display: grid; grid-template-columns: repeat(12,1fr); gap: clamp(1.5rem,2.4vw,2.5rem); padding-bottom: clamp(3rem,6vw,5rem); }
.contact-col { grid-column: span 3; display: flex; flex-direction: column; gap: .7rem; }
.contact-col h3 { font-size: var(--fs-eyebrow); text-transform: uppercase; letter-spacing: .2em; color: var(--chalk-40); font-weight: 600; }
.contact-col a, .contact-col p { color: var(--chalk); font-size: var(--fs-body); }
.contact-col a { transition: color .35s var(--ease); }
.contact-col a:hover { color: #fff; }

.form { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(12,1fr); gap: clamp(1rem,2vw,1.75rem); margin-top: clamp(2rem,4vw,3.5rem); }
.field { grid-column: span 4; display: flex; flex-direction: column; gap: .5rem; }
.field--wide { grid-column: 1 / -1; }
.field label { font-size: var(--fs-eyebrow); text-transform: uppercase; letter-spacing: .2em; color: var(--chalk-40); font-weight: 600; }
.field input, .field textarea {
  background: none; border: 0; border-bottom: 1px solid var(--chalk-ui); color: var(--paper);
  padding: .7rem 0; font-size: var(--fs-body); transition: border-color .4s var(--ease);
}
.field textarea { resize: vertical; min-height: 6rem; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--paper); }
.btn {
  grid-column: span 4; justify-self: start; align-self: end;
  display: inline-flex; align-items: center; gap: .8em;
  padding: 1em 1.9em; border: 1px solid var(--chalk-ui); border-radius: 100px;
  font-size: var(--fs-small); font-weight: 600; text-transform: uppercase; letter-spacing: .18em;
  transition: background .45s var(--ease), color .45s var(--ease), border-color .45s var(--ease);
}
.btn:hover { background: var(--paper); color: var(--ink); border-color: var(--paper); }

.footer-base {
  display: flex; flex-wrap: wrap; gap: 1rem 2rem; justify-content: space-between; align-items: center;
  padding-block: clamp(1.5rem,2.5vw,2.25rem); border-top: 1px solid var(--chalk-16);
  font-size: var(--fs-eyebrow); text-transform: uppercase; letter-spacing: .16em; color: var(--chalk-40);
}
.footer-base a:hover { color: #fff; }

/* ---------- 17. Scroll-Reveal ---------- */
[data-reveal] { opacity: 0; transform: translateY(1.75rem); transition: opacity 1s var(--ease), transform 1s var(--ease-io); }
[data-reveal].is-in { opacity: 1; transform: none; }
[data-reveal-stagger] > * { opacity: 0; transform: translateY(1.4rem); transition: opacity .85s var(--ease), transform .85s var(--ease-io); }
[data-reveal-stagger].is-in > * { opacity: 1; transform: none; }
[data-reveal-stagger].is-in > *:nth-child(1){transition-delay:.02s}
[data-reveal-stagger].is-in > *:nth-child(2){transition-delay:.09s}
[data-reveal-stagger].is-in > *:nth-child(3){transition-delay:.16s}
[data-reveal-stagger].is-in > *:nth-child(4){transition-delay:.23s}
[data-reveal-stagger].is-in > *:nth-child(5){transition-delay:.30s}
[data-reveal-stagger].is-in > *:nth-child(6){transition-delay:.37s}
.clip-line { display: block; overflow: hidden; padding-block: .06em .18em; margin-block: -.06em -.18em; }
.clip-line > span { display: block; transform: translateY(105%); transition: transform 1.05s var(--ease-io); }
[data-reveal].is-in .clip-line > span, .is-in > .clip-line > span { transform: none; }
.clip-line:nth-child(2) > span { transition-delay: .09s; }
.clip-line:nth-child(3) > span { transition-delay: .18s; }

/* ---------- 18. Legal-Seite ---------- */
.legal { padding-top: clamp(7rem,12vw,11rem); }
.legal__body { grid-column: 4 / 11; display: flex; flex-direction: column; gap: 2.25rem; }
.legal__body h2 { font-size: var(--fs-h3); letter-spacing: -.03em; margin-top: 1.5rem; }
.legal__body h3 { font-size: var(--fs-h4); letter-spacing: -.015em; }
.legal__body p { color: var(--ink-70); max-width: 72ch; }
.legal__body address { font-style: normal; color: var(--ink-70); }

/* ---------- 19. Responsive ---------- */
@media (max-width: 1024px) {
  .nav { display: none; }
  .nav-toggle { display: block; }
  .hero__bottom { grid-template-columns: 1fr; gap: 2rem; }
  .hero__claim, .hero__meta { grid-column: 1 / -1; }
  .sec-head__label, .sec-head__main { grid-column: 1 / -1; }
  .phase__num { grid-column: 1 / -1; }
  .phase__body, .phase__media, .phase:nth-child(even) .phase__body, .phase:nth-child(even) .phase__media { grid-column: 1 / -1; grid-row: auto; }
  .phase__media { order: -1; margin-bottom: 1.5rem; }
  .project__media, .project__info { grid-column: 1 / -1; }
  .project__info { padding-top: 1.5rem; }
  .stats { grid-template-columns: repeat(2,1fr); }
  .stat:nth-child(2) { border-right: 0; }
  .stat:nth-child(3), .stat:nth-child(4) { border-top: var(--rule); }
  .gallery > * { grid-column: span 6 !important; }
  .tilegrid { grid-template-columns: repeat(2, 1fr); }
  .tilegrid > figure { grid-column: span 1 !important; aspect-ratio: 3/2 !important; }
  .tilegrid > figure:nth-child(6) { grid-column: span 2 !important; aspect-ratio: 16/9 !important; }
  .index-row__num { grid-column: 1 / 2; }
  .index-row__name { grid-column: 2 / -1; }
  .index-row__place { grid-column: 2 / -1; }
  .index-row__desc { grid-column: 2 / -1; }
  .index-row--link .index-row__desc { grid-column: 2 / -1; }
  .index-row__go { grid-column: 2 / -1; justify-self: start; text-align: left; }
  .person__media { grid-column: 1 / -1; position: static; max-width: 22rem; }
  .person__body { grid-column: 1 / -1; }
  .footer-lead__head, .footer-lead__aside { grid-column: 1 / -1; }
  .contact-col { grid-column: span 6; }
  .field { grid-column: span 6; }
  .btn { grid-column: 1 / -1; }
  .legal__body { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .hero__mark { font-size: clamp(3rem, 19vw, 7rem); }
  .brand__long { display: none; }
  .site-header .shell { gap: 1rem; }
  .stats { grid-template-columns: 1fr; }
  .stat { border-right: 0; border-top: var(--rule); padding-left: 0 !important; }
  .stat:first-child { border-top: 0; }
  .gallery > * { grid-column: 1 / -1 !important; }
  .tilegrid { grid-template-columns: 1fr; }
  .tilegrid > figure, .tilegrid > figure:nth-child(6) { grid-column: 1 / -1 !important; aspect-ratio: 3/2 !important; }
  .index-row--link .index-row__desc { justify-content: flex-start; }
  .cv__row { grid-template-columns: 1fr; gap: .5rem; }
  .contact-col, .field { grid-column: 1 / -1; }
  .cta-huge { flex-direction: column; align-items: flex-start; gap: .6rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  [data-reveal], [data-reveal-stagger] > * { opacity: 1 !important; transform: none !important; }
  .clip-line > span, .hero__mark span, .wordbuild__line span { transform: none !important; opacity: 1 !important; }
}
@media print { .site-header, .hero__scroll, .nav-overlay { display: none; } }

/* =========================================================================
   20. Bedienbarkeit: Trefferflächen, Eingaben, sichere Bereiche
   ========================================================================= */

/* Sprunglink zum Inhalt */
.skip-link {
  position: absolute; left: var(--gutter); top: .75rem; z-index: 200;
  transform: translateY(-200%); transition: transform .25s var(--ease);
  background: var(--ink); color: var(--paper);
  padding: .75rem 1.25rem; border-radius: 100px;
  font-size: var(--fs-small); font-weight: 600; text-transform: uppercase; letter-spacing: .16em;
}
.skip-link:focus-visible { transform: none; }

/* Nur für Screenreader */
.vh {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0);
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* Trefferflächen mindestens 24 px hoch (WCAG 2.2, 2.5.8) */
.brand, .nav a, .nav-close { display: inline-flex; align-items: center; min-height: 30px; }
.nav-toggle { min-height: 30px; }          /* Anzeige bleibt den Umbruchregeln überlassen */
@media (max-width: 1024px) { .nav-toggle { display: inline-flex; align-items: center; } }
.nav a { padding-bottom: 0; }
.nav a::after { bottom: 4px; }
.netrow__links a, .contact-col a, .contact-col--net a { display: inline-flex; align-items: center; min-height: 28px; }
.link-arrow { min-height: 32px; }
.index-row--link { min-height: 44px; }

/* Punkte des Projektwechslers: sichtbare Linie, große Trefferfläche */
.slider-dot {
  height: 24px; background: none; display: flex; align-items: center;
  padding: 0; border: 0;
}
.slider-dot::before {
  content: ''; display: block; width: 100%; height: 2px;
  background: var(--ink-14); transition: background .4s var(--ease);
}
.slider-dot.is-active::before { background: var(--ink); }
.slider-dot.is-active { background: none; }

/* Tippen ohne blauen Blitz, aber mit sichtbarem Fokus */
a, button, input, textarea { -webkit-tap-highlight-color: rgba(13,13,12,.08); }

/* Eingabefelder: 16 px verhindern das automatische Zoomen in iOS Safari */
.field input, .field textarea { font-size: max(16px, var(--fs-body)); }
.field input { min-height: 44px; }
.btn { min-height: 48px; }

/* Sichere Bereiche auf Geräten mit Aussparung, auch im Querformat */
.site-header .shell,
.hero > .shell,
.section > .shell,
.site-footer .shell,
.nav-overlay {
  padding-left: max(var(--gutter), env(safe-area-inset-left));
  padding-right: max(var(--gutter), env(safe-area-inset-right));
}
.hero { padding-bottom: max(clamp(2rem,4vw,3.5rem), env(safe-area-inset-bottom)); }
.site-footer .footer-base { padding-bottom: max(clamp(1.5rem,2.5vw,2.25rem), env(safe-area-inset-bottom)); }

/* Kicker über der Wortmarke */
.hero__kicker {
  display: block; margin-bottom: clamp(1rem, 2vw, 1.75rem);
  font-size: var(--fs-eyebrow); font-weight: 600;
  text-transform: uppercase; letter-spacing: .22em; color: rgba(255,255,255,.80);
  opacity: 0;
}
.hero.is-ready .hero__kicker { opacity: 1; transition: opacity .7s var(--ease) .12s; }
.hero h1 { font-weight: 400; letter-spacing: normal; line-height: inherit; }

/* Häufige Fragen */
.faq { border-top: var(--rule); }
.faq__item { border-bottom: var(--rule); padding-block: clamp(1.4rem,2.6vw,2.2rem); display: grid; grid-template-columns: repeat(12,1fr); gap: clamp(1rem,2vw,2.5rem); }
.faq__q { grid-column: 1 / 6; font-size: var(--fs-h4); letter-spacing: -.015em; }
.faq__a { grid-column: 6 / -1; color: var(--ink-70); max-width: 62ch; }
@media (max-width: 1024px) {
  .faq__q, .faq__a { grid-column: 1 / -1; }
  .faq__a { margin-top: .7rem; }
}

/* Geräte im Querformat mit wenig Höhe */
@media (max-height: 520px) and (orientation: landscape) {
  .hero { min-height: auto; padding-block: clamp(4rem,10vh,6rem) 2rem; }
  .hero__mark { font-size: clamp(2.5rem, 12vw, 6rem); }
  .hero__scroll { display: none; }
}
.footer-base a, .footer-base span { display: inline-flex; align-items: center; min-height: 28px; }

/* Messpunkte für den Farbwechsel der Kopfzeile */
.theme-sentinel { display: block; width: 1px; height: 1px; pointer-events: none; }

/* Rückmeldung des Kontaktformulars (gehört zu assets/js/kontakt.js) */
.form-status {
  grid-column: 1 / -1; margin: 0;
  font-size: var(--fs-body); line-height: 1.5; color: var(--chalk-40);
}
.form-status--erfolg { color: var(--paper); }
.form-status--fehler { color: #f0a58a; }
.form-status[hidden] { display: none; }
.btn[disabled] { opacity: .55; cursor: progress; }