/* ============================================================
   Markus Bauer Dienstleistungen — Design Tokens
   ============================================================ */
@font-face {
  font-family: "Fraunces";
  src: url("../fonts/fraunces-variable.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Work Sans";
  src: url("../fonts/worksans-variable.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("../fonts/jetbrainsmono-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* colors — natural forest palette */
  --forest-deep: #14211a;
  --forest-pine: #1f3327;
  --forest-pine-light: #2a4234;
  --moss: #64805a;
  --moss-light: #96ac82;
  --bark: #6b4a34;
  --bark-dark: #4a3324;
  --resin: #d99a4e;
  --birch: #f3ede0;
  --birch-dim: #e6dfd0;
  --fog: #aebca2;
  --ink: #131a14;

  --bg: var(--forest-deep);
  --bg-alt: var(--forest-pine);
  --text-on-dark: var(--birch);
  --text-muted-on-dark: var(--fog);
  --text-on-light: var(--ink);
  --text-muted-on-light: #3a4a3d;

  --font-display: "Fraunces", "Iowan Old Style", ui-serif, Georgia, serif;
  --font-body: "Work Sans", "Segoe UI", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --container: 1180px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --radius: 3px;

  /* motion — strong custom curves; UI feedback stays under 250ms,
     only reveals/entrances (seen once) are allowed to take longer */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --dur-press: 140ms;
  --dur-fast: 200ms;
  --dur-med: 700ms;
  --dur-slow: 1100ms;
}

/* ============================================================
   Reset
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
/* Motion lives in src/animation (GSAP + three.js). CSS keeps only
   micro-interaction transitions (hover / press / state); every scroll and
   entrance animation is authored in JS so it shares one token set and one
   reduced-motion switch. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--text-on-dark);
  font-family: var(--font-body);
  font-size: clamp(1rem, 2vw, 1.125rem);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
picture { display: contents; } /* the <img> stays the layout box */
a { color: inherit; }
h1, h2, h3, h4 { margin: 0; font-family: var(--font-display); font-weight: 600; letter-spacing: -0.01em; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }

::selection { background: var(--resin); color: var(--ink); }

:focus-visible {
  outline: 2px solid var(--resin);
  outline-offset: 3px;
}
/* resin is under 3:1 on birch; light surfaces get a dark ring (WCAG 1.4.11) */
.section-light :focus-visible, .legal-body :focus-visible { outline-color: var(--bark-dark); }

.container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--resin);
}
.eyebrow::before {
  content: "";
  width: 2em;
  height: 2px;
  background: currentColor;
  opacity: 0.9;
}

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--birch);
  color: var(--ink);
  padding: 0.75em 1.25em;
  z-index: 200;
  border-radius: var(--radius);
}
.skip-link:focus { left: var(--gutter); top: var(--gutter); }

/* ============================================================
   Header
   ============================================================ */
.site-header {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 100;
  padding: 1.4rem 0;
  box-shadow: 0 0px 0px rgba(0,0,0,0);
  transition: box-shadow 250ms ease;
}
/* The frosted bar lives on a pseudo-element: backdrop-filter on the header
   itself would make it the containing block of the fixed mobile menu. */
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(20, 33, 26, 0.9);
  backdrop-filter: blur(10px);
  opacity: 0;
  transition: opacity 250ms ease;
  pointer-events: none;
}
.site-header.is-scrolled {
  padding: 1.4rem 0;
  box-shadow: 0 8px 30px -12px rgba(0,0,0,0.5);
}
.site-header.is-scrolled::before { opacity: 1; }
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}
.brand {
  position: relative;
  z-index: 101;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.15rem;
  letter-spacing: -0.01em;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}
.brand span {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  color: var(--moss-light);
  text-transform: uppercase;
  font-weight: 400;
}
.main-nav ul { display: flex; gap: 2.2rem; align-items: center; }
.main-nav a {
  text-decoration: none;
  font-size: 0.92rem;
  color: var(--birch-dim);
  position: relative;
  padding-bottom: 4px;
}
.main-nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--resin);
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 250ms var(--ease-out);
}
.main-nav a:focus-visible::after, .main-nav a.is-active::after { transform: scaleX(1); transform-origin: left center; }
@media (hover: hover) and (pointer: fine) {
  .main-nav a:hover::after { transform: scaleX(1); transform-origin: left center; }
}
.header-call {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  text-decoration: none;
  border: 1px solid var(--moss);
  padding: 0.55em 1.1em;
  border-radius: var(--radius);
  transition: background-color var(--dur-fast) ease, border-color var(--dur-fast) ease, transform var(--dur-press) var(--ease-out);
  white-space: nowrap;
}
@media (hover: hover) and (pointer: fine) {
  .header-call:hover { background: var(--moss); border-color: var(--moss); }
}
.header-call:active { transform: scale(0.97); }
.header-call svg { width: 15px; height: 15px; flex: none; }
.nav-toggle { display: none; position: relative; z-index: 101; transition: transform var(--dur-press) var(--ease-out); }
.nav-toggle:active { transform: scale(0.94); }
.nav-toggle svg line {
  transition: transform 250ms var(--ease-in-out), opacity 150ms ease;
  transform-origin: 12px 12px;
}
.nav-toggle[aria-expanded="true"] svg line:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] svg line:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] svg line:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

