/* ═══════════════════════════════════════════════════════════════
   CHRISTOPHER AXE — Communication & Creative Leadership
   Aufbau: 1 Token · 2 Grundlagen · 3 Bewegung · 4 Rahmen
           5 Sektionen · 6 Formular/Fuß · 7 Schmale Schirme
   Regel: Grundzustand ist immer sichtbar und fertig. Bewegung
   wird nur innerhalb der Klassen fx / pin / smooth zugeschaltet.
   ═══════════════════════════════════════════════════════════════ */

/* Schrift liegt auf dem eigenen Server: keine Anfrage an Dritte */
@font-face {
  font-family: "Hanken Grotesk"; font-style: normal; font-weight: 200 600; font-display: swap;
  src: url("fonts/hanken-grotesk-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Hanken Grotesk"; font-style: normal; font-weight: 200 600; font-display: swap;
  src: url("fonts/hanken-grotesk-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ── 1 · Token ─────────────────────────────────────────────── */
:root {
  --ink:        #0b0a09;
  --ink-2:      #141210;
  --ink-3:      #1d1a17;
  --ivory:      #efe8dc;
  --ivory-2:    #e5dccc;
  --ivory-3:    #d3c8b4;

  --on-dark:      #efe8dc;
  --on-dark-mid:  #a79e90;
  --on-dark-low:  #6d665b;
  --on-light:     #14110e;
  --on-light-mid: #5b5348;
  --on-light-low: #8c8374;

  --copper:      #d07b45;
  --copper-deep: #8f5430;

  --sans: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;

  --ease:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-io: cubic-bezier(0.6, 0, 0.2, 1);
  --dur-1: 0.7s;
  --dur-2: 1.1s;
  --dur-3: 1.7s;

  --gut: clamp(1.25rem, 5vw, 5rem);
  --max: 108rem;
}

/* ── 2 · Grundlagen ────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ink);
  color: var(--on-dark);
  font-family: var(--sans);
  font-weight: 300;
  font-size: clamp(1rem, 0.95rem + 0.25vw, 1.15rem);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
h1, h2, h3, p, dl, dd, blockquote, figure, ol, ul { margin: 0; }
ol, ul { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }

.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gut); }
.u-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
:focus-visible { outline: 2px solid var(--copper); outline-offset: 3px; }
::selection { background: var(--copper); color: var(--ink); }

.eyebrow {
  font-size: 0.72rem; font-weight: 400;
  letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--on-dark-mid);
}
.sec--light .eyebrow { color: var(--on-light-low); }

.display {
  font-weight: 200;
  letter-spacing: -0.025em;
  line-height: 0.98;
  font-size: clamp(2.6rem, 7.2vw, 7.4rem);
  color: var(--on-dark);
}
.display--dark { color: var(--on-light); }
.display .line { display: block; overflow: hidden; padding-bottom: 0.08em; }
.display .line > span { display: block; }

/* GL-Fläche */
.gl {
  position: fixed; inset: 0; z-index: 0;
  opacity: 0; transition: opacity 1.6s var(--ease);
  pointer-events: none;
}
html.gl-on .gl { opacity: 1; }
.gl canvas { width: 100% !important; height: 100% !important; display: block; }

/* ── 3 · Bewegung ──────────────────────────────────────────── */
.scroll-root { position: relative; z-index: 1; width: 100%; }
html.smooth .scroll-content {
  position: fixed; top: 0; left: 0; width: 100%;
  will-change: transform;
}

html.pin .sec[data-pin] { position: relative; }
html.pin .sec[data-pin] > .pin {
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100vh;
  overflow: hidden;
  will-change: transform;
}

.preloader { display: none; }
.cursor { display: none; }
.veil { display: none; }

/* Vorhang für Seitenwechsel und weite Ankersprünge: steigt von unten
   auf, hebt sich nach oben ab. Ohne Bewegungswunsch gibt es ihn nicht. */
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  html.js .veil {
    display: block; position: fixed; inset: 0; z-index: 190;
    background: var(--ink); pointer-events: none;
    clip-path: inset(100% 0 0 0);
  }
  .veil > i {
    position: absolute; left: 50%; top: 50%; width: 7rem; height: 1px; margin-left: -3.5rem;
    background: rgba(239,232,220,.16); overflow: hidden;
    opacity: 0; transition: opacity .3s var(--ease);
  }
  .veil > i::after {
    content: ""; position: absolute; inset: 0; background: var(--copper);
    transform: scaleX(0); transform-origin: left;
  }
  html.is-leaving .veil { clip-path: inset(0 0 0 0); pointer-events: auto; transition: clip-path .65s var(--ease-io); }
  html.is-leaving .veil > i { opacity: 1; transition-delay: .35s; }
  html.is-leaving .veil > i::after { animation: veilBar 1.4s var(--ease-io) .4s both; }
  html.is-veiled .veil { clip-path: inset(0 0 0 0); animation: veilSafe .01s linear 3s forwards; }   /* fängt keine Berührungen ab */
  html.is-veiled .veil > i { opacity: 1; }
  html.is-veiled .veil > i::after { transform: scaleX(1); }
  html.is-lifting .veil { clip-path: inset(0 0 100% 0); transition: clip-path .9s var(--ease-io); }
  @keyframes veilBar { from { transform: scaleX(0); } to { transform: scaleX(1); } }
  @keyframes veilSafe { to { clip-path: inset(0 0 100% 0); visibility: hidden; } }   /* falls das Skript ausfällt */
}

@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {

  /* Reveals – Anfangszustände nur hier */
  html.js [data-reveal="rise"]  { opacity: 0; transform: translate3d(0, 28px, 0); filter: blur(6px); }
  html.js [data-reveal="plain"] { opacity: 0; }
  html.js [data-reveal="line"] > span { transform: translate3d(0, 108%, 0); opacity: 0; }
  html.js [data-reveal] {
    transition:
      opacity var(--dur-2) var(--ease) var(--rd, 0ms),
      transform var(--dur-2) var(--ease) var(--rd, 0ms),
      filter var(--dur-2) var(--ease) var(--rd, 0ms);
  }
  html.js [data-reveal="line"] > span {
    transition:
      transform var(--dur-2) var(--ease) var(--rd, 0ms),
      opacity var(--dur-1) var(--ease) var(--rd, 0ms);
  }
  html.js [data-reveal].is-in { opacity: 1; transform: none; filter: none; }
  html.js [data-reveal="line"].is-in > span { transform: none; opacity: 1; }

  /* Auftakt über der Falz */
  html.js { --base: 0s; }
  html.js.is-first { --base: 2.35s; }
  html.js .lead-in {
    opacity: 0; transform: translate3d(0, 22px, 0);
    animation: leadIn var(--dur-2) var(--ease) calc(var(--base) + var(--d, 0s)) both;
  }
  html.js .hero__row { overflow: hidden; }
  html.js .hero__row .ch {
    transform: translate3d(0, 112%, 0);
    animation: leadUp 1.5s var(--ease) calc(var(--base) + .25s + var(--i) * 0.045s) both;
  }
  @keyframes leadIn { to { opacity: 1; transform: none; } }
  @keyframes leadUp { from { transform: translate3d(0, 112%, 0); } to { transform: none; } }

  /* Vorhang */
  html.js.is-first .preloader {
    display: grid; place-items: center;
    position: fixed; inset: 0; z-index: 200;
    background: var(--ink);
    animation: plOut 0.95s var(--ease-io) 1.85s both;
  }
  .preloader__inner { display: grid; justify-items: center; gap: 1.6rem; }
  .preloader__word {
    display: flex; overflow: hidden;
    font-weight: 300; font-size: clamp(1.1rem, 3.6vw, 2rem);
    letter-spacing: 0.34em;
  }
  .preloader__word i { width: 0.9em; }
  .preloader__word span {
    display: block; transform: translate3d(0, 110%, 0);
    animation: leadUp 1.1s var(--ease) both;
  }
  .preloader__word span:nth-child(2) { animation-delay: .04s; } .preloader__word span:nth-child(3) { animation-delay: .08s; }
  .preloader__word span:nth-child(4) { animation-delay: .12s; } .preloader__word span:nth-child(5) { animation-delay: .16s; }
  .preloader__word span:nth-child(6) { animation-delay: .20s; } .preloader__word span:nth-child(7) { animation-delay: .24s; }
  .preloader__word span:nth-child(8) { animation-delay: .28s; } .preloader__word span:nth-child(9) { animation-delay: .32s; }
  .preloader__word span:nth-child(10) { animation-delay: .36s; } .preloader__word span:nth-child(11) { animation-delay: .40s; }
  .preloader__word span:nth-child(13) { animation-delay: .48s; } .preloader__word span:nth-child(14) { animation-delay: .52s; }
  .preloader__word span:nth-child(15) { animation-delay: .56s; }
  .preloader__bar { display: block; width: 7rem; height: 1px; background: rgba(239,232,220,0.16); }
  .preloader__bar > i { display: block; height: 100%; background: var(--copper); transform: scaleX(0); transform-origin: left; animation: plBar 1.5s var(--ease-io) .3s both; }
  @keyframes plBar { to { transform: scaleX(1); } }
  @keyframes plOut { to { opacity: 0; visibility: hidden; } }

  /* Wort-Aufdeckung */
  html.fx [data-scrub] .w { opacity: 0.16; transition: opacity .35s linear; }
  html.fx [data-scrub] .w.on { opacity: 1; }
}

/* Eigener Zeiger (nur Maus) */
html.smooth .cursor {
  display: block; position: fixed; top: 0; left: 0; z-index: 300;
  width: 0; height: 0; pointer-events: none; mix-blend-mode: difference;
}
.cursor > i {
  display: block; width: 14px; height: 14px; margin: -7px 0 0 -7px;
  border-radius: 50%; background: #efe8dc;
  transition: transform .5s var(--ease), opacity .3s;
}
.cursor.is-hover > i { transform: scale(3.4); }
.cursor.is-down > i { transform: scale(.7); }
html.smooth, html.smooth a, html.smooth button { cursor: none; }
html.smooth input, html.smooth select, html.smooth textarea { cursor: text; }

/* ── 4 · Rahmen ────────────────────────────────────────────── */
.head {
  position: fixed; top: 0; left: 0; right: 0; z-index: 110;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: 1.3rem var(--gut);
  color: var(--on-dark);
  transition: color var(--dur-1) var(--ease), transform 0.6s var(--ease);
}
.head.is-light { color: var(--on-light); }
/* Schmale Schirme: Kopfzeile bleibt stehen und bekommt beim Scrollen einen
   Grund, sonst liegen Name und Menüknopf direkt auf dem Inhalt. */
@media (max-width: 63.99rem) {
  .head { transition: color var(--dur-1) var(--ease), background-color .4s var(--ease), padding .4s var(--ease); }
  .head.is-solid { background: rgba(11,10,9,.86); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); padding-block: .8rem; }
  .head.is-solid.is-light { background: rgba(239,232,220,.9); }
  html.nav-open .head { background: transparent; color: var(--on-dark); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
html.nav-open, html.nav-open body { overflow: hidden; }
.head.is-hidden { transform: translateY(-140%); }
.head__word { font-weight: 400; letter-spacing: 0.34em; font-size: 0.82rem; }
.head__nav { display: none; gap: 2.2rem; align-items: center; font-size: 0.74rem; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 400; }
.head__nav a { position: relative; padding-block: 0.3rem; }
.head__nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur-1) var(--ease);
}
.head__nav a:hover::after { transform: scaleX(1); }
.head__burger {
  display: grid; gap: 5px; align-content: center;
  width: 2.6rem; height: 2.6rem; padding: 0.6rem;
  background: none; border: 0; cursor: pointer;
}
.head__burger span { display: block; height: 1px; background: currentColor; transition: transform var(--dur-1) var(--ease); }
.head__burger[aria-expanded="true"] span:first-child { transform: translateY(3px) rotate(45deg); }
.head__burger[aria-expanded="true"] span:nth-child(2) { transform: translateY(-3px) rotate(-45deg); }

.mnav {
  position: fixed; inset: 0; z-index: 105;
  display: grid; align-content: center; gap: 0.5rem;
  padding: var(--gut);
  background: var(--ink-2);
  font-weight: 200; font-size: clamp(2.2rem, 11vw, 3.6rem); line-height: 1.15; letter-spacing: -0.02em;
  visibility: hidden; opacity: 0;
  transition: opacity var(--dur-1) var(--ease), visibility var(--dur-1);
}
.mnav.is-open { visibility: visible; opacity: 1; }
.mnav a { color: var(--on-dark); }

/* Buttons: bleiben stehen. Beim Darüberfahren läuft eine Kupferfläche
   von der Eintrittsstelle des Zeigers aus auf, der Text rollt nach oben
   in seine Zwiefalt und der Pfeil streckt sich — ohne dass sich Größe
   oder Lage des Knopfes ändern. */
.btn, .head__cta {
  position: relative; isolation: isolate; overflow: hidden;
  border: 1px solid currentColor; border-radius: 100px;
  transition: color .5s var(--ease), border-color .5s var(--ease);
}
.btn::before, .head__cta::before {
  content: ""; position: absolute; z-index: -1;
  left: var(--mx, 50%); top: var(--my, 50%);
  width: 240%; aspect-ratio: 1; border-radius: 50%;
  background: var(--copper);
  transform: translate(-50%, -50%) scale(0);
  transition: transform .75s var(--ease);
}
.btn {
  display: inline-flex; align-items: center; gap: 1rem;
  padding: 1.05rem 1.7rem; background: none; cursor: pointer;
  font-size: 0.78rem; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 400;
}
.head__cta { padding: 0.7rem 1.3rem !important; }
.head__cta::after { display: none; }
.btn--dark { color: var(--on-light); }

/* Text rollt nach oben, ein zweites Exemplar rückt von unten nach */
.bt { position: relative; display: inline-block; overflow: hidden; vertical-align: bottom; }
.bt__a, .bt__b { display: block; transition: transform .6s var(--ease); }
.bt__b { position: absolute; left: 0; top: 0; transform: translate3d(0, 110%, 0); }

/* Pfeil: feste Breite, nur die Linie streckt sich */
.btn i { flex: none; position: relative; width: 2.4rem; height: 1px; }
.btn i::before { content: ""; position: absolute; inset: 0; background: currentColor; transform: scaleX(.62); transform-origin: left; transition: transform .6s var(--ease); }
.btn i::after { content: ""; position: absolute; right: 0; top: -3px; width: 7px; height: 7px; border-top: 1px solid currentColor; border-right: 1px solid currentColor; transform: translateX(-38%) rotate(45deg); transition: transform .6s var(--ease); }

@media (hover: hover) {
  .btn:hover, .head__cta:hover { color: var(--ink); border-color: var(--copper); }
  .btn:hover::before, .head__cta:hover::before { transform: translate(-50%, -50%) scale(1); }
  .btn:hover .bt__a, .head__cta:hover .bt__a { transform: translate3d(0, -110%, 0); }
  .btn:hover .bt__b, .head__cta:hover .bt__b { transform: none; }
  .btn:hover i::before { transform: scaleX(1); }
  .btn:hover i::after { transform: rotate(45deg); }
}
.btn:focus-visible, .head__cta:focus-visible { color: var(--ink); border-color: var(--copper); }
.btn:focus-visible::before, .head__cta:focus-visible::before { transform: translate(-50%, -50%) scale(1); }


/* ── 5 · Sektionen ─────────────────────────────────────────── */
.sec { position: relative; }
.sec--dark { background: var(--ink); color: var(--on-dark); }
.sec--ink2 { background: var(--ink-2); color: var(--on-dark); }
.sec--light { background: var(--ivory); color: var(--on-light); }
.sec--full { min-height: 100vh; display: grid; }

/* 5.1 Auftakt */
.hero {
  grid-template-rows: 1fr auto; align-items: end;
  background:
    radial-gradient(60% 50% at 70% 28%, rgba(208,123,69,0.20), transparent 70%),
    radial-gradient(50% 40% at 20% 10%, rgba(239,232,220,0.06), transparent 70%);
}
.hero__inner { position: relative; padding-block: 9rem 2.5rem; align-self: start; display: grid; align-content: start; min-height: 70vh; }
.hero__name {
  margin-top: clamp(1.2rem, 3vh, 2.4rem);
  font-weight: 200; text-transform: uppercase;
  font-size: clamp(2.6rem, 11.2vw, 13.5rem);
  line-height: 0.92; letter-spacing: 0.03em;
}
.hero__row { display: flex; align-items: center; padding-bottom: 0.06em; }
.hero__row--2 { padding-left: clamp(2rem, 14vw, 20rem); gap: clamp(1rem, 3vw, 3rem); }
.hero__row .ch { display: inline-block; transition: color .5s var(--ease), transform .6s var(--ease); }
@media (hover: hover) {
  .hero__row .ch:hover { color: var(--copper); transform: translate3d(0, -0.04em, 0); transition-duration: .15s; }
}
.hero__rule { flex: 1; height: 1px; background: linear-gradient(90deg, var(--copper), transparent); margin-top: .1em; }
.hero__sub {
  margin-top: clamp(1.6rem, 4vh, 3rem); max-width: 34ch;
  font-size: clamp(1.1rem, 1.5vw, 1.45rem); line-height: 1.45; color: var(--on-dark-mid);
  text-shadow: 0 0 1.4rem var(--ink), 0 0 .5rem var(--ink);   /* bleibt über den Linien lesbar */
}
.hero__sub strong { font-weight: 400; color: var(--on-dark); }
.hero__foot {
  position: relative; display: grid; grid-template-columns: auto 1fr auto; align-items: end; gap: 1.5rem;
  padding-bottom: 2.2rem;
  font-size: 0.7rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--on-dark-mid);
}
.hero__meta { text-align: center; }
.hero__meta--r { text-align: right; }
.hero__scrollhint { display: grid; justify-items: start; gap: 0.7rem; }
.hero__scrollhint > i { display: block; width: 1px; height: 3.2rem; background: linear-gradient(var(--on-dark-mid), transparent); }
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  html.js .hero__scrollhint > i { animation: hint 2.4s var(--ease-io) infinite; transform-origin: top; }
  @keyframes hint { 0%,100% { transform: scaleY(0.35); opacity: 0.4; } 45% { transform: scaleY(1); opacity: 1; } }
}

