/* Ben Renner Designs, V2 — site styles after the brand brief (r3, 2026-11-04)
   Tiefes Nachtblau und warmes Papierweiß tragen die Seite, Hirsch-Orange ist der eine Akzent auf der Aktion,
   Facetten-Türkis erscheint nur als kleines Detail. Headlines Magra, Text Inter (Bens Wahl vom 2026-11-04, ersetzt League Gothic und Carrois Gothic). */

@font-face {
  font-family: 'Magra';
  src: url('../fonts/magra-regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Magra';
  src: url('../fonts/magra-bold.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter-latin.woff2') format('woff2');
  font-weight: 300 700; font-style: normal; font-display: swap;
}

:root {
  --bg: #f2efe8;          /* Warmes Papierweiß */
  --surface: #e6e1d6;
  --ink: #0f1a2b;         /* Tiefes Nachtblau */
  --muted: #4a5466;
  --accent: #f28c28;      /* Hirsch-Orange, nur auf der einen Aktion */
  --accent-ink: #0f1a2b;
  --highlight: #2fb7b0;   /* Facetten-Türkis, nur als kleines Detail */
  --mist: #c5dce4;        /* Nebel des Kranich-Films, Grund hinter dem Video */
  --field-1: #0f1a2b;
  --field-1-ink: #f2efe8;
  --field-1-muted: #b8bfca;
  --field-2: #1b2a40;     /* Schieferblau */
  --field-2-ink: #f2efe8;
  --field-2-muted: #b8bfca;

  --font: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --display: 'Magra', 'Trebuchet MS', system-ui, sans-serif;

  /* five steps */
  --step-small: clamp(0.9375rem, 0.9rem + 0.12vw, 1rem);
  --step-body: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  --step-lead: clamp(1.25rem, 1.1rem + 0.7vw, 1.625rem);
  /* H2: one size for every section heading (and the closing line of the problem block), in rem */
  --fs-h2: clamp(1.75rem, 1.1rem + 2.4vw, 3.25rem);
  --step-head: var(--fs-h2);
  /* H3: the small headings in the problem, building-block and process sections */
  --fs-h3: clamp(1.5rem, 1.2rem + 1vw, 2.125rem);
  /* body text: the size of the hero intro, used for every running text block on the home page */
  --fs-body: var(--step-body);
  /* space between an H2 and the text block right below it */
  --gap-h2: 1.5rem;
  /* breathing room of the closing blocks: inquiry top and bottom, footer top */
  --pad-end: clamp(88px, 10vw, 140px);
  --step-display: clamp(6rem, 22vw, 26rem);

  --m: clamp(20px, 2.4vw, 36px);
  --gap: clamp(16px, 1.6vw, 24px);
  --section: clamp(112px, 14vw, 220px);

  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-spring: cubic-bezier(.34, 1.36, .64, 1);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
html.is-locked, html.is-locked body { overflow: hidden; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--step-body);
  line-height: 1.5;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
p, h1, h2, h3, h4, ul, ol, figure, blockquote, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button, input { font: inherit; color: inherit; }
::selection { background: var(--ink); color: var(--bg); }
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: var(--m); top: -100px; z-index: 100;
  background: var(--ink); color: var(--bg); padding: 12px 18px; border-radius: 999px; text-decoration: none;
}
.skip:focus { top: 12px; }

.wrap { padding-inline: var(--m); }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); }

/* type roles */
.t-small { font-size: var(--step-small); line-height: 1.45; }
.t-lead { font-size: var(--step-lead); line-height: 1.3; letter-spacing: -0.01em; }
.t-head, h2.t-head { font-size: var(--step-head); line-height: 1; font-family: var(--display); font-weight: 700; font-stretch: 100%; letter-spacing: -0.015em; }
.muted { color: var(--muted); }
/* every heading is Magra Bold in sentence case */
.hero-what, .svc h3, .proj h2, .skill h3, .about-clients h3, .contact h2, .legal h2, .vdlg-bar h2, .statement, .faq h3, .offer h3, .steps h3 {
  font-family: var(--display); font-weight: 700; letter-spacing: -0.015em; line-height: 1.02;
}
.svc h3, .proj h2, .skill h3, .faq h3, .offer h3, .steps h3 { font-size: clamp(1.375rem, 1.1rem + 0.9vw, 1.875rem); }
.about-clients h3, .vdlg-bar h2, .legal h2 { font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem); }
.contact h2 { font-size: var(--fs-h2); max-width: 18ch; }
.hero-what { font-size: clamp(2.6rem, 1.2rem + 3.6vw, 4.6rem); line-height: 1.02; max-width: 14ch; letter-spacing: -0.025em; }
.statement { font-size: clamp(2rem, 1.4rem + 2.2vw, 3.25rem); line-height: 1.05; }
/* short labels may be capitals with a little extra tracking (brand rule) */
.label { font-size: 0.8125rem; letter-spacing: 0.14em; text-transform: uppercase; }

/* ---------- buttons and links ---------- */
/* Buttons: plain fills; on hover they lift and the edge glows softly. */
.btn {
  --b: var(--ink); --bi: var(--bg);
  --glow: var(--highlight);
  position: relative; display: inline-flex; align-items: center; gap: 12px;
  min-height: 48px; padding: 0 8px 0 24px;
  border-radius: 999px; border: 0;
  background: var(--b); color: var(--bi);
  font-size: var(--step-small); font-weight: 600; letter-spacing: 0.005em;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: transform .5s var(--ease-spring), box-shadow .25s var(--ease-out);
}
.btn .dot {
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  background: var(--bi); color: var(--b);
  transition: transform .5s var(--ease-spring);
}
.btn .dot svg { width: 14px; height: 14px; }
@media (hover: hover) {
  .btn:hover, .btn:focus-visible { transform: translateY(-2px);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--glow) 45%, transparent), 0 0 22px color-mix(in srgb, var(--glow) 38%, transparent); }
  .btn:hover .dot { transform: translateX(3px) rotate(-45deg); }
}
.btn:active { transform: translateY(0) scale(.97); transition-duration: .12s; }
.btn-accent { --b: var(--accent); --bi: var(--accent-ink); --glow: #ffb062; }
.btn-plain { padding: 0 24px; }
.btn-light { --b: var(--bg); --bi: var(--ink); }

.link {
  position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
  font-weight: 600; text-decoration: none;
}
.link::after, .site-nav a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 10px; height: 2px;
  background: currentColor; transform-origin: right; transition: transform .45s var(--ease-out);
}
.link:hover::after { transform: scaleX(0); }

/* ---------- header ---------- */
.site-header {
  position: relative; z-index: 30;
  display: flex; align-items: center; gap: clamp(16px, 3vw, 48px);
  padding: 22px var(--m);
  font-size: var(--step-small);
}
.page-home .site-header, .page-nf .site-header { position: absolute; inset: 0 0 auto 0; }   /* the header floats over the crane */
.brand {
  text-decoration: none; font-family: var(--display); font-weight: 700; letter-spacing: -0.015em;
  font-size: 1.375rem; line-height: 1; white-space: nowrap;
  margin-right: auto;
}
.brand span { color: var(--ink); }
.brand em { font-style: normal; font-weight: 400; color: var(--muted); margin-left: 5px; }
.site-nav ul { display: flex; gap: clamp(18px, 2.6vw, 44px); }
.site-nav a { position: relative; display: inline-block; padding: 10px 0; text-decoration: none; font-weight: 500; }
.site-nav a::after { bottom: 4px; transform: scaleX(0); transform-origin: left; }
.site-nav a:hover::after, .site-nav a[aria-current="page"]::after { transform: scaleX(1); }
.menu-btn { display: none; }

