/* =========================================================
   AB · People Performance — Design System
   Style: editorial, calm, premium, faded earth tones,
   eagle / bird's-eye-view metaphor.
   ========================================================= */

:root {
  /* Color tokens — muted, warm, faded */
  --c-paper:        #F4F0E8;   /* warm parchment background */
  --c-paper-2:      #EDE7D9;   /* sand surface */
  --c-paper-3:      #E5DDC9;   /* deeper sand for sections */
  --c-ink:          #1E2320;   /* warm near-black */
  --c-ink-soft:     #3B413C;
  --c-stone:        #6E6759;   /* muted body text */
  --c-stone-light:  #9C9381;
  --c-bronze:       #8B6F47;   /* primary accent */
  --c-bronze-deep:  #6F5836;
  --c-sky:          #7E8E92;   /* secondary accent — distant sky */
  --c-line:         #D9D0BE;   /* hairline borders */
  --c-line-soft:    #E6DECB;

  /* Typography */
  --font-display: 'Fraunces', 'Cormorant Garamond', Georgia, serif;
  --font-sans:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Type scale (fluid) */
  --fs-eyebrow: 0.78rem;
  --fs-body:    clamp(1rem, 0.95rem + 0.2vw, 1.0625rem);
  --fs-lead:    clamp(1.125rem, 1rem + 0.4vw, 1.25rem);
  --fs-h3:      clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --fs-h2:      clamp(2rem, 1.5rem + 2.2vw, 3.25rem);
  --fs-hero:    clamp(2.6rem, 1.6rem + 4.6vw, 5.6rem);

  /* Spacing scale (8px base) */
  --s-1: 0.5rem;
  --s-2: 1rem;
  --s-3: 1.5rem;
  --s-4: 2rem;
  --s-5: 3rem;
  --s-6: 4rem;
  --s-7: 6rem;
  --s-8: 8rem;

  /* Radii / lines */
  --r-sm: 6px;
  --r-md: 12px;
  --r-lg: 22px;
  --hairline: 1px;

  /* Layout */
  --container: 1180px;

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in:  cubic-bezier(0.55, 0, 0.68, 0);
  --d-fast:   220ms;
  --d-base:   420ms;
  --d-slow:   900ms;
}

/* =========================================================
   Base
   ========================================================= */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  /* WICHTIG: KEIN overflow-x: hidden auf html — bricht auf iOS Safari
     position: sticky (Header) und macht position: fixed (WhatsApp-Button)
     instabil. Stattdessen wird die einzige tatsächlich überlaufende Stelle
     (.topo-corner mit rotiertem ::before) weiter unten gezielt geklippt. */
}

/* Anchor-Offset für den Sticky-Header — sonst landet man beim Anchor-Klick
   mittig in der Section, weil der Header die Sektions-Oberseite überdeckt. */
.hero,
.section {
  scroll-margin-top: 88px;
}
@media (max-width: 600px) {
  .hero,
  .section { scroll-margin-top: 72px; }
}

body {
  margin: 0;
  background: var(--c-paper);
  color: var(--c-ink);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.65;
  font-weight: 400;
  letter-spacing: 0.005em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }

a {
  color: var(--c-ink);
  text-decoration: none;
  transition: color var(--d-fast) var(--ease-out);
}
a:hover { color: var(--c-bronze); }

::selection {
  background: var(--c-bronze);
  color: var(--c-paper);
}

/* Paper grain — subtle warmth */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.035;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--c-ink);
  color: var(--c-paper);
  padding: 0.75rem 1rem;
  z-index: 100;
}
.skip-link:focus { left: 1rem; top: 1rem; }

:focus-visible {
  outline: 2px solid var(--c-bronze);
  outline-offset: 3px;
  border-radius: 2px;
}

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 2.5vw, 2rem);
}

/* =========================================================
   Typography helpers
   ========================================================= */
.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-eyebrow);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--c-bronze);
  margin: 0 0 var(--s-3);
  font-weight: 500;
}
.eyebrow.centered { text-align: center; }

.section-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-h2);
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: var(--c-ink);
  margin: 0 0 var(--s-4);
  font-variation-settings: "opsz" 96;
}
.section-title.centered { text-align: center; }

.lead {
  font-size: var(--fs-lead);
  color: var(--c-ink-soft);
  line-height: 1.6;
  margin: 0 0 var(--s-4);
  max-width: 56ch;
}
.lead.centered { margin-left: auto; margin-right: auto; text-align: center; }

p { margin: 0 0 var(--s-2); color: var(--c-ink-soft); }
strong { color: var(--c-ink); font-weight: 600; }
em { font-style: italic; color: var(--c-bronze-deep); }

/* =========================================================
   Header
   ========================================================= */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(244, 240, 232, 0.78);
  backdrop-filter: blur(14px) saturate(110%);
  -webkit-backdrop-filter: blur(14px) saturate(110%);
  border-bottom: var(--hairline) solid transparent;
  transition: border-color var(--d-fast) var(--ease-out), background var(--d-fast);
}
.site-header.is-scrolled {
  border-bottom-color: var(--c-line);
  background: rgba(244, 240, 232, 0.92);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.05rem clamp(1.25rem, 2.5vw, 2rem);
  max-width: var(--container);
  margin: 0 auto;
}

/* ---------- Scroll progress bar ---------- */
.scroll-progress {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: rgba(110, 103, 89, 0.06);
  overflow: hidden;
  z-index: 1;
}
.scroll-progress-bar {
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, var(--c-bronze) 0%, var(--c-bronze-deep) 100%);
  transform: scaleX(var(--scroll-progress, 0));
  transform-origin: 0 50%;
  transition: transform 80ms linear;
  box-shadow: 0 0 8px rgba(139, 111, 71, 0.3);
}

/* ---------- Brand ---------- */
.brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--c-ink);
  position: relative;
}
.brand-mark {
  color: var(--c-ink);
  display: inline-flex;
  transition: transform 500ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.brand:hover .brand-mark { transform: rotate(-12deg); }

.brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.brand-name {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 500;
  letter-spacing: 0.01em;
}
.brand-claim {
  font-size: 0.72rem;
  color: var(--c-stone);
  letter-spacing: 0.05em;
}

/* ---------- Navigation ---------- */
.nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 0.4rem;
  align-items: center;
}
.nav-list > li > a:not(.nav-cta) {
  display: inline-block;
  font-size: 0.9rem;
  color: var(--c-stone);
  position: relative;
  padding: 0.55rem 0.85rem;
  letter-spacing: 0.005em;
  transition: color 240ms var(--ease-out);
}
.nav-list > li > a:not(.nav-cta) > span {
  position: relative;
  display: inline-block;
}
/* Animated underline — grows from center outward */
.nav-list > li > a:not(.nav-cta) > span::after {
  content: "";
  position: absolute;
  left: 50%;
  right: 50%;
  bottom: -6px;
  height: 1.5px;
  background: var(--c-bronze);
  border-radius: 1px;
  transition: left 320ms var(--ease-out), right 320ms var(--ease-out);
}
.nav-list > li > a:not(.nav-cta):hover { color: var(--c-ink); }
.nav-list > li > a:not(.nav-cta):hover > span::after,
.nav-list > li > a.is-active > span::after {
  left: 0;
  right: 0;
}
.nav-list > li > a.is-active { color: var(--c-ink); }