/* 5.2 Manifesto */
.manifesto { padding-block: clamp(6rem, 18vh, 13rem); }
.manifesto__text {
  margin-top: clamp(1.6rem, 4vw, 3rem);
  font-weight: 200; letter-spacing: -0.025em; line-height: 1.12;
  font-size: clamp(1.9rem, 4.9vw, 5rem);
  max-width: 26em;
}
.manifesto__foot {
  margin-top: clamp(3rem, 8vw, 6rem);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 2rem;
  padding-top: 1.6rem; border-top: 1px solid var(--ivory-3);
}
.manifesto__foot p { max-width: 36ch; color: var(--on-light-mid); }

/* 5.3 Approach — vier Phasen auf einen Blick, die Fläche verformt sich mit */
.work { background: transparent; color: var(--on-dark); }
.work__stage { display: grid; }
.work__scrim {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(0deg, rgba(11,10,9,0.92) 0%, rgba(11,10,9,0.6) 34%, rgba(11,10,9,0) 62%),
    linear-gradient(180deg, rgba(11,10,9,0.55) 0%, rgba(11,10,9,0) 26%);
}
.work__ui { position: relative; display: grid; grid-template-rows: auto 1fr; padding-block: 6.5rem 3.2rem; }
.work__title {
  margin-top: 1.1rem; max-width: 22em;
  font-weight: 200; letter-spacing: -0.025em; line-height: 1.05;
  font-size: clamp(1.9rem, 3.6vw, 3.8rem);
}
.work__row { align-self: end; position: relative; }