@media (max-width: 860px) {
  .site-nav, .header-cta { display: none; }
  .menu-btn {
    display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px;
    border: 0; border-radius: 999px; background: var(--ink); color: var(--bg);
    font-size: var(--step-small); font-weight: 600; cursor: pointer; position: relative; z-index: 2;
  }
  .site-header.is-open .menu-btn { background: var(--bg); color: var(--ink); }
  .site-header.is-open .brand { color: var(--field-1-ink); position: relative; z-index: 2; }
  .site-header.is-open .brand span, .site-header.is-open .brand em { color: inherit; }
  .site-header.is-open .site-nav {
    display: flex; position: fixed; inset: 0; z-index: 1;
    background: var(--field-1); color: var(--field-1-ink);
    padding: 120px var(--m) var(--m); flex-direction: column; justify-content: space-between;
  }
  .site-header.is-open .site-nav ul { flex-direction: column; gap: 4px; }
  .site-header.is-open .site-nav a { font-size: clamp(2rem, 9vw, 2.75rem); font-family: var(--display); font-weight: 700; font-stretch: 100%; letter-spacing: -0.015em; line-height: 1.1; }
  .site-header.is-open .site-nav .nav-extra { display: block; }
}
/* compact bar: once the page has scrolled, the header slides back in as a 38px night-blue bar */
.site-header.is-compact {
  position: fixed; inset: 0 0 auto 0; height: 38px; padding-block: 0; gap: clamp(14px, 2.4vw, 36px);
  background: rgba(15, 26, 43, .82); -webkit-backdrop-filter: blur(12px) saturate(1.2); backdrop-filter: blur(12px) saturate(1.2);
  color: #fff; font-size: .8125rem; box-shadow: 0 1px 0 rgba(255, 255, 255, .06);
  animation: hdr-in .45s var(--ease-out) both;
}
@keyframes hdr-in { from { transform: translateY(-100%); } to { transform: none; } }
.site-header.is-compact .brand { font-size: 1.0625rem; }
.site-header.is-compact .brand span { color: #fff; }
.site-header.is-compact .brand em { color: rgba(255, 255, 255, .7); }
.site-header.is-compact .site-nav a { padding: 6px 0; color: #fff; }
.site-header.is-compact .site-nav a::after { bottom: 2px; height: 1.5px; }
.site-header.is-compact .header-cta { min-height: 28px; padding: 0 4px 0 14px; gap: 8px; font-size: .8125rem; }
.site-header.is-compact .header-cta .dot { width: 20px; height: 20px; }
.site-header.is-compact .header-cta .dot svg { width: 11px; height: 11px; }
.site-header.is-compact .menu-btn { min-height: 28px; padding: 0 14px; background: var(--bg); color: var(--ink); font-size: .8125rem; }
.site-header.is-compact.is-open { height: auto; padding-block: 22px; background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; animation: none; }
.site-header.is-compact.is-open .menu-btn { min-height: 44px; }
@media (prefers-reduced-motion: reduce) { .site-header.is-compact { animation: none; } }
.nav-extra { display: none; font-size: var(--step-body); color: var(--field-1-muted); }
.nav-extra a { font-size: inherit !important; font-weight: 500 !important; font-stretch: 100% !important; letter-spacing: 0 !important; }

/* ---------- home hero ---------- */
.hero {
  position: relative; height: 100vh; height: 100svh; min-height: 560px; /* taste-skill-ignore: 100vh is the fallback before svh */
  overflow: hidden; background: var(--mist);
}
.hero-media { position: absolute; inset: 0; will-change: clip-path; }
.hero-media video, .hero-media img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: var(--hx, 62%) 50%;   /* --hx: site.js keeps the crane left of the header button */
}
/* every 20 s the crane shakes the water off its head: a short clip over the still, shown only while it plays */
.hero-media .hero-idle { opacity: 0; transition: opacity 1.2s ease; }
.hero-media .hero-move { opacity: 0; transition: opacity .5s ease; }
.hero-media .hero-idle.is-on, .hero-media .hero-move.is-on { opacity: 1; }
/* the blink: a round window over the crane's eye; a lid cut from the feathers beside it slides down and up */
.hero-eye {
  position: absolute; left: 0; top: 0; border-radius: 50%; overflow: hidden; pointer-events: none; visibility: hidden;
  /* soft rim so the lid melts into the feathers */
  -webkit-mask-image: radial-gradient(circle, #000 55%, transparent 72%); /* taste-skill-ignore: a mask, not a visible gradient */
  mask-image: radial-gradient(circle, #000 55%, transparent 72%); /* taste-skill-ignore: a mask, not a visible gradient */
}
.hero-eye.is-on { visibility: visible; }
.hero-eye i {
  position: absolute; inset: 0; border-radius: 0 0 50% 50% / 0 0 38% 38%;
  background-image: url('../video/kranich-ruhe.jpg'); background-repeat: no-repeat;
  transform: translate3d(0, -104%, 0);
}
.hero-inner {
  position: absolute; inset: 0; z-index: 2;
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap);
  grid-template-rows: minmax(96px, .8fr) auto auto auto minmax(32px, 1fr) auto;
  padding: 0 var(--m) var(--m);
}
.hero-what { grid-column: 1 / 7; grid-row: 2; margin-bottom: 22px; }
.hero-lead { grid-column: 1 / 6; grid-row: 3; max-width: 40ch; margin-bottom: 30px; font-size: var(--fs-body); line-height: 1.5; }
.hero-actions { grid-column: 1 / 7; grid-row: 4; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; }

/* the cards: frosted glass over the mist, left of the crane */
.hero-cards { grid-column: 1 / 9; grid-row: 6; display: grid; grid-template-columns: 1.25fr 1fr 1fr; gap: 14px; }
.hc {
  position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 18px;
  height: 100%; min-height: 188px; padding: 20px 22px; border-radius: 18px; overflow: hidden;
  text-decoration: none; color: var(--ink);
  background: rgba(242, 239, 232, .34); border: 1px solid rgba(255, 255, 255, .55); /* taste-skill-ignore: Bens Wahl, the glass edge catching light */
  -webkit-backdrop-filter: blur(16px) saturate(1.08); /* taste-skill-ignore: Bens Wahl, frosted cards over the mist */
  backdrop-filter: blur(16px) saturate(1.08); /* taste-skill-ignore: Bens Wahl, frosted cards over the mist */
  transition: transform .55s var(--ease-spring), background-color .45s ease, box-shadow .45s ease;
}
.hc > * { position: relative; }
.hc-t { display: block; font-family: var(--display); font-weight: 700; font-size: 1.375rem; line-height: 1.1; letter-spacing: -0.01em; }
.hc-d { display: block; margin-top: 8px; font-size: var(--step-small); line-height: 1.45; color: var(--muted); }
.hero-cards .hc-d { min-height: calc(2 * 1.45em); }   /* room for two lines in every card, so the three titles sit at the same height */
.hc-n { font-family: var(--display); font-weight: 400; font-size: 4rem; line-height: .9; letter-spacing: -0.03em; }
.hc-n small { font-size: .5em; }
.hc-arr {
  position: absolute; top: 14px; right: 14px; display: grid; place-items: center;
  width: 30px; height: 30px; border-radius: 50%; background: rgba(255, 255, 255, .55);
  transition: transform .5s var(--ease-spring), background-color .3s ease;
}
.hc-arr svg { width: 12px; height: 12px; }
/* the package symbol: four arcs, one ring. Website, video, graphics and social media in one design */
.hc-sym { width: 60px; height: 60px; }
.hc-sym circle { fill: none; stroke-width: 6; stroke-linecap: round; transform-origin: 32px 32px; transition: transform .7s var(--ease-spring); }
.hc-sym .a1 { stroke: var(--ink); }
.hc-sym .a2 { stroke: var(--field-2); opacity: .6; transition-delay: .06s; }
.hc-sym .a3 { stroke: var(--ink); opacity: .35; transition-delay: .12s; }
.hc-sym .a4 { stroke: var(--highlight); transition-delay: .18s; }
/* hover: the mist clears from the glass, the card lifts on a plain shadow and a turquoise line draws along its foot */
.hc::after {
  content: ''; position: absolute; left: 22px; right: 22px; bottom: 0; height: 3px; border-radius: 3px 3px 0 0;
  background: var(--highlight); transform: scaleX(0); transform-origin: left; transition: transform .55s var(--ease-out);
}
.hc:hover, .hc:focus-visible {
  transform: translateY(-5px); background: rgba(242, 239, 232, .82);
  box-shadow: 0 18px 36px -18px rgba(15, 26, 43, .45);
  outline: none;
}
.hc:focus-visible { box-shadow: 0 0 0 2px var(--ink), 0 18px 36px -18px rgba(15, 26, 43, .45); }
.hc:hover::after, .hc:focus-visible::after { transform: scaleX(1); }
.hc:hover .hc-arr, .hc:focus-visible .hc-arr { transform: rotate(45deg); background: var(--bg); }
.hc:hover .hc-sym circle, .hc:focus-visible .hc-sym circle { transform: rotate(90deg); }
/* click: one short flash in Facetten-Türkis, then the link opens (site.js) */
.hc::before { content: ''; position: absolute; inset: 0; background: var(--highlight); opacity: 0; pointer-events: none; transition: opacity .4s ease; }
.hc.is-flash::before { opacity: .78; transition-duration: .08s; }
.hc.is-flash { transform: translateY(-2px) scale(.985); transition-duration: .12s; }

@media (max-width: 1100px) {
  .hero-cards { grid-column: 1 / 10; }
}
@media (max-width: 860px) {
  /* the crane takes the top of the screen and fades into the mist; text, button and cards follow below it */
  .hero { height: auto; min-height: 0; }
  .hero-media { inset: 0 0 auto 0; height: 560px; }
  .hero-media::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 200px; background: linear-gradient(rgba(197, 220, 228, 0), rgba(197, 220, 228, .35) 45%, var(--mist)); } /* taste-skill-ignore: a fade of the still into the mist field */
  .hero-media video, .hero-media img { object-position: 79.5% 50%; }  /* ~40 px further right than before, so the beak stays in frame when he shakes */
  .hero-inner { position: relative; inset: auto; display: block; padding: 540px var(--m) 28px; }
  .hero-what { font-size: clamp(1.875rem, 7.6vw, 2.6rem); max-width: none; margin-bottom: 14px; }
  .hero-lead { margin-bottom: 20px; }
  .hero-actions .link { display: none; }
  /* the package across the full width, the two numbers side by side below it */
  .hero-cards { grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 28px; }
  .hero-cards li:first-child { grid-column: 1 / -1; }
  .hc { min-height: 0; padding: 18px; gap: 14px; }
  .hc-n { font-size: 2.4rem; padding-right: 30px; }   /* keep "1000+" clear of the arrow */
  .hc-t { font-size: 1.2rem; }
}
@media (prefers-reduced-motion: reduce) {
  .hc:hover, .hc:focus-visible { transform: none; }
}

/* ---------- loader (home only) ---------- */
.loader { display: none; }
.js .loader {
  position: fixed; inset: 0; z-index: 60; display: grid; place-items: center;
  background: var(--mist); color: var(--ink);
  transition: opacity .9s var(--ease-out), visibility .9s;
}
.loader.is-done { opacity: 0; visibility: hidden; pointer-events: none; }
.loader-in { display: grid; justify-items: center; width: max-content; gap: 14px; font-size: 0.8125rem; letter-spacing: 0.16em; text-transform: uppercase; }
/* bar exactly as wide as the wordmark; the negative margin drops the letter-spacing after the last letter */
.loader-in > span:first-child { margin-right: -0.16em; }
.loader-bar { justify-self: stretch; width: 100%; height: 2px; background: rgba(15, 26, 43, .18); overflow: hidden; }
.loader-bar i { display: block; height: 100%; background: var(--ink); transform: scaleX(0); transform-origin: left; }
.loader-pct { font-variant-numeric: tabular-nums; letter-spacing: 0.08em; }

/* ---------- sections ---------- */
.section { padding-block: var(--section) 0; }
.section:last-of-type { padding-bottom: var(--section); }
.sec-head { margin-bottom: clamp(40px, 5vw, 72px); }
.sec-head h2 { margin-bottom: 20px; }
.sec-head p { max-width: 46ch; }

/* Leistungen: sticky intro left, modules right */
.services .grid { align-items: start; }
.services .sec-head { grid-column: 1 / 6; position: sticky; top: 96px; }
.services-list { grid-column: 6 / 13; display: grid; gap: clamp(64px, 7vw, 112px); }
.svc { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(20px, 2.4vw, 40px); align-items: start; }
.svc-proof { background: var(--surface); overflow: hidden; aspect-ratio: 16 / 11; }
.svc-proof img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); }
.svc:hover .svc-proof img { transform: scale(1.04); }
.svc h3 { font-size: var(--step-lead); line-height: 1.15; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 14px; }
.svc p + p { margin-top: 12px; }
.svc .t-small { color: var(--muted); }

/* Arbeiten: big names, fixed preview */
.work .grid { align-items: start; }
.work-list { grid-column: 1 / 8; }
.work-list li + li { margin-top: 2px; }
.work-item {
  display: flex; align-items: baseline; justify-content: space-between; gap: 24px;
  padding: 8px 0; text-decoration: none; color: var(--muted);
  transition: color .25s ease;
}
.work-item .n {
  font-size: clamp(1.5rem, 2.8vw, 2.75rem); line-height: 1.1; font-family: var(--display); font-weight: 700; font-stretch: 100%; letter-spacing: -0.015em;
  transition: transform .5s var(--ease-spring);
}
.work-item .meta { font-size: var(--step-small); white-space: nowrap; }
.work-item.is-active, .work-item:hover, .work-item:focus-visible { color: var(--ink); }
.work-item.is-active .n { transform: translateX(10px); }
.work-frame {
  grid-column: 8 / 13; position: sticky; top: 14vh;
  aspect-ratio: 4 / 3.4; background: var(--surface); overflow: hidden;
}
.work-frame img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transform: scale(1.06);
  transition: opacity .35s ease, transform 1.1s var(--ease-out);
}
.work-frame img.is-active { opacity: 1; transform: none; }
.work-frame figcaption {
  position: absolute; left: 0; bottom: 0; z-index: 2;
  background: var(--bg); padding: 10px 16px 8px 0; font-size: var(--step-small);
  max-width: 85%;
}
.work-more { margin-top: clamp(32px, 4vw, 56px); }
.work-thumb { display: none; }

/* Über mich: side facts, wide paragraph */
.about .grid { row-gap: clamp(64px, 8vw, 120px); }
.about h2 { grid-column: 1 / 6; }
.about-facts { grid-column: 1 / 5; grid-row: 2; display: grid; gap: 20px; align-content: start; }
.about-facts dt { font-size: var(--step-small); color: var(--muted); }
.about-facts dd { font-size: var(--step-body); font-weight: 600; }
.about-text { grid-column: 6 / 13; grid-row: 1 / 3; align-self: start; }
.about-text p { font-size: clamp(1.25rem, 0.95rem + 1vw, 1.75rem); line-height: 1.32; letter-spacing: -0.012em; }
.about-text p + p { margin-top: 1em; }
.about-text .link { margin-top: 20px; }
.about-photo { grid-column: 1 / 5; grid-row: 3; }
.about-photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.about-photo figcaption { margin-top: 10px; font-size: var(--step-small); color: var(--muted); }
.about-clients { grid-column: 5 / 13; grid-row: 3; }
.about-clients h3 { font-size: var(--step-body); font-weight: 650; margin-bottom: 18px; }
.about-clients ul { columns: 2; column-gap: clamp(24px, 4vw, 64px); }
.about-clients li { break-inside: avoid; padding: 5px 0; font-size: var(--step-body); }

/* Ausgangslage: the headline left, three pains stacked on the right, each opened by a display line */
.problem .grid { row-gap: var(--gap-h2); align-items: start; }
.problem h2 { grid-column: 1 / 6; }
/* the answer to the question lands like a rubber stamp, a second after the heading appears; the page jolts on impact */
.problem-q { position: relative; }
.stamp-at { position: relative; }
/* the NEIN stamp (image) sits with its lower left corner on the d of "sind" and rises over the end of "online" */
.stamp { position: absolute; left: -.15em; bottom: -.3em; width: 4em; height: 3.3em; display: grid; place-items: center; pointer-events: none; }
.stamp-ink { display: block; opacity: 0; transform: scale(2.6); }
.stamp-ink img { display: block; width: 3.6em; max-width: none; height: auto; transform: rotate(-22deg); }
.stamp.is-stamped .stamp-ink { animation: stamp-slam .16s cubic-bezier(.2, .9, .3, 1.25) both; }
@keyframes stamp-slam { 0% { opacity: 0; transform: scale(2.6); } 65% { opacity: 1; transform: scale(.94); } 100% { opacity: 1; transform: scale(1); } }
.is-jolt { animation: page-jolt .1s ease-out both; }
@keyframes page-jolt { 0%, 100% { transform: none; } 30% { transform: translate(-2px, 1.5px); } 65% { transform: translate(1px, -.5px); } }
@media (max-width: 860px) {
  .problem .problem-q { position: relative; }
  .stamp { font-size: .8em; }
}
@media (prefers-reduced-motion: reduce) { .stamp-ink { opacity: 1; transform: none; } .stamp.is-stamped .stamp-ink, .is-jolt { animation: none; } }
.problem-intro { grid-column: 1 / 5; grid-row: 2; font-size: var(--step-lead); line-height: 1.35; }
.pains { grid-column: 7 / 13; grid-row: 1 / 4; display: grid; gap: clamp(40px, 4vw, 64px); }
.pains h3 { font-family: var(--display); font-weight: 700; font-size: var(--fs-h3); line-height: 1.02; letter-spacing: -0.015em; margin-bottom: 12px; }
.pains p { max-width: 52ch; font-size: var(--fs-body); line-height: 1.5; }

/* Einzeln buchbar: a field of slate, the offers as a two-column definition list */
/* the colour change already separates: half a section of paper before, half of slate inside, so each seam stays under 240px */
.single { --seam: clamp(72px, 7vw, 120px); background: var(--field-2); color: var(--field-2-ink); padding: var(--seam) var(--m); margin-top: var(--seam); }
.section.single { padding-bottom: var(--seam); }
.single + .section { padding-top: clamp(72px, 7vw, 120px); }
.single .grid { row-gap: 32px; }
.single h2 { grid-column: 1 / 5; }
.single-intro { grid-column: 1 / 5; grid-row: 2; color: var(--field-2-muted); }
.offers { grid-column: 6 / 13; grid-row: 1 / 4; display: grid; grid-template-columns: 1fr 1fr; gap: 36px var(--gap); }
.offers dt { font-family: var(--display); font-weight: 700; font-size: clamp(1.25rem, 1.05rem + 0.7vw, 1.625rem); line-height: 1.1; letter-spacing: -0.015em; margin-bottom: 8px; }
.offers dd { margin: 0; color: var(--field-2-muted); }
.offers .offer-entry { grid-column: 1 / -1; padding-bottom: 12px; }
.offers .offer-entry dt { font-size: clamp(1.75rem, 1.3rem + 1.4vw, 2.5rem); }
.offers .offer-entry dt::after { content: ''; display: inline-block; width: 12px; height: 12px; margin-left: 14px; border-radius: 50%; background: var(--highlight); vertical-align: 0.35em; }
.offers .offer-entry dd { color: var(--field-2-ink); font-size: var(--step-lead); line-height: 1.35; max-width: 46ch; }