/* ---------- CTA ---------- */
.nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  border: var(--hairline) solid rgba(30, 35, 32, 0.18);
  padding: 0.5rem 0.95rem 0.5rem 1.05rem;
  margin-left: 0.5rem;
  border-radius: 999px;
  font-size: 0.88rem;
  color: var(--c-ink);
  background: rgba(255, 255, 255, 0.4);
  -webkit-backdrop-filter: blur(8px) saturate(110%);
  backdrop-filter: blur(8px) saturate(110%);
  transition: all 260ms var(--ease-out);
}
.nav-cta-arrow {
  flex-shrink: 0;
  transition: transform 260ms var(--ease-out);
}
.nav-cta:hover {
  background: var(--c-ink);
  color: var(--c-paper);
  border-color: var(--c-ink);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(30, 35, 32, 0.12);
}
.nav-cta:hover .nav-cta-arrow {
  transform: translateX(3px);
}

/* ---------- Mobile toggle ---------- */
.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
  width: 44px; height: 44px;
  flex-direction: column;
  gap: 5px;
  align-items: center;
  justify-content: center;
  z-index: 2;
}
.nav-toggle span {
  display: block;
  width: 22px;
  height: 1.5px;
  background: var(--c-ink);
  transition: all 320ms var(--ease-out);
  transform-origin: center;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- Mobile nav with slide-down + stagger ---------- */
.mobile-nav {
  background: var(--c-paper);
  border-top: var(--hairline) solid transparent;
  overflow: hidden;
  max-height: 0;
  visibility: hidden;
  transition:
    max-height 420ms cubic-bezier(0.22, 1, 0.36, 1),
    border-top-color 420ms var(--ease-out),
    visibility 0ms 420ms;
}
.mobile-nav.is-open {
  max-height: 600px;
  visibility: visible;
  border-top-color: var(--c-line);
  transition:
    max-height 420ms cubic-bezier(0.22, 1, 0.36, 1),
    border-top-color 420ms var(--ease-out),
    visibility 0ms 0ms;
}
.mobile-nav ul {
  list-style: none;
  margin: 0;
  padding: 1.25rem clamp(1.25rem, 2.5vw, 2rem) 2rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.mobile-nav li {
  opacity: 0;
  transform: translateX(-12px);
  transition:
    opacity 420ms var(--ease-out),
    transform 420ms var(--ease-out);
}
.mobile-nav.is-open li { opacity: 1; transform: translateX(0); }
.mobile-nav.is-open li:nth-child(1) { transition-delay: 120ms; }
.mobile-nav.is-open li:nth-child(2) { transition-delay: 170ms; }
.mobile-nav.is-open li:nth-child(3) { transition-delay: 220ms; }
.mobile-nav.is-open li:nth-child(4) { transition-delay: 270ms; }
.mobile-nav.is-open li:nth-child(5) { transition-delay: 320ms; }
.mobile-nav a {
  font-family: var(--font-display);
  font-size: 1.55rem;
  font-weight: 400;
  color: var(--c-ink);
  display: block;
  padding: 0.85rem 0;
  min-height: 48px;
  letter-spacing: -0.01em;
  transition: color 200ms var(--ease-out);
}
.mobile-nav a:hover { color: var(--c-bronze); }

/* =========================================================
   Buttons
   ========================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  height: 50px;
  padding: 0 1.6rem;
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
  border: var(--hairline) solid transparent;
  transition: all var(--d-base) var(--ease-out);
  min-width: 44px;
}
.btn-primary {
  background: var(--c-ink);
  color: var(--c-paper);
}
.btn-primary:hover {
  background: var(--c-bronze-deep);
  color: var(--c-paper);
  transform: translateY(-1px);
}
.btn-ghost {
  background: rgba(255, 255, 255, 0.55);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
  backdrop-filter: blur(10px) saturate(120%);
  color: var(--c-ink);
  border-color: rgba(30, 35, 32, 0.25);
  box-shadow: 0 1px 3px rgba(30, 35, 32, 0.04);
}
.btn-ghost:hover {
  background: var(--c-ink);
  color: var(--c-paper);
  border-color: var(--c-ink);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(30, 35, 32, 0.12);
}

/* =========================================================
   Hero
   ========================================================= */
.hero {
  position: relative;
  min-height: 92vh;
  min-height: 92dvh;
  display: flex;
  align-items: center;
  padding: clamp(5rem, 9vw, 7rem) 0 clamp(4rem, 8vw, 6rem);
  isolation: isolate;
  /* Parallax variables, updated by script.js */
  --sy: 0;
  --mx: 0;
  --my: 0;
}
/* =========================================================
   Scene — Cinematic bird's-eye-view
   Layered SVG composition with scroll + mouse parallax.
   --sy:  scroll position (set by JS)
   --mx:  mouse delta X    (set by JS, range ~ -1 to 1)
   --my:  mouse delta Y    (set by JS, range ~ -1 to 1)
   ========================================================= */

.scene {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  background: var(--c-paper);
}

.scene-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  /* will-change wird selektiv weiter unten nur auf Layer gesetzt, die
     wirklich animieren — sonst pinnen wir 6+ GPU-Texturen unnötig in den
     VRAM, was auf Mobile zu Compositing-Druck führt. */
}
/* Layer mit aktiver Parallax-Animation bekommen eine eigene GPU-Schicht */
.scene-sun,
.scene-mountains-far,
.scene-mountains-mid,
.scene-topo,
.scene-eagle,
.scene-eagle-far,
.scene-clouds-far,
.scene-clouds-near {
  will-change: transform;
}

/* Sky gradient — warm cream descending into faint sand */
.scene-sky {
  background:
    radial-gradient(140% 80% at 50% -10%, #FCF8EE 0%, #F6F1E5 35%, var(--c-paper) 60%, var(--c-paper-2) 100%);
}

/* Soft sun glow up top */
.scene-sun {
  background:
    radial-gradient(40% 35% at 70% 5%, rgba(252, 244, 225, 0.85) 0%, rgba(252, 244, 225, 0) 70%);
  transform: translate3d(
    calc(var(--mx) * -8px),
    calc(var(--my) * -4px + var(--sy) * 0.04px),
    0
  );
}

/* Far cloud band */
.scene-clouds-far {
  transform: translate3d(
    calc(var(--mx) * -6px),
    calc(var(--my) * -3px + var(--sy) * 0.08px),
    0
  );
}

/* Far mountain silhouette */
.scene-mountains-far {
  transform: translate3d(
    calc(var(--mx) * -10px),
    calc(var(--my) * -5px + var(--sy) * 0.12px),
    0
  );
}

/* Mid hills */
.scene-mountains-mid {
  transform: translate3d(
    calc(var(--mx) * -16px),
    calc(var(--my) * -8px + var(--sy) * 0.20px),
    0
  );
}

/* Foreground topographic land contours */
.scene-topo {
  transform: translate3d(
    calc(var(--mx) * -28px),
    calc(var(--my) * -14px + var(--sy) * 0.36px),
    0
  );
}

/* Near cloud — moves opposite for depth illusion */
.scene-clouds-near {
  transform: translate3d(
    calc(var(--mx) * 12px),
    calc(var(--my) * 6px + var(--sy) * 0.18px),
    0
  );
}

/* Far companion eagle — small, distant, slow */
.scene-eagle-far {
  transform: translate3d(
    calc(var(--mx) * -6px),
    calc(var(--my) * -3px + var(--sy) * 0.08px),
    0
  );
}

/* Main eagle — soaring through */
.scene-eagle {
  transform: translate3d(
    calc(var(--mx) * -14px),
    calc(var(--my) * -7px + var(--sy) * 0.16px),
    0
  );
}

/* Vignette — softens contrast around text */
.scene-vignette {
  background:
    radial-gradient(75% 60% at 30% 45%, rgba(244, 240, 232, 0.55) 0%, rgba(244, 240, 232, 0) 70%),
    linear-gradient(180deg, transparent 70%, rgba(110, 103, 89, 0.08) 100%);
}

/* Subtle paper grain overlay */
.scene-grain {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.5 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  opacity: 0.06;
  mix-blend-mode: multiply;
}

/* ---------- Inner glide / drift animations ---------- */

/* Cloud bands drift sideways across the frame */
.cloud-band {
  width: 100%;
  height: 100%;
  will-change: transform;
}
.drift-slow {
  animation: drift-x 90s linear infinite;
}
.drift-medium {
  animation: drift-x 60s linear infinite;
  animation-direction: reverse;
}
@keyframes drift-x {
  0%   { transform: translate3d(-6%, 0, 0); }
  100% { transform: translate3d(6%, 0, 0); }
}

/* Birds — refined silhouettes with soaring motion */
.bird {
  position: absolute;
  height: auto;
  will-change: transform, opacity;
  /* Soft drop-shadow under the body — suggests depth above the land */
  filter:
    drop-shadow(0 6px 14px rgba(30, 35, 32, 0.10))
    drop-shadow(0 2px 4px rgba(30, 35, 32, 0.06));
  transform-origin: 50% 50%;
}

/* Main eagle — emerges from the depth of the scene as a tiny dot,
   slowly grows as it approaches the viewer, then passes by toward
   the foreground. Cinematic z-axis travel through scale + drift. */
.glide-main {
  width: clamp(90px, 10vw, 160px);   /* size at scale 1 */
  top: 28%;
  left: 64%;
  opacity: 0;
  animation: glide-main 72s cubic-bezier(0.55, 0, 0.45, 1) infinite;
}
@keyframes glide-main {
  /* Start: a barely-visible speck high in the distance */
  0%   { transform: translate(-50%, -50%) translate(0, 0) scale(0.04) rotate(-1deg); opacity: 0; }
  6%   { opacity: 0.55; }
  /* Becomes recognizable, drifts gently */
  22%  { transform: translate(-50%, -50%) translate(-1vw, 4vh) scale(0.12) rotate(-2deg); opacity: 0.85; }
  /* Mid-approach — clearly a bird now, banking */
  45%  { transform: translate(-50%, -50%) translate(2vw, 12vh) scale(0.36) rotate(2deg); opacity: 0.92; }
  /* Coming close, growing dramatically */
  68%  { transform: translate(-50%, -50%) translate(-2vw, 24vh) scale(0.85) rotate(-1.5deg); opacity: 0.9; }
  /* Almost at viewer — large, foreground */
  86%  { transform: translate(-50%, -50%) translate(3vw, 40vh) scale(1.45) rotate(1deg); opacity: 0.78; }
  /* Passes by — exits very large, fading */
  100% { transform: translate(-50%, -50%) translate(10vw, 62vh) scale(2.2) rotate(-1deg); opacity: 0; }
}

/* Far companion eagle — also approaches, but stays distant
   throughout. Adds atmosphere without competing with main eagle. */
.glide-far {
  width: clamp(54px, 6vw, 90px);
  top: 16%;
  left: 30%;
  opacity: 0;
  animation: glide-far 95s linear infinite;
  animation-delay: -38s;
}
@keyframes glide-far {
  0%   { transform: translate(-50%, -50%) translate(0, 0) scale(0.04); opacity: 0; }
  12%  { transform: translate(-50%, -50%) translate(1vw, 1vh) scale(0.08) rotate(-1deg); opacity: 0.45; }
  50%  { transform: translate(-50%, -50%) translate(5vw, 5vh) scale(0.22) rotate(1deg); opacity: 0.55; }
  85%  { transform: translate(-50%, -50%) translate(11vw, 11vh) scale(0.5) rotate(-1deg); opacity: 0.4; }
  100% { transform: translate(-50%, -50%) translate(16vw, 16vh) scale(0.7); opacity: 0; }
}

/* Hero text — sits above the scene, with a tiny mouse-tracked breath of life */
.hero-inner {
  position: relative;
  z-index: 1;
  transform: translate3d(
    calc(var(--mx, 0) * 4px),
    calc(var(--my, 0) * 2px),
    0
  );
  transition: transform 600ms var(--ease-out);
}

.hero-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-hero);
  line-height: 0.98;
  letter-spacing: -0.022em;
  margin: 0 0 var(--s-4);
  color: var(--c-ink);
  font-variation-settings: "opsz" 144;
  max-width: 18ch;
}
.hero-title .line { display: block; }
.hero-title .line--accent {
  font-style: italic;
  color: var(--c-bronze-deep);
}