/* Spur über den Spalten: grau, mit Kupfer gefüllt bis zum Fortschritt */
.work__track { position: relative; height: 1px; background: rgba(239,232,220,.16); margin-bottom: 2.2rem; }
.work__track > i {
  position: absolute; left: 0; right: 0; top: -1px; height: 2px; background: linear-gradient(90deg, rgba(208,123,69,.4), var(--copper));
  box-shadow: 0 0 12px rgba(208,123,69,.55);
  transform: scaleX(var(--wp, 0)); transform-origin: left;
}
.work__phases { display: grid; gap: 2.6rem; }
.phase { position: relative; display: grid; gap: .7rem; align-content: start; }
.phase::before {
  /* Marke auf der Spur, über jeder Spalte */
  content: ""; position: absolute; left: 0; top: calc(-2.2rem - 4px);
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--ink); border: 1px solid rgba(239,232,220,.4);
  transition: background-color .5s var(--ease), border-color .5s var(--ease), transform .6s var(--ease);
}
.phase__nr { font-size: .72rem; letter-spacing: .2em; color: var(--on-dark-low); }
.phase__t {
  font-weight: 200; letter-spacing: -0.035em; line-height: .95;
  font-size: clamp(2.4rem, 4.6vw, 5rem);
}
.phase__k { font-size: .7rem; letter-spacing: .24em; text-transform: uppercase; color: var(--copper); }
.phase__d { max-width: 28ch; font-size: clamp(.98rem, 1.1vw, 1.12rem); line-height: 1.5; color: var(--on-dark-mid); }

@media (min-width: 48rem) {
  .work__phases { grid-template-columns: repeat(4, 1fr); gap: clamp(1.2rem, 2.6vw, 3rem); }
}

/* Gepinnt: aktive Spalte hell, die anderen treten zurück */
html.pin .work .phase > * { transition: color .6s var(--ease), opacity .6s var(--ease), transform .8s var(--ease); }
html.pin .work .phase .phase__t { color: rgba(239,232,220,.42); }
html.pin .work .phase .phase__k,
html.pin .work .phase .phase__d { opacity: .5; }
html.pin .work .phase.is-past .phase__t { color: rgba(239,232,220,.55); }
html.pin .work .phase.is-past::before { background: var(--copper); border-color: var(--copper); }
html.pin .work .phase.is-on .phase__t { color: var(--on-dark); transform: translate3d(0, -.12em, 0); }
html.pin .work .phase.is-on .phase__k,
html.pin .work .phase.is-on .phase__d { opacity: 1; }
html.pin .work .phase.is-on .phase__d { color: var(--on-dark); }
html.pin .work .phase.is-on::before { background: var(--copper); border-color: var(--copper); transform: scale(1.5); box-shadow: 0 0 0 6px rgba(208,123,69,.16); }

