@font-face {
  font-family: "Schibsted Grotesk";
  src: url("fonts/schibsted-grotesk-latin-wght-normal.woff2") format("woff2");
  font-weight: 400 900;
  font-display: swap;
}
@font-face {
  font-family: "Manrope";
  src: url("fonts/manrope-latin-wght-normal.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
}

:root {
  /* Farben aus dem Porträt: Wand, Kleid, Kupfer- und Salbeiblätter. Kupfer führt, Salbei begleitet. */
  --paper: #f5f1ec;
  --ink: #1e1a17;
  --muted: #6b625b;
  --faint: #756c65;         /* hellstes Grau mit 4,5:1 auf --paper: Rechtslinks unter dem Footer */
  --line: #d9d0c7;          /* Strukturlinien: neutral */
  --tint: #efe2d6;          /* beige Fläche */
  --accent: #8e5130;        /* Kupfer, Hauptakzent: Hervorhebungen, Zitate, Jahreszahlen. 5.6:1 auf --paper */
  --accent-2: #56674a;      /* Salbei, sparsam: Menülinie, Zitatlinie, Punkte, Hover, Buttons. 5.4:1 auf --paper */
  --sage-deep: #47523f;     /* Salbei-Fläche des Footers; darauf Papier 7.3:1, Beige 6.5:1 */
  --on-deep-muted: #d9c3ad; /* gedämpfte Schrift auf --sage-deep (4.9:1) */
  --copper-light: #d49a70;  /* K des Zeichens und Hover im Footer (auf Salbei 3.4:1, nur Grafik/Hover) */
  --sand: #c8ab8f;          /* D des Zeichens auf Papier (1.9:1, bewusst zurückhaltend) */
  /* Feine Kontur plus kaum sichtbarer Schatten: Flächen, die auf dem Foto liegen */
  --lift: 0 0 0 1px rgb(62 38 22 / 0.07), 0 0.6rem 1.25rem -0.9rem rgb(62 38 22 / 0.14);
  /* Eine Kurve für alle Bewegungen: schnell los, lang und weich auslaufend */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* Typo-Skala 1.25 */
  --s-1: 0.8rem;
  --s0: 1rem;
  --s1: 1.25rem;
  --s2: 1.5625rem;
  --s3: 1.953rem;
  --s4: 2.441rem;
  --s5: 3.052rem;

  --sans: "Manrope", system-ui, sans-serif;
  --display: "Schibsted Grotesk", var(--sans);

  /* Raster: Foto links, Flächen greifen um --reach ins Foto */
  --photo: 40vw;
  --reach: 8vw;
  --pad: 4.5rem;
  --inset: 3rem;            /* Textabstand innerhalb einer Fläche */
  --measure: 44rem;
  --name: var(--s5);        /* Größe des Namens im Kopf (Desktop) */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.06'/%3E%3C/svg%3E");
}

* { box-sizing: border-box; }
html { font-size: 112.5%; }
body {
  margin: 0;
  min-height: 100dvh;
  background: var(--paper) var(--grain);
  color: var(--ink);
  font: 400 var(--s0) / 1.7 var(--sans);
  -webkit-font-smoothing: antialiased;
}

/* Überschriften: Schibsted Grotesk, etwas mehr Charakter als der Text, ohne Serifen */
h1, h2, h3, .tagline, .closing, .pull {
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.15;
  text-wrap: balance;
  margin: 0;
}
h1 { font-size: var(--s4); font-weight: 700; letter-spacing: -0.025em; }
h2 { font-size: var(--s3); }
h3 { font-size: var(--s2); letter-spacing: -0.01em; }
p, li, dd { text-wrap: pretty; }
p { margin: 0 0 1.1em; }
strong { font-weight: 600; }

/* Akzent im Fließtext: Kupfer, ein Gewichtsschritt */
mark { background: none; color: var(--accent); font-weight: 600; }

a { color: var(--accent); text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
a:hover { color: var(--accent-2); }
a:active { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* Eine Beschriftung für Menü, Labels, Jahreszahlen und weiterführende Links */
.eyebrow, .nav a, .more, .timeline .year {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.eyebrow { color: var(--accent-2); }

.skip {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 6;
  background: var(--ink);
  color: var(--paper);
  padding: 0.5rem 1rem;
}
.skip:focus { top: 1rem; }

/* ---------- Navigation ---------- */

.nav {
  background: var(--paper) var(--grain);
  border-bottom: 1px solid var(--line);
}
.nav ul { display: flex; list-style: none; margin: 0; padding: 0; }
.nav .nav-mark { display: none; }
.nav .nav-mark::after { content: none; }
.nav a {
  position: relative;
  display: block;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}
/* Wachsende Salbei-Linie im Menü (greift die Farbe des Footers auf) */
.nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--accent-2);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.6s var(--ease);
}
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }
.nav .short { display: none; }

/* ---------- Kopf ---------- */

.portrait {
  display: block;
  width: 100%;
  object-fit: cover;
  object-position: 50% 30%;
}

.mark { display: block; height: auto; }
.mark .k { stroke: var(--accent); }
.mark .d { stroke: var(--sand); }

.brand { text-decoration: none; color: inherit; }
.brand:hover { color: inherit; }
.tagline { font-size: var(--name); font-weight: 700; letter-spacing: -0.03em; }
.tagline .sub {
  display: block;
  margin-top: 0.9rem;
  font: 500 var(--s1) / 1.4 var(--sans);
  letter-spacing: 0;
}

/* ---------- Inhalt ---------- */

main { padding-bottom: 6rem; }
main > h1 { margin-bottom: 2rem; }
main > * + section { margin-top: 6.5rem; }
section > h2, .head > h2 { margin-bottom: 1.5rem; }

/* Beige Flächen: Startseiten-Kasten, Ansatz, Ehrenämter. Eine Regel für alle. */
.panel, .band {
  position: relative;
  z-index: 1;
  background: var(--tint) var(--grain);
  padding: 4.5rem var(--inset) 3.75rem;
}
.panel h2 { font-size: var(--s4); margin-bottom: 2rem; }
.panel h2 span { display: block; }

/* Schwerpunkte: jede Zeile ein Link, Linie beginnt mit einem Kupfer-Stück */
.focus-list { list-style: none; margin: 0 0 1.5rem; padding: 0; }
.focus-list li { position: relative; border-top: 1px solid var(--line); }
.focus-list li:last-child { border-bottom: 1px solid var(--line); }
.focus-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: -1px;
  width: 3rem;
  height: 2px;
  background: var(--accent);
  transform-origin: left;
  transition: width 1s var(--ease);
}
.focus-list li:hover::before, .focus-list li:focus-within::before { width: 100%; }
.focus-list a {
  display: grid;
  grid-template-columns: 12rem 1fr;
  gap: 1.5rem;
  align-items: baseline;
  padding: 1.25rem 0;
  color: inherit;
  text-decoration: none;
}
.focus-list p { margin: 0; }
/* Grundhaltungen (Coaching-Ansatz): gleiche Zeilen wie die Schwerpunkte, ohne Link */
.attitudes li { display: grid; grid-template-columns: 12rem 1fr; gap: 1.5rem; align-items: baseline; padding: 1.25rem 0; }
.focus-list h3 { transition: color 0.5s var(--ease); }
.focus-list a:hover h3, .focus-list a:focus-visible h3 { color: var(--accent); }