body.nav-locked { overflow: hidden; }

/* ============================================================
   Buttons
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.95em 1.8em;
  min-height: 48px;
  border-radius: var(--radius);
  text-decoration: none;
  font-weight: 500;
  font-size: 0.98rem;
  transition: transform var(--dur-fast) var(--ease-out), background-color var(--dur-fast) ease, border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
}
.btn-primary {
  background: var(--resin);
  color: var(--ink);
}
.btn-ghost {
  border: 1px solid var(--fog);
  color: var(--birch);
}
.btn-ghost:focus-visible { border-color: var(--birch); background: rgba(243,237,224,0.12); }
.btn-arrow { display: inline-block; transition: transform var(--dur-fast) var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 24px -10px rgba(217,154,78,0.55); }
  .btn-ghost:hover { border-color: var(--birch); background: rgba(243,237,224,0.12); transform: translateY(-2px); }
  .btn:hover .btn-arrow { transform: translateX(4px); }
}
/* press feedback wins over hover lift; fast in, same curve out */
.btn:active { transform: scale(0.97); transition-duration: var(--dur-press); }

/* ============================================================
   Hero — chapter 1. With 3D the forest renders behind it on the shared
   canvas; without 3D (no WebGL, reduced motion, save-data) the owner's
   photo is the backdrop.
   ============================================================ */
.hero {
  position: relative;
  height: 100vh;
  height: 100dvh;
  min-height: 560px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  isolation: isolate;
}
.hero-pin > .hero { width: 100%; } /* the pin spacer becomes a flex box */
.hero-fallback {
  position: absolute; inset: 0;
  z-index: -2;
  width: 100%; height: 100%;
}
.hero::after {
  content: "";
  position: absolute; inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(20,33,26,0.5) 0%, rgba(20,33,26,0.2) 35%, rgba(20,33,26,0.8) 100%),
    linear-gradient(90deg, rgba(20,33,26,0.7) 0%, rgba(20,33,26,0.05) 60%);
}

/* Chainsaw, frame-filling: hero.js draws it as one continuous line with a
   pen tip, then it recedes to this resting state behind the copy (also the
   state without the animation layer). */
.hero-saw {
  position: absolute;
  left: 50%; top: 44%;
  width: min(1560px, 106vw);
  transform: translate(-50%, -50%) rotate(-4deg);
  pointer-events: none;
}
.hero-saw svg {
  display: block;
  width: 100%; height: auto;
  overflow: visible;
  fill: none;
  stroke: var(--birch);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.2;
}
.hero-saw .saw-chain { stroke: var(--resin); stroke-width: 2.5; }
.hero-saw .saw-pen { opacity: 0; fill: var(--resin); stroke: none; }
.hero-saw .saw-pen circle:first-child { opacity: 0.25; }

.hero-content {
  position: relative;
  width: 100%;
  padding-block: clamp(6rem, 16vw, 9rem) clamp(3.5rem, 8vw, 5rem);
}
/* the copy keeps its measure but aligns with the header's left edge */
.hero-content > * { max-width: 760px; }
.hero-eyebrow { margin-bottom: 1.4rem; }
.hero h1 {
  font-size: clamp(2.6rem, 6vw, 4.6rem);
  line-height: 1.03;
  color: var(--birch);
}
.hero h1 em {
  font-style: normal;
  color: var(--resin);
}
/* SplitText word masks: room for umlauts and descenders */
.hero h1 .word-mask { padding-block: 0.1em 0.08em; margin-block: -0.1em -0.08em; }
.hero-sub {
  margin-top: 1.6rem;
  max-width: 46ch;
  font-size: 1.1rem;
  color: var(--birch-dim);
}
.hero-actions {
  margin-top: 2.4rem;
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}
.hero-scroll {
  position: absolute;
  right: var(--gutter);
  bottom: 2.2rem;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fog);
  text-decoration: none;
}
.hero-scroll-line {
  width: 1px; height: 34px;
  background: linear-gradient(var(--fog), transparent);
  position: relative;
  overflow: hidden;
}
.hero-scroll-line::before {
  content: "";
  position: absolute; inset: 0;
  background: var(--resin);
  transform: translateY(var(--pulse, -100%));
}
/* With motion the hero copy ([data-enter]) waits for the chainsaw outline
   to be traced: hidden only until the animation layer takes it over (or
   fails to load: .motion-failed), and the failsafes guarantee neither copy
   nor outline can stay hidden. */
