body{
  margin:0;background:var(--cream);color:var(--ink);font-family:var(--sans);font-weight:300;
  font-size:clamp(1rem,.94rem + .28vw,1.0625rem);line-height:1.78;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
  display:flex;flex-direction:column;min-height:100vh;
}
[id]{scroll-margin-top:6.5rem}
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter);width:100%}
.eyebrow{
  font-family:var(--cond);font-weight:400;font-size:clamp(.8125rem,.765rem + .2vw,.875rem);
  letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft);line-height:1;
}

/* animated highlight, revealed with its section ----------------
   Same rule as about.html. The band sits behind the glyphs rather than under
   them: the line box is 1.82em tall and the text occupies roughly the middle
   1.15em of it, so the colour starts and stops just outside ascender and
   descender. It fills when the .rv around it turns .is-in. */
.hl{
  background-image:linear-gradient(
    transparent 16%, rgba(237,165,125,.55) 16%,
    rgba(237,165,125,.55) 84%, transparent 84%);
  background-repeat:no-repeat;background-size:0% 100%;
  transition:background-size .9s var(--ease) .2s;
}
.is-in .hl{background-size:100% 100%}
.btn:hover::before,.btn:focus-visible::before{transform:translateY(0)}
.btn:hover,.btn:focus-visible{color:var(--ink-deep);border-color:var(--apricot)}
/* terracotta wipes to deep ink, not to apricot — apricot on terracotta barely
   moves. The two rules were missing here while every other page had them, so
   the "1:1 Coaching" button at the foot of the article gets them too. */
.btn--terra::before{background:var(--ink-deep)}
.btn--terra:hover,.btn--terra:focus-visible{color:var(--cream);border-color:var(--ink-deep)}
.btn--lg{padding:1.32em 2.35em;letter-spacing:.14em;font-size:clamp(.9375rem,.89rem + .3vw,1.0625rem)}

/* ============================ NAV ============================ */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;padding:1.6rem 0;
  transition:background .5s var(--ease),box-shadow .5s var(--ease),padding .5s var(--ease);
}
.nav__sublink[aria-current="page"],
.nav__sublink[aria-current="true"]{color:var(--terracotta)}

/* ========================= PAGE HEAD =========================
   Same dune band as the other small pages, but the measure is the
   article's, so the headline sits over the column it belongs to. */
main{flex:1 0 auto}
.phead{background:var(--dune);padding:clamp(8.5rem,15vh,11rem) 0 clamp(3rem,6vw,5rem)}
/* the 72ch cap that used to sit here was the only reason the title broke: it
   held the whole head to ~680px while the line itself measures 12.54em, which
   at 3.8rem is 762px. Both lines run the full wrap now, and neither is set
   nowrap — below the widths noted on each they wrap, which on a phone is what
   should happen. */
.phead__in{max-width:none}
/* one line down to ~550px: 12.54em against a wrap of 90vw */
.phead__t{
  font-family:var(--serif);font-size:clamp(2.1rem,1.3rem + 3.4vw,3.8rem);
  line-height:1.02;letter-spacing:-.035em;margin-top:1.4rem;
}
.phead__t em{font-style:italic;color:var(--terracotta)}
/* 41.5em is a long line to hold — three times the title's — so this one is a
   step smaller than it was and keeps to one line down to about 930px, which is
   below the breakpoint where the nav folds anyway */
.phead__sub{
  margin-top:clamp(1.2rem,2.4vw,1.8rem);
  font-family:var(--serif);font-size:clamp(1.05rem,.9rem + .58vw,1.38rem);
  line-height:1.4;color:var(--ink-soft);
}
.phead__meta{
  margin-top:clamp(1.4rem,2.6vw,2rem);padding-top:1.2rem;
  border-top:1px solid rgba(83,79,81,.22);
  font-family:var(--cond);font-weight:500;font-size:.875rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-faint);
}

/* ========================= PAGE BODY ========================= */
/* the top pad was sized for an article column that opens with copy. It opens
   with the hairline instead while the middle is unwritten, and .turn above it
   already ends on its own bottom pad — so it is trimmed to a section gap */
.pbody{padding:clamp(2.5rem,5vw,4rem) 0 clamp(5rem,10vw,8rem)}

/* scroll reveal — the pieces of the photo stack come in one after another as
   the column scrolls past. Same two rules the other pages use. */