/* Weiterführende Links: Sprache des Menüs, Kupferstrich darunter */
.more {
  display: inline-block;
  margin-top: 0.5rem;
  padding-bottom: 0.55rem;
  border-bottom: 1px solid var(--accent);
  color: var(--ink);
  text-decoration: none;
  transition: color 0.4s var(--ease);
}
.more:hover { color: var(--accent-2); }
.focus-list + p { margin-top: 2rem; }

/* Lebenslauf: ruhige, gerade Zeitleiste mit runden Salbei-Punkten, ohne Bewegung */
.timeline { list-style: none; margin: 0; padding: 0 0 0 2rem; border-left: 1px solid var(--line); }
.timeline li { position: relative; padding-bottom: 2.5rem; }
.timeline li:last-child { padding-bottom: 0.5rem; }
.timeline li::before {
  content: "";
  position: absolute;
  left: calc(-2rem - 4px);
  top: 0.4rem;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent-2);
}
.timeline .year {
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--accent);
  margin-bottom: 0.4rem;
}
.timeline h3 { margin-bottom: 0.6rem; }
.timeline p { color: var(--muted); margin-bottom: 0.35em; }

/* Zitat: Kupfer-Text, Salbei-Linie links. Einmal pro Seite. */
.pull {
  font-size: var(--s3);
  font-weight: 500;
  line-height: 1.3;
  color: var(--accent);
  border-left: 2px solid var(--accent-2);
  padding-left: 1.5rem;
  margin: 3rem 0;
}
.band .pull { margin: 0 0 2rem; }