.hero-lead {
  font-size: var(--fs-lead);
  color: var(--c-ink-soft);
  max-width: 52ch;
  margin: 0 0 var(--s-5);
  line-height: 1.55;
}

.hero-actions {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.scroll-cue {
  position: absolute;
  top: calc(100% + 2rem);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: var(--c-stone);
  text-decoration: none;
  padding: 4px 12px;
}
.scroll-cue-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--c-stone);
  opacity: 0.75;
  font-weight: 500;
  font-family: var(--font-sans);
}
.scroll-cue-line {
  display: block;
  width: 1px;
  height: 42px;
  background: currentColor;
  opacity: 0.55;
  animation: cue 2.4s var(--ease-out) infinite;
  transform-origin: top;
}
.scroll-cue-arrow {
  width: 14px;
  height: 14px;
  color: currentColor;
  opacity: 0.55;
  animation: cue-arrow 2.4s var(--ease-out) infinite;
}
.scroll-cue:hover { color: var(--c-bronze); }
.scroll-cue:hover .scroll-cue-label { opacity: 1; }

@media (max-width: 400px) {
  .scroll-cue-label {
    letter-spacing: 0.18em;
    font-size: 0.68rem;
  }
}

@keyframes cue {
  0%, 100% { transform: scaleY(0.25); opacity: 0.15; }
  50%      { transform: scaleY(1);    opacity: 0.7;  }
}
@keyframes cue-arrow {
  0%, 100% { transform: translateY(-4px); opacity: 0.15; }
  55%      { transform: translateY(0);    opacity: 0.75; }
}