.rv{opacity:0;transform:translateY(28px);transition:opacity .95s var(--ease),transform .95s var(--ease)}
.rv.is-in{opacity:1;transform:none}
/* the portrait in .turn comes in a beat after the copy beside it */
.rv-d1{transition-delay:.1s}

/* ==================== OPENING — "WHO AM I?" ==================
   Taken over from the homepage, where it sat between the love notes
   and the CTA. Full width, above the article column, because the
   photo stack needs the second half of the wrap.
   ============================================================ */
/* the bottom padding is back: .turn follows now, not .pbody, and it is a sand
   band — the collage's last frame would otherwise run straight into its edge */
.about{padding:clamp(4.125rem,8.25vw,7.125rem) 0 clamp(2.75rem,5.5vw,4.75rem);overflow:hidden}
/* start, not center: the stack has to begin level with the heading and fall
   down the page alongside the copy */
.about__grid{
  display:grid;grid-template-columns:1.06fr .94fr;
  /* max-content 1fr, not auto auto: the stack spans both rows, and had they
     both been intrinsic the grid would have split any height the stack has over
     the copy between them — which would open a gap in the middle of a
     paragraph run. Row one is now the first copy block's own height, full
     stop, and row two takes whatever is left. */
  grid-template-rows:max-content 1fr;
  column-gap:clamp(2.5rem,6vw,6rem);row-gap:0;align-items:start;
}
/* the copy is two blocks and the stack two halves (see the markup) — here they
   are put back together: the copy runs down column one row after row, and both
   halves of the stack share one cell of column two. Same width, same
   aspect-ratio, so the two boxes land on top of each other and the six
   absolutely placed pieces compose exactly as they did in a single .collage.
   Their z-indexes (2–4 up top, 5–7 below) keep the stacking order. */
.about__copy--a{grid-column:1;grid-row:1}
.about__copy--b{grid-column:1;grid-row:2}
.collage{grid-column:2;grid-row:1/3}
.about__ttl{
  font-family:var(--serif);font-size:clamp(2.3rem,1.3rem + 4.2vw,5.4rem);
  line-height:.94;letter-spacing:-.045em;text-transform:uppercase;
}
.about__ttl .sub{
  display:block;font-family:var(--script);text-transform:none;color:var(--terracotta);
  font-size:.82em;line-height:.86;margin-top:.1em;
  transform:rotate(-1.8deg);transform-origin:left;
}
.about__intro{
  font-family:var(--serif);font-style:italic;
  font-size:clamp(1.15rem,1rem + .8vw,1.6rem);line-height:1.4;
  margin:clamp(1.6rem,3vw,2.3rem) 0;color:var(--ink);
}
/* single column: every line runs the full width of the text column,
   paragraphs stack underneath each other. Size and leading follow about.html
   rather than the homepage — a shade larger, and 1.82 is the line height the
   .hl gradient's stops are cut for. */
.about__body{color:var(--ink-soft);font-size:.9875rem;line-height:1.82}
.about__body p{margin-bottom:1.1em}
.about__body strong{font-weight:600;color:var(--ink)}
.about__pivot{
  margin-top:1.8rem;font-family:var(--serif);font-style:italic;color:var(--ink);
  font-size:clamp(1.15rem,1.02rem + .6vw,1.45rem);line-height:1.36;
  padding-left:1.3rem;border-left:2px solid var(--terracotta);
}
/* .about__role — the black "ADHD secrets and shame" panel — went with the copy
   it styled; the section ends on .about__pivot now. It is still on the homepage
   backup at Backup/für später zur seite gelegt/startseite-who-am-i.html. */

/* --- the photo stack -----------------------------------------
   Frames and plaques laid down the column one over the other, each turned a
   degree or two. It starts level with the heading and keeps falling past the
   whole run of story paragraphs, so the long text column never travels alone.
   Positions are percentages of the stack's own box, so the composition scales
   with the column. */
.collage{position:relative;width:100%;aspect-ratio:1/1.7}
.collage figure,.plaque{
  margin:0;position:absolute;overflow:hidden;border-radius:4px;
  box-shadow:0 40px 80px -50px rgba(83,79,81,.8);
}
.collage img{width:100%;height:100%;object-fit:cover}
/* the tilt lives in --rot so the reveal below can restate it without
   hard-coding each angle a second time */
