/* feinplaner — site styles */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--paper); color: var(--ink); font-family: var(--font-body); }
a { color: inherit; text-decoration: none; }
p a[target="_blank"] { text-decoration: underline; text-underline-offset: 3px; }
img { display: block; max-width: 100%; }
button { font-family: inherit; }

/* ═══ Reusable type ═══ */
.eyebrow { font-family: var(--font-display); font-weight: 500; font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--fg-2); }
.eyebrow.petrol { color: var(--petrol); }
.eyebrow.light { color: rgba(255,255,255,0.6); }
.h-display { font-family: var(--font-display); font-weight: 200; font-size: clamp(56px, 9vw, 128px); line-height: 0.95; letter-spacing: -0.025em; color: var(--ink); margin: 0; }
.h-display .b { font-weight: 700; }
.h1 { font-family: var(--font-display); font-weight: 300; font-size: clamp(40px, 5.5vw, 80px); line-height: 1.0; letter-spacing: -0.02em; color: var(--ink); margin: 0; }
.h2 { font-family: var(--font-display); font-weight: 300; font-size: clamp(32px, 3.8vw, 56px); line-height: 1.05; letter-spacing: -0.02em; color: var(--ink); margin: 0; }
.h3 { font-family: var(--font-display); font-weight: 500; font-size: 24px; line-height: 1.2; color: var(--ink); margin: 0; }
.lead { font-family: var(--font-body); font-weight: 300; font-size: clamp(18px, 1.5vw, 22px); line-height: 1.6; color: var(--ink); margin: 0; }
.body { font-family: var(--font-body); font-weight: 400; font-size: 16px; line-height: 1.75; color: var(--ink); margin: 0; text-wrap: pretty; }
.body--italic-grey { font-style: italic; color: var(--fg-2); }
.body--larger { font-size: 18px; }
.meta-mono { font-family: var(--font-mono); font-size: 12px; color: var(--fg-2); letter-spacing: 0.04em; }

/* ═══ Container ═══ */
.wrap { padding: 0 clamp(24px, 6vw, 96px); max-width: 1600px; margin: 0 auto; }
section { padding: clamp(80px, 10vw, 160px) 0; }

/* ═══ Buttons ═══ */
.btn { display: inline-flex; align-items: center; gap: 12px; font-family: var(--font-display); font-weight: 500; font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; padding: 16px 28px; border: 1px solid var(--ink); cursor: pointer; transition: background 160ms var(--ease), color 160ms var(--ease), border-color 160ms var(--ease); background: var(--ink); color: var(--paper); }
.btn:hover { background: var(--petrol); border-color: var(--petrol); }
.btn--ghost { background: transparent; color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--paper); }
.btn--light { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.btn--light:hover { background: var(--petrol); border-color: var(--petrol); color: var(--paper); }
.btn .arrow { display: inline-block; transition: transform 240ms var(--ease); }
.btn:hover .arrow { transform: translateX(4px); }

.text-link { display: inline-flex; gap: 10px; align-items: center; font-family: var(--font-display); font-weight: 500; font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink); border: 1px solid var(--ink); padding: 12px 16px; transition: color 140ms var(--ease), border-color 140ms var(--ease), background 140ms var(--ease); cursor: pointer; background: transparent; }
.text-link:hover { color: var(--petrol); border-color: var(--petrol); }
.text-link.light { color: var(--paper); border-color: rgba(255,255,255,0.4); background: transparent; }
.text-link.light:hover { color: var(--petrol); border-color: var(--petrol); }

/* ═══ Header ═══ */
.hdr { position: fixed; top: 0; left: 0; right: 0; height: 88px; z-index: 80; transition: background 240ms var(--ease), border-color 240ms var(--ease), height 240ms var(--ease); }
.hdr.transparent { background: transparent; }
.hdr.solid { background: var(--paper); border-bottom: 1px solid var(--ink); height: 72px; }
/* Header inner padding-left matches hero content padding so the logo's left edge
   aligns with the "G" of "Ganzheitliche" in the hero title. */
.hdr .inner { height: 100%; padding: 0 clamp(24px, 6vw, 96px); display: flex; align-items: center; justify-content: space-between; }
/* Logo: 40px tall (1/3 of previous 120px). Vertically centered (align-items: center)
   with left edge fixed by the inner padding — so resizing pivots on middle-left. */
.hdr .mark { display: flex; align-items: center; height: 40px; cursor: pointer; }
/* White logo PNG, tightly cropped (no transparent left padding) — visible "f"
   sits at x=0 of the img, so no margin offset needed. */