/* 5.4 Situations — ein Körper, an sechs Stationen geschnitten */
.sections { background: transparent; color: var(--on-dark); }
.sections__stage { display: grid; }
.sections__scrim {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(11,10,9,0.86) 0%, rgba(11,10,9,0.5) 38%, rgba(11,10,9,0) 64%);
}
.sections__ui { position: relative; display: grid; grid-template-rows: auto 1fr auto; padding-block: 6.5rem 2.6rem; }
.sections__lead { margin-top: 1rem; max-width: 22ch; font-weight: 200; letter-spacing: -0.02em; line-height: 1.1; font-size: clamp(1.4rem, 2.2vw, 2.4rem); color: var(--on-dark-mid); }
.sections__list { display: grid; align-content: center; }
.sit { grid-area: 1 / 1; max-width: 44rem; }
.sit__nr { display: flex; align-items: center; gap: .9rem; font-size: .74rem; letter-spacing: .2em; text-transform: uppercase; color: var(--on-dark-low); }
.sit__nr b { font-weight: 400; font-size: 1.05rem; letter-spacing: .08em; color: var(--copper); }
.sit__nr i { width: 2.6rem; height: 1px; background: rgba(208,123,69,.6); }
.sit__t { margin-top: 1.4rem; font-weight: 200; letter-spacing: -0.03em; line-height: 1.02; font-size: clamp(2.1rem, 4.4vw, 4.8rem); max-width: 12em; overflow: hidden; padding-bottom: .08em; }
.sit__t > span { display: block; }
.sit__c { margin-top: 1.4rem; max-width: 34ch; font-size: clamp(1.05rem, 1.35vw, 1.3rem); line-height: 1.5; color: var(--on-dark-mid); }
.sections__foot { display: flex; align-items: center; gap: 2rem; }
.sections__index { list-style: none; margin: 0; padding: 0; flex: 1; max-width: 62rem; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(.6rem, 1.4vw, 1.4rem); }
.sections__index li { position: relative; padding-top: 1.1rem; }
.sections__index li::before, .sections__index li::after { content: ""; position: absolute; left: 0; top: 0; height: 1px; }
.sections__index li::before { right: 0; background: rgba(239,232,220,.2); transition: background-color .6s var(--ease); }
.sections__index li::after { width: 100%; height: 2px; top: -.5px; background: var(--copper); transform-origin: left; transform: scaleX(0); }
.sections__index li.is-past::after { transform: scaleX(1); opacity: .45; }
.sections__index li.is-on::after { transform: scaleX(var(--sp, 0)); }
.sections__index button {
  display: grid; gap: .45rem; width: 100%; padding: 0; text-align: left; background: none; border: 0; cursor: pointer;
  font: inherit; font-size: .82rem; line-height: 1.3; color: rgba(239,232,220,.5); transition: color .5s var(--ease);
}
.sections__index button span { font-size: .66rem; letter-spacing: .22em; color: var(--on-dark-low); transition: color .5s var(--ease); }
.sections__index li.is-past button { color: var(--on-dark-mid); }
.sections__index li.is-on button { color: var(--on-dark); }
.sections__index li.is-on button span { color: var(--copper); }
@media (hover: hover) { .sections__index button:hover { color: var(--on-dark); } }

html.pin .sections .sit { opacity: 0; pointer-events: none; }
html.pin .sections .sit.is-on { opacity: 1; pointer-events: auto; }
html.pin .sections .sit__t > span { transform: translate3d(0, 108%, 0); transition: transform 1s var(--ease); }
html.pin .sections .sit.is-on .sit__t > span { transform: none; }
html.pin .sections .sit.is-past .sit__t > span { transform: translate3d(0, -108%, 0); }
html.pin .sections .sit__nr, html.pin .sections .sit__c { opacity: 0; transform: translate3d(0, 20px, 0); transition: opacity .8s var(--ease) .1s, transform .9s var(--ease) .1s; }
html.pin .sections .sit.is-on .sit__nr, html.pin .sections .sit.is-on .sit__c { opacity: 1; transform: none; }

/* 5.5 Routes */
.routes { padding-block: clamp(5rem, 14vh, 10rem); }
.routes__title { margin-top: 1.2rem; max-width: 11em; font-size: clamp(2.3rem, 5.6vw, 5.8rem); }
.routes__head { margin-bottom: clamp(2.5rem, 6vw, 5rem); }
.routes__list { border-top: 1px solid var(--ivory-3); }
.route {
  position: relative; display: grid; align-items: center;
  grid-template-columns: 3rem 1fr; gap: .4rem 1rem;
  padding: clamp(1.4rem, 3vw, 2.4rem) 0;
  border-bottom: 1px solid var(--ivory-3);
  overflow: hidden; isolation: isolate;
}
.route::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--on-light);
  transform: scaleY(0); transform-origin: bottom;
  transition: transform .7s var(--ease);
}
.route__nr { font-size: .74rem; letter-spacing: .2em; color: var(--on-light-low); transition: color .5s var(--ease); }
.route__name {
  font-weight: 200; letter-spacing: -0.03em; line-height: 1;
  font-size: clamp(1.9rem, 5vw, 5rem);
  transition: transform .7s var(--ease), color .5s var(--ease);
}
.route__desc { grid-column: 2; color: var(--on-light-mid); max-width: 40ch; transition: color .5s var(--ease), transform .7s var(--ease); }
.route__arrow { display: none; }
@media (min-width: 64rem) {
  .route { grid-template-columns: 4rem 1.4fr 1fr 5rem; gap: 1rem 2rem; }
  .route__desc { grid-column: auto; }
  .route__arrow { display: block; justify-self: end; width: 2.6rem; height: 1px; background: currentColor; position: relative; transition: width .6s var(--ease), transform .6s var(--ease); }
  .route__arrow::after { content: ""; position: absolute; right: 0; top: -4px; width: 9px; height: 9px; border-top: 1px solid currentColor; border-right: 1px solid currentColor; transform: rotate(45deg); }
}
@media (hover: hover) {
  .route:hover::before { transform: scaleY(1); }
  .route:hover { color: var(--ivory); }
  .route:hover .route__nr { color: var(--copper); }
  .route:hover .route__name { transform: translateX(1.2rem); }
  .route:hover .route__desc { color: var(--on-dark-mid); transform: translateX(.6rem); }
  .route:hover .route__arrow { width: 4rem; color: var(--copper); }
}
.routes__note { margin-top: 2.2rem; max-width: 46ch; color: var(--on-light-mid); }

/* 5.6 About */
.about { padding-top: clamp(5rem, 14vh, 10rem); overflow: hidden; }
.about__grid { display: grid; gap: clamp(2.5rem, 6vw, 5rem); }
.about__big {
  margin-top: 1rem; font-weight: 200; line-height: .8; letter-spacing: -0.06em;
  font-size: clamp(9rem, 28vw, 30rem); color: var(--ivory);
  display: flex; align-items: flex-start;
}
.about__big i { font-style: normal; color: var(--copper); font-size: .5em; margin-left: .04em; line-height: 1.1; }
.about__cap { margin-top: 1rem; font-size: .72rem; letter-spacing: .26em; text-transform: uppercase; color: var(--on-dark-mid); }
.about__text { display: grid; gap: 1.4rem; align-content: end; max-width: 38ch; color: var(--on-dark-mid); font-size: clamp(1.05rem, 1.3vw, 1.3rem); line-height: 1.55; }
.about__lead { color: var(--on-dark); font-size: clamp(1.35rem, 2vw, 2rem); line-height: 1.25; letter-spacing: -0.015em; font-weight: 300; }
@media (min-width: 64rem) { .about__grid { grid-template-columns: 1.3fr 1fr; align-items: end; } }