/* =========================================================
   Generic Sections
   ========================================================= */
.section {
  padding: clamp(5rem, 9vw, 8rem) 0;
  position: relative;
}
/* Hairline zwischen Sektionen entfernt — die Gradient-Brücken (für Paper-
   Familie) und die harten Magazin-Schnitte (für Paper↔Ink) übernehmen die
   visuelle Trennung. Die alte Hairline würde an den dramatischen Kanten
   als dünner Streifen sichtbar werden. */

.section-head {
  max-width: 720px;
  margin: 0 0 var(--s-6);
}
.section-sub {
  font-size: 1.0625rem;
  color: var(--c-stone);
  max-width: 60ch;
  line-height: 1.6;
}

.grid-2 {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
@media (min-width: 880px) {
  .grid-2 { grid-template-columns: 5fr 7fr; }
}

/* =========================================================
   About
   ========================================================= */
.section--about { background: var(--c-paper); }

.about-figure {
  display: flex;
  justify-content: flex-start;
}
.portrait-card {
  width: 100%;
  max-width: 360px;
  background: var(--c-paper-2);
  border: var(--hairline) solid var(--c-line);
  border-radius: var(--r-lg);
  padding: 2rem;
  position: relative;
  aspect-ratio: 4 / 5;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset;
}
.portrait-card::before {
  content: "";
  position: absolute;
  inset: 12px;
  border: var(--hairline) solid var(--c-line);
  border-radius: calc(var(--r-lg) - 8px);
  pointer-events: none;
  opacity: 0.6;
}
.portrait-monogram {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-bronze-deep);
}
.portrait-monogram svg { width: 72%; height: auto; }
.portrait-meta {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  font-size: 0.85rem;
  color: var(--c-stone);
  text-align: center;
  letter-spacing: 0.02em;
}
.portrait-meta span:first-child {
  font-family: var(--font-display);
  color: var(--c-ink);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.04em;
}

.about-text { max-width: 56ch; }

.vita {
  list-style: none;
  margin: var(--s-4) 0 0;
  padding: var(--s-4) 0 0;
  border-top: var(--hairline) solid var(--c-line);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem 2rem;
}
.vita li {
  font-size: 0.95rem;
  color: var(--c-stone);
  line-height: 1.4;
}
.vita li span {
  display: block;
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 400;
  color: var(--c-ink);
  letter-spacing: -0.01em;
}

/* =========================================================
   Approach (People ∞ Performance)
   ========================================================= */
.section--approach {
  background: var(--c-paper-2);
  text-align: center;
}
.approach-inner { max-width: 980px; margin: 0 auto; }

.section-title .infinity-wrap {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  width: clamp(80px, 15vw, 160px);
  height: auto;
  margin: 0 0.4rem;
  color: var(--c-bronze);
}
.infinity {
  width: 100%;
  height: auto;
  overflow: visible;
}
.infinity path {
  stroke-dasharray: 600;
  stroke-dashoffset: 600;
}
.in-view .infinity path {
  animation: drawInfinity 2.6s var(--ease-out) forwards;
}
@keyframes drawInfinity {
  to { stroke-dashoffset: 0; }
}

.approach-pillars {
  margin-top: var(--s-7);
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
@media (min-width: 760px) {
  .approach-pillars { grid-template-columns: repeat(3, 1fr); }
}

.pillar {
  background: var(--c-paper);
  border: var(--hairline) solid var(--c-line);
  border-radius: var(--r-lg);
  padding: 2.25rem 1.75rem;
  text-align: left;
  transition: transform var(--d-base) var(--ease-out), border-color var(--d-base);
  position: relative;
  overflow: hidden;
}
.pillar:hover {
  transform: translateY(-3px);
  border-color: var(--c-bronze);
}
.pillar::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--c-bronze), transparent);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--d-base) var(--ease-out);
}
.pillar:hover::after { transform: scaleX(1); }

.pillar-glyph {
  display: inline-flex;
  width: 48px; height: 48px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--c-paper-2);
  color: var(--c-bronze-deep);
  margin-bottom: 1.25rem;
}
.pillar h3 {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 500;
  color: var(--c-ink);
  margin: 0 0 0.5rem;
  letter-spacing: -0.005em;
}
.pillar p {
  font-size: 0.96rem;
  color: var(--c-stone);
  margin: 0;
  line-height: 1.55;
}

/* =========================================================
   Method (5 steps)
   ========================================================= */
.section--method { background: var(--c-paper); }

.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.step {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 1.5rem;
  padding: 2.25rem 0;
  border-top: var(--hairline) solid var(--c-line-soft);
  position: relative;
}
.step:first-child { border-top: var(--hairline) solid var(--c-line); }
.step-num {
  font-family: var(--font-display);
  font-size: 2.1rem;
  font-weight: 400;
  color: var(--c-bronze);
  letter-spacing: -0.01em;
  font-variation-settings: "opsz" 144;
  line-height: 1;
}
.step-num span { display: inline-block; transition: transform var(--d-base) var(--ease-out); }
/* (Removed — .step-num span ist im neuen .steps-trail-Layout unsichtbar;
   der Hover-Effekt wandert auf .step-marker im Bird's-Eye Threading-Block) */

.step-body h3 {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 1.1rem + 0.8vw, 1.8rem);
  font-weight: 400;
  color: var(--c-ink);
  margin: 0 0 0.4rem;
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.step-body p {
  font-size: 1rem;
  color: var(--c-stone);
  margin: 0;
  max-width: 60ch;
  line-height: 1.6;
}

@media (min-width: 760px) {
  .step { grid-template-columns: 140px 1fr; gap: 2.5rem; padding: 2.75rem 0; }
  .step-num { font-size: 3rem; }
}

/* =========================================================
   Project
   ========================================================= */
.section--project { background: var(--c-paper-3); }

.project-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}
@media (min-width: 760px) {
  .project-grid { grid-template-columns: repeat(3, 1fr); }
  .project-card--wide { grid-column: 1 / -1; }
}

.project-card {
  background: var(--c-paper);
  border: var(--hairline) solid var(--c-line);
  border-radius: var(--r-lg);
  padding: 2rem 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  transition: transform var(--d-base) var(--ease-out), border-color var(--d-base);
}
.project-card:hover {
  transform: translateY(-3px);
  border-color: var(--c-bronze);
}
.project-tag {
  display: inline-block;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--c-bronze);
  font-weight: 500;
  width: fit-content;
}
.project-card p {
  font-size: 1rem;
  color: var(--c-ink-soft);
  margin: 0;
  line-height: 1.6;
}
.project-card--wide {
  background: var(--c-ink);
  color: var(--c-paper);
  border-color: transparent;
  padding: 2.5rem;
}
.project-card--wide:hover {
  border-color: var(--c-bronze);
}
.project-card--wide .project-tag { color: var(--c-paper-2); opacity: 0.75; }
.project-card--wide p {
  color: var(--c-paper);
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.2rem, 1rem + 0.8vw, 1.6rem);
  line-height: 1.4;
  letter-spacing: -0.005em;
  max-width: 70ch;
}

/* =========================================================
   Audience
   ========================================================= */