@media (prefers-reduced-motion: no-preference) {
  .js:not(.motion-failed) [data-enter] { visibility: hidden; animation: enterFailsafe 0s linear 3.5s forwards; }
  /* headline and subline stay in the accessibility tree: opacity only */
  .js:not(.motion-failed) [data-enter="text"] { visibility: visible; opacity: 0; animation-name: textFailsafe; }
  .js:not(.motion-failed) .hero-saw { visibility: hidden; animation: enterFailsafe 0s linear 3.5s forwards; }
}
@keyframes enterFailsafe { to { visibility: visible; } }
@keyframes textFailsafe { to { opacity: 1; } }

/* Scroll-reveal start states. Written by src/animation/scroll/reveal.js
   as attributes; distances come from the JS motion tokens. */
@media (prefers-reduced-motion: no-preference) {
  .motion-ready [data-reveal="up"] { opacity: 0; transform: translateY(var(--reveal-m)); }
  .motion-ready [data-reveal="words"] { opacity: 0; }
  .motion-ready [data-reveal="photo"] { opacity: 0; transform: translateY(var(--reveal-l)); }
  .motion-ready [data-reveal="photo"] img { transform: scale(1.22); }
  .motion-ready [data-reveal="pop"] { opacity: 0; transform: scale(0.6); }
  .motion-ready [data-reveal="slide"] { opacity: 0; transform: translateX(calc(var(--reveal-s) * -1.5)); }
}

/* ============================================================
   Shared 3D canvas + chapter UI
   ============================================================ */
.scene-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100vh;
  height: 100lvh;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  display: block;
}
main, .site-footer { position: relative; z-index: 1; }

/* With the forest running behind, the dark chapters become scrims over it.
   Opacity is tuned per chapter so copy stays at body-text contrast. */
.has-3d .hero-fallback { opacity: 0; transition: opacity 1.2s ease; }
.has-3d .hero:not(.is-scene-ready) .hero-fallback { opacity: 1; }
.has-3d .section-dark { background: linear-gradient(180deg, rgba(20,33,26,0.86), rgba(20,33,26,0.78)); }
.has-3d #galerie { background: linear-gradient(180deg, rgba(20,33,26,0.7), rgba(20,33,26,0.55)); }
.has-3d #kontakt { background: linear-gradient(180deg, rgba(20,33,26,0.62), rgba(20,33,26,0.8)); }
.has-3d .ring-divider { background: transparent; }

.chapter-progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 2px;
  z-index: 120;
  background: var(--resin);
  transform: scaleX(0);
  transform-origin: left center;
  pointer-events: none;
}
.motion-toggle {
  position: fixed;
  left: var(--gutter);
  bottom: 1.2rem;
  z-index: 60;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 36px;
  padding: 0.4rem 0.8rem;
  border: 1px solid rgba(174,188,162,0.35);
  border-radius: var(--radius);
  background: rgba(20,33,26,0.72);
  color: var(--fog);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: color var(--dur-fast) ease, border-color var(--dur-fast) ease, transform var(--dur-press) var(--ease-out);
}
.motion-toggle[hidden] { display: none; }
.motion-toggle svg { width: 12px; height: 12px; }
.motion-toggle .icon-play,
.motion-toggle[aria-pressed="true"] .icon-pause { display: none; }
.motion-toggle[aria-pressed="true"] .icon-play { display: block; }
/* small screens: icon only, out of the reading column; the label stays
   available to assistive tech */
@media (max-width: 900px) {
  .motion-toggle { left: auto; padding: 0; justify-content: center; }
  .motion-toggle span {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap;
  }
}
.motion-toggle:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) {
  .motion-toggle:hover { color: var(--birch); border-color: var(--fog); }
}

/* ============================================================
   Sections generic
   ============================================================ */
section { position: relative; }
/* anchor jumps clear the fixed header where the section's own top
   padding is shorter than it (phones); the pinned filmstrip must land
   exactly on its pin start, so it is excluded */
.section, .worklog:not(.is-pinned) { scroll-margin-top: 2.5rem; }
.section {
  padding-block: clamp(4.5rem, 9vw, 7.5rem);
}
.section-light {
  background: var(--birch);
  color: var(--text-on-light);
}
.section-light .eyebrow { color: var(--bark); }
.section-head {
  max-width: 640px;
  margin-bottom: clamp(2.5rem, 6vw, 4rem);
}
.section-head h2 {
  font-size: clamp(2.4rem, 5vw, 3.4rem);
  margin-top: 0.6rem;
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-weight: 700;
}
.section-light h2 { color: var(--forest-pine); }
.section-lede {
  margin-top: 1.2rem;
  font-size: 1.08rem;
  max-width: 56ch;
}
.section-dark .section-lede { color: var(--birch-dim); }
.section-light .section-lede { color: var(--text-muted-on-light); }

/* ============================================================
   Tree-ring divider (signature structural motif)
   ============================================================ */