/* Vier Länder mit Ortszeit — ruhige Spalten statt Laufschrift */
.places { margin-top: clamp(5rem, 12vw, 9rem); padding-bottom: clamp(1rem, 3vw, 2rem); }
.places__cap { font-size: .72rem; letter-spacing: .28em; text-transform: uppercase; color: var(--on-dark-mid); margin-bottom: 1.6rem; }
.places__list { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid rgba(239,232,220,.14); }
.places__list li {
  position: relative; display: grid; gap: .9rem; align-content: start;
  padding: 1.6rem 1rem 2rem 0;
  border-bottom: 1px solid rgba(239,232,220,.14);
}
.places__nr { font-size: .7rem; letter-spacing: .2em; color: var(--on-dark-low); }
.places__name {
  font-weight: 200; letter-spacing: -0.035em; line-height: .95;
  font-size: clamp(2.2rem, 5.4vw, 5.6rem);
  transition: color .6s var(--ease), transform .8s var(--ease);
}
.places__time { display: flex; align-items: baseline; gap: .7rem; font-variant-numeric: tabular-nums; }
.places__time b { font-weight: 300; font-size: 1.05rem; letter-spacing: .04em; color: var(--on-dark); }
.places__time em { font-style: normal; font-size: .66rem; letter-spacing: .22em; text-transform: uppercase; color: var(--on-dark-low); }
.places__sec {
  position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: var(--copper); opacity: .7;
  transform: scaleX(0); transform-origin: left;
  transition: transform 1s linear;
}
@media (hover: hover) {
  /* stärker als der Aufbau-Zustand darunter, sonst greift die Verschiebung nicht */
  html body .places__list li:hover > span.places__name { color: var(--copper); transform: translateX(.4rem); transition-delay: 0s; }
}
@media (min-width: 56rem) {
  .places__list { grid-template-columns: repeat(4, 1fr); }
  .places__list li { padding-left: clamp(1rem, 2vw, 2rem); }
  .places__list li:first-child { padding-left: 0; }
  .places__list li + li { border-left: 1px solid rgba(239,232,220,.14); }
}
@media (max-width: 55.99rem) { .places__list li:nth-child(even) { padding-left: 1rem; border-left: 1px solid rgba(239,232,220,.14); } }
/* Spalten bauen sich nacheinander auf */
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  html.js .places__list[data-reveal] { opacity: 1; }
  html.js .places__list li > span { opacity: 0; transform: translate3d(0, 1.2rem, 0); transition: opacity 1s var(--ease), transform 1.1s var(--ease); }
  html.js .places__list.is-in li > span { opacity: 1; transform: none; }
  html.js .places__list.is-in li:nth-child(2) > span { transition-delay: .12s; }
  html.js .places__list.is-in li:nth-child(3) > span { transition-delay: .24s; }
  html.js .places__list.is-in li:nth-child(4) > span { transition-delay: .36s; }
}
@media (prefers-reduced-motion: reduce) { .places__sec { transition: none; } }

/* 5.7 Connected projects */
.linked { padding-block: clamp(4rem, 10vh, 7rem); border-top: 1px solid rgba(239,232,220,.08); }
.linked__grid { margin-top: 2rem; display: grid; gap: clamp(1rem, 3vw, 3rem); }
.linked__item { position: relative; padding-top: 1.6rem; border-top: 1px solid rgba(239,232,220,.16); max-width: 42ch; }
.linked__item::before {
  content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px;
  background: var(--copper); transform: scaleX(0); transform-origin: left;
  transition: transform .9s var(--ease);
}
@media (hover: hover) {
  .linked__item:hover::before { transform: scaleX(1); }
  .linked__item:hover .linked__logo img { opacity: 1; transform: translate3d(.35rem, 0, 0); }
}
.linked__tag { font-size: .68rem; letter-spacing: .26em; text-transform: uppercase; color: var(--on-dark-low); }
/* Wortmarken: Breiten optisch angeglichen, gleiche Zeilenhöhe hält die Texte darunter bündig */
.linked__logo { display: flex; align-items: flex-start; min-height: 2.8rem; margin-block: 1.1rem 1.3rem; }
.linked__logo img { width: min(100%, var(--w)); height: auto; opacity: .92; transition: opacity .6s var(--ease), transform .9s var(--ease); }
.linked__item p:last-child { color: var(--on-dark-mid); }
@media (min-width: 48rem) { .linked__grid { grid-template-columns: 1fr 1fr; } }

/* 5.8 Für wen — drei Einstiege (Startseite) */
.aud { padding-block: clamp(5rem, 14vh, 10rem); }
.aud__title { margin-top: 1.2rem; max-width: 12em; font-size: clamp(2.3rem, 5.6vw, 5.8rem); }
.aud__head { margin-bottom: clamp(2.5rem, 6vw, 5rem); }
.aud__list { display: grid; border-top: 1px solid var(--ivory-3); }
.aud__item { border-bottom: 1px solid var(--ivory-3); }
.aud__item a {
  position: relative; display: grid; gap: .8rem; height: 100%;
  padding: clamp(1.6rem, 3vw, 2.6rem) 0 clamp(1.8rem, 3vw, 2.4rem);
}
.aud__item a::before {
  content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 2px;
  background: var(--copper-deep); transform: scaleX(0); transform-origin: left;
  transition: transform .9s var(--ease);
}
.aud__nr { font-size: .74rem; letter-spacing: .2em; color: var(--on-light-low); }
.aud__name { font-weight: 200; letter-spacing: -0.03em; line-height: 1; font-size: clamp(1.9rem, 3.4vw, 3.4rem); transition: transform .7s var(--ease); }
.aud__who { font-size: .72rem; letter-spacing: .22em; text-transform: uppercase; color: var(--copper-deep); }
.aud__desc { color: var(--on-light-mid); max-width: 36ch; }
.aud__more {
  display: flex; align-items: center; gap: .9rem; margin-top: .8rem;
  font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--on-light);
}
.aud__more i { position: relative; flex: none; width: 2rem; height: 1px; background: currentColor; transition: width .6s var(--ease); }
.aud__more i::after { content: ""; position: absolute; right: 0; top: -3px; width: 7px; height: 7px; border-top: 1px solid currentColor; border-right: 1px solid currentColor; transform: rotate(45deg); }
@media (hover: hover) {
  .aud__item a:hover::before { transform: scaleX(1); }
  .aud__item a:hover .aud__name { transform: translateX(.6rem); }
  .aud__item a:hover .aud__more { color: var(--copper-deep); }
  .aud__item a:hover .aud__more i { width: 3.2rem; }
}
@media (min-width: 64rem) {
  .aud__list { grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid var(--ivory-3); }
  .aud__item { border-bottom: 0; }
  .aud__item + .aud__item { border-left: 1px solid var(--ivory-3); }
  .aud__item a { padding-inline: clamp(1.2rem, 2.4vw, 2.4rem); align-content: start; grid-template-rows: auto auto auto 1fr auto; }
  .aud__item:first-child a { padding-left: 0; }
  .aud__name { min-height: 2em; display: flex; align-items: flex-end; }   /* Zeilen bleiben bündig, auch wenn ein Name umbricht */
}
.aud__foot {
  margin-top: clamp(2.5rem, 6vw, 4.5rem);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 2rem;
}
.aud__foot p { max-width: 36ch; color: var(--on-light-mid); }