.hdr .mark img { height: 100%; width: auto; display: block; transition: filter 240ms var(--ease); }
/* Logo is white by default; on the light "solid" header invert it so it stays visible. */
.hdr.solid .mark img { filter: invert(1); }
.hdr nav { display: flex; gap: 28px; align-items: center; }
.hdr nav a { font-family: var(--font-display); font-weight: 500; font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink); padding: 6px 0; border-bottom: 1px solid transparent; cursor: pointer; transition: color 140ms var(--ease), border-color 140ms var(--ease); }
.hdr nav a:hover { color: var(--petrol); }
.hdr nav a.active { color: var(--petrol); border-color: var(--petrol); }
.hdr.transparent.dark .mark, .hdr.transparent.dark nav a { color: #fff; }
.hdr.transparent.dark nav a.active { color: #fff; border-color: #fff; }
.hdr .cta-mini { padding: 10px 18px; border: 1px solid currentColor; border-radius: 999px; font-size: 12px; letter-spacing: 0.12em; }
/* Burger button — only visible on mobile */
.burger { display: none; flex-direction: column; justify-content: center; gap: 5px; background: none; border: none; cursor: pointer; padding: 8px; z-index: 100; color: #fff; }
.hdr.solid .burger { color: var(--ink); }
.burger span { display: block; width: 24px; height: 2px; background: currentColor; transition: transform 240ms var(--ease), opacity 240ms var(--ease); }
.burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger.open span:nth-child(2) { opacity: 0; }
.burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile nav drawer */
.mobile-nav { display: none; position: fixed; inset: 88px 0 0 0; background: var(--paper); z-index: 70; flex-direction: column; justify-content: center; padding: clamp(32px, 8vw, 64px); overflow-y: auto; }
.mobile-nav nav { display: flex; flex-direction: column; gap: 0; }
.mobile-nav nav a { font-family: var(--font-display); font-weight: 300; font-size: clamp(32px, 8vw, 48px); letter-spacing: -0.01em; color: var(--ink); padding: 16px 0; border-bottom: 1px solid var(--hairline); cursor: pointer; }
.mobile-nav nav a.active { color: var(--petrol); }
.mobile-nav__cta { margin-top: 40px; }

@media (max-width: 800px) {
  .hdr nav a:not(.cta-mini) { display: none; }
  .hdr .cta-mini { display: none; }
  .burger { display: flex; }
  .mobile-nav { display: flex; }
}

/* ═══ Hero (home) ═══ */
.hero { position: relative; min-height: 100vh; padding: 0; color: #fff; overflow: hidden; }

/* Slideshow */
.hero__slides { position: absolute; inset: 0; }
.hero__slide { position: absolute; inset: 0; }
.hero__slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero__slide--in { animation: heroFadeIn 1200ms var(--ease) forwards; z-index: 2; }
.hero__slide--out { z-index: 1; }
@keyframes heroFadeIn { from { opacity: 0; } to { opacity: 1; } }

/* Dots */
.hero__dots { position: absolute; bottom: 32px; right: clamp(24px, 6vw, 96px); display: flex; gap: 10px; z-index: 10; }
.hero__dot { width: 6px; height: 6px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.7); background: transparent; cursor: pointer; padding: 0; transition: background 300ms, transform 300ms; }
.hero__dot.active { background: #fff; transform: scale(1.3); border-color: #fff; }

.hero__overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.20) 40%, rgba(0,0,0,0.78) 100%); z-index: 3; }
.hero__content { position: relative; z-index: 4; min-height: 100vh; display: flex; flex-direction: column; justify-content: flex-end; padding: 120px clamp(24px, 6vw, 96px) clamp(56px, 8vw, 96px); }
.hero__title { font-family: var(--font-display); font-weight: 200; font-size: clamp(48px, 7.4vw, 124px); line-height: 0.95; letter-spacing: -0.025em; color: #fff; margin: 0 0 32px 0; max-width: 1300px; text-shadow: 0 2px 24px rgba(0,0,0,0.25); }
.hero__title .b { font-weight: 700; }
.hero__title .ital { font-style: italic; font-weight: 200; }
.hero__row { display: flex; align-items: flex-end; justify-content: space-between; gap: 48px; flex-wrap: wrap; }
.hero__sub { max-width: 460px; font-family: var(--font-body); font-weight: 300; font-size: 17px; line-height: 1.65; color: rgba(255,255,255,0.92); }
.hero__cta { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }
.hero__cap { position: absolute; right: 24px; bottom: 16px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; color: rgba(255,255,255,0.7); z-index: 2; }
.hero__index { position: absolute; top: 120px; right: clamp(24px, 6vw, 96px); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; color: rgba(255,255,255,0.6); text-align: right; z-index: 1; line-height: 1.8; }
.hero__index .num { font-size: 14px; color: #fff; }
.hero__scroll { position: absolute; bottom: 24px; left: clamp(24px, 6vw, 96px); display: flex; align-items: center; gap: 12px; color: rgba(255,255,255,0.7); font-family: var(--font-display); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; z-index: 5; }
.hero__scroll .line { width: 48px; height: 1px; background: rgba(255,255,255,0.5); }

/* ═══ Manifesto / pull section ═══ */
.manifesto { background: var(--paper); }
.manifesto__head { display: grid; grid-template-columns: 200px 1fr; gap: clamp(24px, 5vw, 96px); align-items: start; }
.manifesto__head .label { padding-top: 14px; }
.manifesto__lead { font-family: var(--font-display); font-weight: 200; font-size: clamp(32px, 4.4vw, 68px); line-height: 1.08; letter-spacing: -0.015em; color: var(--ink); margin: 0; }
.manifesto__lead .b { font-weight: 600; }
.manifesto__lead .petrol { color: var(--petrol); font-style: italic; }
.manifesto__row { display: grid; grid-template-columns: 200px repeat(3, 1fr); gap: 48px; margin-top: 96px; padding-top: 32px; border-top: 1px solid var(--ink); }
.manifesto__row > .label { padding-top: 0; }
.manifesto__row .col h4 { font-family: var(--font-display); font-weight: 500; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-2); margin: 0 0 12px 0; }
.manifesto__row .col p { margin: 0; }
@media (max-width: 900px) { .manifesto__head, .manifesto__row { grid-template-columns: 1fr; } .manifesto__row { gap: 24px; } }

/* ═══ Capabilities tiles ═══ */
.caps { background: var(--paper-2); }
.caps__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; margin-bottom: 64px; flex-wrap: wrap; }
.caps__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--ink); border: 1px solid var(--ink); }
.caps__tile { background: var(--paper); padding: 40px 32px; min-height: 280px; display: flex; flex-direction: column; transition: background 200ms var(--ease), color 200ms var(--ease); cursor: pointer; }
.caps__tile:hover { background: var(--ink); color: var(--paper); }
.caps__tile:hover .num, .caps__tile:hover h3, .caps__tile:hover p, .caps__tile:hover .more { color: inherit; }
.caps__tile .num { font-family: var(--font-mono); font-size: 11px; color: var(--fg-2); letter-spacing: 0.1em; }
.caps__tile h3 { font-family: var(--font-display); font-weight: 300; font-size: 32px; line-height: 1.1; margin: 24px 0 9px 0; letter-spacing: -0.01em; min-height: calc(2em * 1.1); }
.caps__tile p { font-size: 14px; line-height: 1.6; color: var(--fg-2); margin: 0; }
.caps__tile .more { font-family: var(--font-display); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-2); margin-top: auto; padding-top: 24px; }
@media (max-width: 1100px) { .caps__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .caps__grid { grid-template-columns: 1fr; } }