/* „Für Frauen, die …“: Schluss der Startseite in Zwischenüberschrift-Größe (größer wirkte zu wichtig);
   gleicher Teil grau, eigener Teil Kupfer. Gleich viel Luft darüber und darunter: er ist das Letzte
   auf der Startseite, deshalb dort main ohne Polster unten. */
.closing { font-size: var(--s3); margin: 4.5rem 0; }
.home main { padding-bottom: 0; }
.closing span { display: block; color: var(--accent); }
.closing > span + span { margin-top: 0.3em; }
.closing .dim { display: inline; color: var(--muted); }

.two-col { columns: 2; column-gap: 2.5rem; padding-left: 1.1rem; margin: 0.5rem 0 0; }
.two-col li { break-inside: avoid; margin-bottom: 0.4rem; }
li::marker { color: var(--accent); }

/* Angebot: Themen untereinander, darunter die Beispiele. Über jedem Thema das Kupfer-Stück
   der Schwerpunkte, das beim Überfahren über die ganze Linie läuft. */
.topic { position: relative; }
.topic::before {
  content: "";
  position: absolute;
  left: 0;
  top: -1px;
  width: 3rem;
  height: 2px;
  background: var(--accent);
  transform-origin: left;
  transition: width 1s var(--ease);
}
.topic:hover::before { width: 100%; }
.topic-text > :last-child { margin-bottom: 0; }
/* Beispiele: ruhige zweispaltige Liste mit feinen Linien und Kupfer-Strichen, ohne Kästen/Label */
.examples { margin-top: 1.75rem; }
.examples ul {
  display: grid;
  /* Zwei Spalten nur, wenn jede mindestens 16rem hat (sonst lief „Veränderungsprozesse“ über) */
  grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
  column-gap: 2.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.examples li {
  position: relative;
  padding: 0.6rem 0 0.6rem 1.25rem;
  background: linear-gradient(var(--line), var(--line)) no-repeat 0 0 / 100% 1px;
  line-height: 1.45;
}
.examples li::before {
  content: "–";
  position: absolute;
  left: 0;
  color: var(--accent);
}

.topic, .seminar { border-top: 1px solid var(--line); padding-top: 2rem; }
.topic h2 { margin-bottom: 1rem; }
.seminar h3 { font-size: var(--s3); letter-spacing: -0.02em; margin-bottom: 0.5rem; }
.seminar + .seminar { margin-top: 6.5rem; }

.placeholder { background: var(--tint); padding: 0 0.25em; }
.cv { display: grid; grid-template-columns: 8rem minmax(0, 1fr); gap: 1.25rem 2rem; margin: 0; }
.cv dd { margin: 0; }
.cv + p { margin-top: 2rem; }

/* Kleine Textlinks mit Symbol (Kontaktseite) */
.social { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; list-style: none; margin: 0; padding: 0; }
.social a { display: inline-flex; align-items: center; gap: 0.45rem; text-decoration: none; }
.social svg { width: 1em; height: 1em; fill: currentColor; }

/* ---------- Fuß ---------- */

/* Salbei-Kasten auf allen Seiten, bewusst niedrig: oben Zeichen und Einladung, darunter eine feine
   Linkzeile; Rechtslinks stehen unter dem Kasten. Das Zeichen zeichnet sich, sobald die Einladung ins Bild kommt. */
.foot {
  position: relative;
  z-index: 1;
  background: var(--sage-deep) var(--grain);
  color: var(--paper);
  padding-block: 3.25rem 1.75rem;
  font-size: var(--s-1);
}
/* Oben: Zeichen links neben der Einladung */
.foot-top { display: flex; align-items: center; gap: 2.5rem; }
.foot-top .foot-cta { flex: 1 1 auto; min-width: 0; }
.foot-top .mark { flex: none; }
.foot .mark { width: 8rem; }
.foot .mark .k { stroke: var(--copper-light); }
.foot .mark .d { stroke: var(--tint); }
.foot-cta { margin: 0; max-width: 30ch; font: 600 var(--s3) / 1.2 var(--display); letter-spacing: -0.02em; }
.foot-cta a { color: var(--paper); text-decoration: none; transition: color 0.5s var(--ease); -webkit-tap-highlight-color: transparent; }
.foot-cta .w { display: inline-block; overflow: hidden; padding-bottom: 0.12em; margin-bottom: -0.12em; vertical-align: bottom; }
.foot-cta .w > span { display: inline-block; }
/* Pfeil im hellen Kreis am Satzende: zeigt auch ohne Maus und ohne Unterstreichung, dass man tippen kann */
.foot-cta .end { white-space: nowrap; }
.foot-cta .circle { display: inline-grid; place-items: center; width: 1.15em; height: 1.15em; position: relative; margin: -0.2em 0 -0.2em 0.3em; vertical-align: 0.03em; border-radius: 50%; background: var(--paper); color: var(--sage-deep); box-shadow: 0 0 0 0 var(--paper); transition: background-color 0.5s var(--ease), box-shadow 0.5s var(--ease), scale 0.2s var(--ease); }
.foot-cta .circle svg { width: 0.55em; height: 0.55em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; position: relative; left: 0; transition: left 0.5s var(--ease); }
/* Mit Maus: der ganze Satz färbt sich kupferhell, der Kreis wächst und füllt sich, der Pfeil rückt vor.
   Nur bei echtem Hover, sonst bliebe der Zustand auf dem iPhone nach dem Antippen hängen.
   Wachsen per Farbsaum und Vorrücken um ganze Pixel statt scale/translate: so wird nichts als Bild
   hochskaliert, der Pfeil bleibt scharf und gerade und springt am Ende nicht nach. */
@media (hover: hover) {
  .foot-cta a:hover { color: var(--copper-light); }
  .foot-cta a:hover .circle { background: var(--copper-light); box-shadow: 0 0 0 0.1em var(--copper-light); }
  .foot-cta a:hover .circle svg { animation: none; left: 3px; }
}
/* Beim Antippen (und Klicken) sofort kupferhell, der Kreis gibt nach; ersetzt das graue iOS-Tipp-Kästchen */
.foot-cta a:active { color: var(--copper-light); transition-duration: 0s; }
.foot-cta a:active .circle { background: var(--copper-light); scale: 0.92; transition-duration: 0s; }
/* Unten im Kasten gleich breite Spalten (Kontakt, LinkedIn; Instagram später), hell und mittig */
.foot-bottom {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  list-style: none;
  margin: 2.5rem 0 0;
  padding: 1.25rem 0 0;
  border-top: 1px solid rgb(245 241 236 / 0.18);
  text-align: center;
}
.foot-bottom a { display: inline; color: var(--paper); text-decoration: none; transition: color 0.4s var(--ease); }
/* Symbol im Textfluss statt Flexbox, damit alle Einträge auf derselben Grundlinie stehen */
.foot-bottom svg { width: 1em; height: 1em; fill: currentColor; vertical-align: -0.14em; margin-right: 0.45em; }
.foot-bottom a:hover, .foot-bottom a[aria-current="page"] { color: var(--copper-light); }
/* Impressum, Datenschutz, © unter dem Kasten auf Papier, an seinen Kanten ausgerichtet: Impressum
   bündig links, Datenschutz genau mittig, © bündig rechts. Muss nur da sein: sehr klein und hell */
.foot-legal {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 0 1.5rem;
  list-style: none;
  margin: 0;
  padding: 0.6rem var(--pad) 0.8rem;
  font-size: 0.68rem;
  color: var(--faint);
}
.foot-legal li:last-child { justify-self: end; }
/* Mobil nur „© 2026“, sonst wird es neben Impressum und Datenschutz zu eng */
footer { container-type: inline-size; }
@container (max-width: 25rem) {
  .foot-legal .name { display: none; }
}
.foot-legal a { color: inherit; text-decoration: none; transition: color 0.4s var(--ease); }
.foot-legal a:hover, .foot-legal a[aria-current="page"] { color: var(--accent); }

/* ---------- Desktop: Foto links fixiert, Inhalt rechts (Scribble) ---------- */

@media (min-width: 800px) {
  body { padding-left: var(--photo); }
  /* Abstand rechts, damit Flächen und Footer innen dort enden, wo der Text endet */
  :root { --edge: max(var(--pad), calc(100vw - var(--photo) - var(--pad) - var(--measure))); }
  /* Linien laufen von der Fotokante bis zum rechten Rand, Text hält das Maß */
  .nav, header, main { padding-inline: var(--pad); }
  /* Footer freistehend: Kasten genau so breit wie die Textspalte, berührt das Foto nicht */
  .foot { margin: 0 var(--edge) 0 var(--pad); padding: 3.25rem 3rem 1.75rem; }
  .foot-legal { padding: 0.75rem var(--edge) 1rem var(--pad); }
  .tagline-block, main > :not(.panel, .band), .panel > *, .band > * { max-width: var(--measure); }

  .portrait {
    position: fixed;
    left: 0;
    top: 0;
    width: var(--photo);
    height: 100dvh;
  }

  .nav ul { gap: 2rem; padding-top: 2.25rem; }
  .sub-page .nav { display: flex; align-items: flex-end; justify-content: space-between; }
  .nav .nav-mark { display: block; width: 3.5rem; padding: 1.2rem 0 0.7rem; margin-right: 1.25rem; }
  .nav-mark .mark { width: 100%; }
  .nav a { padding-bottom: 0.7rem; }

  /* Startseite: großes KD-Zeichen links neben dem Namen, das K im Foto (wie die Flächen, die ins
     Foto greifen). Die Fotokante liegt genau am Übergang von K zu D (D beginnt bei 48, also 45 von
     103 Einheiten der viewBox), das D steht auf Papier. Volle Farben wie im Druck, kein Mischmodus.
     Oben bündig mit dem Namen (Katjas Wunsch): Versalhöhe des K in Schibsted Grotesk beginnt bei
     Zeilenhöhe 1,15 0,232em unter der Zeilenoberkante, das Zeichen 1 von 103 Einheiten unter seiner. */
  .tagline-block {
    --m: clamp(9rem, 18vw, 15rem);
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    column-gap: 2.25rem;
    max-width: none;
    margin-left: calc(-1 * var(--pad) - var(--m) * 45 / 103);
    padding: 4rem 0 3.5rem;
  }
  .tagline-block .mark { order: -1; width: var(--m); margin-top: calc(0.232 * var(--name) - var(--m) / 103); }
  .sub-page .tagline-block { display: none; }
  .sub-page main { padding-top: 4rem; }

  /* Flächen: greifen um --reach ins Foto, laufen bis zum rechten Rand */
  .panel, .band {
    margin-left: calc(-1 * var(--pad) - var(--reach));
    margin-right: calc(-1 * var(--pad));
    padding-right: var(--edge);
    box-shadow: var(--lift);
  }
}

/* Breite Bildschirme: beige Bänder zweispaltig, Titel und Zitat links, Text rechts.
   Erst ab 1400 px: darunter ist die linke Spalte schmaler als „Herausforderungen“ im Zitat. */
@media (min-width: 1400px) {
  .band {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    column-gap: 3.5rem;
    align-items: start;
  }
  .band > * { max-width: none; }
  .band .body .two-col { columns: 1; }
  .band .body { position: relative; }

  .band .body::before {
    content: "";
    position: absolute;
    left: -1.75rem;
    top: 0.5rem;
    bottom: 0.5rem;
    width: 1px;
    background: var(--accent-2);
    opacity: 0.45;
  }
  .band .head > :last-child { margin-bottom: 0; }
}

/* Grundhaltungen (Coaching-Ansatz): Begriff links neben dem Text erst ab 1400 px, darunter steht er
   als Überschrift über dem Text (sonst nahm „Empathie“ mehr Breite ein als der Text) */
@media (max-width: 1399.98px) {
  .attitudes li { grid-template-columns: 1fr; gap: 0.25rem; }
}

/* Erster Kasten nebeneinander erst, wenn der Text daneben genug Breite hat;
   darunter steht „Klar führen …“ oben und der Text läuft darunter */
@media (min-width: 1600px) {
  .panel {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    column-gap: 4.5rem;
    align-items: start;
  }
  .panel > * { max-width: none; }
  .panel h2 { margin-bottom: 0; }
  /* Der große Satz links läuft beim Lesen des Textes rechts mit */
  .panel .head { position: sticky; top: 2.5rem; }
}

/* Volle Menü-Bezeichnungen nur, wenn sie in die Zeile passen */
@media (max-width: 1599.98px) {
  .nav .full { display: none; }
  .nav .short { display: inline; }
}
/* Kleine Laptops: etwas engere Abstände, damit das Menü in die rechte Spalte passt */
@media (min-width: 800px) and (max-width: 1199.98px) {
  :root { --pad: 2.5rem; --name: var(--s4); }
  .nav ul { gap: 1.25rem; }
  .nav a { letter-spacing: 0.08em; }
  /* Footer-Kasten ist hier schmal: kleineres Zeichen, weniger Innenabstand, Einladung eine Stufe kleiner */
  .foot { padding-inline: 2rem; }
  .foot .mark { width: 5.5rem; }
  .foot-top { gap: 1.5rem; }
  .foot-cta { font-size: var(--s2); }
}

/* ---------- Mobil: Foto und Tagline zuerst, Flächen als durchgehende Blöcke ---------- */

@media (max-width: 799.98px) {
  :root { --pad: 1.5rem; --inset: 1.5rem; }
  /* Lange deutsche Wörter in großer Schrift trennen statt überlaufen */
  h1, h2, h3, .pull, .closing { hyphens: auto; overflow-wrap: break-word; }

  .nav { position: sticky; top: 0; z-index: 4; }
  .nav ul { justify-content: space-between; gap: 0.75rem; padding: 0.9rem 1rem 0; }
  .nav a { padding-bottom: 0.65rem; letter-spacing: 0.03em; }

  /* Titel direkt auf der hellen Wand über dem Kopf */
  header { position: relative; overflow: clip; }
  /* Mindestens Kopf und Schultern (95vw), höchstens das ganze Bild (150vw);
     unten lugen etwa 5rem Inhalt hervor */
  .portrait, .sub-page .portrait { height: clamp(95vw, calc(100dvh - 8rem), 150vw); object-position: 50% 0; }
  /* Weiches Einrasten (proximity): ein Wisch vom Foto rastet am Inhalt ein, im Text zieht
     nichts. Erst eingeschaltet, wenn die Seite geladen ist und oben steht (Skript setzt .snap).
     Nur zwei Punkte: Foto und Inhalt. KEIN Punkt am Seitenende und kein „mandatory“ – sonst
     zieht der iPhone-Browser (WebKit) die Seite immer wieder auf den Footer. */
  html.snap { scroll-snap-type: y proximity; }
  header, .content { scroll-snap-align: start; scroll-margin-top: 3rem; }
  /* Rechtstexte und Kontakt: ohne Foto, direkt mit Inhalt */
  .legal header { display: none; }
  .legal main { padding-top: 2.5rem; }
  /* Zitate: etwas näher an der Führungslinie */
  .pull { padding-left: 1rem; }
  .tagline .sub { font-size: var(--s0); margin-top: 0.5rem; hyphens: manual; }
  /* Alle Seiten mit Foto: Desktop-Komposition im Kleinen. Name und Unterzeile liegen in einem Kasten aus
     Milchglas auf dem Foto (Kontur und Schatten wie die Flächen am Desktop, bis zum rechten Rand), damit
     das Foto durchscheint. Seine linke Kante liegt genau zwischen K und D (45 von 103 Einheiten):
     K auf dem Foto, D auf dem Kasten. Ohne backdrop-filter: deckendes Papier. */
  .tagline-block {
    --m: 22vw;
    display: block;
    position: absolute;
    top: 1rem;
    left: calc(var(--pad) + var(--m) * 45 / 103);
    right: 0;
    padding: 0.8rem 1rem 0.9rem calc(var(--m) * 58 / 103 + 0.8rem);
    background: var(--paper) var(--grain);
    box-shadow: var(--lift);
  }
  @supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .tagline-block {
      background: var(--grain), rgb(245 241 236 / 0.35);
      -webkit-backdrop-filter: blur(6px);
      backdrop-filter: blur(6px);
      /* Nur eine Haarlinie als Kontur (halbes Pixel, auf Retina ein Gerätepixel), kein Schatten */
      box-shadow: 0 0 0 0.5px rgb(62 38 22 / 0.1);
    }
  }
  .tagline-block .mark { position: absolute; width: var(--m); left: calc(var(--m) * -45 / 103); top: 50%; translate: 0 -50%; }
  .tagline { font-size: 6.6vw; }

  main, .foot { padding-inline: var(--pad); }
  main { padding-top: 3rem; }
  .home main { padding-top: 0; }
  .panel, .band { margin-inline: calc(-1 * var(--pad)); padding: 3rem var(--pad) 2rem; }
  .panel h2 { font-size: var(--s3); }
  .focus-list a { grid-template-columns: 1fr; gap: 0.25rem; }
  .two-col { columns: 1; }
  .tagline .sub { position: relative; padding-left: 0.85rem; }
  .tagline .sub::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.2em;
    bottom: 0.2em;
    width: 2px;
    background: var(--accent-2);
  }
  .closing > span + span { margin-top: 0.45em; }
  .cv { grid-template-columns: 1fr; gap: 0.25rem; }
  .cv dd { margin-bottom: 1rem; }
  .foot .mark { width: 3.5rem; }
  .foot-top { gap: 1.25rem; align-items: flex-start; }
  .foot-cta { font-size: var(--s2); }
  .closing { font-size: var(--s2); margin: 3.5rem 0; }
}