.collage figure,.plaque{transform:rotate(var(--rot,0deg))}
.c1{--rot:-2.2deg;left:0;top:0;width:58%;aspect-ratio:4/5;z-index:2}
.c2{--rot:2.4deg;right:0;top:13%;width:52%;aspect-ratio:4/5;z-index:3}
.c3{--rot:1.8deg;right:1%;top:48%;width:52%;aspect-ratio:3/4;z-index:5}
.c4{--rot:-1.9deg;left:0;bottom:0;width:56%;aspect-ratio:4/5;z-index:6}
.c1 img{object-position:50% 24%}
.c2 img{object-position:50% 26%}
.c3 img{object-position:50% 22%}
/* each frame and plaque reveals on its own as the column scrolls past, so the
   stack assembles piece by piece instead of landing complete. The extra
   selector weight is load-bearing: it has to outrank the global .rv rules,
   which would otherwise flatten the tilt to transform:none. */
.collage .rv{opacity:0;transform:translateY(30px) rotate(var(--rot,0deg))}
.collage .rv.is-in{opacity:1;transform:rotate(var(--rot,0deg))}
.plaque{
  background:var(--terracotta);color:var(--cream);box-shadow:none;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:.5rem;text-align:center;padding:1rem;
}
.p1{--rot:-1.4deg;left:3%;top:34%;width:38%;aspect-ratio:1;z-index:4}
/* second plaque, bottom right. c3 stops at 89% of the stack's height and c4
   only reaches 56% across, so the corner underneath is the one hole the fall
   leaves open — this lands in it, tilts the other way to p1 and sits on c3's
   bottom edge the same way p1 sits on c1. */
.p2{--rot:2.1deg;right:0;bottom:0;width:36%;aspect-ratio:1;z-index:7}
/* "Five" is a word, not a two-digit number: a step smaller so it carries the
   same optical weight inside the square as the "31" does in p1 */
.p2 .n{font-size:clamp(1.5rem,1.15rem + 1.35vw,2.5rem)}
.plaque .n{font-family:var(--serif);font-style:italic;font-size:clamp(1.8rem,1.4rem + 1.6vw,3rem);line-height:1}
.plaque .t{
  font-family:var(--cond);font-weight:500;font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;
  line-height:1.5;display:block;max-width:15ch;
}

/* ========================== THE TURN =========================
   about.html's second section, taken over 1:1: the coach, the sentence
   the story turns on, the two-column run-out and the sign-off. Together
   with the opening above it the pair now tells the whole story, and the
   article column underneath is what is still to be written.
   ============================================================ */
.turn{
  background:var(--sand);overflow:hidden;
  /* position:relative for the ::before glow — this page has no global
     section{position:relative} the way about.html does */
  position:relative;
  /* the top pad is about.html's; the bottom is trimmed from its
     clamp(5rem,10vw,9rem) because .pbody follows and brings its own */
  padding:clamp(2.5rem,5vw,4.5rem) 0 clamp(3rem,6vw,5rem);
}
.turn::before{
  content:"";position:absolute;inset:-22% -12% auto auto;width:42vw;aspect-ratio:1;
  border-radius:50%;background:radial-gradient(circle,rgba(237,165,125,.32),transparent 66%);
  pointer-events:none;
}
/* mirrored against about.html: portrait on the left, copy on the right, and the
   copy is still the wider column. The swap is `order`, not a reordered DOM — the
   copy stays first in the source, which is the order it has to be read in and
   the order the 1080px stack below wants. */
.turn__grid{
  position:relative;display:grid;grid-template-columns:.9fr 1.1fr;
  gap:clamp(2.5rem,6vw,5.5rem);align-items:center;
}
.turn__fig{margin:0;position:relative;order:-1}
/* the blush block sits behind the photo, offset away from the copy — which is
   now on the other side, so the offset flips with it */