/* ═══ Featured projects ═══ */
.feat { background: var(--paper); }
.feat__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; margin-bottom: 80px; flex-wrap: wrap; }
.feat__list { display: flex; flex-direction: column; }
.feat-row { display: grid; grid-template-columns: 80px 1.4fr 1fr 200px; gap: 32px; padding: 32px 0; border-top: 1px solid var(--ink); align-items: center; cursor: pointer; transition: padding 240ms var(--ease); }
.feat-row:last-child { border-bottom: 1px solid var(--ink); }
.feat-row:hover { padding-left: 16px; }
.feat-row__num { font-family: var(--font-mono); font-size: 12px; color: var(--fg-2); letter-spacing: 0.08em; }
.feat-row__title { font-family: var(--font-display); font-weight: 300; font-size: clamp(28px, 3.6vw, 48px); line-height: 1.05; letter-spacing: -0.015em; color: var(--ink); }
.feat-row__title .ital { font-style: italic; font-weight: 200; }
.feat-row__meta { font-size: 13px; color: var(--fg-2); line-height: 1.5; }
.feat-row__thumb { aspect-ratio: 4/3; object-fit: cover; object-position: center; background-color: var(--bone); transition: transform 320ms var(--ease); display: block; width: 100%; }
.feat-row:hover .feat-row__thumb { transform: scale(1.02); }
@media (max-width: 900px) { .feat-row { grid-template-columns: 1fr; gap: 16px; } .feat-row__thumb { aspect-ratio: 16/9; max-width: 100%; } }

/* ═══ Process / numbered steps ═══ */
.process { background: var(--ink); color: var(--paper); }
.process .h2 { color: var(--paper); }
.process__head { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: end; margin-bottom: 96px; }
.process__head p { color: rgba(255,255,255,0.75); max-width: 460px; }
.process__list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 1px solid rgba(255,255,255,0.25); }
.process__step { padding: 40px 24px 32px; border-right: 1px solid rgba(255,255,255,0.25); display: flex; flex-direction: column; gap: 20px; min-height: 280px; }
.process__step:last-child { border-right: none; }
.process__step .num { font-family: var(--font-display); font-weight: 200; font-size: 64px; line-height: 0.9; color: var(--paper); }
.process__step .num .of { font-size: 16px; color: rgba(255,255,255,0.5); margin-left: 4px; }
.process__step h4 { font-family: var(--font-display); font-weight: 700; font-size: 18px; letter-spacing: 0.04em; text-transform: uppercase; margin: 0; }
.process__step p { font-size: 13px; line-height: 1.55; color: rgba(255,255,255,0.7); margin: 0; }
@media (max-width: 1100px) { .process__list { grid-template-columns: repeat(2, 1fr); } .process__step { border-bottom: 1px solid rgba(255,255,255,0.25); } .process__step:nth-child(2n) { border-right: none; } .process__head { grid-template-columns: 1fr; } }

/* ═══ Stats strip ═══ */
.stats { background: var(--paper-2); padding: 64px 0; }
.stats__row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
.stats__item { display: flex; flex-direction: column; gap: 8px; padding-top: 16px; border-top: 1px solid var(--ink); }
.stats__num { font-family: var(--font-display); font-weight: 200; font-size: clamp(48px, 5vw, 80px); line-height: 1; letter-spacing: -0.02em; color: var(--ink); }
.stats__num .unit { font-size: 0.4em; color: var(--fg-2); margin-left: 6px; letter-spacing: 0; }
.stats__lbl { font-family: var(--font-body); font-size: 13px; color: var(--fg-2); line-height: 1.5; max-width: 220px; }
@media (max-width: 800px) { .stats__row { grid-template-columns: 1fr 1fr; } }

/* ═══ Press / awards ═══ */
.press { background: var(--paper); }
.press__list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--ink); }
.press__item { padding: 32px 24px 24px; border-right: 1px solid var(--ink); border-bottom: 1px solid var(--ink); display: flex; flex-direction: column; }
.press__item:nth-child(3n) { border-right: none; }
.press__item .yr { font-family: var(--font-mono); font-size: 11px; color: var(--fg-2); letter-spacing: 0.08em; }
.press__item h4 { font-family: var(--font-display); font-weight: 400; font-size: 22px; line-height: 1.2; margin: 8px 0 6px 0; color: var(--ink); flex: 1; }
.press__item p { font-size: 13px; color: var(--fg-2); line-height: 1.5; margin: 0; }
.press__img { width: 100%; margin-top: 16px; display: block; height: auto; flex-shrink: 0; }
@media (max-width: 800px) { .press__list { grid-template-columns: 1fr; } .press__item { border-right: none; } }