/* Sehr schmale Handys (320 px): Menü etwas enger, sonst ragt „Phasen.Weise“ heraus;
   Unterzeile kleiner, damit der Kasten nicht in Katjas Haar reicht */
@media (max-width: 349.98px) {
  .nav ul { gap: 0.5rem; padding-inline: 0.75rem; }
  .nav a { letter-spacing: 0; }
  .tagline .sub { font-size: 0.9rem; }
}

/* ---------- Bewegung: nur wenn gewünscht und unterstützt, sonst statisch ---------- */

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: scroll()) {
    @keyframes reveal { from { opacity: 0; } }
    @keyframes drift {
      from { transform: translateY(0) scale(1.05); }
      to { transform: translateY(-15dvh) scale(1); }
    }
    @keyframes hero {
      to { transform: translateY(35%); }
    }

    @media (min-width: 800px) {
      .portrait {
        height: 115dvh;
        transform-origin: 100% 0;
        animation: reveal 1.4s ease-out both, drift linear both;
        animation-timeline: auto, scroll(root);
      }
    }
    @media (max-width: 799.98px) {
      .portrait {
        animation: reveal 1.4s ease-out both, hero linear both;
        animation-timeline: auto, scroll(root);
        animation-range: normal, 0 100dvh;
      }
    }
  }
}