.turn__fig::before{
  content:"";position:absolute;inset:0;transform:translate(-6%,6%);
  background:var(--blush);border-radius:6px;
}
.turn__fig img{
  position:relative;z-index:1;width:100%;border-radius:6px;
  aspect-ratio:4/5;object-fit:cover;object-position:50% 24%;
  box-shadow:0 40px 84px -58px rgba(20,18,17,.65);
}
.turn__lead{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(1.5rem,1rem + 2vw,2.65rem);
  line-height:1.16;letter-spacing:-.03em;margin-bottom:clamp(1.4rem,2.6vw,2rem);
}
.turn__lead em{font-style:italic;color:var(--terracotta)}
.turn__body{color:var(--ink-soft);font-size:.9875rem;line-height:1.82}
.turn__body p{margin-bottom:1.1em}
.turn__body strong{font-weight:600;color:var(--ink)}
/* the coach's reply — the sentence the whole story turns on */
.turn__said{
  margin:1.6rem 0;padding:clamp(1.2rem,2.4vw,1.8rem) clamp(1.3rem,2.6vw,2rem);
  background:var(--white);border-radius:5px;border-left:2px solid var(--apricot);
  font-family:var(--serif);font-style:italic;color:var(--ink);
  font-size:clamp(1.02rem,.94rem + .5vw,1.28rem);line-height:1.44;letter-spacing:-.016em;
}
.turn__body em{font-style:italic}

/* full-width running copy under the spread */
.turn__cols{
  margin-top:clamp(1.5rem,3vw,2.5rem);padding-top:clamp(1.1rem,2vw,1.6rem);
  border-top:1px solid rgba(83,79,81,.2);
  color:var(--ink-soft);font-size:.9875rem;line-height:1.82;
}
.turn__cols p{margin:0 0 1.1em}
.turn__cols strong{font-weight:600;color:var(--ink)}
.turn__cols em{font-style:italic}

/* sign-off */
.turn__sign{
  margin-top:clamp(2.6rem,5vw,4rem);display:flex;align-items:flex-end;
  justify-content:space-between;gap:2rem;flex-wrap:wrap;
}
/* the pair of buttons stays one block at the right end of the signature row,
   so space-between still pushes it away from the handwriting */
.turn__cta{display:flex;flex-wrap:wrap;gap:clamp(.8rem,1.6vw,1.4rem)}
.turn__hand{display:block;line-height:.9}
.turn__hand .s1{
  font-family:var(--script);font-weight:500;color:var(--ink-faint);
  font-size:clamp(1.5rem,1.2rem + 1.1vw,2.1rem);display:block;transform:rotate(-2deg);
  transform-origin:left;
}
.turn__hand .s2{
  font-family:var(--script);font-weight:600;color:var(--terracotta);
  font-size:clamp(2.8rem,2rem + 3.4vw,5rem);display:block;margin-top:.06em;
  transform:rotate(-3deg);transform-origin:left;
}

/* .todo and .fill — the apricot "half written" panel and the dashed boxes round
   the stand-in date and reading time — went with the placeholders they marked. */

/* ========================= ARTICLE =========================== */
.prose{max-width:70ch}
.prose h2{
  font-family:var(--serif);font-size:clamp(1.4rem,1.15rem + 1vw,1.95rem);
  letter-spacing:-.03em;margin:clamp(2.4rem,4.4vw,3.4rem) 0 1rem;
}
.prose h3{
  font-family:var(--cond);font-weight:500;font-size:.9375rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-faint);margin:2rem 0 .8rem;
}
.prose p,.prose li{color:var(--ink-soft);font-size:.9875rem;line-height:1.8}
.prose ul{margin:0 0 1.15em;padding-left:1.2rem}
.prose li{margin-bottom:.5rem}
.prose li::marker{color:var(--terracotta)}
.prose a{color:var(--terracotta)}
.prose hr{border:0;height:1px;background:var(--hairline);margin:clamp(2.4rem,4.4vw,3.4rem) 0}
/* opening paragraph, a size up from the body copy */
.lead{font-size:clamp(1.0625rem,1rem + .4vw,1.1875rem)!important;line-height:1.7!important;color:var(--ink-soft)}
/* pulled line, set in the display serif like the headings */
.pull{
  margin:clamp(2.2rem,4vw,3rem) 0;padding:0 0 0 clamp(1.2rem,2.5vw,1.8rem);
  border-left:2px solid var(--terracotta);
}
.pull p{
  font-family:var(--serif);font-size:clamp(1.25rem,1.1rem + .8vw,1.6rem);
  line-height:1.32;letter-spacing:-.025em;color:var(--ink-soft);margin:0;
}
/* end of the article: back to the list */
.artend{
  max-width:70ch;margin-top:clamp(3rem,6vw,4.5rem);padding-top:clamp(1.6rem,3vw,2.2rem);
  border-top:1px solid var(--hairline);
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;
}
/* that margin sets the rule off from the copy above it. With the middle of the
   article still unwritten there is no copy — the rule is the first thing in the
   column, and the margin would only add to .pbody's pad. It comes back on its
   own the moment a paragraph is put in front of it. */