/* 5.9 Porträt in About */
.about__portrait { position: relative; max-width: 30rem; overflow: hidden; background: var(--ink-3); }
.about__portrait img { width: 100%; height: auto; aspect-ratio: 772 / 1024; object-fit: cover; filter: grayscale(.25) contrast(1.04); }
.about__portrait figcaption {
  position: absolute; left: 1.1rem; bottom: 1rem;
  font-size: .66rem; letter-spacing: .26em; text-transform: uppercase; color: var(--on-light);
}
.about__body { display: grid; gap: clamp(2.5rem, 5vw, 4rem); align-content: end; }
@media (min-width: 64rem) {
  .about__grid { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); align-items: end; }
  .about__body .about__big { font-size: clamp(9rem, 19vw, 22rem); }
}
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  html.js [data-reveal="mask"] { clip-path: inset(100% 0 0 0); transition: clip-path 1.5s var(--ease-io) var(--rd, 0ms); }
  html.js [data-reveal="mask"] img { transform: scale(1.14); transition: transform 2.2s var(--ease) var(--rd, 0ms); }
  html.js [data-reveal="mask"].is-in { clip-path: inset(0 0 0 0); }
  html.js [data-reveal="mask"].is-in img { transform: none; }
}

.about__more { justify-self: start; margin-top: .4rem; }

.contact__fee { margin-top: 1rem; max-width: 36ch; padding-left: 1rem; border-left: 1px solid var(--copper-deep); color: var(--on-light-mid); font-size: .95rem; }
.contact__fee strong { font-weight: 500; color: var(--on-light); }

/* 5.10 Communication — Seitenauftakt */
.hero--page .hero__name { font-size: clamp(2.2rem, 9.2vw, 11.6rem); letter-spacing: .01em; }
.hero__tag {
  flex: none; text-transform: none; font-weight: 200;
  font-size: .3em; letter-spacing: -0.01em; color: var(--on-dark-mid);
}

/* 5.11 In brief */
.intro { padding-block: clamp(6rem, 16vh, 12rem); }
.intro__text {
  margin-top: clamp(1.6rem, 4vw, 3rem); max-width: 24em;
  font-weight: 200; letter-spacing: -0.025em; line-height: 1.12;
  font-size: clamp(1.8rem, 4.2vw, 4.4rem);
}
.intro__grid { margin-top: clamp(3.5rem, 8vw, 6.5rem); display: grid; gap: 2.4rem; }
.intro__grid li { padding-top: 1.4rem; border-top: 1px solid var(--ivory-3); display: grid; gap: .7rem; align-content: start; }
.intro__k { font-size: .7rem; letter-spacing: .26em; text-transform: uppercase; color: var(--copper-deep); }
.intro__grid h3 { font-weight: 300; font-size: clamp(1.3rem, 1.8vw, 1.7rem); letter-spacing: -0.015em; line-height: 1.2; }
.intro__grid p { color: var(--on-light-mid); max-width: 34ch; }
@media (min-width: 56rem) { .intro__grid { grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 3vw, 3rem); } }

/* 5.12 Formate */
.fmt { padding-block: clamp(5rem, 14vh, 10rem); }
.fmt__head { display: grid; gap: 1.6rem; margin-bottom: clamp(2.5rem, 6vw, 5rem); }
.fmt__title { margin-top: 1.2rem; max-width: 11em; font-size: clamp(2.3rem, 5.6vw, 5.8rem); }
.fmt__lead { max-width: 40ch; color: var(--on-light-mid); }
@media (min-width: 64rem) {
  .fmt__head { grid-template-columns: 1.4fr 1fr; align-items: end; column-gap: 3rem; }
  .fmt__head > .eyebrow { grid-column: 1 / -1; }
}
.fmt__list { border-top: 1px solid var(--ivory-3); }
.fmt__item {
  position: relative; display: grid; gap: 1.4rem 2rem;
  grid-template-columns: 3rem 1fr;
  padding-block: clamp(1.8rem, 3.6vw, 3rem);
  border-bottom: 1px solid var(--ivory-3);
}
.fmt__item::before {
  content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 2px;
  background: var(--copper-deep); transform: scaleX(0); transform-origin: left;
  transition: transform 1s var(--ease);
}
.fmt__nr { font-size: .74rem; letter-spacing: .2em; color: var(--on-light-low); padding-top: .7rem; }
.fmt__main, .fmt__dl, .fmt__cta { grid-column: 2; }
.fmt__name { font-weight: 200; letter-spacing: -0.03em; line-height: 1; font-size: clamp(1.9rem, 3.6vw, 3.6rem); }
.fmt__sum { margin-top: .9rem; max-width: 34ch; color: var(--on-light-mid); }
.fmt__dl { display: grid; gap: 1rem; }
.fmt__dl dt { font-size: .66rem; letter-spacing: .24em; text-transform: uppercase; color: var(--on-light-low); margin-bottom: .25rem; }
.fmt__dl dd { margin: 0; font-size: .98rem; line-height: 1.5; }
.fmt__cta {
  justify-self: start; display: inline-flex; align-items: center; gap: .9rem;
  font-size: .74rem; letter-spacing: .18em; text-transform: uppercase;
  padding-block: .4rem; color: var(--on-light);
}
.fmt__cta i { position: relative; width: 2rem; height: 1px; background: currentColor; transition: width .6s var(--ease); }
.fmt__cta i::after { content: ""; position: absolute; right: 0; top: -3px; width: 7px; height: 7px; border-top: 1px solid currentColor; border-right: 1px solid currentColor; transform: rotate(45deg); }
@media (hover: hover) {
  .fmt__item:hover::before { transform: scaleX(1); }
  .fmt__cta:hover { color: var(--copper-deep); }
  .fmt__cta:hover i { width: 3.2rem; }
}
@media (min-width: 64rem) {
  .fmt__item { grid-template-columns: 4rem minmax(0, 1.1fr) minmax(0, 1.3fr) 8rem; align-items: start; }
  .fmt__main, .fmt__dl, .fmt__cta { grid-column: auto; }
  .fmt__dl { gap: 1.1rem; padding-top: .5rem; }
  .fmt__dl > div { display: grid; grid-template-columns: 8rem 1fr; gap: 1rem; }
  .fmt__dl dt { margin: .2rem 0 0; }
  .fmt__cta { justify-self: end; margin-top: .3rem; }
}
.fmt__extra { grid-column: 2; display: grid; gap: 1.1rem; padding-top: 1.4rem; border-top: 1px solid var(--ivory-3); }
.fmt__k { font-size: .66rem; letter-spacing: .24em; text-transform: uppercase; color: var(--on-light-low); }
.fmt__topics { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.fmt__topics li { font-size: .9rem; line-height: 1.3; padding: .5rem .9rem; border: 1px solid var(--ivory-3); border-radius: 999px; }
.fmt__note { max-width: 62ch; padding-left: 1.1rem; border-left: 2px solid var(--copper-deep); color: var(--on-light-mid); line-height: 1.55; }
.fmt__note strong { font-weight: 500; color: var(--on-light); }
.fmt__avail { margin-top: clamp(2rem, 4vw, 3rem); }
@media (min-width: 64rem) {
  .fmt__item--wide .fmt__cta { grid-column: 4; grid-row: 1; }
  .fmt__item--wide .fmt__extra { grid-column: 2 / 4; }
}
@media (min-width: 88rem) {
  .fmt__dl { grid-template-columns: repeat(3, 1fr); gap: 1.6rem; }
  .fmt__dl > div { display: block; }
  .fmt__dl dt { margin-bottom: .25rem; }
}

/* 5.13 Beginn und Fragen */
.begin { padding-block: clamp(5rem, 14vh, 10rem); }
.begin__title { margin-top: 1.2rem; max-width: 11em; font-size: clamp(2.3rem, 5.6vw, 5.8rem); }
.steps { position: relative; margin-top: clamp(3rem, 7vw, 5.5rem); display: grid; gap: 2.4rem; counter-reset: s; }
.steps li { position: relative; display: grid; gap: .7rem; align-content: start; padding-left: 1.6rem; }
.steps li::before { content: ""; position: absolute; left: 0; top: .45rem; width: 7px; height: 7px; border-radius: 50%; background: var(--copper); }
.steps__nr { font-size: .74rem; letter-spacing: .2em; color: var(--on-dark-low); }
.steps h3 { font-weight: 300; font-size: clamp(1.4rem, 2vw, 1.9rem); letter-spacing: -0.015em; line-height: 1.15; }
.steps p { color: var(--on-dark-mid); max-width: 30ch; }
@media (min-width: 56rem) {
  .steps { grid-template-columns: repeat(4, 1fr); gap: clamp(1.5rem, 3vw, 3rem); padding-top: 2.4rem; }
  .steps::before {
    content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px;
    background: linear-gradient(90deg, var(--copper), rgba(239,232,220,.16) 70%);
  }
  .steps li { padding-left: 0; }
  .steps li::before { top: -2.4rem; margin-top: -3px; }
}
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  html.js .steps[data-reveal] { opacity: 1; }
  html.js .steps::before { transform: scaleX(0); transform-origin: left; transition: transform 1.8s var(--ease-io); }
  html.js .steps.is-in::before { transform: none; }
  html.js .steps li { opacity: 0; transform: translate3d(0, 24px, 0); transition: opacity 1s var(--ease), transform 1.1s var(--ease); }
  html.js .steps li::before { transform: scale(0); transition: transform .8s var(--ease); }
  html.js .steps.is-in li, html.js .steps.is-in li::before { opacity: 1; transform: none; }
  html.js .steps.is-in li:nth-child(2), html.js .steps.is-in li:nth-child(2)::before { transition-delay: .25s; }
  html.js .steps.is-in li:nth-child(3), html.js .steps.is-in li:nth-child(3)::before { transition-delay: .5s; }
  html.js .steps.is-in li:nth-child(4), html.js .steps.is-in li:nth-child(4)::before { transition-delay: .75s; }
}