/* Beim Laden: Titel und erster Inhalt tauchen einmal sanft auf (überall, ohne Scroll-Timeline) */
@media (prefers-reduced-motion: no-preference) {
  @keyframes appear {
    from { opacity: 0; transform: translateY(0.6rem); }
  }
  .tagline-block, main > .panel:first-child { animation: appear 1.2s var(--ease) both; }
  main > .panel:first-child { animation-delay: 0.15s; }
}

/* Weitere leise Bewegungen, alle nur einmal und nur ohne „Bewegung reduzieren“ */
@media (prefers-reduced-motion: no-preference) {
  /* KD-Zeichen (Kopf) zeichnet sich wie von Hand: K-Stamm, Arme, D-Bogen, zuletzt der D-Stamm nach oben */
  @keyframes draw { from { opacity: 0; } 5% { opacity: 1; } to { stroke-dashoffset: 0; } }
  .mark path { stroke-dasharray: 1 2; stroke-dashoffset: 1; animation: draw 0.8s cubic-bezier(0.6, 0, 0.2, 1) both; }
  .mark path:nth-child(1) { animation-delay: 0.3s; }
  .mark path:nth-child(2) { animation-delay: 0.8s; }
  .mark path:nth-child(3) { animation-delay: 0.95s; }
  .mark path:nth-child(4) { animation-delay: 1.15s; animation-duration: 1.1s; }
  .mark path:nth-child(5) { animation-delay: 2.2s; animation-duration: 0.5s; }

  /* Der Dreiklang im ersten Kasten erscheint Zeile für Zeile */
  .panel h2 span { animation: appear 1.2s var(--ease) both; }
  .panel h2 span:nth-child(2) { animation-delay: 0.25s; }
  .panel h2 span:nth-child(3) { animation-delay: 0.5s; }
}