.section--audience {
  background: var(--c-paper);
  text-align: center;
}
.audience-inner { max-width: 760px; margin: 0 auto; }

/* =========================================================
   Contact
   ========================================================= */
.section--contact {
  background: var(--c-ink);
  color: var(--c-paper);
}
.section--contact .eyebrow { color: var(--c-bronze); }
.section--contact .section-title { color: var(--c-paper); }
.section--contact .lead { color: rgba(244, 240, 232, 0.78); }
.section--contact p { color: rgba(244, 240, 232, 0.78); }

.contact-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
@media (min-width: 880px) {
  .contact-inner { grid-template-columns: 1fr 1fr; }
}

.contact-card {
  border: var(--hairline) solid rgba(244, 240, 232, 0.18);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.contact-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 2rem;
  padding: 1.5rem 1.75rem;
  border-bottom: var(--hairline) solid rgba(244, 240, 232, 0.12);
  text-decoration: none;
  color: var(--c-paper);
  transition: background var(--d-fast) var(--ease-out);
}
.contact-row:last-child { border-bottom: none; }
a.contact-row:hover { background: rgba(244, 240, 232, 0.04); color: var(--c-paper); }
.contact-label {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: rgba(244, 240, 232, 0.55);
  font-weight: 500;
  flex-shrink: 0;
}
.contact-value {
  font-family: var(--font-display);
  font-size: clamp(1rem, 0.9rem + 0.4vw, 1.25rem);
  font-weight: 400;
  text-align: right;
  color: var(--c-paper);
  letter-spacing: -0.005em;
  overflow-wrap: anywhere; /* lange Email-Adresse darf auf schmalen Screens umbrechen */
  max-width: 100%;
}

/* =========================================================
   Footer
   ========================================================= */
.site-footer {
  background: var(--c-paper-2);
  border-top: var(--hairline) solid var(--c-line);
  padding: 2.5rem 0;
}
.footer-inner {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  align-items: flex-start;
  justify-content: space-between;
}
@media (min-width: 720px) {
  .footer-inner { flex-direction: row; align-items: center; }
}
.footer-brand { display: flex; align-items: center; gap: 0.85rem; }
.footer-name {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--c-ink);
}
.footer-claim {
  margin: 0;
  font-size: 0.85rem;
  color: var(--c-stone);
}
.footer-meta {
  text-align: left;
  font-size: 0.85rem;
  color: var(--c-stone);
}
.footer-meta p { margin: 0; color: var(--c-stone); }
.footer-meta a { color: var(--c-stone); }
.footer-meta a:hover { color: var(--c-ink); }

@media (min-width: 720px) {
  .footer-meta { text-align: right; }
}

/* =========================================================
   Reveal animation system
   ========================================================= */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px) scale(1.02) rotate(0.4deg);
  transform-origin: 50% 80%;
  transition:
    opacity var(--d-slow) var(--ease-out),
    transform var(--d-slow) var(--ease-out);
  transition-delay: 0ms;
  will-change: transform, opacity;
}
[data-reveal][data-reveal-stagger="1"] { transition-delay: 80ms; }
[data-reveal][data-reveal-stagger="2"] { transition-delay: 160ms; }
[data-reveal][data-reveal-stagger="3"] { transition-delay: 240ms; }
[data-reveal][data-reveal-stagger="4"] { transition-delay: 320ms; }
[data-reveal][data-reveal-stagger="5"] { transition-delay: 400ms; }
[data-reveal].in-view {
  opacity: 1;
  transform: translateY(0) scale(1) rotate(0);
}

/* =========================================================
   Responsive — Navigation breakpoint
   ========================================================= */
@media (max-width: 880px) {
  .nav { display: none; }
  .nav-toggle { display: flex; }
}

/* =========================================================
   Subtle topographic background pattern (sections)
   Repeats faint contour lines — reinforces the
   bird's-eye-view metaphor across the site.
   ========================================================= */
.topo-bg {
  position: relative;
  isolation: isolate;
}
.topo-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.5;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='600' height='400' viewBox='0 0 600 400'><g fill='none' stroke='%238B6F47' stroke-width='0.6' opacity='0.18'><path d='M -20 80 C 100 60 200 100 320 80 S 540 70 620 90'/><path d='M -20 130 C 100 110 200 150 320 130 S 540 120 620 140'/><path d='M -20 180 C 100 160 200 200 320 180 S 540 170 620 190'/><path d='M -20 230 C 100 210 200 250 320 230 S 540 220 620 240'/><path d='M -20 280 C 100 260 200 300 320 280 S 540 270 620 290'/><path d='M -20 330 C 100 310 200 350 320 330 S 540 320 620 340'/><ellipse cx='150' cy='205' rx='80' ry='14'/><ellipse cx='150' cy='205' rx='55' ry='9'/><ellipse cx='450' cy='235' rx='100' ry='18'/><ellipse cx='450' cy='235' rx='70' ry='12'/><ellipse cx='450' cy='235' rx='40' ry='7'/></g></svg>");
  background-size: 600px 400px;
  background-repeat: repeat;
  mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, black 30%, transparent 90%);
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, black 30%, transparent 90%);
}

/* =========================================================
   Centered Layout — alle Sektionen mittig ausgerichtet
   ========================================================= */
.section { text-align: center; }
.section p { text-align: center; margin-left: auto; margin-right: auto; }
.section h1,
.section h2,
.section h3 { text-align: center; margin-left: auto; margin-right: auto; }

.section-head { margin-left: auto; margin-right: auto; text-align: center; }
.section-sub { margin-left: auto; margin-right: auto; text-align: center; }
.section-title { text-align: center; }
.eyebrow { text-align: center; }
.lead { margin-left: auto; margin-right: auto; text-align: center; }

/* Hero */
.hero-inner { text-align: center; }
.hero-title { margin-left: auto; margin-right: auto; }
.hero-lead { margin-left: auto; margin-right: auto; }
.hero-actions { justify-content: center; }