.ring-divider {
  display: flex;
  justify-content: center;
  padding-block: clamp(1.5rem, 4vw, 2.5rem);
  background: inherit;
}
.ring-divider svg { width: clamp(52px, 12vw, 76px); height: clamp(52px, 12vw, 76px); opacity: 0.9; }
.ring-divider circle {
  fill: none;
  stroke: var(--moss);
  stroke-width: 1;
  stroke-dasharray: var(--c, 220);
  stroke-dashoffset: 0;
  transform: rotate(-90deg);
  transform-origin: 38px 38px;
}
.section-light .ring-divider circle { stroke: var(--bark); opacity: 0.6; }

/* ============================================================
   Photo treatment (duotone lens — signature)
   ============================================================ */
.photo {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--forest-pine);
  transition: box-shadow 500ms ease;
}
.photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(0.88) contrast(1.16) brightness(0.93);
  transition: filter 500ms ease, transform var(--dur-slow) var(--ease-out);
}
/* portrait shot in a landscape frame: keep the subject in the upper third */
.photo img.photo-focus-top { object-position: 50% 30%; }
.photo::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(155deg, rgba(31,51,39,0.62), rgba(107,74,52,0.36));
  mix-blend-mode: multiply;
  opacity: 1;
  transition: opacity 500ms ease;
  pointer-events: none;
}
.photo:focus-within::after { opacity: 0.16; }
/* hover "lifts the lens" — gated so a tap on a phone doesn't stick it */
@media (hover: hover) and (pointer: fine) {
  .photo:hover { box-shadow: 0 24px 48px -12px rgba(0,0,0,0.4); }
  .photo:hover::after { opacity: 0.16; }
  .photo:hover img { filter: saturate(1.05) contrast(1.05) brightness(1.02); transform: scale(1.04); }
}
.photo-caption {
  position: absolute;
  left: 0.9rem; bottom: 0.8rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--forest-deep);
  background: var(--resin);
  padding: 0.4em 0.7em;
  border-radius: 2px;
  box-shadow: 0 8px 20px -6px rgba(217,154,78,0.5);
}

/* ============================================================
   Services
   ============================================================ */