/* ═══ Big CTA strip ═══ */
.cta-strip { background: var(--paper); padding: 0; }
.cta-strip .inner { background: var(--paper-2); padding: clamp(64px, 9vw, 128px) clamp(32px, 6vw, 96px); display: grid; grid-template-columns: 1fr auto; gap: 48px; align-items: center; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); }
.cta-strip h2 { font-family: var(--font-display); font-weight: 200; font-size: clamp(40px, 5.5vw, 88px); line-height: 1; letter-spacing: -0.02em; max-width: 1100px; margin: 0; }
.cta-strip h2 .b { font-weight: 700; }
.cta-strip h2 .ital { font-style: italic; font-weight: 200; }
@media (max-width: 800px) { .cta-strip .inner { grid-template-columns: 1fr; } }

/* ═══ Footer ═══ */
.ftr { background: var(--ink); color: var(--paper); padding: 96px clamp(24px, 6vw, 96px) 32px; }
.ftr__top { display: grid; grid-template-columns: 1.5fr 1fr; gap: 64px; padding-bottom: 64px; border-bottom: 1px solid rgba(255,255,255,0.2); }
.ftr__sig { font-family: var(--font-display); font-weight: 200; line-height: 0.9; letter-spacing: -0.025em; }
.ftr__sig .logo { display: block; height: 40px; width: auto; margin-bottom: 24px; }
.ftr__sig .b { font-weight: 700; }
.ftr__sig .ital { font-style: italic; }
.ftr__contact { display: flex; flex-direction: column; gap: 24px; }
.ftr__contact h5 { font-family: var(--font-display); font-weight: 500; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--stone-200); margin: 0 0 4px 0; }
.ftr__contact p { font-size: 14px; line-height: 1.6; margin: 0; }
.ftr__contact a { color: var(--paper); border-bottom: 1px solid rgba(255,255,255,0.3); }
.ftr__contact a:hover { border-color: var(--paper); }
.ftr__cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; padding: 48px 0; border-bottom: 1px solid rgba(255,255,255,0.2); }
.ftr__col h5 { font-family: var(--font-display); font-weight: 500; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--stone-200); margin: 0 0 16px 0; }
.ftr__col a { display: block; font-size: 13px; padding: 4px 0; color: rgba(255,255,255,0.85); transition: color 140ms var(--ease); cursor: pointer; }
.ftr__col a:hover { color: var(--terracotta); }
.ftr__bottom { display: flex; justify-content: space-between; padding-top: 24px; gap: 24px; flex-wrap: wrap; font-size: 11px; color: var(--stone-200); letter-spacing: 0.04em; }
.ftr__bottom a { color: var(--stone-200); cursor: pointer; }
@media (max-width: 900px) { .ftr__top, .ftr__cols { grid-template-columns: 1fr; gap: 32px; } }

/* ═══ Page hero (interior pages) ═══ */
.page-hero { padding: 192px clamp(24px, 6vw, 96px) 96px; border-bottom: 1px solid var(--ink); }
.page-hero .crumb { font-family: var(--font-mono); font-size: 11px; color: var(--fg-2); letter-spacing: 0.1em; margin-bottom: 32px; }
.page-hero .crumb a { color: var(--ink); border-bottom: 1px solid currentColor; padding-bottom: 1px; cursor: pointer; }
.page-hero h1 { font-family: var(--font-display); font-weight: 200; font-size: clamp(56px, 9vw, 144px); line-height: 0.92; letter-spacing: -0.025em; color: var(--ink); margin: 0; max-width: 1400px; }
.page-hero h1 .b { font-weight: 700; }
.page-hero h1 .ital { font-style: italic; }
.page-hero__row { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; margin-top: 48px; align-items: end; }
.page-hero__row p { max-width: 520px; }

/* ═══ Projects index page ═══ */
.proj-index { background: var(--paper); }
.proj-filter { display: flex; gap: 8px; padding: 32px clamp(24px, 6vw, 96px); border-bottom: 1px solid var(--ink); flex-wrap: wrap; align-items: center; }
.proj-filter .fl { font-family: var(--font-display); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-2); margin-right: 16px; }
.chip { font-family: var(--font-display); font-weight: 500; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; padding: 6px 14px; border: 1px solid var(--ink); color: var(--ink); border-radius: 999px; background: transparent; cursor: pointer; transition: background 140ms var(--ease), color 140ms var(--ease); }
.chip:hover { background: var(--bone); }
.chip.active { background: var(--ink); color: var(--paper); }