.faq { margin-top: clamp(5rem, 12vw, 9rem); display: grid; gap: 2rem; }
.faq__h { font-size: .72rem; font-weight: 400; letter-spacing: .28em; text-transform: uppercase; color: var(--on-dark-mid); }
.faq__list { border-top: 1px solid rgba(239,232,220,.14); }
.faq__item { border-bottom: 1px solid rgba(239,232,220,.14); }
.faq__item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 2rem;
  padding-block: 1.5rem; cursor: pointer; list-style: none;
  font-weight: 300; font-size: clamp(1.15rem, 1.7vw, 1.6rem); letter-spacing: -0.01em; line-height: 1.3;
  transition: color .4s var(--ease);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary i { position: relative; flex: none; width: 14px; height: 14px; }
.faq__item summary i::before, .faq__item summary i::after {
  content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: currentColor;
  transition: transform .5s var(--ease);
}
.faq__item summary i::after { transform: rotate(90deg); }
.faq__item[open] summary i::after { transform: rotate(0deg); }
.faq__item[open] summary { color: var(--copper); }
.faq__a { padding-bottom: 1.6rem; max-width: 56ch; color: var(--on-dark-mid); }
@media (hover: hover) { .faq__item summary:hover { color: var(--copper); } }
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  .faq__item[open] .faq__a { animation: faqIn .6s var(--ease) both; }
  @keyframes faqIn { from { opacity: 0; transform: translate3d(0, -8px, 0); } }
}
@media (min-width: 64rem) { .faq { grid-template-columns: 1fr 2fr; gap: 3rem; } .faq__h { padding-top: 1.7rem; } }

/* 5.14 About-Seite */
.abt { padding-block: clamp(5rem, 14vh, 10rem); }
.abt--rule { border-top: 1px solid rgba(239,232,220,.08); }
.abt__grid { display: grid; gap: clamp(2.5rem, 6vw, 5rem); }
.abt__after-statement { margin-top: clamp(4rem, 10vw, 8rem); }
.abt__title { margin-top: 1.2rem; max-width: 13em; font-size: clamp(2.2rem, 4.8vw, 5rem); }
.abt__text { display: grid; gap: 1.4rem; align-content: start; max-width: 46ch; font-size: clamp(1.05rem, 1.3vw, 1.3rem); line-height: 1.55; color: var(--on-dark-mid); }
.sec--light .abt__text { color: var(--on-light-mid); }
.abt__story .abt__text { margin-top: clamp(1.8rem, 3vw, 2.6rem); }
.abt__k { margin-top: clamp(2.5rem, 5vw, 4rem); font-size: .7rem; letter-spacing: .26em; text-transform: uppercase; color: var(--on-dark-mid); }
.abt__list { margin-top: 1.2rem; border-top: 1px solid rgba(239,232,220,.14); }
.abt__list li {
  display: grid; grid-template-columns: 2.6rem 1fr; gap: 1rem; align-items: baseline;
  padding-block: clamp(.95rem, 1.6vw, 1.3rem); border-bottom: 1px solid rgba(239,232,220,.14);
  font-weight: 200; font-size: clamp(1.25rem, 2.2vw, 2.1rem); letter-spacing: -0.02em; line-height: 1.2;
  transition: color .5s var(--ease);
}
.abt__list li > span { font-size: .72rem; font-weight: 400; letter-spacing: .2em; color: var(--copper); }
@media (hover: hover) { .abt__list li:hover { color: var(--copper); } }
.abt__after { margin-top: clamp(2rem, 4vw, 3rem); max-width: 40ch; color: var(--on-dark-mid); }
@media (min-width: 64rem) {
  .abt__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(3rem, 7vw, 7rem); align-items: start; }
  .abt__grid--story { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: end; }
}

.head__nav a[aria-current="page"]::after { transform: scaleX(1); }

/* ── 6 · Kontakt / Fuß ─────────────────────────────────────── */
.contact { padding-block: clamp(5rem, 14vh, 10rem); }
.contact__grid { display: grid; gap: clamp(2.5rem, 6vw, 6rem); }
.contact__title { margin-top: 1.2rem; font-size: clamp(2.4rem, 5.8vw, 6rem); }
.contact__intro { margin-top: 1.6rem; max-width: 36ch; color: var(--on-light-mid); }
.contact__steps { margin-top: 2.4rem; display: grid; gap: .55rem; font-size: .74rem; letter-spacing: .18em; text-transform: uppercase; color: var(--on-light-low); }
.contact__steps span { color: var(--copper-deep); margin-right: .9rem; }
@media (min-width: 64rem) { .contact__grid { grid-template-columns: 1fr 1.1fr; align-items: start; } }

.form { display: grid; gap: 1.6rem; }
.form__row { display: grid; gap: 1.6rem; }
@media (min-width: 40rem) { .form__row { grid-template-columns: 1fr 1fr; } }
.field { display: grid; gap: .5rem; }
.field > span { font-size: .68rem; letter-spacing: .24em; text-transform: uppercase; color: var(--on-light-low); }
.field input, .field select, .field textarea {
  width: 100%; padding: .7rem 0; background: none; border: 0;
  border-bottom: 1px solid var(--ivory-3); border-radius: 0;
  color: var(--on-light); font-size: 1.05rem; font-weight: 300;
  transition: border-color .4s var(--ease);
  appearance: none; -webkit-appearance: none;
}
/* Aufklapp-Box: gleiche Linie und Schrift wie die Textfelder, die Liste
   öffnet sich als dunkle Tafel mit Kupfer-Markierung. */