.services { display: flex; flex-direction: column; gap: clamp(3rem, 6vw, 4.5rem); }
.service {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.service:nth-child(even) .service-media { order: 2; }
.service:nth-child(even) .service-text { order: 1; }
.service-text { position: relative; }
.service-media {
  aspect-ratio: 4 / 3;
  box-shadow: 0 30px 60px -20px rgba(0,0,0,0.55);
}
.service-tags {
  display: flex; flex-wrap: wrap; gap: 0.6rem;
  margin-top: 1.4rem;
}
.service-tags li {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 0.45em 0.9em;
  border: 1.5px solid var(--moss);
  border-radius: 2px;
  color: var(--moss-light);
  transition: border-color var(--dur-fast) ease, color var(--dur-fast) ease;
}
@media (hover: hover) and (pointer: fine) {
  .service:hover .service-tags li { border-color: var(--resin); color: var(--resin); }
  .service:hover .service-tags li:nth-child(2) { transition-delay: 30ms; }
  .service:hover .service-tags li:nth-child(3) { transition-delay: 60ms; }
  .service:hover .service-tags li:nth-child(4) { transition-delay: 90ms; }
  .service:hover .service-tags li:nth-child(5) { transition-delay: 120ms; }
}
.service h3 {
  font-size: clamp(1.9rem, 3.5vw, 2.6rem);
  color: var(--birch);
  letter-spacing: -0.015em;
}
.service p { margin-top: 1rem; color: var(--birch-dim); max-width: 48ch; font-size: 1.05rem; }

/* ============================================================
   About
   ============================================================ */
.about {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
}
.about-media {
  aspect-ratio: 3 / 4;
  position: relative;
}
.about-media .photo {
  position: absolute;
  inset: 0;
  box-shadow: 0 30px 60px -20px rgba(19,26,20,0.35);
}
.about-bracket {
  position: absolute;
  width: 64px; height: 64px;
  z-index: 2;
  pointer-events: none;
}
.about-bracket--tl {
  top: -14px; left: -14px;
  border-top: 2.5px solid var(--resin);
  border-left: 2.5px solid var(--resin);
  transform-origin: top left;
}
.about-bracket--br {
  bottom: -14px; right: -14px;
  border-bottom: 2.5px solid var(--resin);
  border-right: 2.5px solid var(--resin);
  transform-origin: bottom right;
}
.about-badge {
  position: absolute;
  left: -1rem;
  bottom: 1.6rem;
  z-index: 3;
  background: var(--forest-deep);
  color: var(--birch);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  padding: 0.6em 1em;
  border-radius: 2px;
  box-shadow: 0 14px 30px -10px rgba(0,0,0,0.4);
}
.about-text { position: relative; }
.about-text h2 {
  font-size: clamp(2.4rem, 5vw, 3.4rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.05;
  position: relative;
}
.about-text h2::before {
  content: "\201C";
  position: absolute;
  top: -3.6rem;
  left: -0.4rem;
  font-family: var(--font-display);
  font-size: clamp(7rem, 15vw, 12rem);
  font-weight: 700;
  color: rgba(107,74,52,0.1);
  line-height: 1;
  z-index: -1;
  pointer-events: none;
  user-select: none;
}
.about-text p { color: var(--text-muted-on-light); max-width: 54ch; font-size: 1.05rem; }
.about-text p + p { margin-top: 1.1rem; }
.about-meta {
  margin-top: 2.2rem;
  display: grid;
  gap: 1.1rem;
  border-top: 1px solid rgba(58,74,61,0.2);
  padding-top: 1.6rem;
}
.about-meta div {
  display: grid;
  grid-template-columns: 11rem 1fr;
  gap: 1rem;
  padding-left: 1rem;
  border-left: 2px solid rgba(217,154,78,0.4);
  transition: border-color var(--dur-fast) ease;
}
@media (hover: hover) and (pointer: fine) {
  .about-meta div:hover { border-left-color: var(--resin); }
}
.about-meta dt {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--bark);
  align-self: start;
  padding-top: 0.15rem;
}
.about-meta dd { margin: 0; font-weight: 600; font-size: 1.05rem; }

/* ============================================================
   Arbeitsalltag — the page's one change of pace.
   Default (reduced motion, no JS): a native swipe strip with
   scroll-snap. With motion, on every viewport: the animation layer adds
   .is-pinned, the section pins for its own scroll length and vertical
   scrolling drives the whole rail sideways, filmstrip-style. Whichever
   photo is nearest the centre "lifts the lens" — the duotone signature
   clears to true colour — and the counter below names it.
   ============================================================ */
.worklog {
  --worklog-inset: max(var(--gutter), calc((100% - var(--container)) / 2 + var(--gutter)));
  position: relative;
  background: var(--forest-deep);
}
.worklog-stage { padding-block: clamp(4.5rem, 9vw, 7.5rem); }

.worklog-head {
  padding-inline: var(--worklog-inset);
  margin-bottom: clamp(2.2rem, 5vw, 3.5rem);
}
.worklog-head h2 {
  font-size: clamp(3rem, 11vw, 6rem);
  font-weight: 700;
  line-height: 0.92;
  letter-spacing: -0.035em;
  color: var(--birch);
  text-wrap: balance;
}
.worklog-head h2 span { display: block; color: var(--resin); }
.worklog-head p {
  margin-top: 1.4rem;
  max-width: 34ch;
  font-size: 1.08rem;
  color: var(--birch-dim);
}
.worklog-cue { display: none; }

.worklog-strip {
  position: relative;
  display: flex;
  gap: clamp(1rem, 3vw, 2.5rem);
  margin: 0;
  padding: 0.25rem var(--worklog-inset) 0.5rem;
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--worklog-inset);
  scrollbar-width: none;
}
.worklog-strip::-webkit-scrollbar { display: none; }
.worklog-strip:focus-visible { outline-offset: -2px; }
.worklog-panel { flex: 0 0 auto; scroll-snap-align: start; }
.worklog-panel figure { margin: 0; width: max-content; }

.worklog-photo {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--forest-pine);
  box-shadow: 0 30px 60px -24px rgba(0,0,0,0.6);
}
/* one frame for every photo: same height, same 4:5 crop, so portrait and
   landscape shots read as one series */
.worklog-photo img {
  display: block;
  height: clamp(320px, 58vh, 560px);
  width: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  /* original colours: no duotone or overlay in the gallery */
  transform: scale(1.04);
  transition: transform 1400ms var(--ease-out);
}
.worklog-panel.is-active .worklog-photo img { transform: scale(1); }

/* caption never widens its photo: zero intrinsic width, then fill */
.worklog-panel figcaption {
  width: 0;
  min-width: 100%;
  margin-top: 1.3rem;
  transition: opacity 500ms var(--ease-out);
}
/* dimmed, but still at least 4.5:1 for the small caption text (WCAG 1.4.3) */
.js .worklog-panel figcaption { opacity: 0.8; }
.js .worklog-panel.is-active figcaption { opacity: 1; }
.worklog-tag {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--resin);
}
.worklog-panel h3 {
  margin-top: 0.4rem;
  font-size: clamp(1.4rem, 2.4vw, 2rem);
  line-height: 1.12;
  color: var(--birch);
  text-wrap: balance;
}
.worklog-panel p {
  margin-top: 0.55rem;
  max-width: 40ch;
  font-size: 0.98rem;
  color: var(--birch-dim);
}