.proj-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 80px clamp(24px, 4vw, 64px); padding: 64px clamp(24px, 6vw, 96px); }
.proj-card { cursor: pointer; }
.proj-card__img { aspect-ratio: 4/3; background-color: var(--bone); overflow: hidden; }
.proj-card__img > img { width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform 480ms var(--ease); display: block; }
.proj-card:hover .proj-card__img > img { transform: scale(1.04); }
.proj-card__rule { height: 1px; background: var(--ink); margin-top: 18px; }
.proj-card__top { display: flex; justify-content: space-between; align-items: baseline; margin-top: 14px; }
.proj-card__nr { font-family: var(--font-mono); font-size: 11px; color: var(--fg-2); letter-spacing: 0.06em; }
.proj-card__yr { font-family: var(--font-mono); font-size: 11px; color: var(--fg-2); }
.proj-card__title { font-family: var(--font-display); font-weight: 400; font-size: 28px; line-height: 1.15; letter-spacing: -0.01em; color: var(--ink); margin: 8px 0 12px 0; }
.proj-card__title .ital { font-style: italic; font-weight: 200; }
.proj-card__bottom { display: flex; justify-content: space-between; gap: 16px; }
.proj-card__bottom .meta { font-size: 12px; color: var(--fg-2); letter-spacing: 0.04em; }
.proj-card__tag { font-family: var(--font-display); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--petrol); }
@media (max-width: 800px) { .proj-grid { grid-template-columns: 1fr; gap: 48px; padding: 32px 24px; } }

/* ═══ Single project page ═══ */
.pp-hero { padding: 144px 0 0; }
.pp-hero__top { padding: 0 clamp(24px, 6vw, 96px); margin-bottom: 48px; }
.pp-hero__top .crumb { font-family: var(--font-mono); font-size: 11px; color: var(--fg-2); margin-bottom: 24px; letter-spacing: 0.06em; }
.pp-hero__top .crumb a { color: var(--ink); border-bottom: 1px solid currentColor; padding-bottom: 1px; cursor: pointer; }
.pp-hero__title { font-family: var(--font-display); font-weight: 300; font-size: clamp(48px, 7.5vw, 120px); line-height: 0.95; letter-spacing: -0.025em; color: var(--ink); margin: 0; max-width: 1300px; }
.pp-hero__title .ital { font-style: italic; font-weight: 200; }
.pp-hero__sub { display: flex; gap: 24px; flex-wrap: wrap; margin-top: 28px; align-items: center; }
.pp-hero__sub .item { display: flex; flex-direction: column; gap: 4px; }
.pp-hero__sub .lbl { font-family: var(--font-display); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-2); }
.pp-hero__sub .val { font-size: 14px; color: var(--ink); }
/* Projekt-Cover: normaler Zuschnitt */
.pp-hero__cover--crop { width: 100%; aspect-ratio: 21/9; object-fit: cover; object-position: center; display: block; background-color: var(--bone); }
/* Projekt-Cover: volle Höhe, kein Zuschnitt */
.pp-hero__cover--full { width: 100%; height: auto; display: block; }
/* Rückwärtskompatibilität */
.pp-hero__cover { width: 100%; aspect-ratio: 21/9; background-size: cover; background-position: center; background-color: var(--bone); }

.pp-meta { padding: 64px clamp(24px, 6vw, 96px); border-bottom: 1px solid var(--ink); }
.pp-meta__row { display: grid; grid-template-columns: repeat(6, 1fr); gap: 24px; }
.pp-meta__cell { display: flex; flex-direction: column; gap: 6px; padding-top: 14px; border-top: 1px solid var(--ink); }
.pp-meta__cell .lbl { font-family: var(--font-display); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-2); }
.pp-meta__cell .val { font-family: var(--font-body); font-size: 15px; color: var(--ink); line-height: 1.4; }
@media (max-width: 1100px) { .pp-meta__row { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px) { .pp-meta__row { grid-template-columns: 1fr 1fr; } }

.pp-narr { padding: 96px clamp(24px, 6vw, 96px); }
.pp-narr__grid { display: grid; grid-template-columns: 280px 1fr; gap: clamp(24px, 5vw, 96px); }
.pp-narr h2 { font-family: var(--font-display); font-weight: 300; font-size: clamp(28px, 3.4vw, 48px); line-height: 1.1; letter-spacing: -0.015em; color: var(--ink); margin: 0 0 24px 0; max-width: 800px; }
.pp-narr p { font-size: 17px; line-height: 1.75; max-width: 720px; margin: 0 0 18px 0; }
.pp-narr .lab { font-family: var(--font-display); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-2); }
@media (max-width: 800px) { .pp-narr__grid { grid-template-columns: 1fr; } }

.pp-gallery { padding: 64px 0 96px; }
.pp-gallery__big { width: 100%; aspect-ratio: 16/9; object-fit: contain; display: block; background-color: var(--bone); margin-bottom: 32px; }
.pp-gallery__row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; padding: 0 clamp(24px, 6vw, 96px); margin-bottom: 32px; }
.pp-gallery__row2 .shot { aspect-ratio: 4/3; object-fit: contain; display: block; width: 100%; background-color: var(--bone); }
.pp-gallery__row3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 24px; padding: 0 clamp(24px, 6vw, 96px); }
.pp-gallery__row3 .shot { aspect-ratio: 1/1; object-fit: cover; display: block; width: 100%; background-color: var(--bone); }
.pp-gallery__cap { padding: 0 clamp(24px, 6vw, 96px); margin-top: 8px; margin-bottom: 32px; font-family: var(--font-mono); font-size: 11px; color: var(--fg-2); letter-spacing: 0.04em; }
.pp-gallery__fig { margin: 0; display: contents; }
.pp-gallery__fig--big { display: block; margin-bottom: 32px; }
.pp-gallery__fig--big .pp-gallery__cap { margin-bottom: 0; }
.pp-gallery__row2 .pp-gallery__fig,
.pp-gallery__row3 .pp-gallery__fig { display: flex; flex-direction: column; }
@media (max-width: 800px) { .pp-gallery__row2, .pp-gallery__row3 { grid-template-columns: 1fr; } }