/* About */
.section--about .grid-2 {
  grid-template-columns: 1fr;
  text-align: center;
  justify-items: center;
}
@media (min-width: 880px) {
  .section--about .grid-2 { grid-template-columns: 1fr; }
}
.about-figure { justify-content: center; width: 100%; }
.about-text {
  max-width: 56ch;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.vita {
  justify-content: center;
  justify-items: center;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}
.vita li { text-align: center; }

/* Steps — Nummer über dem Body, alles zentriert */
.step {
  grid-template-columns: 1fr;
  gap: 0.5rem;
  text-align: center;
  justify-items: center;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}
.step-num { text-align: center; }
.step-body { text-align: center; }
.step-body p { text-align: center; margin-left: auto; margin-right: auto; }
@media (min-width: 760px) {
  .step { grid-template-columns: 1fr; gap: 0.75rem; }
}

/* Pillars */
.pillar { text-align: center; }
.pillar-glyph { margin-left: auto; margin-right: auto; }
.pillar p { text-align: center; }

/* Project cards */
.project-card {
  text-align: center;
  align-items: center;
}
.project-card p { text-align: center; margin-left: auto; margin-right: auto; }
.project-tag { margin-left: auto; margin-right: auto; }
.project-card--wide p { margin-left: auto; margin-right: auto; text-align: center; }

/* Contact */
.section--contact .contact-inner {
  grid-template-columns: 1fr;
  text-align: center;
}
@media (min-width: 880px) {
  .section--contact .contact-inner { grid-template-columns: 1fr; }
}
.contact-text { text-align: center; }
.contact-card {
  max-width: 620px;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}
.contact-row {
  flex-direction: column;
  gap: 0.4rem;
  text-align: center;
  align-items: center;
  justify-content: center;
}
.contact-label { text-align: center; }
.contact-value { text-align: center; }

/* Footer */
.site-footer .footer-inner {
  flex-direction: column;
  align-items: center;
  text-align: center;
}
@media (min-width: 720px) {
  .site-footer .footer-inner { flex-direction: column; align-items: center; }
}
.footer-brand { flex-direction: column; text-align: center; gap: 0.6rem; }
.footer-name,
.footer-claim { text-align: center; }
.footer-meta { text-align: center; }
@media (min-width: 720px) {
  .footer-meta { text-align: center; }
}

/* =========================================================
   WhatsApp Floating Button — editorial, gedeckt, zur Seite passend
   ========================================================= */
.whatsapp-btn {
  position: fixed;
  bottom: 28px;
  right: 28px;
  z-index: 60;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: rgba(244, 240, 232, 0.88);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  backdrop-filter: blur(14px) saturate(120%);
  border: var(--hairline) solid rgba(30, 35, 32, 0.18);
  color: var(--c-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 10px 28px rgba(30, 35, 32, 0.10),
    0 2px 6px rgba(30, 35, 32, 0.06);
  transition:
    transform var(--d-base) var(--ease-out),
    background var(--d-base) var(--ease-out),
    border-color var(--d-base) var(--ease-out),
    box-shadow var(--d-base) var(--ease-out),
    color var(--d-base) var(--ease-out);
  text-decoration: none;
  isolation: isolate;
}
/* Feiner Ring — zitiert die Hairline-Sprache der Portrait-Card */
.whatsapp-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: var(--hairline) solid rgba(139, 111, 71, 0.28);
  transform: scale(1.1);
  opacity: 0.7;
  pointer-events: none;
  transition:
    transform var(--d-base) var(--ease-out),
    opacity var(--d-base) var(--ease-out);
}
.whatsapp-btn:hover {
  transform: translateY(-2px);
  background: var(--c-ink);
  color: var(--c-paper);
  border-color: var(--c-ink);
  box-shadow:
    0 14px 32px rgba(30, 35, 32, 0.18),
    0 4px 10px rgba(30, 35, 32, 0.10);
}
.whatsapp-btn:hover::after {
  transform: scale(1.18);
  opacity: 0;
}
.whatsapp-btn svg {
  width: 28px;
  height: 28px;
  display: block;
  transition: transform var(--d-base) var(--ease-out);
}
.whatsapp-btn:hover svg { transform: scale(1.04); }

@media (max-width: 600px) {
  .whatsapp-btn {
    bottom: 20px;
    right: 20px;
    width: 54px;
    height: 54px;
  }
  .whatsapp-btn svg { width: 26px; height: 26px; }
}

/* =========================================================
   Passwort-Schutz Overlay
   ========================================================= */
.auth-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--c-paper);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  visibility: visible;
}
html.is-locked .auth-overlay {
  display: flex;
}
.auth-card {
  max-width: 420px;
  width: 100%;
  text-align: center;
}
.auth-card svg {
  width: 56px;
  height: 56px;
  margin: 0 auto 1.25rem;
  color: var(--c-bronze);
}
.auth-card h1 {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 1.3rem + 1vw, 2.2rem);
  font-weight: 400;
  color: var(--c-ink);
  margin: 0 0 0.5rem;
  letter-spacing: -0.01em;
  font-variation-settings: "opsz" 96;
}
.auth-card > p {
  color: var(--c-stone);
  margin: 0 0 1.5rem;
}
.auth-form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  align-items: stretch;
}
.auth-input {
  width: 100%;
  height: 48px;
  padding: 0 1.25rem;
  border-radius: 999px;
  border: var(--hairline) solid var(--c-line);
  background: var(--c-paper);
  font-family: var(--font-sans);
  font-size: 1rem;
  text-align: center;
  color: var(--c-ink);
  outline: none;
  transition: border-color 200ms var(--ease-out);
}
.auth-input:focus { border-color: var(--c-bronze); }
.auth-submit {
  height: 48px;
  padding: 0 1.6rem;
  border-radius: 999px;
  border: none;
  background: var(--c-ink);
  color: var(--c-paper);
  font-family: var(--font-sans);
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background 200ms var(--ease-out), transform 200ms var(--ease-out);
}
.auth-submit:hover {
  background: var(--c-bronze-deep);
  transform: translateY(-1px);
}
.auth-error {
  font-size: 0.85rem;
  color: #b53e3e;
  margin-top: 0.25rem;
  min-height: 1.2em;
}

/* =========================================================
   Bird's-Eye Threading — Topo-Pattern Varianten
   ========================================================= */

/* Generischer Pattern-Layer als ::before, pro Variante neu konfiguriert */
.topo-soft,
.topo-corner,
.topo-ring,
.topo-bronze-top { position: relative; isolation: isolate; }

/* .topo-corner-Pseudo ist um 3° rotiert und schwingt sonst rechts über den
   Viewport hinaus → Quelle des horizontalen iOS-Scrolls. Mit overflow:
   clip wird der Überlauf abgeschnitten, ohne ein neues Block-Formatting-
   Context zu erzeugen wie bei overflow: hidden. Fallback für ältere
   Browser bleibt overflow: hidden via Cascade. */
.topo-corner { overflow: hidden; overflow: clip; }

.topo-soft::before,
.topo-corner::before,
.topo-bronze-top::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='600' height='400' viewBox='0 0 600 400'><g fill='none' stroke='%238B6F47' stroke-width='0.6' opacity='0.18'><path d='M -20 80 C 100 60 200 100 320 80 S 540 70 620 90'/><path d='M -20 130 C 100 110 200 150 320 130 S 540 120 620 140'/><path d='M -20 180 C 100 160 200 200 320 180 S 540 170 620 190'/><path d='M -20 230 C 100 210 200 250 320 230 S 540 220 620 240'/><path d='M -20 280 C 100 260 200 300 320 280 S 540 270 620 290'/><path d='M -20 330 C 100 310 200 350 320 330 S 540 320 620 340'/><ellipse cx='150' cy='205' rx='80' ry='14'/><ellipse cx='150' cy='205' rx='55' ry='9'/><ellipse cx='450' cy='235' rx='100' ry='18'/><ellipse cx='450' cy='235' rx='70' ry='12'/><ellipse cx='450' cy='235' rx='40' ry='7'/></g></svg>");
}

/* Approach: zentriert, sanft, große Skala */
.topo-soft::before {
  background-size: 800px 533px;
  background-position: center center;
  background-repeat: no-repeat;
  opacity: 0.22;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, black 30%, transparent 90%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, black 30%, transparent 90%);
}