/* Native Auswahl (Touch): gleiche Linie, Pfeil als Hintergrund */
.field select {
  padding-right: 1.6rem; cursor: pointer; touch-action: manipulation;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23141210' stroke-width='1'/%3E%3C/svg%3E") no-repeat right 4px center;
}
.field input, .field textarea { touch-action: manipulation; }
.dd { position: relative; }
.dd__native { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.dd__btn {
  position: relative; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  width: 100%; padding: .7rem 0; background: none; border: 0; border-bottom: 1px solid var(--ivory-3);
  color: var(--on-light); font-size: 1.05rem; font-weight: 300; text-align: left; cursor: pointer;
  transition: border-color .4s var(--ease);
}
.dd__btn::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: var(--copper-deep); transform: scaleX(0); transform-origin: left;
  transition: transform .6s var(--ease);
}
.dd__btn::after {
  content: ""; flex: none; width: 7px; height: 7px; margin-right: 4px;
  border-right: 1px solid currentColor; border-bottom: 1px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform .5s var(--ease);
}
.dd.is-open .dd__btn::before, .dd__btn:focus-visible::before { transform: scaleX(1); }
.dd.is-open .dd__btn::after { transform: translateY(2px) rotate(-135deg); }
.dd__btn:focus-visible { outline: none; }
.dd__list {
  position: absolute; z-index: 30; left: -1rem; right: -1rem; top: calc(100% + .5rem);
  padding: .5rem; background: var(--ink); color: var(--ivory);
  box-shadow: 0 1.6rem 3rem rgba(11,10,9,.28);
  clip-path: inset(0 0 100% 0); opacity: 0; visibility: hidden; pointer-events: none;
  transition: clip-path .55s var(--ease), opacity .3s var(--ease), visibility 0s linear .55s;
}
.dd.is-open .dd__list { clip-path: inset(0 0 0 0); opacity: 1; visibility: visible; pointer-events: auto; transition-delay: 0s; }
.dd__opt {
  position: relative; display: flex; align-items: center; gap: .8rem;
  padding: .85rem 1rem; font-size: .98rem; font-weight: 300; cursor: pointer;
  transition: background-color .3s var(--ease), color .3s var(--ease), padding-left .45s var(--ease);
}
.dd__opt::before {
  content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%;
  background: var(--copper); transform: scale(0); transition: transform .4s var(--ease);
}
.dd__opt.is-sel::before { transform: scale(1); }
.dd__opt.is-active { background: rgba(239,232,220,.08); color: var(--copper); padding-left: 1.3rem; }
.dd__opt.is-sel { color: var(--ivory); }
.dd__opt.is-sel.is-active { color: var(--copper); }
@media (prefers-reduced-motion: reduce) {
  .dd__list, .dd__opt, .dd__btn::after, .dd__btn::before { transition: none; }
}
.field textarea { resize: vertical; min-height: 6rem; }
.field input::placeholder { color: var(--on-light-low); opacity: .7; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-bottom-color: var(--copper-deep); }
.form .btn { will-change: transform; justify-self: start; margin-top: .6rem; color: var(--on-light); }
.form__hint { min-height: 1.4em; font-size: .85rem; color: var(--copper-deep); }

.foot { background: var(--ink); color: var(--on-dark); padding-top: clamp(4rem, 10vw, 8rem); }
.foot__top { display: grid; gap: 3rem; }
.foot__name {
  font-weight: 200; text-transform: uppercase; letter-spacing: .02em; line-height: .9;
  font-size: clamp(3.4rem, 11vw, 12rem);
}
.foot__cols { display: flex; gap: clamp(2rem, 6vw, 6rem); flex-wrap: wrap; }
.foot__col { display: grid; gap: .5rem; align-content: start; color: var(--on-dark-mid); }
.foot__col h2 { font-size: .68rem; letter-spacing: .26em; text-transform: uppercase; font-weight: 400; color: var(--on-dark-low); margin-bottom: .6rem; }
.foot__col a:hover { color: var(--copper); }
.foot__note { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .6rem 2rem; margin-top: 4rem; padding-block: 1.6rem 2rem; border-top: 1px solid rgba(239,232,220,.1); font-size: .76rem; color: var(--on-dark-low); }

/* ── 7 · Schmale Schirme ───────────────────────────────────── */
@media (min-width: 64rem) {
  .head__nav { display: flex; }
  .head__burger { display: none; }
}
@media (max-width: 47.99rem) {
  .hero__foot { grid-template-columns: 1fr; gap: .7rem; }
  .hero__meta, .hero__meta--r { text-align: left; }
  .hero__scrollhint { display: none; }
  .hero__inner { min-height: 62vh; padding-top: 7rem; }
  .hero__row--2 { padding-left: 1.4rem; }

  .hero--page .hero__row--2 { padding-left: 0; }
  .hero__tag { font-size: .52em; }
}

/* Ohne Pinning (schmal oder reduzierte Bewegung): die Bühne wird ein
   normaler Abschnitt über halbdunklem Grund. Hängt an der Klasse, nicht
   an der Breite — sonst stünden die Phasen bei reduzierter Bewegung
   auf breiten Schirmen übereinander. */
html:not(.pin) .work { background: rgba(11,10,9,0.78); padding-block: 5rem 4rem; }
html:not(.pin) .work__scrim { display: none; }
html:not(.pin) .work__ui { padding-block: 0; gap: 3rem; }
html:not(.pin) .work__track { display: none; }
html:not(.pin) .phase::before { display: none; }
html:not(.pin) .sections { background: var(--ink-2); padding-block: 5rem 4rem; }
html:not(.pin) .sections__scrim, html:not(.pin) .sections__foot { display: none; }
html:not(.pin) .sections__ui { padding-block: 0; gap: 3rem; }
html:not(.pin) .sections__list { gap: 3.5rem; }
html:not(.pin) .sit { grid-area: auto; }

/* Rechtliche Seiten: ruhig, ohne Bewegung */
.legal { min-height: 100vh; padding-block: clamp(8rem, 18vh, 12rem) clamp(5rem, 12vh, 8rem); }
.legal__title { margin-top: 1.2rem; font-size: clamp(2.8rem, 7vw, 7rem); }
.legal__note { margin-top: 1.6rem; max-width: 44ch; padding-left: 1rem; border-left: 1px solid var(--copper-deep); color: var(--on-light-mid); }
.legal__list { margin-top: clamp(3rem, 7vw, 5rem); border-top: 1px solid var(--ivory-3); max-width: 60rem; }
.legal__list > div { display: grid; gap: .4rem 2rem; padding-block: 1.4rem; border-bottom: 1px solid var(--ivory-3); }
.legal__list dt { font-size: .7rem; letter-spacing: .24em; text-transform: uppercase; color: var(--on-light-low); }
.legal__list dd { margin: 0; line-height: 1.55; }
@media (min-width: 48rem) { .legal__list > div { grid-template-columns: 18rem 1fr; } }

/* Live-Fassung: Spamfalle und Hinweis am Formular */
.form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form__note { max-width: 46ch; font-size: .85rem; color: var(--on-light-mid); }
.form__note a { text-decoration: underline; }
.legal__list a { text-decoration: underline; }