.pp-plans { padding: 0 clamp(24px, 6vw, 96px) 64px; }
.pp-plans__inner { display: flex; flex-direction: column; align-items: center; gap: 48px; }
.pp-plans__fig { margin: 0; width: 100%; }
.pp-plans__img { width: 100%; height: auto; display: block; background-color: var(--bone); }
.pp-plans__fig .pp-gallery__cap { padding: 0; }

.pp-quote { padding: 96px clamp(24px, 6vw, 96px); border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); background: var(--paper-2); }
.pp-quote blockquote { font-family: var(--font-display); font-weight: 200; font-style: italic; font-size: clamp(28px, 3.6vw, 52px); line-height: 1.2; letter-spacing: -0.01em; max-width: 1100px; margin: 0; color: var(--ink); }
.pp-quote .by { font-family: var(--font-display); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-2); margin-top: 32px; }

.pp-team { padding: 96px clamp(24px, 6vw, 96px); }
.pp-team h3 { font-family: var(--font-display); font-weight: 500; font-size: 14px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-2); margin: 0 0 32px 0; }
.pp-team__list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.pp-team__row { display: flex; flex-direction: column; gap: 4px; padding-top: 14px; border-top: 1px solid var(--ink); }
.pp-team__role { font-family: var(--font-display); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-2); }
.pp-team__name { font-size: 14px; color: var(--ink); line-height: 1.4; }
@media (max-width: 800px) { .pp-team__list { grid-template-columns: 1fr 1fr; } }

.pp-next { padding: 96px clamp(24px, 6vw, 96px); border-top: 1px solid var(--ink); }
.pp-next__head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 32px; }
.pp-next__nav { display: flex; gap: 16px; }
.pp-next__nav button { background: none; border: none; font-family: var(--font-display); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink); cursor: pointer; padding: 6px 0; border-bottom: 1px solid transparent; }
.pp-next__nav button:hover { border-color: var(--ink); color: var(--petrol); }

/* ═══ Studio page ═══ */
.studio__intro { display: grid; grid-template-columns: 460px 1fr; gap: clamp(24px, 6vw, 128px); padding: 96px clamp(24px, 6vw, 96px); align-items: start; }
.studio__intro .portrait { aspect-ratio: 4/5; object-fit: cover; object-position: center; display: block; width: 100%; background-color: var(--bone); filter: grayscale(1) contrast(1.05); }
.studio__intro .portrait + .cap { margin-top: 16px; font-family: var(--font-mono); font-size: 11px; color: var(--fg-2); letter-spacing: 0.04em; }
.studio__intro .copy h2 { font-family: var(--font-display); font-weight: 300; font-size: clamp(32px, 4vw, 56px); line-height: 1.05; letter-spacing: -0.015em; margin: 0 0 24px 0; }
.studio__intro .copy h2 .ital { font-style: italic; font-weight: 200; }
.studio__intro .copy p { font-size: 16px; line-height: 1.75; margin: 0 0 18px 0; max-width: 640px; }
.studio__intro .copy .sig { font-family: var(--font-display); font-style: italic; font-weight: 300; font-size: 24px; margin-top: 24px; color: var(--petrol); }
@media (max-width: 900px) { .studio__intro { grid-template-columns: 1fr; gap: 48px; } }

.studio__cv { padding: 96px clamp(24px, 6vw, 96px); border-top: 1px solid var(--ink); background: var(--paper-2); }
.studio__cv h3 { font-family: var(--font-display); font-weight: 500; font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-2); margin: 0 0 32px 0; }
.studio__cv ol { list-style: none; padding: 0; margin: 0; max-width: 920px; }
.studio__cv li { display: grid; grid-template-columns: 100px 1fr; gap: 32px; padding: 18px 0; border-top: 1px solid var(--ink); }
.studio__cv li:last-child { border-bottom: 1px solid var(--ink); }
.studio__cv .yr { font-family: var(--font-mono); font-size: 13px; color: var(--ink); padding-top: 4px; }
.studio__cv .what { font-family: var(--font-body); font-size: 16px; line-height: 1.5; }
.studio__cv .what em { font-style: italic; color: var(--fg-2); display: block; font-size: 13px; margin-top: 4px; }

.network { padding: 96px clamp(24px, 6vw, 96px); }
.network h3 { font-family: var(--font-display); font-weight: 500; font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-2); margin: 0 0 24px 0; }
.network__head { font-family: var(--font-display); font-weight: 300; font-size: clamp(28px, 3.4vw, 48px); line-height: 1.1; letter-spacing: -0.015em; max-width: 1100px; margin: 0 0 56px 0; }
.network__head .ital { font-style: italic; font-weight: 200; color: var(--petrol); }
.network__list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--ink); }
.network__item { padding: 28px 24px 28px 0; border-bottom: 1px solid var(--ink); border-right: 1px solid var(--ink); padding-left: 24px; }
.network__item:nth-child(3n) { border-right: none; }
.network__item .role { font-family: var(--font-display); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-2); }
.network__item h4 { font-family: var(--font-display); font-weight: 500; font-size: 22px; margin: 8px 0 6px 0; color: var(--ink); }
.network__item p { font-size: 13px; color: var(--fg-2); margin: 0; line-height: 1.5; }
@media (max-width: 800px) { .network__list { grid-template-columns: 1fr; } .network__item { border-right: none; } }