/* Project: Ecke unten rechts, leicht rotiert */
.topo-corner::before {
  background-size: 500px 333px;
  background-position: right -80px bottom -60px;
  background-repeat: no-repeat;
  opacity: 0.18;
  transform: rotate(3deg);
  transform-origin: bottom right;
  mask-image: radial-gradient(ellipse 60% 60% at 85% 85%, black 20%, transparent 85%);
  -webkit-mask-image: radial-gradient(ellipse 60% 60% at 85% 85%, black 20%, transparent 85%);
}

/* Audience: umlaufender Höhenlinien-Ring */
.topo-ring::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='800' height='600' viewBox='0 0 800 600'><g fill='none' stroke='%238B6F47' stroke-width='0.7' opacity='0.3'><ellipse cx='400' cy='300' rx='320' ry='220'/><ellipse cx='400' cy='300' rx='280' ry='190'/><ellipse cx='400' cy='300' rx='240' ry='160'/><ellipse cx='400' cy='300' rx='200' ry='130'/></g></svg>");
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  opacity: 0.55;
}

/* Contact: Bronze-getöntes Pattern nur am oberen Rand */
.topo-bronze-top::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='600' height='400' viewBox='0 0 600 400'><g fill='none' stroke='%238B6F47' stroke-width='0.6' opacity='0.5'><path d='M -20 80 C 100 60 200 100 320 80 S 540 70 620 90'/><path d='M -20 130 C 100 110 200 150 320 130 S 540 120 620 140'/><path d='M -20 180 C 100 160 200 200 320 180 S 540 170 620 190'/><path d='M -20 230 C 100 210 200 250 320 230 S 540 220 620 240'/><ellipse cx='150' cy='205' rx='80' ry='14'/><ellipse cx='450' cy='235' rx='100' ry='18'/></g></svg>");
  background-size: 700px 467px;
  background-position: center top;
  background-repeat: repeat-x;
  opacity: 0.12;
  mask-image: linear-gradient(to bottom, black 0%, transparent 40%);
  -webkit-mask-image: linear-gradient(to bottom, black 0%, transparent 40%);
}
@media (max-width: 600px) {
  .topo-soft::before        { opacity: 0.13; }
  .topo-corner::before      { opacity: 0.11; }
  .topo-bronze-top::before  { opacity: 0.08; }
  .topo-ring::before        { display: none; }
}

/* =========================================================
   Method-Sektion: Trail mit Markern und Pfad
   ========================================================= */
.steps-trail {
  position: relative;
}

/* Step-Marker — Survey-Point auf der Topo-Karte
   Großer Anker mit konzentrischen Höhenringen via box-shadow-Layering.
   Die Ringe entstehen durch alternierende Paper-/Bronze-Spreads:
   jeweils ein Paper-Abstand erzeugt die Lücke, dann ein 1px Bronze-Stroke. */
.step-marker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: var(--c-paper);
  border: 1px solid var(--c-bronze);
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  color: var(--c-bronze-deep);
  font-size: 2rem;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variation-settings: "opsz" 144;
  position: relative;
  z-index: 2;
  box-shadow:
    0 0  0  6px var(--c-paper),
    0 0  0  7px rgba(139, 111, 71, 0.30),
    0 0  0 14px var(--c-paper),
    0 0  0 15px rgba(139, 111, 71, 0.20),
    0 0  0 22px var(--c-paper),
    0 0  0 23px rgba(139, 111, 71, 0.12);
  transition:
    transform var(--d-base) var(--ease-out),
    border-color var(--d-base) var(--ease-out),
    color var(--d-base) var(--ease-out),
    box-shadow var(--d-base) var(--ease-out);
}

/* Inner-Span — italic Fraunces sitzt in der Flex-Centering optisch zu hoch.
   Mit translateY rücken wir die Glyphe auf den optischen Mittelpunkt des
   Kreises. Größerer Offset ist hier nötig wegen Fraunces opsz 144 italic. */
.step-marker-num {
  display: inline-block;
  transform: translateY(0.22em);
}

/* Paper-Buffer DIREKT auf dem Marker — versteckt die Trail-Linie hinter
   Marker UND Höhenringen, sauber im Marker-eigenen Stacking-Context.
   z-index: -1 platziert ihn hinter Marker-Inhalt + box-shadow-Ringen,
   aber innerhalb des Marker-Contexts (z-index 2) und damit über
   .trail-path (z-index 1). */
.step-marker::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background: var(--c-paper);
  transform: translate(-50%, -50%);
  z-index: -1;
  pointer-events: none;
}
@media (max-width: 600px) {
  .step-marker::before { width: 96px; height: 96px; }
}

/* Die existierende .step-num-Größe wird durch den Marker ersetzt */
.steps-trail .step-num {
  font-size: 0; /* Original-Riesenzahl unterdrücken; Marker übernimmt */
  line-height: 0;
  margin-bottom: 1rem;
}

/* Mehr vertikale Atmung zwischen den Steps, damit die Ringe nicht kollidieren */
.steps-trail .step { padding: 3.25rem 0; }
.steps-trail .step:first-child { padding-top: 1.5rem; }
.steps-trail .step:last-child  { padding-bottom: 1.5rem; }

.step:hover .step-marker {
  transform: translateY(-2px);
  border-color: var(--c-bronze-deep);
  color: var(--c-bronze-deep);
  box-shadow:
    0 0  0  6px var(--c-paper),
    0 0  0  7px var(--c-bronze-deep),
    0 0  0 14px var(--c-paper),
    0 0  0 15px rgba(139, 111, 71, 0.32),
    0 0  0 22px var(--c-paper),
    0 0  0 23px rgba(139, 111, 71, 0.18);
}

@media (max-width: 600px) {
  .step-marker {
    width: 64px;
    height: 64px;
    font-size: 1.5rem;
    box-shadow:
      0 0  0  4px var(--c-paper),
      0 0  0  5px rgba(139, 111, 71, 0.28),
      0 0  0 10px var(--c-paper),
      0 0  0 11px rgba(139, 111, 71, 0.16);
  }
  .step:hover .step-marker {
    box-shadow:
      0 0  0  4px var(--c-paper),
      0 0  0  5px var(--c-bronze-deep),
      0 0  0 10px var(--c-paper),
      0 0  0 11px rgba(139, 111, 71, 0.28);
  }
  .steps-trail .step { padding: 2.25rem 0; }
}

/* Pfad-Linie hinter den Markern — weicher gestrichelter Wanderpfad.
   Progressive Reveal über CSS-Variable --trail-progress (0..1), die per
   JS direkt aus der Scroll-Position der Sektion berechnet wird. */
.trail-path {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 100%;
  color: var(--c-bronze);
  z-index: 1;
  pointer-events: none;
  --trail-progress: 0;
  -webkit-mask-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 1) 0,
    rgba(0, 0, 0, 1) calc(var(--trail-progress) * 100% - 2%),
    rgba(0, 0, 0, 0) calc(var(--trail-progress) * 100% + 2%)
  );
  mask-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 1) 0,
    rgba(0, 0, 0, 1) calc(var(--trail-progress) * 100% - 2%),
    rgba(0, 0, 0, 0) calc(var(--trail-progress) * 100% + 2%)
  );
}
.trail-path line {
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-dasharray: 4 6;
  stroke-linecap: round;
  stroke-dashoffset: 0;
  opacity: 0.5;
}