/* Ablauf: four columns in reading order, the order carried by position, not numbers */
.steps-sec .grid { row-gap: clamp(40px, 5vw, 72px); }
.steps-sec h2 { grid-column: 1 / -1; }
.steps { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); }
.steps li { padding-top: 24px; position: relative; }
/* the four steps share their rows, so every text starts at the same height even when a heading runs to two lines */
.steps { grid-auto-rows: auto; }
.steps li { display: grid; grid-row: span 2; grid-template-rows: subgrid; row-gap: 0; }
.steps li p { align-self: start; }
.steps li::before { content: ''; position: absolute; left: 0; top: 0; width: 40px; height: 6px; background: var(--ink); border-radius: 3px; }
.steps li:first-child::before { background: var(--accent); }
.steps h3 { margin-bottom: 12px; }

/* Fragen: heading left, an accordion on the right */
.faq .grid { align-items: start; row-gap: 32px; }
.faq h2 { grid-column: 1 / 6; position: sticky; top: 96px; }
.faq-list { grid-column: 7 / 13; display: grid; gap: 12px; }
.faq details { background: var(--surface); border-radius: 4px; padding: 0 clamp(20px, 2vw, 32px); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px; min-height: 76px; padding: 18px 0; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; font-family: var(--display); font-weight: 400; font-size: 2rem; line-height: 1; transition: transform .45s var(--ease-spring); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary:hover h3 { color: var(--muted); }
.faq details p { padding-bottom: 26px; max-width: 60ch; }

/* Anfrage (dark field, email as display type) */
.contact {
  background: var(--field-1); color: var(--field-1-ink);
  display: grid; grid-template-rows: auto auto auto;
  padding: var(--pad-end) var(--m);   /* same space above and below */
  margin-top: var(--section);
}
.contact h2 { line-height: 1; font-weight: 700; letter-spacing: -0.015em; max-width: 18ch; }
.contact h2 + p { margin-top: var(--gap-h2); max-width: 46ch; font-size: var(--fs-body); line-height: 1.5; }
.builder { margin-top: clamp(40px, 5vw, 64px); border: 0; padding: 0; min-width: 0; }
.builder legend { font-size: var(--step-body); margin-bottom: 16px; padding: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.chip span {
  display: inline-flex; align-items: center; gap: 10px; min-height: 46px; padding: 0 20px;
  border-radius: 999px; background: rgba(242, 239, 232, .1); color: var(--field-1-ink);
  font-size: var(--step-body); font-weight: 500;
  transition: background-color .2s ease, color .2s ease, transform .45s var(--ease-spring);
}
.chip span::before {
  content: ''; width: 10px; height: 10px; border-radius: 50%;
  background: transparent; border: 1.5px solid currentColor;
  transition: background-color .2s, border-color .2s;
}
.chip input:hover + span { background: rgba(242, 239, 232, .18); }
.chip input:checked + span { background: var(--field-1-ink); color: var(--field-1); }
.chip input:checked + span::before { background: var(--highlight); border-color: var(--highlight); }
.chip input:active + span { transform: scale(.96); }
.chip input:focus-visible + span { outline: 2px solid var(--field-1-ink); outline-offset: 3px; }
.field { display: grid; gap: 8px; margin-top: 22px; max-width: 520px; }
.field label { font-size: var(--step-body); }
.field-row { grid-template-columns: auto minmax(220px, 360px); align-items: center; gap: 12px 20px; max-width: none; }
.field input {
  min-height: 50px; padding: 0 20px; border-radius: 999px; border: 0;
  background: rgba(242, 239, 232, .1); color: var(--field-1-ink);
}
.field input::placeholder { color: var(--field-1-muted); }
.field input:focus-visible { outline: 2px solid var(--field-1-ink); outline-offset: 2px; }
.send { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 28px; }
.send .btn { border: 0; cursor: pointer; font-family: inherit; }
.send .sum { font-size: var(--step-small); color: var(--field-1-muted); }
/* direct contact as two cards */
.direct { margin-top: clamp(48px, 6vw, 80px); }
.direct-label { font-size: var(--step-body); color: var(--field-1-muted); margin-bottom: 14px; }
/* direct contact: two large cards. From the button rules: satin fill, 1px rim, lit top edge, soft shadow, turquoise rim light on hover.
   Motion matches the building blocks: the icon redraws and turns, the neighbour steps back. */
.direct-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); max-width: 1100px; }
.direct-card { position: relative; display: grid; grid-template-columns: 1fr auto; align-items: end; column-gap: 20px; row-gap: 10px;
  padding: clamp(22px, 2.4vw, 34px); border-radius: 22px; text-decoration: none; color: #fff;
  background: linear-gradient(180deg, #24344d 0%, #1b2a40 60%, #172439 100%);
  border: 1px solid rgba(184, 191, 202, .3);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 6px 18px -8px rgba(0, 0, 0, .45);
  transition: border-color .2s var(--ease-out), box-shadow .3s var(--ease-out), transform .45s var(--ease-out), opacity .35s var(--ease-out); }
/* rim light: a small spark travels around the 1px edge; --rim is driven by site.js so it keeps one speed along every edge */
@property --rim { syntax: '<angle>'; inherits: true; initial-value: 0deg; }
.direct-card::before { content: ''; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none;
  background: conic-gradient(from var(--rim), transparent 0deg 290deg, rgba(47, 183, 176, .3) 330deg, rgba(185, 255, 250, 1) 354deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: 1; transition: opacity .3s; }
@media (hover: hover) {
  .direct-card:hover::before, .direct-card:focus-visible::before { opacity: 1;
    background: conic-gradient(from var(--rim), transparent 0deg 200deg, rgba(47, 183, 176, .35) 280deg, rgba(190, 255, 250, 1) 350deg, transparent 360deg); }
}
@media (prefers-reduced-motion: reduce) { .direct-card::before { opacity: .4; } }
.direct-kind { grid-column: 1; font-size: var(--step-small); letter-spacing: .08em; text-transform: uppercase; color: var(--field-1-muted); transition: color .2s; }
.direct-val { grid-column: 1; font-family: var(--display); font-weight: 700; font-size: clamp(1.5rem, 1rem + 1.8vw, 2.75rem); line-height: 1.05; overflow-wrap: anywhere; }
.direct-icon { grid-column: 2; grid-row: 1 / span 2; align-self: center; width: clamp(40px, 3.6vw, 56px); height: auto; fill: none; stroke: var(--field-1-muted);
  stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; transition: stroke .3s, transform .6s var(--ease-out); }
.direct-icon * { stroke-dasharray: 1; stroke-dashoffset: 0; }
@media (hover: hover) {
  .direct-card:hover, .direct-card:focus-visible { border-color: var(--highlight); transform: translateY(-4px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 10px 24px -10px rgba(0, 0, 0, .5), 0 0 0 1px rgba(47, 183, 176, .3), 0 0 26px rgba(47, 183, 176, .28); }
  .direct-card:hover .direct-kind, .direct-card:focus-visible .direct-kind { color: var(--highlight); }
  .direct-card:hover .direct-icon, .direct-card:focus-visible .direct-icon { stroke: var(--highlight); transform: scale(1.08) rotate(-8deg); }
  .direct-card:hover .direct-icon *, .direct-card:focus-visible .direct-icon * { animation: h-draw .9s var(--ease-out) both; }
  .direct-card:hover .direct-icon :nth-child(2) { animation-delay: .15s; }
  .direct-cards:has(.direct-card:hover) .direct-card:not(:hover) { opacity: .55; }
}
.direct-card:active { transform: translateY(1px); transition-duration: .12s; }
.direct-card:focus-visible { outline: 2px solid var(--highlight); outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) {
  .direct-card, .direct-icon { transition: none; }
  .direct-card:hover, .direct-card:hover .direct-icon { transform: none; }
  .direct-card:hover .direct-icon * { animation: none; }
}
.mail-big {
  display: block; width: 100%; text-decoration: none; white-space: nowrap;
  font-size: clamp(2.6rem, 9.2vw, 12rem); line-height: 0.95; font-weight: 300; font-stretch: 100%; letter-spacing: -0.045em;
  transition: color .3s ease;
}
.mail-big:hover { color: var(--accent); }
.mail-big .at { color: var(--accent); }
.mail-note { margin-top: 18px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; }
.mail-note .sum { font-size: var(--step-body); }
.contact-foot {
  display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap;
  margin-top: clamp(48px, 6vw, 80px); font-size: var(--step-body);
}
.contact-foot a { color: var(--field-1-ink); text-decoration: none; }
.contact-foot a:hover { text-decoration: underline; }

/* footer */
.site-footer {
  background: var(--field-2); color: var(--field-2-ink);
  display: grid; grid-template-rows: auto auto auto auto;
  padding: var(--pad-end) var(--m) 20px;
  position: relative; isolation: isolate; overflow: hidden;
}
/* the lake from below: crane legs on the right, fading into the footer blue towards the text */
.foot-water { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  }   /* the full picture, no fade on top of it */
.foot-water .fw-move { opacity: 0; }
.foot-water .fw-move.is-on { opacity: 1; }
.foot-water video { position: absolute; left: 0; top: 0; width: 110%; max-width: none; height: 100%; object-fit: cover; object-position: 0 0; }   /* a little wider than the footer, so the legs stand right of the cards */
@media (min-width: 861px) { .site-footer { min-height: 56vw; } }   /* tall enough for surface and feet */
@media (max-width: 860px) {
  .site-footer { padding-top: calc(56.25vw + 1.5rem); }
  .foot-water { left: 0; width: 100%; bottom: auto; height: 56.25vw; }
  .foot-water video { width: 100%; }
  .foot-water {
    -webkit-mask-image: linear-gradient(#000 70%, transparent); mask-image: linear-gradient(#000 70%, transparent); }
}
.foot-social { display: flex; gap: 14px; margin-bottom: 2rem; list-style: none; }
.foot-social a { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; color: var(--field-2-ink);
  border: 1px solid rgba(242, 239, 232, .25); transition: border-color .2s, color .2s, transform .3s var(--ease-spring); }
.foot-social svg { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.foot-social a:hover, .foot-social a:focus-visible { border-color: var(--highlight); color: var(--highlight); transform: translateY(-2px); }
.foot-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 15rem)); gap: 16px; font-size: var(--step-small); }
/* the four columns sit on frosted glass cards, like the cards in the hero */
.foot-cols ul { padding: 20px 22px; border-radius: 18px; color: var(--field-2-ink);
  background: rgba(242, 239, 232, .1); border: 1px solid rgba(255, 255, 255, .22);   /* lighter glass over the water, light text */
  -webkit-backdrop-filter: blur(16px) saturate(1.08); backdrop-filter: blur(16px) saturate(1.08); }
.foot-cols a { color: var(--field-2-ink); }
.foot-cols .foot-gap { margin-top: .75em; }
/* same type as the hero cards: Magra heading, small fine text */
.foot-cols li { padding: 0; font-size: var(--step-small); line-height: 1.45; font-weight: 400; color: rgba(242, 239, 232, .78); }
.foot-cols li:first-child { font-family: var(--display); font-weight: 700; font-size: 1.375rem; line-height: 1.1; letter-spacing: -0.01em; color: var(--field-2-ink); margin-bottom: 8px; }
.foot-cols a { color: inherit; }
.foot-cols a { text-decoration: none; }
.foot-cols a:hover { text-decoration: underline; }
.foot-mark {
  grid-row: 3; display: block; white-space: nowrap; margin-top: clamp(48px, 8.5vw, 111px);   /* half the earlier distance to the columns */
  font-size: clamp(2rem, 4.6vw, 5.5rem); font-family: var(--display); font-weight: 700; font-stretch: 100%; letter-spacing: -0.03em; line-height: 0.95;
}
.foot-mark span { font-weight: 400; color: var(--field-2-muted); }   /* same weight split as the logo */
.foot-legal { grid-row: 4; margin-top: 20px; font-size: var(--step-small); color: var(--field-2-muted); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
/* ---------- sub pages ---------- */
.page-hero { padding: clamp(48px, 9vw, 140px) var(--m) 0; }
.page-title {
  font-size: clamp(3rem, 8vw, 8.5rem); font-family: var(--display); font-weight: 700; font-stretch: 100%; letter-spacing: -0.03em; line-height: 1; white-space: nowrap;
}
.page-title .w { display: inline-block; }
.page-intro { margin-top: clamp(28px, 3vw, 44px); }
.page-intro p { max-width: 44ch; }
.page-intro .t-lead { max-width: 30ch; font-weight: 550; }
/* short titles (Über mich, Kontakt): title left, the lead closes the row on the right instead of an empty half screen */
.page-hero--split { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: end; }
.page-hero--split > * { grid-column: 1 / -1; }
.page-hero--split > .page-title { grid-column: 1 / 8; font-size: clamp(3rem, 8vw, 8.5rem); }
.page-hero--split > .page-intro { grid-column: 8 / 13; margin-top: 0; padding-bottom: .4em; }
.page-hero--split > .page-intro .t-lead { max-width: 26ch; }

/* Referenzen */
.filters { display: flex; flex-wrap: wrap; gap: 10px; margin-top: clamp(36px, 4vw, 56px); }
.filter {
  min-height: 46px; padding: 0 20px; border-radius: 999px; border: 0; cursor: pointer;
  background: var(--surface); color: var(--ink); font-size: var(--step-small); font-weight: 600;
  transition: background-color .2s, color .2s, transform .45s var(--ease-spring);
}
.filter:hover { background: var(--field-2); color: var(--field-2-ink); }   /* light text on the dark blue, readable on hover */
.filter:active { transform: scale(.96); }
.filter[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
.filter .c { font-weight: 400; opacity: .75; margin-left: 4px; }
.projects { row-gap: clamp(72px, 8vw, 128px); margin-top: clamp(56px, 6vw, 96px); }
.proj { grid-column: 1 / 8; }
.proj.p1 { grid-column: 9 / 13; align-self: end; }
.proj.p2 { grid-column: 1 / 6; }
.proj.p3 { grid-column: 7 / 13; align-self: start; margin-top: clamp(40px, 8vw, 140px); }
.proj[hidden] { display: none; }
.proj figure { overflow: hidden; background: var(--surface); }
.proj img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top center; transition: transform 1.2s var(--ease-out); }
.proj:hover img { transform: scale(1.035); }
.proj h2 { font-size: var(--step-lead); line-height: 1.15; font-weight: 700; letter-spacing: -0.02em; margin-top: 20px; }
.proj .meta { font-size: var(--step-small); color: var(--muted); margin-top: 6px; }
.proj p.d { margin-top: 12px; max-width: 52ch; }
.proj .act { margin-top: 8px; }
.proj .act button { border: 0; padding: 0; background: none; cursor: pointer; }
.clients { margin-top: var(--section); }
.clients .grid { row-gap: 40px; }
.clients h2 { grid-column: 1 / 5; }
.clients .sec-text { grid-column: 1 / 5; grid-row: 2; }
.clients ul { grid-column: 5 / 13; grid-row: 1 / 3; columns: 3; column-gap: var(--gap); }
.clients li { break-inside: avoid; padding: 7px 0; }
.clients li small { display: block; color: var(--muted); font-size: var(--step-small); }

/* video dialog */
.vdlg {
  width: min(1100px, calc(100vw - 2 * var(--m))); max-width: none; padding: 0; border: 0;
  background: var(--field-1); color: var(--field-1-ink);
}
.vdlg::backdrop { background: rgba(15, 26, 43, .86); }
.vdlg-bar { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px 14px 14px 22px; }
.vdlg-bar h2 { font-size: var(--step-body); font-weight: 650; }
.vdlg-close { min-height: 44px; padding: 0 18px; border: 0; border-radius: 999px; background: var(--field-1-ink); color: var(--field-1); font-weight: 600; cursor: pointer; }
.vdlg-stage { position: relative; aspect-ratio: 16 / 9; background: #000; }
.vdlg-stage iframe, .vdlg-stage video, .vdlg-stage img { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: cover; }
.vdlg-consent {
  position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 18px; text-align: center;
  padding: 24px; background: rgba(15, 26, 43, .72);
}
.vdlg-consent p { max-width: 46ch; font-size: var(--step-small); color: var(--field-1-ink); }

/* Über mich page */
.person-top { row-gap: 56px; margin-top: clamp(56px, 6vw, 96px); }
.person-photo { grid-column: 1 / 6; }
.person-photo img { width: 100%; aspect-ratio: 4 / 3.1; object-fit: cover; }
.person-photo figcaption { margin-top: 10px; font-size: var(--step-small); color: var(--muted); }
.person-text { grid-column: 7 / 13; }
.person-text p { max-width: 58ch; }
.person-text p + p { margin-top: 1em; }
.person-text .t-lead { font-weight: 550; margin-bottom: 1em; }
.statement {
  grid-column: 1 / -1; font-size: clamp(1.5rem, 1rem + 1.8vw, 2.25rem); line-height: 1.2; font-weight: 600;
  letter-spacing: -0.02em; max-width: 34ch;
}
.skills { row-gap: 48px; }
.skills h2 { grid-column: 1 / 5; }
.skill { grid-column: span 4; }
.skills .skill:first-of-type { grid-column: 5 / 9; }
.skill h3 { font-size: var(--step-lead); font-weight: 700; letter-spacing: -0.02em; margin-bottom: 14px; }
.skill li { padding: 4px 0; }
.skills .skill:nth-of-type(2) { grid-column: 9 / 13; }
.skills .skill:nth-of-type(3) { grid-column: 5 / 9; }
.skills .talk { grid-column: 9 / 13; }
.skills .talk img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.skills .talk figcaption { margin-top: 10px; font-size: var(--step-small); color: var(--muted); }

/* Kontakt page */
.kontakt-grid { row-gap: 56px; margin-top: clamp(56px, 6vw, 96px); }
.kontakt-data { grid-column: 1 / 6; display: grid; gap: 28px; align-content: start; }
.kontakt-data dt { font-size: var(--step-small); color: var(--muted); }
.kontakt-data dd { font-size: var(--step-lead); font-weight: 600; letter-spacing: -0.01em; line-height: 1.25; }
.kontakt-data dd a { text-decoration: none; }
.kontakt-data dd a:hover { text-decoration: underline; }
.kontakt-pic { grid-column: 7 / 13; }
.kontakt-pic img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.kontakt-pic figcaption { margin-top: 10px; font-size: var(--step-small); color: var(--muted); }

/* shared two-column helpers and still bands */
.col-full { grid-column: 1 / -1; }
.col-a { grid-column: 1 / 7; }
.col-b { grid-column: 8 / 13; }
.ways { row-gap: 32px; }
.ways .col-b { grid-column: 7 / 13; }
.stills { row-gap: 24px; align-items: start; }
.stills h2 { margin-bottom: 16px; }
.stills figure { grid-column: span 3; overflow: hidden; }
.stills .still-wide { grid-column: 1 / 7; }
.stills img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.stills .still-wide img { aspect-ratio: 16 / 10; }
.stills figcaption, .kontakt-pic figcaption, .person-photo figcaption, .about-photo figcaption, .skills .talk figcaption { margin-top: 10px; font-size: 1rem; color: var(--ink); }
.kontakt-pic, .person-photo, .stills .still-wide { overflow: hidden; }

/* one moving picture on still pages: a slow drift */
@keyframes drift { from { transform: scale(1) translate3d(0, 0, 0); } to { transform: scale(1.09) translate3d(-1.5%, -1%, 0); } }
.drift { animation: drift 16s ease-in-out infinite alternate; transform-origin: 60% 50%; }

/* Legal */
.legal { max-width: 74ch; margin-top: clamp(48px, 5vw, 80px); }
.legal h2 { font-size: var(--step-lead); font-weight: 700; letter-spacing: -0.015em; margin: 2.2em 0 .6em; line-height: 1.2; }
.legal h3 { font-size: var(--step-body); font-weight: 700; margin: 1.8em 0 .4em; }
.legal h4 { font-size: var(--step-body); font-weight: 600; margin: 1.4em 0 .3em; }
.legal p, .legal ul { margin-bottom: .9em; }
.legal ul { list-style: disc; padding-left: 1.2em; }
.legal a { word-break: break-word; }
.legal { overflow-wrap: anywhere; }

/* ---------- motion: section entrances ---------- */
.js [data-reveal] .r { opacity: 0; transform: translate3d(0, 28px, 0); }
.js [data-reveal].is-in .r {
  opacity: 1; transform: none;
  transition: opacity .8s var(--ease-out), transform 1.1s var(--ease-spring);
  transition-delay: calc(var(--i, 0) * 75ms);
}
.js .page-title .w { transform: translate3d(0, 105%, 0); }
.js .page-title.is-in .w { transform: none; transition: transform 1.2s var(--ease-spring); transition-delay: calc(var(--i, 0) * 90ms); }
/* room above the cap height for Ü, Ä, Ö inside the reveal mask; the negative margin keeps the layout unchanged */
.page-title .clip { display: block; overflow: hidden; padding: .2em 0 .02em; margin-top: -.2em; }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .svc { grid-template-columns: 1fr; }
  .clients ul { columns: 2; }
}
@media (max-width: 860px) {
  .grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .services .sec-head, .services-list { grid-column: 1 / -1; position: static; }
  .problem h2, .problem-intro, .pains, .single h2, .single-intro, .offers, .faq h2, .faq-list { grid-column: 1 / -1; grid-row: auto; position: static; }
  .offers { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr 1fr; row-gap: 40px; }
  .services-list { gap: 64px; }
  .svc-proof { aspect-ratio: 16 / 10; }

  .work-list { grid-column: 1 / -1; }
  .work-frame { display: none; }
  .work-list li + li { margin-top: 40px; }
  .work-thumb { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; margin-bottom: 14px; }
  .work-item { flex-direction: column; gap: 4px; color: var(--ink); padding: 0; }
  .work-item .n { font-size: clamp(1.5rem, 6.4vw, 2.5rem); }
  .work-item.is-active .n { transform: none; }

  .about h2, .about-facts, .about-text, .about-photo, .about-clients { grid-column: 1 / -1; grid-row: auto; }
  .about .grid { row-gap: 40px; }
  .about-facts { grid-template-columns: 1fr 1fr; }
  .about-text p { font-size: 1.1875rem; }

  .foot-cols { grid-template-columns: 1fr 1fr; gap: 12px; }
  .foot-mark { margin-top: 64px; font-size: 11vw; }

  .page-title { white-space: normal; font-size: 12vw; }
  .page-title .clip { display: block; }
  .page-hero--split > .page-title, .page-hero--split > .page-intro { grid-column: 1 / -1; }
  .page-hero--split > .page-intro { margin-top: clamp(28px, 3vw, 44px); padding-bottom: 0; }

  .proj, .proj.p1, .proj.p2, .proj.p3 { grid-column: span 3; margin-top: 0; align-self: start; }
  .projects { row-gap: 56px; }
  .proj p.d { font-size: 1rem; }
  .clients h2, .clients .sec-text, .clients ul { grid-column: 1 / -1; grid-row: auto; }
  .clients ul { columns: 2; }

  .person-photo, .person-text, .skills h2, .skill, .skills .skill:first-of-type, .skills .skill:nth-of-type(2), .skills .skill:nth-of-type(3), .skills .talk { grid-column: 1 / -1; }
  .kontakt-data, .kontakt-pic { grid-column: 1 / -1; }

  .col-a, .col-b, .ways .col-b { grid-column: 1 / -1; }
  .stills figure, .stills .still-wide { grid-column: 1 / -1; }
  .field-row { grid-template-columns: 1fr; }
  .direct-cards { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .steps { grid-template-columns: 1fr; }
  .proj, .proj.p1, .proj.p2, .proj.p3 { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
  .clients ul { columns: 1; }
  .about-clients ul { columns: 1; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
  .js [data-reveal] .r, .js .page-title .w { opacity: 1; transform: none; }
}

/* Brand headings win over the older size rules above (Magra Bold, sentence case). Kept last on purpose. */
.svc h3, .proj h2, .skill h3, .faq h3, .offer h3, .steps h3, .pains h3 {
  font-family: var(--display); font-weight: 700; letter-spacing: -0.015em; line-height: 1.02;
  font-size: clamp(1.375rem, 1.1rem + 0.9vw, 1.875rem);
}
.about-clients h3, .vdlg-bar h2, .legal h2 { font-family: var(--display); font-weight: 700; letter-spacing: -0.015em; line-height: 1.05; font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem); }
.contact h2 { font-family: var(--display); font-weight: 700; letter-spacing: -0.015em; line-height: 1; font-size: var(--fs-h2); max-width: 18ch; }
.pains h3, .steps h3, .h-tile h3 { font-size: var(--fs-h3); line-height: 1.02; letter-spacing: -0.015em; }   /* one H3 size on the home page */
.field-row { justify-content: start; }

/* Über mich: values as a four-column definition list */
.values { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); margin-top: 24px; }
.values dt { font-family: var(--display); font-weight: 700; font-size: clamp(1.375rem, 1.1rem + 0.9vw, 1.875rem); line-height: 1.02; letter-spacing: -0.015em; margin-bottom: 10px; }
.values dd { margin: 0; }
@media (max-width: 860px) { .values { grid-template-columns: 1fr 1fr; row-gap: 32px; } }
@media (max-width: 520px) { .values { grid-template-columns: 1fr; } }

/* ==========================================================================
   Startseite unterhalb des Hero (2026-11): Problem-Feld, Brücke, Bausteine,
   Arbeiten, Alles aus einer Hand, Gipfel
   ========================================================================== */
.stake { grid-column: 1 / -1; margin-top: clamp(72px, 9vw, 140px); font-family: var(--display); font-weight: 700;
  font-size: var(--fs-h2); line-height: 1; letter-spacing: -0.015em; }
/* line two in two voices: the loss said quietly, the turn said firmly and underlined by a hand-drawn turquoise stroke */
.stake-quiet { color: var(--muted); }
/* the turn in the bright turquoise, with a thick straight underline that draws in */
.stake-turn { position: relative; white-space: nowrap; color: var(--highlight); }
.stake-turn::after { content: ''; position: absolute; left: 0; right: .12em; bottom: -.06em; height: .13em; border-radius: .02em; background: currentColor;   /* as thick as a letter stem */
  transform: scaleX(0); transform-origin: left; transition: transform .45s cubic-bezier(.65, 0, .35, 1); }
.stake.is-drawn .stake-turn::after { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) { .stake-turn::after { transition: none; transform: none; } }
.h-label { font-size: .8125rem; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 16px; opacity: .8; }
.h-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 16px 48px; margin-bottom: clamp(32px, 4vw, 56px); }
.h-head h2 { max-width: 14ch; }
.h-head p { max-width: 38ch; color: var(--muted); font-size: var(--step-lead); line-height: 1.35; }
.h-more { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-top: clamp(32px, 4vw, 56px); }
.h-also { color: var(--muted); }

/* Problem: Feld, innen heller, nach außen dunkler */
.page-home .problem { overflow-x: clip; padding-bottom: var(--section); background: radial-gradient(ellipse 75% 70% at 50% 45%, #fdfcf9 0%, #f4f1ea 45%, #e4ddcf 100%); }

/* Brücke: Originalbild, Verkehr in zwei Spuren, Kraniche mit echtem Flügelschlag */
.h-bridge { background: #020b11; color: #f2efe8; }
.h-bridge-stage { position: relative; aspect-ratio: 16 / 9; overflow: hidden; }
.h-bridge-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.h-road { position: absolute; left: 0; right: 0; height: 0; z-index: 2; }
.h-road-1 { top: 46.8%; } .h-road-2 { top: 48.5%; }
.h-car { position: absolute; left: 0; width: 1.25vw; height: 0.6vw; margin-top: -0.3vw; border-radius: 0.15vw; box-shadow: 0 0.1vw 0.2vw rgba(0,0,0,.6); }
.h-car::after { content: ''; position: absolute; top: 18%; bottom: 18%; left: 30%; width: 22%; border-radius: 0.06vw; background: rgba(20,24,30,.55); }
.h-flock { position: absolute; inset: 0; z-index: 3; pointer-events: none; overflow: hidden; }
.h-bird { position: absolute; left: 0; top: 0; will-change: transform; background: url(../img/home/kranich-sprite.png) 0 0 / 1000% 600% no-repeat; filter: drop-shadow(0.4vw 0.6vw 0.25vw rgba(0,0,0,.35)); }
.h-bridge-text { position: absolute; z-index: 4; left: 21%; bottom: 11%; text-align: left; white-space: nowrap; }   /* both lines sit in the water channel below the bridge */
.h-bridge-text h2 { font-size: var(--fs-h2); }
.h-bridge-sub { margin-top: var(--gap-h2); font-size: var(--fs-body); line-height: 1.5; color: #c9d1dc; }

/* Vier Bausteine */
/* four building blocks: line icons that redraw on hover while night blue rises from below */
.h-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); list-style: none; }
.h-tiles > li { display: grid; }
.h-tile { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-rows: auto auto 1fr; gap: clamp(24px, 3vw, 44px);
  min-height: clamp(320px, 27vw, 420px); padding: clamp(22px, 2vw, 30px); border-radius: 22px;
  border: 1px solid rgba(15, 26, 43, .14); color: var(--ink); text-decoration: none; background: rgba(255,255,255,.35);
  transition: transform .5s var(--ease-out), border-color .5s var(--ease-out), box-shadow .5s var(--ease-out); }
.h-tile::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--ink);
  transform: scaleY(0); transform-origin: bottom; transition: transform .55s var(--ease-out); }
.h-tile-no { font-family: var(--display); font-weight: 700; font-size: 1rem; letter-spacing: .08em; color: var(--muted); transition: color .4s; }
.h-tile-icon { width: clamp(76px, 7vw, 108px); height: auto; align-self: center; justify-self: start; fill: none; stroke: var(--ink);
  stroke-width: 1.1; stroke-linecap: round; stroke-linejoin: round; transition: stroke .4s, transform .6s var(--ease-out); }
.h-tile-icon * { stroke-dasharray: 1; stroke-dashoffset: 0; }
.h-tile h3 { font-family: var(--display); font-weight: 700; font-size: var(--fs-h3); line-height: 1.02; letter-spacing: -0.015em; margin-bottom: 8px; transition: color .4s; }
.h-tile p { color: var(--muted); font-size: var(--fs-body); line-height: 1.5; transition: color .4s; }
.h-tile-body { align-self: start; }
@keyframes h-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@media (hover: hover) {
  .h-tile:hover, .h-tile:focus-visible { transform: translateY(-6px); border-color: transparent; box-shadow: 0 24px 48px -24px rgba(15, 26, 43, .55); }
  .h-tile:hover::before, .h-tile:focus-visible::before { transform: scaleY(1); }
  .h-tile:hover .h-tile-no, .h-tile:focus-visible .h-tile-no { color: var(--highlight); }
  .h-tile:hover .h-tile-icon, .h-tile:focus-visible .h-tile-icon { stroke: var(--highlight); transform: scale(1.08) rotate(-3deg); }
  .h-tile:hover .h-tile-icon *, .h-tile:focus-visible .h-tile-icon * { animation: h-draw .9s var(--ease-out) both; }
  .h-tile:hover .h-tile-icon :nth-child(2), .h-tile:focus-visible .h-tile-icon :nth-child(2) { animation-delay: .12s; }
  .h-tile:hover .h-tile-icon :nth-child(3), .h-tile:focus-visible .h-tile-icon :nth-child(3) { animation-delay: .24s; }
  .h-tile:hover .h-tile-icon :nth-child(4), .h-tile:focus-visible .h-tile-icon :nth-child(4) { animation-delay: .36s; }
  .h-tile:hover h3, .h-tile:focus-visible h3 { color: var(--bg); }
  .h-tile:hover p, .h-tile:focus-visible p { color: #b8bfca; }
  /* "eine Gestaltung": the neighbours step back a little while one block is in focus */
  .h-tiles:has(.h-tile:hover) .h-tile:not(:hover) { opacity: .55; }
}
.h-tile { transition-property: transform, border-color, box-shadow, opacity; }
@media (prefers-reduced-motion: reduce) {
  .h-tile, .h-tile::before, .h-tile-icon { transition: none; }
  .h-tile:hover, .h-tile:hover .h-tile-icon { transform: none; }
  .h-tile:hover .h-tile-icon * { animation: none; }
}

/* the process sits on night blue, so it stands apart from the blocks above and the work below */
.page-home .steps-sec { margin-top: var(--section); padding-block: clamp(80px, 9vw, 140px); background: var(--ink); color: var(--bg); }
.page-home .steps-sec p { color: #b8bfca; }
.page-home .steps li::before { background: rgba(242, 239, 232, .35); }
.page-home .steps li:first-child::before { background: var(--highlight); }
.page-home .steps-sec + .h-work { margin-top: 0; }

/* Ausgewählte Arbeiten: links die Überschrift, rechts ein Mosaik, das nach hinten wegkippt */
.h-work { margin-top: var(--section); background: #fff; overflow: hidden; }
.m-stage { position: relative; display: grid; grid-template-columns: minmax(0, 11fr) minmax(0, 13fr); align-items: center; min-height: clamp(520px, calc(64vw - 200px), 760px); }
.m-head { position: relative; z-index: 2; padding-block: clamp(80px, 9vw, 140px); }
.m-lead { font-size: var(--fs-body); line-height: 1.5; margin: var(--gap-h2) 0 1.75rem; max-width: 34ch; }

.m-persp { position: relative; align-self: stretch; margin-right: calc(-1 * var(--m)); perspective: 2200px; perspective-origin: 100% 100%; }
/* rotateX only, vanishing point on the right edge: the right side stays exactly vertical, the left side slants */
.m-grid { --gw: min(calc(54vw + 100px), 980px); position: absolute; right: 0; bottom: -18%; width: var(--gw);
  height: calc(var(--gw) * 2.3); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; gap: calc(var(--gw) * .022); list-style: none;
  transform-origin: 100% 100%; transform: rotateX(34deg); }
.m-col > ul { display: grid; gap: calc(var(--gw) * .022); list-style: none; transform: translateY(calc(var(--gw) * var(--off))); }
.m-tile { display: grid; aspect-ratio: var(--ar); }
.m-tile > a { display: block; overflow: hidden; border-radius: 10px; background: var(--tc);
  transition: transform .6s var(--ease-spring), box-shadow .4s var(--ease-out), opacity .4s var(--ease-out); }
/* the far left fades out into the white, as in the reference */

.m-tile img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* devices */
.dev { position: relative; display: block; filter: drop-shadow(0 24px 30px rgba(15,26,43,.22)); }
.scr { position: relative; display: block; overflow: hidden; background: #fff; height: 100%; }
.scr-page { display: grid; gap: 7px; padding: 8px; align-content: start; height: 260%; transition: transform 6s cubic-bezier(.45,0,.2,1); }
.scr-page > span { display: block; border-radius: 3px; background: hsl(var(--hue) 18% 88%); height: 6px; }
.scr-page .sp-nav { height: 8px; width: 100%; background: hsl(var(--hue) 22% 92%); }
.scr-page .sp-hero { height: auto; aspect-ratio: 16 / 8; background: linear-gradient(135deg, hsl(var(--hue) 45% 46%), hsl(calc(var(--hue) + 30) 40% 70%)); }
.scr-page .s { width: 60%; }
.scr-page .sp-row { display: grid; grid-auto-flow: column; gap: 6px; height: auto; background: none; }
.scr-page .sp-row > span { display: block; aspect-ratio: 1; border-radius: 3px; background: hsl(var(--hue) 25% 80%); }
.scr-page .sp-img { height: auto; aspect-ratio: 16 / 7; background: hsl(calc(var(--hue) + 20) 30% 72%); }
.scr-page .sp-foot { height: 40px; background: hsl(var(--hue) 30% 22%); }

.dev-laptop { width: 86%; }
.dev-laptop .dev-lid { display: block; padding: 2.2% 2.2% 3%; border-radius: 14px 14px 4px 4px; background: #1d2330; aspect-ratio: 16 / 10.4; }
.dev-laptop .scr { border-radius: 3px; }
.dev-laptop .dev-base { display: block; height: 10px; margin-inline: -6%; border-radius: 2px 2px 12px 12px; background: linear-gradient(#d9dce1, #a9aeb6); }
.dev-monitor { width: 82%; display: grid; justify-items: center; }
.dev-monitor .dev-lid { display: block; width: 100%; padding: 2.5%; border-radius: 10px; background: #e3e5e8; aspect-ratio: 16 / 10; box-shadow: inset 0 0 0 1px rgba(0,0,0,.06); }
.dev-monitor .dev-stand { display: block; width: 22%; height: 26px; background: linear-gradient(#cfd3d8, #b3b8bf); clip-path: polygon(18% 0, 82% 0, 100% 100%, 0 100%); }
.dev-phone { height: 100%; aspect-ratio: 9 / 19; padding: 3.5%; border-radius: 28px; background: #1d2330; max-width: 100%; }
.dev-phone .scr { border-radius: 22px; }
.dev-tablet { height: 100%; aspect-ratio: 3 / 4; padding: 4%; border-radius: 22px; background: #1d2330; max-width: 100%; }
.dev-tablet .scr { border-radius: 8px; }
.dev-browser { width: 100%; height: 100%; display: grid; grid-template-rows: auto 1fr; border-radius: 10px; overflow: hidden; background: #fff; }
.dev-browser .dev-bar { display: flex; gap: 5px; padding: 8px 10px; background: #eceae6; }
.dev-browser .dev-bar i { width: 8px; height: 8px; border-radius: 50%; background: #c9c5be; }
.dev-browser .scr-page { height: 220%; }
.dev-photo { position: absolute; inset: 0; filter: none; transform: none;
  background: linear-gradient(120deg, hsl(var(--hue) 30% 55%), hsl(calc(var(--hue) + 40) 25% 78%)); }

@media (hover: hover) {
  .m-tile > a:hover { transform: translateY(-4px); box-shadow: 0 30px 50px -34px rgba(15,26,43,.45); }
  .m-tile > a:hover .scr-page { transform: translateY(-58%); }
  .m-grid:has(.m-tile > a:hover) .m-tile > a:not(:hover) { opacity: .8; }
}
@media (prefers-reduced-motion: reduce) { .scr-page { transition: none; } }

@media (max-width: 860px) {
  .m-stage { grid-template-columns: 1fr; }
  .m-head { padding-bottom: 0; }
  .m-persp { height: 118vw; margin: 32px calc(-1 * var(--m)) 0; overflow: hidden; }
  .m-grid { --gw: 128vw; left: -4%; bottom: -10%; }
}

/* Alles aus einer Hand: einen Tick dunkler, damit es sich vom weißen Mosaik absetzt */
.h-hand { position: relative; isolation: isolate; padding-bottom: calc(var(--section) / 2); }
.h-hand::before { content: ""; position: absolute; inset: 0 calc(50% - 50vw); z-index: -1; background: #e6e1d6; }

/* the space from "Alle Referenzen" down to the photo is half the usual section gap */
.h-work + .h-hand { padding-top: calc(var(--section) / 2); }
/* and the same space again from the photo down to the summit */
.h-hand + .h-summit { margin-top: 0; }

/* Alles aus einer Hand */
.h-hand-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 5vw, 96px); align-items: center; }
.h-hand-photo { margin: 0; }
.h-hand-photo img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
.h-lead { font-size: var(--fs-body); line-height: 1.5; margin: var(--gap-h2) 0 2rem; max-width: 34ch; }
.h-facts { display: grid; grid-template-columns: repeat(4, auto); gap: 20px 32px; margin-bottom: 36px; justify-content: start; }
.h-facts dt { font-size: var(--step-small); color: var(--muted); }
.h-facts dd { font-weight: 600; }

/* Gipfel: Aufstieg und Abklatschen, danach wechselnde ruhige Schleifen; feine Kraniche verschwinden im Nebel */
.h-summit { position: relative; margin-top: var(--section); aspect-ratio: 16 / 9; overflow: hidden; color: var(--ink); }
.h-summit-img, .h-hike { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.h-hike { z-index: 1; }
.h-talk { z-index: 2; opacity: 0; }
.h-talk.is-on { opacity: 1; }
.h-sflock { position: absolute; inset: 0; z-index: 3; pointer-events: none; overflow: hidden; }
.h-sflock .h-bird { filter: brightness(.55); }
/* two faint cloud veils drift slowly through the background; clipped above the ridge so the hikers stay untouched */
.h-clouds { position: absolute; inset: 0; z-index: 3; pointer-events: none; overflow: hidden;
  clip-path: polygon(0 0, 100% 0, 100% 78%, 80% 57%, 73% 44%, 63% 42%, 54% 51%, 0 69%);
  -webkit-mask-image: linear-gradient(#000 0 50%, transparent 78%); mask-image: linear-gradient(#000 0 50%, transparent 78%); }
.h-cloud { position: absolute; left: 0; width: 200%; background-repeat: repeat-x; background-size: 50% 100%; will-change: transform;
  animation: cloud-drift 110s linear infinite; }
.h-cloud-a { top: 18%; height: 40%; background-image: url(../img/home/wolken-a.webp); opacity: .3; }
.h-cloud-b { top: 34%; height: 34%; background-image: url(../img/home/wolken-b.webp); opacity: .22; animation-duration: 170s; animation-delay: -60s; }
@keyframes cloud-drift { to { transform: translateX(-50%); } }
.h-summit:not(.is-visible) .h-cloud { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .h-cloud { animation: none; } }
.h-summit::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 20%; background: linear-gradient(rgba(15,26,43,0), #0f1a2b); }
.h-summit-text { position: relative; z-index: 4; padding-top: clamp(48px, 7vw, 120px); max-width: 760px; }
.h-summit-text p:not(.h-label) { font-size: var(--fs-body); line-height: 1.5; margin: var(--gap-h2) 0 1.75rem; max-width: 30ch; }
.h-summit + .contact { margin-top: 0; }

@media (max-width: 760px) {
  /* phone: own picture with the two shores moved closer together (bruecke-mobil.webp, 800 × 1461), dark water below for the text */
  .h-bridge-stage { aspect-ratio: 800 / 1201; }
  /* soft, half-transparent dark behind the text, so it can sit on the picture */
  .h-bridge-stage::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 60%; z-index: 3; pointer-events: none;
    background: linear-gradient(rgba(2, 8, 15, 0), rgba(2, 8, 15, .35) 40%, rgba(2, 8, 15, .6)); }
  .h-bridge-text { left: 16px; right: 16px; bottom: 70px; white-space: normal; }
  .h-car { width: 2.6vw; height: 1.2vw; margin-top: -0.6vw; }
  .h-road-1 { top: 42.84%; } .h-road-2 { top: 43.99%; }
  .h-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .h-tile { min-height: 0; gap: 16px; padding: 18px; }
  .h-tile-icon { width: 52px; }
  .h-tile p { -webkit-hyphens: auto; hyphens: auto; overflow-wrap: anywhere; }
  .h-cards { grid-auto-columns: 78%; }
  .h-hand-grid { grid-template-columns: 1fr; }
  .h-facts { grid-template-columns: repeat(2, auto); }
  /* phone: text on the sky colour above, the whole picture in 16:9 below, so nothing covers the ridge and the hikers */
  .h-summit { aspect-ratio: auto; padding-bottom: 56.25vw; background: linear-gradient(#eef1f3, #c9d6e2); }
  .h-summit-img, .h-hike, .h-sflock, .h-clouds { top: auto; bottom: 0; height: 56.25vw; }
  .h-summit-img, .h-hike { -webkit-mask-image: linear-gradient(transparent, #000 24%); mask-image: linear-gradient(transparent, #000 24%); }
  .h-summit::after { height: 12vw; }
  .h-summit-text { padding-bottom: 32px; }
}

/* phone: the four building blocks one below the other, icon left of the text, so nothing gets hyphenated */
@media (max-width: 560px) {
  .h-tiles { grid-template-columns: 1fr; gap: 10px; }
  .h-tile { grid-template-columns: 44px 1fr; grid-template-rows: auto; align-items: start; gap: 4px 18px; padding: 18px 20px; }
  .h-tile-no { position: absolute; top: 16px; right: 18px; font-size: .8125rem; }
  .h-tile-icon { width: 44px; align-self: start; margin-top: 2px; }
  .h-tile h3 { margin-bottom: 4px; }
  .h-tile p { -webkit-hyphens: manual; hyphens: manual; overflow-wrap: normal; }
}

/* phone: one rhythm for the whole home page — 85 px between the content and every block edge.
   Exceptions: the bridge picture's top, the project mosaic's bottom and the summit picture's bottom,
   where a picture is the edge. */
@media (max-width: 860px) {
  .page-home .hero-inner { padding-bottom: 85px; }
  .page-home .problem { padding-top: 90px; padding-bottom: 85px; }   /* 90: the heading's line box adds ~5 px of air */
  .page-home .h-bridge-text { bottom: 85px; }
  .page-home .h-bridge + .section { padding-top: 85px; }
  .page-home .h-services + .steps-sec, .page-home .steps-sec { margin-top: 85px; padding-top: 85px; padding-bottom: 85px; }
  .page-home .steps-sec + .h-work { margin-top: 0; }
  .page-home .m-head { padding-top: 85px; }
  .page-home .h-work + .h-hand, .page-home .h-hand { padding-top: 85px; padding-bottom: 85px; }
  .page-home .h-hand + .h-summit { margin-top: 0; }
  .page-home .h-summit-text { padding-top: 85px; }
  .page-home .contact { padding-top: 85px; padding-bottom: 85px; }
}

/* phone: the project mosaic hangs from the top edge — the first row stays whole, the bottom runs out;
   the photo of "Alles aus einer Hand" follows edge to edge, right below it */
@media (max-width: 860px) {
  .page-home .m-persp { height: 118vw; margin: 32px calc(-1 * var(--m)) 0; overflow: hidden; }
  .page-home .m-grid { --gw: 92vw; left: auto; right: 0; top: 14px; bottom: auto; transform-origin: 100% 0; }
  .page-home .m-col > ul { transform: translateY(calc(var(--gw) * (var(--off) + .09))); }
  .page-home .h-work + .h-hand, .page-home .h-hand { padding-top: 0; }
  .page-home .h-hand-photo { margin-inline: calc(-1 * var(--m)); }
  .page-home .h-hand-photo img { width: 100%; }
}

/* phone: the summit picture scaled up by 376/295 and anchored left, so the right edge falls away and it grows taller */
@media (max-width: 860px) {
  .page-home .h-summit { padding-bottom: 71.69vw; }
  .page-home .h-summit-img, .page-home .h-hike, .page-home .h-sflock, .page-home .h-clouds { left: 0; right: auto; width: 127.46%; max-width: none; height: 71.69vw; }
}

/* phone footer: social icons and the two cards first on the footer blue, the underwater picture last,
   full and unfaded down to the bottom edge, the wordmark in the open water left of the legs */
@media (max-width: 860px) {
  .site-footer { padding: 85px var(--m) 66.96vw; }
  .foot-cols { margin-bottom: 56px; }
  /* scaled up by 375/315 and anchored left: 60 px fall away on the right, the picture grows taller */
  .foot-water { top: auto; bottom: 0; height: 66.96vw; -webkit-mask-image: none; mask-image: none; }
  .foot-water video { width: 119.05%; }
  .foot-mark { position: absolute; z-index: 2; left: var(--m); bottom: calc(66.96vw * .42); margin: 0; max-width: 56%;
    white-space: normal; font-size: 9.5vw; text-shadow: 0 2px 20px rgba(0, 10, 25, .45); }
  .foot-mark span { display: block; color: rgba(242, 239, 232, .78); }
  .foot-legal { display: none; }
}

/* 404: the home stage with one looping clip of the frazzled crane, no loader, no cards */
.hero-404 .hero-media { will-change: auto; }
.hero-404 .hero-media video { opacity: 1; }
@media (max-width: 860px) {
  .hero-404 .hero-inner { padding-bottom: 85px; }
}

/* 404: "Wo wollen Sie hin?" sits right under the crane, four signposts in the style of the e-mail and phone cards */
.hero-404 + .nf-ways { margin-top: 0; }
.nf-cards { margin-top: clamp(40px, 5vw, 64px); }
@media (max-width: 860px) { .nf-ways { padding-top: 85px; padding-bottom: 85px; } }

/* ---------- Leistungen: the crane on the summer field (hero) and the vole's workshop under the field (footer) ---------- */
:is(.page-leist, .page-ref, .page-kontakt) .site-header:not(.is-compact) { position: absolute; inset: 0 0 auto 0; }   /* the header floats over the crane, as on the home page */
:is(.page-leist, .page-ref, .page-kontakt) .site-header:not(.is-compact):not(.is-open) .brand span,
:is(.page-leist, .page-ref, .page-kontakt) .site-header:not(.is-compact):not(.is-open) .site-nav a { color: var(--field-1-ink); }
:is(.page-leist, .page-ref, .page-kontakt) .site-header:not(.is-compact):not(.is-open) .brand em { color: rgba(242, 239, 232, .72); }
.hero-leist { background: #2b3a1c; }   /* the dark green of the out-of-focus forest, behind the still while it loads */
.hero-leist .hero-media img, .hero-leist .hero-media video { object-position: 70% 50%; }
/* a soft shade on the left, so the light text stays readable over the leaves */
.hero-leist .hero-media::before { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, rgba(14, 20, 8, .55), rgba(14, 20, 8, .25) 45%, rgba(14, 20, 8, 0) 65%); } /* taste-skill-ignore: a legibility shade over the photo, not a decorative gradient */
.hero-leist .hero-media .hero-move { z-index: 0; }
.hero-leist .hero-inner { color: var(--field-1-ink); }
.hero-leist .hero-lead { color: rgba(242, 239, 232, .88); }
.hero-leist .hero-actions .link { color: var(--field-1-ink); }
/* the hero cards on Leistungen, Referenzen and Kontakt use the same glass as on the home page (Ben, 10.11.) */
/* the same colour as on the home page reads too grey over the darker pictures here: the small line is darker */
.hero-leist .hc-d { color: color-mix(in oklab, var(--ink) 82%, var(--muted)); }
.hc-house path { fill: none; stroke: var(--ink); stroke-width: 4.5; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 860px) {
  :is(.page-leist, .page-ref, .page-kontakt) .site-header:not(.is-compact):not(.is-open) .menu-btn { background: var(--bg); color: var(--ink); }
  .hero-leist { background: var(--bg); }
  .hero-leist .hero-media::before { display: none; }
  .hero-leist .hero-media::after { background: linear-gradient(rgba(242, 239, 232, 0), rgba(242, 239, 232, .35) 45%, var(--bg)); } /* taste-skill-ignore: a fade of the still into the paper white */
  .hero-leist .hero-media img, .hero-leist .hero-media video { object-position: 79.5% 50%; }
  .hero-leist .hero-inner { color: var(--ink); padding-bottom: 85px; }
  .hero-leist .hero-lead { color: var(--ink); }
}

/* footer under the field: built exactly like the lake footer of the home page — the workshop film fills the footer,
   cards, icons and wordmark lie on top of it */
.site-footer--feld { background: #2c1a0c; }   /* dark soil behind the film while it loads */
.site-footer--feld .foot-water video { width: 100%; transform: scaleX(-1); }
/* the whole workshop in view, mirrored: camera and laptop stand right of the cards, so filming and typing stay visible;
   the drawing desk sits under the cards, between them and the wordmark */

/* ==========================================================================
   Referenzen: masonry gallery in a three-column base grid.
   One row unit = 0.62 column width, so S is about 16:10, W a wide strip,
   T portrait and L a large 16:10 anchor. dense fills the gaps, gaps stay equal.
   ========================================================================== */
.page-ref .wrap:has(> .masonry) { container-type: inline-size; }
.masonry {
  --cols: 3;
  --unit: calc((100cqi - (var(--cols) - 1) * var(--gap)) / var(--cols) * .62);
  display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  grid-auto-rows: var(--unit); grid-auto-flow: dense; gap: var(--gap);
  margin-top: clamp(40px, 5vw, 72px);
}
.tile { position: relative; display: block; overflow: hidden; background: var(--surface); color: var(--bg); text-decoration: none; border-radius: 4px; isolation: isolate; }
.tile[hidden] { display: none; }
.t-L { grid-column: span 2; grid-row: span 2; }
.t-W { grid-column: span 2; }
.t-T { grid-row: span 2; }
.tile-media, .tile-media img { position: absolute; inset: 0; width: 100%; height: 100%; }
.tile-media img { object-fit: cover; object-position: top center; transition: transform 1.1s var(--ease-out); }
.tile-dummy { position: absolute; inset: 0; display: grid; place-items: center; background: var(--dummy); }
.tile-dummy span { font-family: var(--display); font-weight: 700; font-size: clamp(1.25rem, 1rem + 1.4vw, 2.5rem); letter-spacing: -0.02em; color: rgb(255 255 255 / .35); mix-blend-mode: difference; padding: 1rem; text-align: center; }
.tile-info {
  position: absolute; inset: auto 0 0 0; z-index: 2; display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: .5rem 1rem;
  padding: clamp(14px, 1.6vw, 24px);
  background: linear-gradient(to top, rgb(15 26 43 / .82), rgb(15 26 43 / 0));
  padding-top: clamp(48px, 5vw, 80px);
  opacity: 0; transform: translateY(14px); transition: opacity .45s var(--ease-out), transform .6s var(--ease-out);
}
.tile-title { font-family: var(--display); font-weight: 700; font-size: clamp(1.125rem, .95rem + .6vw, 1.625rem); line-height: 1.05; letter-spacing: -0.015em; }
.t-L .tile-title { font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.5rem); }
.tags { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.tag { font-size: .8125rem; font-weight: 600; line-height: 1; padding: .45em .75em; border-radius: 999px; background: rgb(242 239 232 / .16); border: 1px solid rgb(242 239 232 / .4); backdrop-filter: blur(6px); white-space: nowrap; }
.tile-play { position: absolute; top: 12px; right: 12px; z-index: 2; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: var(--accent-ink); transition: transform .5s var(--ease-spring); }
.tile-play svg { width: 13px; height: 13px; margin-left: 2px; }
.tile:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.tile:focus-visible .tile-info { opacity: 1; transform: none; }
@media (hover: hover) {
  .tile:hover .tile-info { opacity: 1; transform: none; }
  .tile:hover .tile-media img { transform: scale(1.045); }
  .tile:hover .tile-play { transform: scale(1.12); }
}
/* touch devices without hover: name and tags always visible */
@media (hover: none) {
  .tile-info { opacity: 1; transform: none; }
}
@media (max-width: 1000px) {
  .masonry { --cols: 2; }
}
/* phone: one column, picture with title and tags below it */
@media (max-width: 700px) {
  .masonry { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; row-gap: 36px; }
  .t-L, .t-W, .t-T { grid-column: auto; grid-row: auto; }
  .tile { background: none; color: var(--ink); overflow: visible; border-radius: 0; }
  .tile-media { position: relative; inset: auto; height: auto; display: block; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 4px; background: var(--surface); }
  .t-T .tile-media { aspect-ratio: 4 / 5; }
  .tile-info { position: relative; inset: auto; opacity: 1; transform: none; background: none; padding: 12px 0 0; }
  .tag { background: none; border-color: rgb(15 26 43 / .3); backdrop-filter: none; }
}
@media (prefers-reduced-motion: reduce) {
  .tile-info, .tile-media img, .tile-play { transition: none; }
}
.page-ref .clients h2 { font-family: var(--display); }

/* ---------- project pages /referenz/... ---------- */
.projekt-head { padding-top: clamp(40px, 7vw, 112px); }
.projekt-back { font-size: var(--step-small); }
.projekt-title { font-family: var(--display); font-weight: 700; font-size: clamp(2.5rem, 1.4rem + 5vw, 6.5rem); line-height: .95; letter-spacing: -0.03em; margin-top: clamp(20px, 2.5vw, 36px); max-width: 16ch; }
.projekt-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 20px; color: var(--muted); font-size: var(--step-small); }
.projekt-meta .tag { background: none; border-color: rgb(15 26 43 / .3); color: var(--ink); backdrop-filter: none; }
.projekt-lead { margin-top: clamp(32px, 4vw, 56px); }
.projekt-lead > div { overflow: hidden; border-radius: 4px; background: var(--surface); }
.projekt-lead img { width: 100%; max-height: 82vh; object-fit: cover; object-position: top center; }
.projekt-lead.is-dummy .tile-dummy { position: relative; aspect-ratio: 16 / 7; }
.proj-play { position: relative; display: block; }
.proj-play .play { position: absolute; left: 50%; top: 50%; width: clamp(64px, 7vw, 96px); aspect-ratio: 1; margin: calc(clamp(64px, 7vw, 96px) / -2) 0 0 calc(clamp(64px, 7vw, 96px) / -2); border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: var(--accent-ink); transition: transform .5s var(--ease-spring); }
.proj-play .play svg { width: 34%; margin-left: 6%; }
.proj-play:hover .play { transform: scale(1.08); }
.projekt-body { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: 28px; margin-top: clamp(40px, 5vw, 80px); }
.projekt-text { grid-column: 1 / 8; font-size: var(--step-lead); line-height: 1.4; }
.projekt-text p + p { margin-top: 1em; }
.projekt-text .todo, .todo-note { color: var(--muted); font-style: italic; }
.projekt-acts { grid-column: 9 / 13; display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.todo-note { grid-column: 1 / -1; font-size: var(--step-small); border-left: 3px solid var(--accent); padding-left: 12px; }
.proj-gallery { padding-inline: var(--m); margin-top: clamp(56px, 7vw, 112px); display: grid; gap: var(--gap); align-items: start; }
.proj-gallery--shots { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.proj-gallery--posts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.proj-gallery figure { overflow: hidden; border-radius: 4px; background: var(--surface); box-shadow: 0 1px 0 rgb(15 26 43 / .06), 0 18px 40px -24px rgb(15 26 43 / .35); }
.proj-gallery img { width: 100%; }
.projekt-nav { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); margin-top: var(--section); border-top: 1px solid rgb(15 26 43 / .15); padding-top: 28px; }
.pn { text-decoration: none; display: flex; flex-direction: column; gap: 6px; }
.pn small { color: var(--muted); font-size: var(--step-small); }
.pn span { font-family: var(--display); font-weight: 700; font-size: var(--step-lead); line-height: 1.1; }
.pn-next { text-align: right; align-items: flex-end; }
.pn:hover span { text-decoration: underline; text-underline-offset: .15em; text-decoration-thickness: 2px; }
@media (max-width: 860px) {
  .projekt-text, .projekt-acts { grid-column: 1 / -1; }
  .proj-gallery--posts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* project pages sit on plain white so the screenshots and device photos read cleanly */
.page-projekt { --bg: #fff; background: #fff; }

/* ---------- Referenzen: the crane at the Linum resting place (hero), filters right below ---------- */
.hero-ref { background: #5b5a3c; }   /* the olive-gold of the blurred flock, behind the still while it loads */
.hero-ref .hero-media img, .hero-ref .hero-media video { object-position: 68% 50%; }
.ref-arbeiten { padding-top: clamp(48px, 6vw, 88px); }
.ref-arbeiten .filters { margin-top: 0; }
.ref-arbeiten + .wrap .masonry { margin-top: clamp(24px, 3vw, 40px); }
@media (max-width: 860px) {
  .hero-ref { background: var(--bg); }
  .hero-ref .hero-media img, .hero-ref .hero-media video { object-position: 70% 50%; }
}
.hero-ref .hero-media .hero-loop { opacity: 0; transition: opacity .8s ease; z-index: 0; }
.hero-ref .hero-media .hero-loop.is-on { opacity: 1; }
.hero-ref .hero-media .hero-move { z-index: 0; transition: none; }   /* the action starts on the loop's last frame, so it can cut in without a fade */
.site-footer--bau { background: #2c1a0c; }   /* the same dark soil as under the Leistungen field */
.site-footer--bau .foot-water video { width: 100%; }   /* not mirrored: the vole stands right of the cards, the camera may hide under them */
/* 85 px of white between the last line of the client list and the footer film (the list items carry 7 px of padding themselves) */
.page-ref .clients { padding-bottom: 75px; }
/* a light, fine shadow under every tile, so the masonry lifts a little off the paper; a touch more on hover */
.masonry .tile { box-shadow: 0 1px 3px rgb(15 26 43 / .10), 0 10px 28px -8px rgb(15 26 43 / .28); transition: box-shadow .5s var(--ease-out), transform .5s var(--ease-out); }
@media (hover: hover) {
  .masonry .tile:hover { box-shadow: 0 2px 5px rgb(15 26 43 / .12), 0 20px 44px -12px rgb(15 26 43 / .36); transform: translateY(-3px); }
}
@media (max-width: 700px) {
  .masonry .tile { box-shadow: none; }
  .masonry .tile-media { box-shadow: 0 1px 3px rgb(15 26 43 / .10), 0 10px 28px -8px rgb(15 26 43 / .28); }
}
@media (prefers-reduced-motion: reduce) { .masonry .tile:hover { transform: none; } }
/* Leistungen: clips cut over each other without a fade (they start and end on the same frame) */
.hero-leist:not(.hero-ref) .hero-media .hero-move { transition: opacity .25s ease; }

/* Leistungen: only two hero cards, both square */
.hero-leist:not(.hero-ref) .hero-cards { grid-template-columns: repeat(2, 13.5rem); }
.hero-leist:not(.hero-ref) .hc { aspect-ratio: 1; min-height: 0; }
@media (max-width: 860px) {
  .hero-leist:not(.hero-ref) .hero-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero-leist:not(.hero-ref) .hero-cards li:first-child { grid-column: auto; }
}

/* scroll mouse (from the Christmas landing page): bottom centre of the hero, the wheel rolls down and fades */
.scroll-hint { position: absolute; left: 50%; bottom: clamp(18px, 3.2vh, 34px); transform: translateX(-50%); z-index: 3; display: block; padding: 8px; color: var(--field-1-ink); }
.scroll-hint .mouse { position: relative; display: block; width: 22px; height: 34px; border: 1.6px solid currentColor; border-radius: 12px; opacity: .9; }
.scroll-hint .mouse__wheel { position: absolute; left: 50%; top: 6px; width: 3px; height: 7px; margin-left: -1.5px; border-radius: 2px; background: currentColor; }
@media (prefers-reduced-motion: no-preference) {
  .scroll-hint .mouse__wheel { animation: scroll-wheel 1.8s cubic-bezier(.45, 0, .2, 1) infinite; }
}
@keyframes scroll-wheel {
  0% { transform: translateY(0); opacity: 0; }
  20% { opacity: 1; }
  70% { transform: translateY(11px); opacity: 0; }
  100% { transform: translateY(11px); opacity: 0; }
}
@media (max-width: 860px) {
  .scroll-hint { color: var(--ink); bottom: 24px; }
}

/* Referenzen: two square hero cards, as on Leistungen */
.hero-ref .hero-cards { grid-template-columns: repeat(2, 13.5rem); }
.hero-ref .hc { aspect-ratio: 1; min-height: 0; }
@media (max-width: 860px) {
  .hero-ref .hero-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero-ref .hero-cards li:first-child { grid-column: auto; }
  .hero-ref .hc { aspect-ratio: auto; }   /* the video line needs three rows on a phone: let both cards grow, they stay equal in height */
}

/* ---------- Kontakt: the crane flies in with a letter (hero, still picture) ---------- */
.hero-kontakt { background: #8a7a6a; }   /* the dusky gold of the evening sky, behind the picture while it loads */
.hero-kontakt .hero-media img { object-position: 62% 50%; }
.hero-kontakt .hero-cards { grid-template-columns: repeat(2, 13.5rem); }
.hero-kontakt .hc { aspect-ratio: 1; min-height: 0; }
.hc-line path { fill: none; stroke: var(--ink); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.kontakt-daten { padding-top: 85px; padding-bottom: 85px; }   /* Ben: 85 px above and below the contact details */
.kontakt-daten .kontakt-grid { margin-top: 0; }
.page-kontakt .kontakt-daten + .contact { margin-top: 0; }   /* the 85 px below come from .kontakt-daten alone */
/* one below the other: the label is the small heading, the detail itself plain body text */
.kontakt-daten .kontakt-data { gap: 32px; }
.kontakt-daten .kontakt-data dt { font-family: var(--display); font-weight: 700; font-size: clamp(1.375rem, 1.1rem + 0.9vw, 1.875rem); line-height: 1.05; letter-spacing: -0.015em; color: var(--ink); margin-bottom: 6px; }
.kontakt-daten .kontakt-data dd { font-size: var(--step-body); font-weight: 400; letter-spacing: 0; line-height: 1.5; }
@media (max-width: 860px) {
  .hero-kontakt { background: var(--bg); }
  .hero-kontakt .hero-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero-kontakt .hero-cards li:first-child { grid-column: auto; }
  .hero-kontakt .hc { aspect-ratio: auto; }
  .hero-kontakt .hc-d { overflow-wrap: normal; }
  .hero-kontakt .hero-media img { object-position: 66% 50%; }
}

/* ---------- Kontakt footer: looking down from the plane onto the fields, a crane far below (still picture) ---------- */
.site-footer--flug { background: #3d5a2a; }   /* field green behind the picture while it loads */
.site-footer--flug .foot-water img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 70% 60%; }
/* the social icons get the same light glass as the two cards, so they stand out on the bright fields */
.site-footer--flug .foot-social a { background: rgba(242, 239, 232, .1); border-color: rgba(255, 255, 255, .22);
  -webkit-backdrop-filter: blur(16px) saturate(1.08); backdrop-filter: blur(16px) saturate(1.08); }

/* Referenzen, Auftraggeber: the short text sits right under the heading, not halfway down beside the long list */
.page-ref .clients .grid { grid-template-rows: auto 1fr; }
.page-ref .clients .sec-text { align-self: start; }

/* ---------- Leistungen: the four building blocks as large type rows (idea 5). One row open at a time ---------- */
.section.bausteine { padding-top: 85px; }   /* Ben: 85 px from the bottom of the hero picture to the heading */
.bausteine .bs-head { max-width: 46rem; }
.bausteine .bs-head p { margin-top: 18px; color: var(--muted); font-size: var(--step-body); line-height: 1.55; }
.bausteine .bs-head .link { white-space: nowrap; }
.bs-list { margin-top: clamp(40px, 5vw, 72px); border-top: 1px solid rgba(15, 26, 43, .18); }
.bs { border-bottom: 1px solid rgba(15, 26, 43, .18); }
.bs summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: clamp(56px, 8vw, 120px) 1fr auto auto; align-items: center; gap: clamp(16px, 2.4vw, 32px); padding: clamp(18px, 2.2vw, 28px) 0; }
.bs summary::-webkit-details-marker { display: none; }
.bs-num { font-family: var(--display); font-size: clamp(1.1rem, 1rem + .4vw, 1.4rem); color: var(--highlight); }
.bs-word { margin: 0; font-family: var(--display); font-weight: 700; font-size: clamp(2.5rem, 1.6rem + 3.6vw, 4.5rem); line-height: .95; letter-spacing: -.02em; color: rgba(15, 26, 43, .78); transition: color .3s ease, transform .5s var(--ease-out); }
.bs[open] .bs-word, .bs summary:hover .bs-word { color: var(--ink); }
.bs summary:hover .bs-word { transform: translateX(6px); }
.bs-ic { width: clamp(36px, 3.4vw, 52px); height: clamp(36px, 3.4vw, 52px); }
.bs-ic * { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.bs-arr { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(15, 26, 43, .25); transition: transform .45s var(--ease-spring), background-color .3s ease; }
.bs-arr svg { width: 12px; height: 12px; }
.bs.is-closing .bs-arr { transform: none; background: transparent; color: inherit; border-color: rgba(15, 26, 43, .25); }
.bs[open]:not(.is-closing) .bs-arr { transform: rotate(45deg); background: var(--ink); color: var(--bg); border-color: var(--ink); }
.bs summary:focus-visible { outline: 2px solid var(--highlight); outline-offset: 4px; }
.bs-body { padding: 0 0 clamp(26px, 3vw, 40px) calc(clamp(56px, 8vw, 120px) + clamp(16px, 2.4vw, 32px)); max-width: 54rem; overflow: hidden; }
.bs-body p { color: var(--ink); font-size: var(--step-body); line-height: 1.6; }
.bs-body p + p { margin-top: 12px; }
.bs-items { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; list-style: none; padding: 0; }
.bs-items li { font-size: var(--step-small); padding: 6px 14px; border-radius: 99px; border: 1px solid rgba(15, 26, 43, .22); }
@media (max-width: 700px) {
  .bs summary { grid-template-columns: 40px 1fr auto; }
  .bs-ic { display: none; }
  .bs-body { padding-left: 0; }
}
@media (prefers-reduced-motion: reduce) { .bs summary:hover .bs-word { transform: none; } }

/* ---------- Leistungen, Einzeln buchbar: small blocks joined by lines (a network, not a list) ---------- */
.single .net-head { max-width: 40rem; }
.single .net-head .single-intro { margin-top: 16px; }
.net { position: relative; height: clamp(380px, 34vw, 480px); margin-top: clamp(36px, 4vw, 56px); }
.net-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.net-lines line { stroke: rgba(242, 239, 232, .22); stroke-width: 1; transition: stroke .3s ease, stroke-width .3s ease; }
.net-lines line.is-hub { stroke-dasharray: 3 5; stroke: rgba(242, 239, 232, .16); }
.net-lines line.is-on { stroke: var(--highlight); stroke-width: 1.6; stroke-dasharray: none; }
.net-nodes { list-style: none; margin: 0; padding: 0; }
.bn { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%); font: 600 var(--step-small)/1.2 var(--font); color: var(--field-2-ink);
  background: var(--field-2); border: 1px solid rgba(242, 239, 232, .35); border-radius: 99px; padding: 10px 16px; cursor: default; white-space: nowrap;
  transition: background-color .3s ease, border-color .3s ease, color .3s ease, opacity .3s ease; }
.bn-start { font-family: var(--display); font-size: clamp(1.15rem, 1rem + .5vw, 1.45rem); padding: 14px 22px; background: var(--highlight); color: var(--ink); border-color: var(--highlight); }
.bn.is-on { border-color: var(--highlight); background: #22344f; }
.bn-start.is-on { background: var(--highlight); }
.net.is-active .bn:not(.is-on) { opacity: .45; }
.bn:focus-visible { outline: 2px solid var(--highlight); outline-offset: 3px; }
.net-caption { margin-top: clamp(20px, 2.4vw, 32px); max-width: 44rem; min-height: 3.2em; color: var(--field-2-muted); line-height: 1.55; }
.net-caption strong { color: var(--field-2-ink); }
@media (max-width: 860px) {
  .net { height: auto; }
  .net-nodes { position: relative; display: flex; flex-wrap: wrap; gap: 14px 12px; }
  .net-nodes li:first-child { flex-basis: 100%; }
  .bn { position: static; transform: none; white-space: normal; text-align: left; }
  .net-lines { display: none; }   /* on a phone the blocks wrap in rows, lines between them would only cross the labels */
}

/* ---------- KI marker: a small turquoise tag wherever AI is part of the work ---------- */
.ki { display: inline-block; vertical-align: .35em; margin-left: .45em; padding: .22em .5em .18em; border-radius: 99px; background: var(--highlight); color: var(--ink);
  font: 700 .8125rem/1 var(--font); letter-spacing: .04em; }
.bs-word .ki { vertical-align: .9em; font-size: .875rem; }
.h-also .ki { vertical-align: .1em; margin: 0 .1em; font-size: .75rem; }
.bs-items li.is-ki { border-color: var(--highlight); }
.bs-items li.is-ki { color: var(--ink); }
.bs-items li.is-ki b { font-weight: 700; color: var(--highlight); }
.bn-ki { border-color: var(--highlight); }
.bn-ki::after { content: 'KI'; margin-left: .5em; padding: .15em .4em; border-radius: 99px; background: var(--highlight); color: var(--ink); font-size: .75em; font-weight: 700; }

/* project pages: the plain footer blue, no picture behind it */
.site-footer--schlicht { min-height: 0; }
@media (max-width: 860px) {
  .site-footer--schlicht { padding: 85px var(--m) 20px; }
  .site-footer--schlicht .foot-cols { margin-bottom: 0; }
  .site-footer--schlicht .foot-mark { position: static; max-width: none; margin-top: 64px; white-space: nowrap; font-size: 11vw; text-shadow: none; }
  .site-footer--schlicht .foot-mark span { display: inline; color: var(--field-2-muted); }
  .site-footer--schlicht .foot-legal { display: flex; }
}
.page-projekt .projekt { padding-bottom: 85px; }   /* room above the footer now that the prev/next links are gone */

/* project pages: a crane's trail across the plain footer blue, print by print, then it fades and starts again */
.site-footer--faehrte { min-height: 0; }
.foot-tracks { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.foot-tracks .tr { position: absolute; left: var(--x); top: var(--y); width: 3rem; height: 3.45rem; translate: -50% -50%; rotate: var(--r);
  fill: none; stroke: var(--field-2-ink); stroke-width: 3.6; stroke-linecap: round; stroke-linejoin: round;
  opacity: 0; animation: tr-step 16s linear infinite; animation-delay: calc(var(--i) * .55s); }
/* the heel pad is filled */
.foot-tracks .tr-pad { fill: var(--field-2-ink); stroke: none; }
@keyframes tr-step { 0% { opacity: 0; } 2% { opacity: .2; } 62% { opacity: .2; } 78%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .foot-tracks .tr { animation: none; opacity: .14; } }
@media (max-width: 860px) {
  .site-footer--faehrte { padding: 85px var(--m) 20px; }
  .site-footer--faehrte .foot-cols { margin-bottom: 0; }
  .site-footer--faehrte .foot-mark { position: static; max-width: none; margin-top: 64px; white-space: nowrap; font-size: 11vw; text-shadow: none; }
  .site-footer--faehrte .foot-mark span { display: inline; color: var(--field-2-muted); }
  .site-footer--faehrte .foot-legal { display: flex; }
  .foot-tracks .tr { left: var(--mx); top: var(--my); width: 1.3rem; height: 1.5rem; rotate: 90deg; }
}
/* project pages: pictures sit straight on the white page, no tinted tile or shadow around the screenshots */
.page-projekt .projekt-lead > div, .page-projekt .proj-gallery figure { background: #fff; box-shadow: none; }

/* project pages: the beaver measuring its pine at the lake, blue hour */
.site-footer--biber { background: #1a2338; }   /* evening blue behind the picture while it loads */
.site-footer--biber .foot-water img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 70% 60%; }
.site-footer--biber .foot-social a { background: rgba(242, 239, 232, .1); border-color: rgba(255, 255, 255, .22); }

/* project page phone (Platzreife): the posts as stories in a phone frame */
.proj-phone { display: flex; justify-content: center; margin-top: 85px; }
.proj-phone .phone { width: min(18.75rem, 72vw); aspect-ratio: 9 / 16; border: 0.625rem solid var(--ink); border-radius: 2.5rem; overflow: hidden; background: var(--ink);
  box-shadow: 0 30px 60px -30px rgb(15 26 43 / .55); }
.proj-phone video { display: block; width: 100%; height: 100%; object-fit: cover; }
.proj-phone + .proj-gallery { margin-top: 85px; }
/* the posts of a campaign: five to a row on wide screens, three on tablets, two on phones */
.proj-gallery--posts { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 1100px) { .proj-gallery--posts { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px) { .proj-gallery--posts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } }
/* screenshots: always three columns, so a single long screenshot sits in the left third at its own size instead of being blown up */
.proj-gallery--shots { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 860px) { .proj-gallery--shots { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .proj-gallery--shots { grid-template-columns: minmax(0, 1fr); } }
/* framed screenshots (only where the screenshot itself has a white edge, e.g. Häringer): a clear edge and shadow on the white page */
.page-projekt .proj-gallery--framed figure { border: 1px solid rgb(15 26 43 / .28); box-shadow: 0 2px 4px rgb(15 26 43 / .08), 0 16px 36px -12px rgb(15 26 43 / .4); }
/* homepage "Alles aus einer Hand": the about text that replaced the Über-mich page */
.h-lead { max-width: 46ch; margin-bottom: 1.25rem; }
.h-about { max-width: 52ch; }
.h-about p { line-height: 1.6; color: color-mix(in oklab, var(--ink) 82%, var(--muted)); }
/* "Alles aus einer Hand": the photo's top edge lines up with the heading at every width */
.h-hand-grid { align-items: start; }
.h-hand-grid .t-head { margin-top: 0; }
.h-hand-grid > div > :first-child { margin-top: 0; }
.h-hand-grid .t-head { text-box: trim-start cap alphabetic; }   /* the cap height, not the line box, meets the photo's top edge */
/* "Alles aus einer Hand": one empty line (one line of body text) between the lead, both paragraphs and the facts */
.h-hand-grid .h-lead { margin-bottom: 1.6em; }
.h-hand-grid .h-about { margin: 0 0 1.6em; }
.h-hand-grid .h-about p { margin: 0 0 1.6em; }
.h-hand-grid .h-about p:last-child { margin-bottom: 0; }
.h-hand-grid .h-facts { margin-top: 0; }
/* Leistungen and Referenzen hero: the symbol or number gets the same fixed slot on top, so both titles start at the same height */
.page-leist .hero-cards .hc, .page-ref .hero-cards .hc { justify-content: flex-start; }
.page-leist .hero-cards .hc > :first-child, .page-ref .hero-cards .hc > :first-child { flex: none; height: 60px; display: flex; align-items: flex-start; }
@media (max-width: 860px) { .page-leist .hero-cards .hc > :first-child, .page-ref .hero-cards .hc > :first-child { height: 44px; } .page-leist .hero-cards .hc-sym { width: 44px; height: 44px; } }

/* Referenzen: "und vieles mehr" — a centred, level row of small blank sheets on an isometric floor; the sheet under the pointer lifts and takes a colour */
.ref-more { --rm-step: min(1.05vw, .95rem); --rm-w: clamp(1.6rem, 2.75vw, 2.3rem); padding-top: 24px; }   /* about half the old distance to the last project */
.rm-stack { position: relative; height: clamp(5.5rem, 8vw, 7rem); overflow: hidden; }
.rm-floor { position: absolute; top: 82%; left: calc(50% - 21.5 * var(--rm-step) - var(--rm-w) / 2); width: 0; height: 0; transform-style: preserve-3d; transform: rotateX(62deg); }
.rm-leaf { position: absolute; left: calc(var(--i) * var(--rm-step)); bottom: 0; width: var(--rm-w); height: calc(var(--rm-w) * 1.3);
  transform-origin: bottom center; transform: rotateZ(58deg) rotateX(-90deg);
  border-radius: 3px 3px 0 0; background: #fff; border: 1px solid rgb(15 26 43 / .28);
  /* leaving: the sheet sinks back first, its colour fades only once it is down again */
  transition: transform .5s var(--ease-spring), background-color .2s ease .45s, border-color .2s ease .45s; }
/* only the sheet under the pointer lifts and takes its colour at once */
.rm-stack .rm-leaf:hover { transform: rotateZ(58deg) rotateX(-90deg) translateY(-8px); background: hsl(var(--h) 62% 62%); border-color: rgb(15 26 43 / .08);
  transition: transform .5s var(--ease-spring), background-color .12s ease, border-color .12s ease; }
.rm-text { margin: 1rem 0 0; text-align: center; font-family: var(--display); font-weight: 700; font-size: clamp(1.4rem, 2.4vw, 2.1rem); line-height: 1.1; letter-spacing: -0.01em; }
@media (prefers-reduced-motion: reduce) { .rm-leaf { transition: none; } }
@media (hover: none) { .rm-leaf { background: hsl(var(--h) 62% 62%); border-color: rgb(15 26 43 / .08); } }   /* no hover on touch: show the colours straight away */