*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--paper); }
body { margin: 0; color: var(--ink); font: 400 var(--text-m)/1.55 var(--sans); overflow-x: hidden; }
h1, h2, h3, p, ul { margin: 0; padding: 0; }
ul { list-style: none; }
a { color: inherit; }
img { display: block; max-width: 100%; }
::selection { background: var(--marker); color: var(--ink); }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }

.skip { position: fixed; left: var(--space-s); top: -4rem; z-index: 20; padding: .5rem 1rem; background: var(--marker); }
.skip:focus { top: var(--space-s); }

/* Marker: --m steuert, wie weit angestrichen ist (0–1). Ohne Skript voll. */
.mark {
  --m: 1;
  padding: 0 .12em;
  margin: 0 -.04em;
  background: linear-gradient(var(--marker), var(--marker)) no-repeat 0 55% / calc(var(--m) * 100%) 86%;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.motion .mark:not([data-source]) { --m: 0; }

/* Der Fluss: liegt hinter allem Text */
main { position: relative; }
#river { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.stream { fill: none; stroke: var(--marker); stroke-width: var(--stream); stroke-linecap: butt; stroke-linejoin: round; stroke-dasharray: 0 1; }
.stream.thin { stroke-width: calc(var(--stream) * .6); }
.knot-label { position: absolute; left: 0; top: 0; opacity: 0; font-weight: 600; font-size: var(--text-s); white-space: nowrap; pointer-events: none; }

/* Kopf */
.site-head { position: relative; z-index: 2; display: flex; justify-content: space-between; align-items: center; max-width: var(--page); margin: 0 auto; padding: var(--space-s) var(--gutter); }
.logo { display: block; width: 3.25rem; height: 3.25rem; background: var(--marker); }
.logo img { width: 100%; height: 100%; }
.site-nav { display: flex; gap: clamp(.75rem, 2vw, 2rem); font-size: var(--text-s); font-weight: 500; }
.site-nav a { text-decoration: none; }
.site-nav a:hover { text-decoration: underline; text-underline-offset: .25em; }

/* Abschnitte */
.section { position: relative; max-width: var(--page); margin: 0 auto; padding: var(--space-xl) var(--gutter); }
h2 { font-size: var(--text-xl); font-weight: 700; line-height: 1.08; letter-spacing: -.02em; }
h3 { font-size: var(--text-l); font-weight: 700; line-height: 1.25; letter-spacing: -.01em; }
.lead { margin-top: var(--space-m); max-width: var(--measure); font-size: var(--text-l); line-height: 1.4; }
.half { max-width: 50%; padding-right: var(--space-l); }

/* Hero */
.hero { min-height: calc(100svh - 4.75rem); display: flex; flex-direction: column; justify-content: center; padding-top: var(--space-m); padding-bottom: var(--space-l); }
.eyebrow { font-size: var(--text-s); font-weight: 500; color: var(--ink-soft); }
h1 { margin-top: var(--space-m); max-width: 12.5em; font-size: var(--text-hero); font-weight: 700; line-height: 1.04; letter-spacing: -.03em; }
h1 .mark { white-space: nowrap; }
.hero-sub { margin-top: var(--space-m); max-width: 36rem; font-size: var(--text-l); line-height: 1.4; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-m); margin-top: var(--space-m); }
.btn { display: inline-block; padding: .9rem 1.4rem; background: var(--ink); color: var(--paper); font-weight: 600; text-decoration: none; }
.link { font-weight: 500; text-underline-offset: .25em; }

/* Raus aus WordPress: Text bleibt stehen, daneben entwirrt sich der Knoten */
#wordpress { min-height: 150svh; }
#wordpress .half { position: sticky; top: var(--space-l); }
.points { display: grid; gap: var(--space-m); margin-top: var(--space-l); }
.points p { color: var(--ink-soft); }

/* Leistungen: Der Fluss schwingt zwischen den Einträgen hin und her */
.bends { display: grid; gap: clamp(5rem, 16vh, 11rem); margin-top: var(--space-l); }
.bends li { max-width: 50%; padding-right: var(--space-l); }
.bends li:nth-child(even) { margin-left: 50%; padding-right: 0; padding-left: var(--space-l); }
.bends p { margin-top: var(--space-s); color: var(--ink-soft); }

/* Praxis: Das Delta läuft in die Aufgaben */
.delta { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-l); align-items: start; }
.steps { display: grid; gap: clamp(1.5rem, 5vh, 3rem); padding-left: var(--space-l); padding-top: 12vh; }
.steps li { font-size: var(--text-l); font-weight: 500; line-height: 1.3; }

/* Labor */
#labor p { margin-top: var(--space-s); }
.lab { display: block; margin-top: var(--space-l); text-decoration: none; }
.lab .link { display: inline-block; margin-top: var(--space-s); text-decoration: underline; }

/* Über mich: Das Foto füllt sich, wenn der Fluss es erreicht */
.about { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-l); align-items: center; }
.portrait { --fill: 1; position: relative; display: block; aspect-ratio: 1; background: var(--paper); isolation: isolate; overflow: hidden; }
.motion .portrait { --fill: 0; }
.portrait::before { content: ""; position: absolute; inset: 0; background: var(--marker); clip-path: inset(0 0 calc((1 - var(--fill)) * 100%) 0); }
.portrait img { position: relative; width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; filter: brightness(1.12); }
.about p + p { margin-top: var(--space-m); }
.facts { display: grid; gap: var(--space-s); margin-top: var(--space-l); }
.facts li { padding-top: var(--space-s); border-top: 1px solid var(--line); }
.facts b { font-weight: 700; }

/* Kontakt: die Mündung */
.contact { --flood: 200vmax; --flood-x: 50%; position: relative; isolation: isolate; overflow: hidden; }
.contact::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--marker); clip-path: circle(var(--flood) at var(--flood-x) 0); }
.motion .contact { --flood: 0px; }
.contact .section { min-height: 80svh; display: flex; flex-direction: column; justify-content: center; }
.contact-links { display: flex; flex-wrap: wrap; gap: var(--space-s); margin-top: var(--space-l); }
.contact-links a { padding: .9rem 1.4rem; background: var(--ink); color: var(--paper); font-weight: 600; text-decoration: none; }

/* Fuß */
.site-foot { position: relative; display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-m); max-width: var(--page); margin: 0 auto; padding: var(--space-m) var(--gutter); font-size: var(--text-s); }
.site-foot nav { display: flex; gap: var(--space-m); }

@media (max-width: 50rem) {
  .half, .bends li, .bends li:nth-child(even) { max-width: none; margin-left: 0; padding: 0; }
  #wordpress { min-height: 0; padding-bottom: 90svh; }
  #wordpress .half { position: static; }
  .delta, .about { grid-template-columns: 1fr; }
  .steps { padding-left: 2.5rem; padding-top: 6vh; }
  .site-nav a:not(:last-child) { display: none; }
}