/* ---------- Einblenden beim Scrollen (Skript setzt .rv/.in und die Staffelung --d) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js .rv {
    opacity: 0;
    translate: 0 0.9rem;
    transition: opacity 1s var(--ease) var(--d, 0s), translate 1.3s var(--ease) var(--d, 0s);
  }
  .js .rv.in { opacity: 1; translate: none; }

  /* Listen auf „Angebot“: erst zieht sich die Linie, dann folgt der Eintrag */
  .js .examples li.rv {
    background-size: 0 1px;
    translate: 0 0.4rem;
    transition:
      background-size 1.4s var(--ease) var(--d, 0s),
      opacity 1s var(--ease) calc(var(--d, 0s) + 0.3s),
      translate 1.2s var(--ease) calc(var(--d, 0s) + 0.3s);
  }
  .js .examples li.rv.in { background-size: 100% 1px; translate: none; }

  /* Kupfer-Stücke über Schwerpunkten und Themen wachsen nach, wenn die Zeile da ist */
  .js .focus-list li.rv::before, .js .topic:not(.in)::before { transform: scaleX(0); }
  .js .focus-list li::before, .js .topic::before {
    transition: width 1s var(--ease), transform 1.4s var(--ease) calc(var(--d, 0s) + 0.25s);
  }
  .js .focus-list li.rv.in::before { transform: none; }

  /* Zeichen im Footer zeichnet sich, sobald die Einladung ins Bild kommt */
  .js .foot-top:not(:has(.foot-cta.in)) .mark path { animation-play-state: paused; }

  /* Einladung im Footer: Wörter steigen nacheinander auf, danach stupst der Pfeil immer wieder */
  .js .foot-cta .w > span { translate: 0 110%; transition: translate 1.1s var(--ease) calc(var(--i) * 0.07s + 0.1s); }
  .js .foot-cta.in .w > span { translate: none; }
  .js .foot-cta .circle { opacity: 0; translate: -0.6rem 0; transition: opacity 0.8s var(--ease) 1.1s, translate 0.9s var(--ease) 1.1s, background-color 0.5s var(--ease), box-shadow 0.5s var(--ease), scale 0.2s var(--ease); }
  .js .foot-cta.in .circle { opacity: 1; translate: none; }
  .js .foot-cta.in .circle svg { animation: nudge 3.2s var(--ease) 2.2s infinite; }
  /* Touch (ohne Hover): Ist der Satz fertig aufgestiegen und ganz im Bild (.lit, gesetzt vom Skript),
     zieht einmal kupferhelles Licht Wort für Wort hindurch; wo es ankommt, pulsiert der Ring zweimal,
     danach wippt der Pfeil wie am Desktop. Licht hellt weich auf und ab (ease-in-out), statt zu blitzen. */
  @media (hover: none) {
    .js .foot-cta.lit .w > span { animation: wave 0.9s ease-in-out calc(var(--i) * 0.11s); }
    .foot-cta .circle::after { content: ""; position: absolute; inset: 0; border: 2px solid var(--paper); border-radius: 50%; opacity: 0; pointer-events: none; }
    .js .foot-cta.lit .circle::after { animation: pulse 1.6s var(--ease) 1.4s 2; }
    .js .foot-cta.in .circle svg { animation: none; }
    .js .foot-cta.lit .circle svg { animation: nudge 3.2s var(--ease) 4.8s infinite; }
  }
  @keyframes wave {
    0%, 100% { color: var(--paper); }
    40% { color: var(--copper-light); }
  }
  @keyframes pulse {
    0% { opacity: 0.7; scale: 1; }
    100% { opacity: 0; scale: 2; }
  }
  @keyframes nudge {
    0%, 36%, 100% { translate: 0 0; }
    9% { translate: 0.14em 0; }
    18% { translate: 0 0; }
    27% { translate: 0.08em 0; }
  }
}