@media (max-width: 600px) {
  .trail-path { width: 2px; }
  .trail-path line { stroke-width: 1; stroke-dasharray: 3 5; }
}

/* =========================================================
   Cursor-Companion: ferner Adler
   ========================================================= */
.cursor-eagle {
  position: fixed;
  top: 0;
  left: 0;
  width: 24px;
  height: 8px;
  pointer-events: none;
  z-index: 5;
  color: var(--c-bronze);
  opacity: 0;
  transform: translate3d(-100px, -100px, 0);
  will-change: transform;
  transition: opacity 600ms var(--ease-out);
  filter: drop-shadow(0 2px 4px rgba(30, 35, 32, 0.12));
}
.cursor-eagle svg {
  width: 100%;
  height: auto;
  display: block;
  opacity: 0.25;
  animation: cursor-eagle-pulse 3.2s ease-in-out infinite;
}
.cursor-eagle.is-active { opacity: 1; }

@keyframes cursor-eagle-pulse {
  0%, 100% { transform: scale(1);    }
  50%      { transform: scale(1.04); }
}

/* Gating: nur Desktop mit Maus, kein reduced-motion, nicht im locked-Zustand */
@media (hover: none), (pointer: coarse) {
  .cursor-eagle { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .cursor-eagle { display: none; }
}
html.is-locked .cursor-eagle { display: none; }

/* =========================================================
   Mobile-Performance: aggressive Reduktion alles dessen, was pro
   Scroll-Frame neu komponiert/repaintet werden muss. Ziel: kein
   Stuttering beim Scrollen auf iPhone/Android.
   ========================================================= */
@media (max-width: 600px) {
  /* Komplette Adler/Wolken-Layer ausblenden — ohne Parallax-JS auf
     Mobile (siehe script.js isTouchDevice-Guard) bringen sie nichts
     mehr; der 72s glide-main-Keyframe auf .scene-eagle hält sonst
     dauerhaft eine GPU-Textur belegt und kostet pro Frame Compositing. */
  .scene-eagle-far,
  .scene-eagle,
  .scene-clouds-far,
  .scene-clouds-near { display: none; }

  /* Da kein Parallax läuft, dürfen alle verbleibenden Scene-Layer und
     der Cursor-Vogel-Pfad ihre GPU-Schichten freigeben — schont VRAM
     auf älteren Phones, gibt dem Compositor mehr Spielraum. */
  .scene-layer,
  .cloud-band,
  .bird { will-change: auto; }

  /* Paper-Grain-Overlay mit position: fixed + mix-blend-mode: multiply
     zwingt den Browser, jeden Scrollframe gegen den darunterliegenden
     Inhalt neu zu blenden. Bei opacity 0.02 ist es auf OLED-Phones
     ohnehin nicht wahrnehmbar — komplett aus statt gedimmt. */
  body::before { display: none; }

  /* Header backdrop-filter: blur ist auf einem position: sticky Element
     einer der teuersten Per-Frame-GPU-Operationen auf iOS Safari.
     Ersetzt durch opaken Hintergrund — visueller Unterschied minimal,
     Scroll-Performance massiv besser. */
  .site-header {
    background: rgba(244, 240, 232, 0.97);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .site-header.is-scrolled { background: rgb(244, 240, 232); }

  /* Scroll-Progress-Bar: 80ms-Transition kaskadiert bei Momentum-
     Scroll auf Mobile zu mehrfach gestarteten Animationen pro Sekunde.
     Momentum ist ohnehin bereits weich. */
  .scroll-progress-bar { transition: none; }

  /* Bestehende Mobile-Anpassungen (kompakt) */
  .portrait-card   { max-width: 280px; }
  .topo-bg::before { opacity: 0.3; }
}

/* =========================================================
   Sektion-Gradient-Bridges — weicher Farbübergang am unteren Rand
   jeder Sektion. Hinweis: CSS `transparent` interpoliert intern über
   rgba(0,0,0,0), was bei Paper→Ink-Übergängen einen matschigen Mittel-
   grau-Ton erzeugt. Deshalb verwenden wir explizit rgba() mit der
   Ziel-Farbe und Alpha von 0 bis 1 — saubere Interpolation, kein Mud.
   Topo-Patterns nutzen ::before, daher hier ::after.
   ========================================================= */
.section { position: relative; }
.section::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 80px;
  pointer-events: none;
  z-index: 0;
}
/* Paper-Familie: weiche Übergänge zwischen ähnlichen Tönen */
.section--about::after    { background: linear-gradient(to top, rgb(237, 231, 217), rgba(237, 231, 217, 0)); } /* → paper-2 */
.section--approach::after { background: linear-gradient(to top, rgb(244, 240, 232), rgba(244, 240, 232, 0)); } /* → paper   */
.section--method::after   { background: linear-gradient(to top, rgb(229, 221, 201), rgba(229, 221, 201, 0)); } /* → paper-3 */
.section--project::after  { background: linear-gradient(to top, rgb(244, 240, 232), rgba(244, 240, 232, 0)); } /* → paper   */

/* Dramatische Übergänge (Paper→Ink, Ink→Paper-2) bekommen BEWUSST keine
   Gradient-Brücke. Beim Interpolieren zwischen so kontrastreichen Tönen
   entsteht zwangsläufig eine matschige Grau-Mittelzone, die wie ein
   Schmier-Fleck wirkt. Cleaner ist der harte Magazin-Schnitt: neue
   Sektion, neue Farbwelt, klare Kante. */

/* Inhalt muss über dem Gradient liegen (Gradient ist z-index 0) */
.section > .container { position: relative; z-index: 1; }

/* =========================================================
   Magnetic CTAs — Buttons "ziehen" sich subtil zum Cursor.
   --mx/--my werden von JS via setProperty gesetzt (nur Desktop).
   Hover-Lift kombiniert mit Magnetic-Offset über calc().
   ========================================================= */
.btn,
.nav-cta {
  --mx: 0px;
  --my: 0px;
  transform: translate(var(--mx), var(--my));
  /* Transition gilt NICHT für transform — JS-rAF macht die Bewegung weich */
  transition:
    background var(--d-base) var(--ease-out),
    color var(--d-base) var(--ease-out),
    border-color var(--d-base) var(--ease-out),
    box-shadow var(--d-base) var(--ease-out);
}
.btn-primary:hover,
.btn-ghost:hover,
.nav-cta:hover {
  transform: translate(var(--mx), calc(var(--my) - 1px));
}

/* =========================================================
   Reduced motion
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .scene-eagle, .scene-eagle-far,
  .scene-clouds-far, .scene-clouds-near { display: none; }
  .scene-layer { transform: none !important; }
  [data-reveal] { opacity: 1; transform: none; }
  .infinity path { stroke-dashoffset: 0 !important; }
  html { scroll-behavior: auto; }
  .topo-corner::before { transform: none; }
}