.worklog-progress {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  margin-top: clamp(1.8rem, 4vw, 2.6rem);
  padding-inline: var(--worklog-inset);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fog);
}
.worklog-count { font-variant-numeric: tabular-nums; white-space: nowrap; }
.worklog-count b { font-weight: 400; color: var(--birch); }
.worklog-bar {
  flex: 0 1 240px;
  height: 1px;
  background: rgba(174,188,162,0.25);
  overflow: hidden;
}
.worklog-bar i {
  display: block;
  height: 100%;
  background: var(--resin);
  transform: scaleX(0);
  transform-origin: left center;
}
.worklog-label { color: var(--resin); white-space: nowrap; }

@media (max-width: 700px) {
  .worklog-photo img {
    width: 78vw;
    height: auto;
    max-height: 68vh;
    aspect-ratio: 4 / 5;
    object-fit: cover;
  }
  .worklog-bar { flex: 1 1 auto; }
}

/* ---- pinned filmstrip (desktop; GSAP pins .worklog, scrubs the rail) ---- */
.worklog.is-pinned .worklog-stage {
  position: relative;
  height: 100vh;
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.worklog.is-pinned .worklog-rail {
  display: flex;
  align-items: center;
  gap: clamp(4rem, 8vw, 9rem);
  width: max-content;
  padding: 3.5rem var(--gutter) 0 var(--worklog-inset);
}
/* --worklog-inset is computed against the sticky stage, not the rail */
.worklog.is-pinned .worklog-rail { padding-left: max(var(--gutter), calc((100vw - var(--container)) / 2 + var(--gutter))); }
.worklog.is-pinned .worklog-head {
  flex: 0 0 auto;
  width: min(50vw, 660px);
  margin: 0;
  padding: 0;
}
.worklog.is-pinned .worklog-head h2 { font-size: clamp(3.6rem, 6.2vw, 6rem); }
.worklog.is-pinned .worklog-cue {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  margin-top: 2.6rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fog);
}
.worklog.is-pinned .worklog-cue svg { color: var(--resin); }
.worklog.is-pinned .worklog-strip {
  overflow: visible;
  scroll-snap-type: none;
  padding: 0;
  gap: clamp(3rem, 6vw, 7rem);
  align-items: flex-start; /* photos share a top line; captions hang below */
}
.worklog.is-pinned .worklog-photo img { width: auto; height: min(48vh, 560px); max-height: none; }
.worklog.is-pinned .worklog-panel h3 { font-size: clamp(1.4rem, 2vw, 1.8rem); }
.worklog.is-pinned .worklog-progress {
  position: absolute;
  left: 0; right: 0;
  bottom: clamp(4.2rem, 9vh, 5.5rem);
  margin: 0;
  padding-inline: max(var(--gutter), calc((100vw - var(--container)) / 2 + var(--gutter)));
}
/* phones and tablets: the same pinned filmstrip, sized to the small
   viewport (svh, so the collapsing address bar never crops a photo) and
   cleared below the fixed header; the heading becomes the first frame */
@media (max-width: 900px) {
  .worklog.is-pinned .worklog-stage { height: 100vh; height: 100svh; padding-top: 4.5rem; }
  .worklog.is-pinned .worklog-rail { gap: 3rem; padding-top: 0; align-items: center; }
  .worklog.is-pinned .worklog-head { width: min(78vw, 440px); }
  .worklog.is-pinned .worklog-head h2 { font-size: clamp(2.6rem, 11vw, 4rem); }
  .worklog.is-pinned .worklog-head p { font-size: 1rem; }
  .worklog.is-pinned .worklog-cue { margin-top: 1.6rem; }
  .worklog.is-pinned .worklog-strip { gap: 1.5rem; }
  .worklog.is-pinned .worklog-photo img { height: min(46svh, 520px); }
  .worklog.is-pinned .worklog-panel figcaption { margin-top: 1rem; }
  .worklog.is-pinned .worklog-panel h3 { font-size: 1.35rem; }
  .worklog.is-pinned .worklog-panel p { font-size: 0.92rem; }
  .worklog.is-pinned .worklog-progress { bottom: max(1.5rem, env(safe-area-inset-bottom)); }
  /* clear the fixed icon-only motion toggle (44px + 0.75rem) */
  .has-3d .worklog.is-pinned .worklog-progress { padding-right: calc(44px + 1.5rem); }
}
@media (max-height: 520px) and (orientation: landscape) {
  .worklog.is-pinned .worklog-photo img { height: 52svh; }
  .worklog.is-pinned .worklog-panel p { display: none; }
}

/* ============================================================
   Contact
   ============================================================ */
/* the call leads: wider, filled with resin; mail supports; the service
   area is information, not an action, so it carries no card chrome */