.prose > .artend:first-child{margin-top:0}
.back{
  display:inline-flex;align-items:center;gap:.6em;text-decoration:none;
  font-family:var(--cond);font-weight:500;font-size:.875rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-faint);
  transition:color .4s var(--ease);
}
.back:hover{color:var(--terracotta)}
.back .arw{transition:transform .45s var(--ease)}
.back:hover .arw{transform:translateX(-4px)}

/* ========================= FOOTER ============================ */
.foot{background:var(--ink-deep);color:#FFFFFF;padding:clamp(2.75rem,5.5vw,4.25rem) 0 1.75rem;flex-shrink:0}

/* ====================== RESPONSIVE =========================== */
@media (max-width:1080px){
  .nav__links{
    position:fixed;inset:0 0 auto;top:0;background:var(--cream);
    flex-direction:column;justify-content:center;gap:2rem;height:100dvh;
    clip-path:inset(0 0 100% 0);transition:clip-path .7s var(--ease);margin-bottom:0;
  }
  .nav.is-open .nav__links{clip-path:inset(0 0 0 0)}
  .nav__link{font-size:1.5rem;font-family:var(--serif);letter-spacing:.04em;text-transform:none}
  .burger{display:block;position:relative;z-index:2}
  /* one column, and the desktop placement is dropped so everything falls in
     document order: copy, the first three pieces of the stack, the rest of the
     copy, the last three. The two portraits and the "31" plaque land straight
     under the "rubber band" paragraph instead of waiting for the end. */
  .about__grid{grid-template-columns:1fr;grid-template-rows:none;gap:3.5rem}
  .about__copy,.collage{grid-column:auto;grid-row:auto}
  .collage{max-width:480px;margin-inline:auto;width:100%}
  /* split in two, each half needs its own box. The pieces keep their widths and
     their tilt; only the box height is cut down to what that half actually
     covers — the top three reach .96 of the stack's width, the bottom three
     .884 — and the tops are rescaled against the shorter box, so each half
     keeps the overlap it had inside the whole. */
  .collage--a{aspect-ratio:1/.96}
  .collage--a .c2{top:23%}
  /* bottom-anchored rather than top: it holds its overlap with c1 when the
     plaque widens to 44% below 560px */
  .collage--a .p1{top:auto;bottom:0}
  .collage--b{aspect-ratio:1/.884}
  .collage--b .c3{top:0}
  /* same for the spread below it: portrait under the copy, and the run-out
     stops being two columns — at this width they would be ~34 characters each.
     order:0 undoes the desktop swap, so the single column reads copy first */
  .turn__grid{grid-template-columns:1fr;gap:clamp(2.6rem,6vw,3.8rem)}
  .turn__fig{max-width:480px;width:100%;margin-inline:auto;order:0}
}
@media (max-width:860px){
  .foot__grid{grid-template-columns:1fr 1fr}
  .foot__brand{grid-column:1/-1}
}
@media (max-width:640px){
  .foot__grid{grid-template-columns:1fr}
  /* .artend used to stack here, and its button went full width with it. One
     link is left in the row — it fits at every width, so neither rule is
     needed any more. */
}
@media (max-width:560px){
  /* narrow column: the plaque needs more of it before its label wraps badly */
  .p1{width:44%}
  .plaque .t{letter-spacing:.1em}
  /* the signature row runs out of width for handwriting and two buttons side
     by side: it stacks, and the buttons go full width under it */
  .turn__sign{flex-direction:column;align-items:flex-start;gap:1.6rem}
  .turn__cta{width:100%;flex-direction:column}
  .turn__sign .btn{width:100%;justify-content:center}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .rv{opacity:1;transform:none}
  /* outweighs .collage .rv above, but keeps the tilt the layout depends on */
  .collage .rv{opacity:1;transform:rotate(var(--rot,0deg))}
}