/* ═══ Services page ═══ */
.svc__pillars { padding: 96px clamp(24px, 6vw, 96px); display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; border-bottom: 1px solid var(--ink); }
.svc__pillar { display: flex; flex-direction: column; gap: 14px; }
.svc__pillar .num { font-family: var(--font-display); font-weight: 200; font-size: 80px; line-height: 0.9; color: var(--petrol); }
.svc__pillar h3 { font-family: var(--font-display); font-weight: 500; font-size: 22px; margin: 0; }
.svc__pillar p { font-size: 14px; line-height: 1.6; color: var(--fg-2); margin: 0; }
.svc__pillar ul { list-style: none; padding: 0; margin: 12px 0 0 0; display: flex; flex-direction: column; gap: 8px; }
.svc__pillar li { font-size: 13px; padding-left: 16px; position: relative; }
.svc__pillar li::before { content: '—'; position: absolute; left: 0; color: var(--fg-3); }
@media (max-width: 900px) { .svc__pillars { grid-template-columns: 1fr; gap: 48px; } }

.svc__phases { padding: 96px clamp(24px, 6vw, 96px); background: var(--ink); color: var(--paper); }
.svc__phases h2 { color: var(--paper); margin: 0 0 16px 0; }
.svc__phases .lead { color: rgba(255,255,255,0.8); max-width: 720px; margin-bottom: 64px; }
.svc__phases .grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid rgba(255,255,255,0.25); }
.svc__phases .ph { padding: 32px 24px 32px 0; border-bottom: 1px solid rgba(255,255,255,0.25); border-right: 1px solid rgba(255,255,255,0.25); padding-left: 24px; }
.svc__phases .ph:nth-child(3n) { border-right: none; }
.svc__phases .ph .lp { font-family: var(--font-display); font-weight: 200; font-size: 64px; line-height: 1; color: var(--paper); }
.svc__phases .ph h4 { font-family: var(--font-display); font-weight: 700; font-size: 17px; letter-spacing: 0.04em; text-transform: uppercase; margin: 12px 0 6px 0; }
.svc__phases .ph p { font-size: 13px; color: rgba(255,255,255,0.7); margin: 0; line-height: 1.55; }
@media (max-width: 900px) { .svc__phases .grid { grid-template-columns: 1fr; } .svc__phases .ph { border-right: none; } }

.svc__faq { padding: 96px clamp(24px, 6vw, 96px); }
.svc__faq h2 { margin: 0 0 48px 0; }
.faq { border-top: 1px solid var(--ink); }
.faq__item { border-bottom: 1px solid var(--ink); }
.faq__q { width: 100%; background: none; border: none; cursor: pointer; padding: 24px 0; text-align: left; display: flex; justify-content: space-between; align-items: center; gap: 24px; font-family: var(--font-display); font-weight: 400; font-size: clamp(18px, 2vw, 26px); line-height: 1.3; color: var(--ink); }
.faq__q .pl { font-family: var(--font-mono); font-size: 18px; color: var(--fg-2); transition: transform 240ms var(--ease); }
.faq__item.open .faq__q .pl { transform: rotate(45deg); }
.faq__a { max-height: 0; overflow: hidden; transition: max-height 320ms var(--ease); }
.faq__item.open .faq__a { max-height: 600px; }
.faq__a .inner { padding: 0 0 28px 0; max-width: 760px; font-size: 15px; line-height: 1.7; color: var(--fg-2); }

/* ═══ Contact page ═══ */
.cnt { padding: 96px clamp(24px, 6vw, 96px); }
.cnt__grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: clamp(32px, 6vw, 96px); }
.cnt__side h2 { font-family: var(--font-display); font-weight: 300; font-size: clamp(32px, 4vw, 56px); line-height: 1.05; letter-spacing: -0.02em; margin: 0 0 24px 0; }
.cnt__side h2 .ital { font-style: italic; font-weight: 200; }
.cnt__side p { font-size: 16px; line-height: 1.7; max-width: 460px; margin: 0 0 24px 0; }
.cnt__details { margin-top: 48px; display: flex; flex-direction: column; gap: 28px; }
.cnt__details .row { padding-top: 14px; border-top: 1px solid var(--ink); }
.cnt__details .lbl { font-family: var(--font-display); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-2); margin-bottom: 6px; }
.cnt__details .val { font-size: 15px; line-height: 1.5; }
.cnt__details .val a { color: var(--ink); border-bottom: 1px solid var(--ink); cursor: pointer; }

.cnt__form { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 32px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field--full { grid-column: 1 / -1; }
.field .lbl { font-family: var(--font-display); font-weight: 500; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-2); }
.field input, .field select, .field textarea { font-family: var(--font-body); font-size: 16px; color: var(--ink); background: transparent; border: none; border-bottom: 1px solid var(--ink); padding: 10px 0; border-radius: 0; outline: none; resize: none; }
.field input:focus, .field select:focus, .field textarea:focus { border-bottom-color: var(--petrol); }
.cnt__choices { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 14px; padding-top: 24px; border-top: 1px solid var(--ink); }
.cnt__choices .lbl { font-family: var(--font-display); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-2); }
.cnt__choices .opts { display: flex; gap: 8px; flex-wrap: wrap; }
.cnt__submit { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; padding-top: 24px; }
.cnt__submit .note { font-size: 12px; color: var(--fg-2); max-width: 420px; line-height: 1.5; }
.cnt__sent { grid-column: 1 / -1; padding: 48px 32px; border: 1px solid var(--ink); background: var(--paper-2); display: flex; flex-direction: column; gap: 12px; }
@media (max-width: 800px) { .cnt__grid, .cnt__form { grid-template-columns: 1fr; } }