.contact-grid {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 1.4rem;
}
.contact-card {
  background: var(--forest-pine-light);
  border: 1px solid rgba(174,188,162,0.15);
  border-radius: var(--radius);
  padding: 2rem 1.8rem;
  text-decoration: none;
  display: block;
  min-height: 180px;
  transition: transform var(--dur-fast) var(--ease-out), border-color var(--dur-fast) ease, background-color var(--dur-fast) ease;
}
@media (hover: hover) and (pointer: fine) {
  .contact-card:hover { transform: translateY(-4px); border-color: var(--resin); background: var(--forest-pine); }
  .contact-card:hover .card-arrow svg { transform: translateX(4px); }
}
a.contact-card:active { transform: scale(0.98); transition-duration: var(--dur-press); }
.contact-card .eyebrow { margin-bottom: 0.9rem; }
.contact-card strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.4rem;
  color: var(--birch);
  margin-top: 0.1rem;
}
.contact-card span.detail {
  display: block;
  margin-top: 0.5rem;
  color: var(--fog);
  font-size: 0.92rem;
}
.contact-card .card-arrow {
  margin-top: 1.3rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--fog);
}
.contact-card .card-arrow svg { transition: transform var(--dur-fast) var(--ease-out); }

.contact-card--call {
  background: var(--resin);
  border-color: var(--resin);
  color: var(--ink);
  padding: clamp(2rem, 4vw, 2.8rem) clamp(1.8rem, 4vw, 2.6rem);
}
.contact-card--call .eyebrow { color: var(--bark-dark); }
.contact-card--call strong {
  color: var(--ink);
  font-size: clamp(2rem, 4.4vw, 3.1rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.contact-card--call span.detail { color: rgba(19,26,20,0.78); font-size: 1rem; }
.contact-card--call .card-arrow { color: var(--ink); font-size: 0.8rem; font-weight: 600; }
.contact-card--call:focus-visible { outline-color: var(--birch); }
@media (hover: hover) and (pointer: fine) {
  .contact-card--call:hover { background: #e3a75d; border-color: #e3a75d; box-shadow: 0 18px 36px -14px rgba(217,154,78,0.45); }
}

.contact-area {
  grid-column: 1 / -1;
  margin-top: 0.6rem;
  padding-top: 1.4rem;
  border-top: 1px solid rgba(174,188,162,0.18);
  color: var(--fog);
  font-size: 0.98rem;
}
.contact-area-label {
  margin-right: 0.8rem;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--resin);
}
.contact-area strong { color: var(--birch); font-weight: 600; }

/* ============================================================
   Footer
   ============================================================ */
.site-footer {
  background: var(--forest-deep);
  color: var(--text-on-dark); /* also on the light legal pages */
  border-top: 1px solid rgba(174,188,162,0.12);
  padding-block: 3rem;
}
.footer-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 2rem;
  flex-wrap: wrap;
  padding-bottom: 2.2rem;
  border-bottom: 1px solid rgba(174,188,162,0.12);
}
.footer-nav ul { display: flex; gap: 1.8rem; flex-wrap: wrap; }
.footer-nav a { text-decoration: none; color: var(--fog); font-size: 0.92rem; transition: color 150ms ease; }
.footer-nav a:focus-visible { color: var(--birch); }
@media (hover: hover) and (pointer: fine) {
  .footer-nav a:hover { color: var(--birch); }
}
.footer-bottom {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding-top: 1.6rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--fog);
  letter-spacing: 0.03em;
}

/* ============================================================
   Legal pages (Impressum / Datenschutz)
   ============================================================ */
.legal-page {
  background: var(--birch);
  color: var(--text-on-light);
  min-height: 100vh;
}
.legal-header {
  padding-block: clamp(6rem, 12vw, 8rem) 3rem;
  background: var(--forest-deep);
  color: var(--birch);
}
.legal-header .container { max-width: 780px; }
.legal-header a.back {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-decoration: none;
  color: var(--moss-light);
  display: inline-flex;
  gap: 0.5em;
  margin-bottom: 1.6rem;
}
.legal-header h1 { font-size: clamp(2rem, 4vw, 2.8rem); color: var(--birch); }
.legal-body { padding-block: clamp(3rem, 6vw, 4.5rem); }
.legal-body .container { max-width: 780px; }
.legal-body h2 {
  font-size: 1.3rem;
  color: var(--forest-pine);
  margin-top: 2.6rem;
  margin-bottom: 0.9rem;
}
.legal-body h2:first-child { margin-top: 0; }
.legal-body p, .legal-body li { color: var(--text-muted-on-light); margin-bottom: 0.9rem; }
.legal-body ul { list-style: disc; padding-left: 1.4rem; }
.legal-body a { color: var(--bark); }
.legal-body strong { color: var(--ink); }
.legal-placeholder {
  background: #fbeee0;
  border: 1px dashed var(--resin);
  color: #6b4a1f;
  padding: 0.15em 0.5em;
  border-radius: 2px;
  font-family: var(--font-mono);
  font-size: 0.85em;
}

/* ============================================================
   404 page
   ============================================================ */