/* ═══ Impressum page ═══ */
.impr { padding: 64px clamp(24px, 6vw, 96px) 128px; }
.impr__body { max-width: 760px; display: flex; flex-direction: column; gap: 0; }
.impr__block { padding: 32px 0; border-top: 1px solid var(--hairline); }
.impr__block:first-child { border-top: none; padding-top: 0; }
.impr__block h2 { font-family: var(--font-display); font-weight: 300; font-size: clamp(22px, 3vw, 32px); letter-spacing: -0.01em; margin: 0 0 4px 0; }
.impr__block .eyebrow { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-2); margin: 0 0 16px 0; }
.impr__block p { font-size: 15px; line-height: 1.75; color: var(--fg-1); margin: 0 0 12px 0; }
.impr__block p:last-child { margin-bottom: 0; }
.impr__block a { color: var(--petrol); text-decoration: none; }
.impr__block a:hover { text-decoration: underline; }
.impr__divider { height: 1px; background: var(--ink); margin: 16px 0; }

/* ═══ Mobile (≤800px) — Prio 2 ═══ */
@media (max-width: 800px) {
  section { padding: clamp(48px, 8vw, 80px) 0; }

  /* Hero */
  .hero__content { padding-top: clamp(72px, 18vh, 120px); }
  .hero__row { flex-direction: column; gap: 24px; }

  /* Prozess */
  .process__list { grid-template-columns: 1fr; }
  .process__step { border-right: none !important; border-bottom: 1px solid rgba(255,255,255,0.25); }
  .process__step:last-child { border-bottom: none; }

  /* Seiten-Hero */
  .page-hero__row { grid-template-columns: 1fr; gap: 24px; }

  /* Projekt-Detail Meta */
  .pp-hero__sub { gap: 16px; }
  .pp-hero__sub .item { min-width: 40%; }
  .pp-meta__row { grid-template-columns: 1fr 1fr; }

  /* Galerie */
  .pp-gallery__row2 { grid-template-columns: 1fr; }
  .pp-gallery__row3 { grid-template-columns: 1fr 1fr; }

  /* Featured rows */
  .feat__head { flex-direction: column; align-items: flex-start; gap: 24px; }

  /* Footer */
  .ftr__top { flex-direction: column; gap: 40px; }
  .ftr__contact { flex-direction: column; gap: 24px; }
  .ftr__cols { grid-template-columns: 1fr 1fr; }
  .ftr__bottom { flex-direction: column; gap: 12px; }
}

@media (max-width: 600px) {
  /* Statistiken */
  .stats__row { grid-template-columns: 1fr; gap: 16px; }

  /* Galerie Zeile 3 */
  .pp-gallery__row3 { grid-template-columns: 1fr; }

  /* Footer Spalten */
  .ftr__cols { grid-template-columns: 1fr; }

  /* News Kacheln */
  .press__list { grid-template-columns: 1fr; }
  .press__item { border-right: none; }
}

/* ═══ Mobile (≤800px) — Prio 3 polish ═══ */
@media (max-width: 800px) {
  /* Page-hero: reduce top padding (header is 72px on solid) */
  .page-hero { padding-top: 120px; padding-bottom: 56px; }

  /* Project narr + quote: tighter vertical padding */
  .pp-narr { padding-top: 56px; padding-bottom: 56px; }
  .pp-quote { padding-top: 56px; padding-bottom: 56px; }

  /* Hero scroll indicator: hide on small screens, no space */
  .hero__scroll { display: none; }

  /* FAQ: allow taller answers (long text won't get clipped) */
  .faq__item.open .faq__a { max-height: 3000px; }

  /* Studio intro: stack portrait + copy */
  .studio__intro { flex-direction: column; }
  .studio__intro .portrait { width: 100%; aspect-ratio: 3/2; }
}

/* ═══ Static hero wrapper — shown before React mounts, hidden after ═══ */
#static-hero-wrap {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 500px;
  overflow: hidden;
  background: #1A1A1A;
}
/* The first (visible) img fills the container */
#static-hero-wrap > img:first-of-type {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* ═══ SEO region text block ═══ */
.seo-region {
  padding: 64px 0;
  background: var(--paper-2, #F4F3EF);
  border-top: 1px solid var(--stone-100, #E8E7E3);
}
.seo-region__inner {
  max-width: 760px;
}
.seo-region .body {
  line-height: 1.75;
  color: var(--fg-2, #555);
}
.seo-region .body strong {
  color: var(--fg-1, #1A1A1A);
  font-weight: 600;
}

/* ═══ Homepage FAQ section ═══ */
.hp-faq {
  padding: 80px 0;
  border-top: 1px solid var(--stone-100, #E8E7E3);
}
.hp-faq__grid {
  margin-top: 48px;
  display: grid;
  gap: 40px;
  grid-template-columns: repeat(2, 1fr);
}
.hp-faq__q {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  margin: 0 0 10px;
  color: var(--fg-1, #1A1A1A);
}
.hp-faq__a {
  margin: 0;
  color: var(--fg-2, #555);
  font-size: 14px;
  line-height: 1.7;
}

@media (max-width: 900px) {
  .hp-faq__grid { grid-template-columns: 1fr; }
}