.error-page {
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: var(--forest-deep);
  overflow: hidden;
  position: relative;
}
.error-content { position: relative; z-index: 1; max-width: 520px; padding-inline: var(--gutter); }
.error-code {
  font-family: var(--font-mono);
  color: var(--resin);
  letter-spacing: 0.1em;
  font-size: 0.85rem;
  margin-bottom: 1.2rem;
  display: block;
}
.error-page h1 {
  font-size: clamp(2.2rem, 5vw, 3.2rem);
  color: var(--birch);
  line-height: 1.15;
}
.error-page p { margin-top: 1.2rem; color: var(--birch-dim); font-size: 1.05rem; }
.error-actions { margin-top: 2.2rem; display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
.error-tree { position: absolute; inset: 0; z-index: 0; opacity: 0.5; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 900px) {
  .main-nav { display: none; }
  /* the call stays one thumb away on every screen: icon only, beside the
     menu; the number remains its accessible name */
  .site-header .container { gap: 0.6rem; }
  .brand { margin-right: auto; }
  .header-call {
    justify-content: center;
    width: 44px; height: 44px; padding: 0;
    background: var(--resin); border-color: var(--resin); color: var(--forest-deep);
  }
  .header-call svg { width: 19px; height: 19px; }
  .header-call span {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap;
  }
  .nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px; height: 44px;
    border: 1px solid var(--moss);
    border-radius: var(--radius);
  }
  .nav-toggle svg { width: 18px; height: 18px; }
  .main-nav.is-open {
    display: flex;
    position: fixed;
    inset: 0;
    z-index: 90;
    background: var(--forest-deep);
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .main-nav.is-open ul { flex-direction: column; gap: 0.6rem; align-items: center; }
  .main-nav.is-open a { display: block; padding: 0.55rem 1rem; font-size: 1.4rem; font-family: var(--font-display); }
  .service { grid-template-columns: 1fr; }
  .service:nth-child(even) .service-media, .service:nth-child(even) .service-text { order: initial; }
  .about-meta div { grid-template-columns: 1fr; gap: 0.2rem; }
  .motion-toggle { width: 44px; height: 44px; right: max(0.75rem, env(safe-area-inset-right)); bottom: max(0.75rem, env(safe-area-inset-bottom)); }
  /* portrait: the saw turns diagonal to fill the tall frame behind the copy */
  /* the shorter phone entrance (config.js trace.drawMobile) lets the
     failsafe release earlier too */
  .js:not(.motion-failed) [data-enter], .js:not(.motion-failed) .hero-saw { animation-delay: 2.5s; }
  .hero-saw { top: 46%; width: 118vh; width: 118svh; transform: translate(-50%, -50%) rotate(-62deg); }
}
/* tablet portrait keeps the portrait beside the text: stacked, a 3:4
   photo at full column width is taller than the screen */
@media (min-width: 701px) and (max-width: 900px) {
  .about { grid-template-columns: 0.8fr 1.2fr; gap: 2.5rem; }
  .about-text h2 { font-size: 2.3rem; }
  .service-media { aspect-ratio: 16 / 10; }
}
@media (max-width: 700px) {
  .about { grid-template-columns: 1fr; }
  .about-media { max-width: 440px; }
}
@media (max-width: 560px) {
  /* thumb reach: both hero actions become full-width, call on top */
  .hero-actions { flex-direction: column; align-items: stretch; max-width: 24rem; }
  .hero-actions .btn { justify-content: center; }
  .hero-scroll { display: none; }
  .contact-grid { grid-template-columns: 1fr; }
  .contact-card { min-height: 0; }
  .footer-nav ul { gap: 0.2rem 1.4rem; }
}
/* touch: links that are only text get a finger-sized hit area */
@media (pointer: coarse) {
  .brand { min-height: 44px; justify-content: center; }
  .footer-nav a { display: inline-flex; align-items: center; min-height: 44px; }
}
/* phones in landscape: the viewport is shorter than the hero's design
   floor, so the copy tightens instead of being cropped */
@media (max-height: 520px) and (orientation: landscape) {
  .site-header, .site-header.is-scrolled { padding: 0.7rem 0; }
  .hero { min-height: 100vh; min-height: 100dvh; height: auto; }
  .hero-content { padding-block: 4.75rem 1.75rem; }
  .hero-eyebrow { margin-bottom: 0.8rem; }
  .hero h1 { font-size: clamp(1.9rem, 8.5vh, 2.4rem); }
  .hero-sub { margin-top: 0.9rem; font-size: 1rem; }
  .hero-actions { margin-top: 1.4rem; flex-direction: row; max-width: none; }
  .hero-scroll { display: none; }
  .worklog-photo img { height: 62vh; height: 62dvh; width: auto; max-height: none; }
}

/* ============================================================
   Reduced motion — the animation layer does not run at all (see
   src/animation/index.js); only hover/press transitions remain here.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .btn:hover, .btn:active, .contact-card:hover, a.contact-card:active,
  .header-call:active, .nav-toggle:active, .motion-toggle:active, .photo:hover img,
  .btn:hover .btn-arrow, .contact-card:hover .card-arrow svg { transform: none !important; }
  .worklog-photo img { transform: none; }
}