/**
 * Portfolio — design tokens live in :root only.
 * Spacing scale (5): heading→content, intro→main, section, media gap, avatar gap.
 */

@font-face {
  font-family: "Untitled Sans";
  src: url("font/UntitledSans-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Untitled Sans";
  src: url("font/UntitledSans-RegularItalic.otf") format("opentype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Untitled Sans";
  src: url("font/UntitledSans-Medium.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Untitled Sans";
  src: url("font/UntitledSans-MediumItalic.otf") format("opentype");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Untitled Sans";
  src: url("font/UntitledSans-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Untitled Sans";
  src: url("font/UntitledSans-BoldItalic.otf") format("opentype");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

:root {
  /* Colors */
  --color-bg: #ffffff;
  --color-text: #000000;
  --color-muted: #8a8c8f;
  --color-divider: #efefef;
  --color-surface: #efefef;

  /* Radii */
  --radius-avatar: 8px;
  --radius-thumb: 4px;
  --radius-chip: 100px;
  --radius-btn: 8px;

  /* Spacing (tokens from spec) */
  --space-heading-to-content: 61px;
  --space-section: 80px;
  --space-media-gap: 16px;
  --space-avatar-gap: 24px;

  /* Layout — Figma text column is 684px; padding is outside that measure */
  --max-text: 684px;
  --pad-inline: clamp(16px, 5vw, 24px);
  /* Fallback first (684 + 24 + 24), then precise calc where supported */
  --max-column: 732px;
  --max-column: calc(var(--max-text) + 2 * clamp(16px, 5vw, 24px));

  /* Typography — Untitled Sans (local @font-face); minimal system fallback only */
  --font-sans: "Untitled Sans", ui-sans-serif, system-ui, sans-serif;
  --fs-body: 1rem;
  --lh-body: 1.5rem;
  --fs-heading-page: 1.5rem;
  --lh-heading-page: 2rem;
  --fs-heading-section: 1.25rem;
  --lh-heading-section: 1.75rem;
  /* Experience job titles — 22px / 28px, Regular */
  --fs-job-title: 22px;
  --lh-job-title: 28px;
  /* Experience company + dates */
  --fs-job-meta: 18px;
  --lh-job-meta: 24px;
  /* About / Talks intro paragraphs — Figma (e.g. 4:509): 18px / 24px Regular */
  --fs-prose: 18px;
  --lh-prose: 24px;
  /* Intro lead — Figma 30px / 38px */
  --fs-intro-lead: 30px;
  --lh-intro-lead: 38px;
  --track-body: -0.24px;
  --track-chip: -0.12px;
  --track-btn: -0.12px;

  /* Chips (spec) */
  --chip-height: 32px;
  --chip-pad-x: 12px;
  --chip-pad-y: 8px;
  --chip-font-size: 0.875rem;
  --chip-line-height: 1.25rem;
  --chip-font-weight: 500;

  /* Buttons (spec) */
  --btn-min-height: 48px;
  --btn-pad-x: 24px;
  --btn-pad-y: 12px;
  --btn-font-size: 1rem;
  --btn-line-height: 1.5rem;
  --btn-font-weight: 500;

  /* Supporting rhythm (referenced by layout rules) */
  --rhythm-divider: 24px;
  --rhythm-stack: 24px;
  --space-intro-block-padding-top: 124px;
  /* Gap intro headline → lead, and lead → buttons */
  --space-intro-lead-vertical: 32px;
}

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

html {
  -webkit-text-size-adjust: 100%;
}

@keyframes reveal-up {
  from {
    opacity: 0;
    transform: translateY(60px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Reveal: extrem sanftes Ease-out (y ≤ 1); Ausgangszustand unsichtbar bis zur Animation */
.site-header .intro-block,
main .column > .section,
.site-footer,
body.page-imprint .legal-page,
body.page-privacy .legal-page {
  opacity: 0;
  transform: translateY(60px);
  animation: reveal-up 2.2s cubic-bezier(0.1, 1, 0.24, 1) both;
}

/* Home: intro splash runs first — content stays “below” until sequence ends */
body.page-home.page-intro-active .site-header .intro-block,
body.page-home.page-intro-active main .column > .section,
body.page-home.page-intro-active .site-footer {
  animation: none;
  opacity: 0;
  transform: translateY(60px);
}

/* ——— Fullscreen intro (home only) ——— */

.page-intro {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding-left: 24px;
  padding-right: 24px;
  box-sizing: border-box;
  background: var(--color-bg);
  transition: opacity 0.35s ease-out, visibility 0.35s ease-out;
}

.page-intro.is-dismissed {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* Intro copy: links an viewport + 24px, nicht zentrierte Spalte */
.page-intro__inner {
  flex: 0 1 auto;
  width: auto;
  max-width: min(var(--max-text), 100%);
  margin-right: auto;
  opacity: 0;
  transition: opacity 0.75s ease-out;
}

.page-intro__inner.is-visible {
  opacity: 1;
}

.page-intro__inner.is-hidden {
  opacity: 0;
  transition: opacity 0.5s ease-out;
}

.page-intro__copy {
  margin: 0;
  max-width: var(--max-text);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(2rem, 5.5vw, 3.75rem);
  line-height: calc(70 / 60);
  letter-spacing: -0.44px;
  color: var(--color-text);
  text-align: left;
}

@media (prefers-reduced-motion: reduce) {
  .page-intro {
    display: none !important;
  }

  body.page-home.page-intro-active .site-header .intro-block,
  body.page-home.page-intro-active main .column > .section,
  body.page-home.page-intro-active .site-footer,
  .site-header .intro-block,
  main .column > .section,
  .site-footer,
  body.page-imprint .legal-page,
  body.page-privacy .legal-page {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: var(--lh-body);
  letter-spacing: var(--track-body);
  color: var(--color-text);
  background: var(--color-bg);
}

h1,
h2 {
  font-family: var(--font-sans);
}

img {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}

a {
  color: inherit;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 0.5rem 1rem;
  background: var(--color-text);
  color: var(--color-bg);
}

.skip-link:focus {
  left: var(--pad-inline);
  top: var(--pad-inline);
  z-index: 1001;
}

.column {
  width: 100%;
  max-width: var(--max-column);
  margin-inline: auto;
  padding-inline: var(--pad-inline);
}

/* ——— Intro ——— */

.intro-block {
  padding-top: var(--space-intro-block-padding-top);
}

.intro-top {
  display: flex;
  align-items: flex-end;
  gap: var(--space-avatar-gap);
}

.intro-avatar {
  flex-shrink: 0;
  width: 94px;
  height: 126px;
  object-fit: cover;
  border-radius: var(--radius-avatar);
  filter: grayscale(100%);
}

.intro-name {
  min-width: 0;
}

/* Single page <h1>: name + pronunciation — match .intro-lead typography / rendering */
.intro-heading {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-intro-lead);
  font-weight: 400;
  font-synthesis: none;
  line-height: var(--lh-intro-lead);
  letter-spacing: -0.24px;
  color: var(--color-text);
  max-width: min(var(--max-text), 100%);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.intro-heading .intro-title,
.intro-heading .intro-pronunciation {
  display: block;
  font-family: inherit;
  font-size: inherit;
  font-weight: 400;
  font-synthesis: none;
  line-height: inherit;
  letter-spacing: inherit;
}

.intro-heading .intro-pronunciation {
  margin-top: 0.25rem;
}

/* Easter egg — Figma node 13:158: 200×150, radius 16, border #efefef, shadow; pen −1° above, ten −2° below */
.intro-top,
.intro-name,
.intro-heading,
.intro-lead {
  overflow: visible;
}

.pen-easter,
.ten-easter {
  position: relative;
  display: inline;
  isolation: isolate;
}

.ftt-easter {
  display: inline;
  isolation: isolate;
}

.pen-easter__trigger:focus,
.ten-easter__trigger:focus,
.ftt-easter__trigger:focus {
  outline: none;
}

.pen-easter__trigger:focus-visible,
.ten-easter__trigger:focus-visible,
.ftt-easter__trigger:focus-visible {
  outline: 2px solid var(--color-text);
  outline-offset: 2px;
}

.pen-easter__frame,
.ten-easter__frame {
  position: absolute;
  left: 50%;
  width: 200px;
  height: 150px;
  margin-left: -100px;
  border: 1px solid var(--color-divider);
  border-radius: 16px;
  box-shadow: 0 0 24px rgba(0, 0, 0, 0.24);
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 0.15s ease,
    visibility 0.15s ease;
  z-index: 20;
}

.pen-easter__frame {
  bottom: calc(100% + 4px);
  transform: rotate(-1deg);
}

.ten-easter__frame {
  top: calc(100% + 4px);
  transform: rotate(-2deg);
}

.pen-easter__frame img,
.ten-easter__frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 15px;
}

.pen-easter:hover .pen-easter__frame,
.pen-easter:focus-within .pen-easter__frame,
.ten-easter:hover .ten-easter__frame,
.ten-easter:focus-within .ten-easter__frame {
  opacity: 1;
  visibility: visible;
}

/* Talks — FTT: Vorschau am rechten Rand der Listenzeile; .ftt-easter position static → Bezug ist li */
.meta-list--talks .ftt-easter {
  position: static;
  isolation: auto;
}

.ftt-easter__frame {
  position: absolute;
  left: auto;
  right: 0;
  top: 50%;
  width: 200px;
  height: 150px;
  margin-top: 0;
  border: 1px solid var(--color-divider);
  border-radius: 16px;
  box-shadow: 0 0 24px rgba(0, 0, 0, 0.24);
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-50%) rotate(3deg);
  transform-origin: center center;
  transition:
    opacity 0.15s ease,
    visibility 0.15s ease;
  z-index: 20;
}

.ftt-easter__frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 15px;
}

.ftt-easter:hover .ftt-easter__frame,
.ftt-easter:focus-within .ftt-easter__frame {
  opacity: 1;
  visibility: visible;
}

.ftt-easter--mirror .ftt-easter__frame {
  transform: translateY(-50%) rotate(-4deg);
}

.meta-list--talks {
  overflow: visible;
}

@media (max-width: 480px) {
  .pen-easter__frame,
  .ten-easter__frame {
    left: 0;
    margin-left: 0;
    max-width: min(200px, calc(100vw - 2 * var(--pad-inline)));
  }

  .ftt-easter__frame {
    left: auto;
    right: 0;
    top: 50%;
    width: min(200px, calc(100vw - 2 * var(--pad-inline)));
    transform: translateY(-50%) rotate(2deg);
    transform-origin: center right;
  }

  .ftt-easter--mirror .ftt-easter__frame {
    transform: translateY(-50%) rotate(-3deg);
  }
}

.intro-lead {
  margin: 0;
  margin-top: var(--space-intro-lead-vertical);
  font-family: var(--font-sans);
  font-size: var(--fs-intro-lead);
  font-weight: 400;
  font-synthesis: none;
  line-height: var(--lh-intro-lead);
  letter-spacing: -0.24px;
  max-width: min(var(--max-text), 100%);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.intro-lead-strong {
  font-family: var(--font-sans);
  font-weight: 400;
  font-synthesis: none;
  line-height: var(--lh-intro-lead);
  color: var(--color-text);
}

.intro-lead-muted {
  font-weight: 400;
  font-synthesis: none;
  line-height: var(--lh-intro-lead);
  color: var(--color-muted);
}

.intro-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: var(--space-intro-lead-vertical);
}

/* Figma 2:413 default: ~94×48, surface fill, black label; hover (e.g. 4:507 / primary): black, white label */
.btn-linkedin {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 94px;
  height: 48px;
  padding: 0;
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.5rem;
  letter-spacing: -0.12px;
  text-decoration: none;
  color: #000;
  background: var(--color-surface);
  border: none;
  border-radius: 12px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
  transform: scale(1);
  transform-origin: center;
  cursor: pointer;
  transition:
    background 0.18s ease,
    color 0.18s ease,
    box-shadow 0.2s ease,
    transform 0.12s cubic-bezier(0.33, 1, 0.68, 1);
}

.btn-linkedin:hover {
  background: #000;
  color: #fff;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1);
}

.btn-linkedin:active {
  transform: scale(0.985);
}

.btn-linkedin:focus-visible {
  outline: 2px solid #000;
  outline-offset: 2px;
  background: #000;
  color: #fff;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1);
}

.btn-linkedin:visited {
  color: #000;
}

.btn-linkedin:visited:hover {
  color: #fff;
}

/* Get in touch: 48px h wie LinkedIn; padding 4px 0 4px 16px (links 16, rechts 0); aufgeklappt max-content */
.intro-contact {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
  vertical-align: middle;
}

.intro-contact__shell {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 4px;
  box-sizing: border-box;
  width: 152px;
  height: 48px;
  padding: 4px 0 4px 16px;
  border-radius: 12px;
  background: #efefef;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
  transform: scale(1);
  transform-origin: center;
  overflow: hidden;
  transition:
    width 1s cubic-bezier(0.33, 1, 0.68, 1),
    background 0.88s cubic-bezier(0.33, 1, 0.68, 1),
    box-shadow 0.2s ease,
    transform 0.12s cubic-bezier(0.33, 1, 0.68, 1);
}

@media (hover: hover) and (pointer: fine) {
  .intro-contact:hover .intro-contact__shell {
    width: max-content;
    max-width: min(336px, calc(100vw - 32px));
    background: #000;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1);
  }
}

.intro-contact.is-open .intro-contact__shell {
  width: max-content;
  max-width: min(336px, calc(100vw - 32px));
  background: #000;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1);
}

.intro-contact:active .intro-contact__shell {
  transform: scale(0.985);
}

.intro-contact__pin {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
}

.intro-contact__pin img {
  display: block;
  width: 24px;
  height: 24px;
  transform-origin: center;
  transform: scale(1);
  transition:
    filter 0.88s cubic-bezier(0.33, 1, 0.68, 1),
    transform 0.7s cubic-bezier(0.33, 1, 0.68, 1);
}

@media (hover: hover) and (pointer: fine) {
  .intro-contact:hover .intro-contact__pin img {
    filter: brightness(0) invert(1);
    transform: scale(1.06);
  }
}

.intro-contact.is-open .intro-contact__pin img {
  filter: brightness(0) invert(1);
  transform: scale(1.06);
}

.intro-contact__main {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  height: 40px;
  align-self: center;
}

/* Aufgeklappt: keine künstliche Breite — nur so breit wie Mail + Gap + Copy + 4px rechts */
@media (hover: hover) and (pointer: fine) {
  .intro-contact:hover .intro-contact__main {
    flex: 0 0 auto;
    width: max-content;
    max-width: 100%;
  }
}

.intro-contact.is-open .intro-contact__main {
  flex: 0 0 auto;
  width: max-content;
  max-width: 100%;
}

.intro-contact__idle {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.5rem;
  letter-spacing: -0.12px;
  color: #000;
  transform: translate3d(0, 0, 0);
  transition:
    opacity 0.64s cubic-bezier(0.33, 1, 0.68, 1) 0.12s,
    color 0.58s cubic-bezier(0.33, 1, 0.68, 1) 0.08s,
    transform 0.55s cubic-bezier(0.33, 1, 0.68, 1) 0.1s;
}

@media (hover: hover) and (pointer: fine) {
  .intro-contact:hover .intro-contact__idle {
    color: #fff;
    opacity: 0;
    transform: translate3d(0, -0.1rem, 0);
    pointer-events: none;
  }
}

.intro-contact.is-open .intro-contact__idle {
  color: #fff;
  opacity: 0;
  transform: translate3d(0, -0.1rem, 0);
  pointer-events: none;
}

.intro-contact__idle:focus-visible {
  outline: 2px solid #000;
  outline-offset: 2px;
  opacity: 1;
}

.intro-contact__panel {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: nowrap;
  gap: 16px;
  column-gap: 16px;
  padding: 0;
  box-sizing: border-box;
  min-width: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.55s cubic-bezier(0.42, 0, 0.58, 1);
}

@media (hover: hover) and (pointer: fine) {
  .intro-contact:hover .intro-contact__panel {
    position: relative;
    inset: auto;
    width: max-content;
    max-width: 100%;
    flex: 0 0 auto;
    padding-right: 4px;
    box-sizing: border-box;
    opacity: 1;
    pointer-events: auto;
    transition: opacity 0.45s cubic-bezier(0.33, 1, 0.68, 1) 0.22s;
  }
}

.intro-contact.is-open .intro-contact__panel {
  position: relative;
  inset: auto;
  width: max-content;
  max-width: 100%;
  flex: 0 0 auto;
  padding-right: 4px;
  box-sizing: border-box;
  opacity: 1;
  pointer-events: auto;
  transition: opacity 0.45s cubic-bezier(0.33, 1, 0.68, 1) 0.22s;
}

.intro-contact__email {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.5rem;
  letter-spacing: -0.12px;
  color: #fff;
  white-space: nowrap;
  /* Nicht unter Textbreite schrumpfen — sonst überlappt die Schrift den 16px-Gap zum Copy-Button */
  min-width: min-content;
  flex: 0 0 auto;
  opacity: 0;
  transform: translate3d(0, 0.2rem, 0);
  transition:
    opacity 0.36s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.36s cubic-bezier(0.4, 0, 0.2, 1);
}

.intro-contact:hover .intro-contact__email,
.intro-contact.is-open .intro-contact__email {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition:
    opacity 0.7s cubic-bezier(0.33, 1, 0.68, 1) 0.38s,
    transform 0.72s cubic-bezier(0.33, 1, 0.68, 1) 0.34s;
}

/* Copy: 80×40 eingeklappt; Hover/Open 84px breit, Label zentriert — kein margin-right (Abstand: panel padding-right) */
.intro-contact__copy {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  box-sizing: border-box;
  width: 80px;
  height: 40px;
  margin: 0;
  padding: 4px;
  border: none;
  border-radius: 8px;
  background: #fff;
  color: #000;
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.5rem;
  letter-spacing: -0.12px;
  cursor: pointer;
  transform-origin: left center;
  transform: scale(0.98);
  opacity: 0;
  transition:
    width 0.4s cubic-bezier(0.4, 0, 0.2, 1),
    padding 0.4s cubic-bezier(0.4, 0, 0.2, 1),
    background 0.3s cubic-bezier(0.33, 1, 0.68, 1),
    color 0.3s cubic-bezier(0.33, 1, 0.68, 1),
    transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

@media (hover: hover) and (pointer: fine) {
  .intro-contact:hover .intro-contact__copy {
    width: 84px;
    padding: 4px;
    justify-content: center;
    opacity: 1;
    transform: scale(1);
    transition:
      width 1.45s cubic-bezier(0.33, 1, 0.68, 1) 1s,
      padding 1.45s cubic-bezier(0.33, 1, 0.68, 1) 1s,
      background 0.95s cubic-bezier(0.33, 1, 0.68, 1) 1.22s,
      color 0.95s cubic-bezier(0.33, 1, 0.68, 1) 1.22s,
      transform 1.05s cubic-bezier(0.33, 1, 0.68, 1) 1.1s,
      opacity 0.95s cubic-bezier(0.33, 1, 0.68, 1) 1.05s;
  }
}

.intro-contact.is-open .intro-contact__copy {
  width: 84px;
  padding: 4px;
  justify-content: center;
  opacity: 1;
  transform: scale(1);
  transition:
    width 1.45s cubic-bezier(0.33, 1, 0.68, 1) 1s,
    padding 1.45s cubic-bezier(0.33, 1, 0.68, 1) 1s,
    background 0.95s cubic-bezier(0.33, 1, 0.68, 1) 1.22s,
    color 0.95s cubic-bezier(0.33, 1, 0.68, 1) 1.22s,
    transform 1.05s cubic-bezier(0.33, 1, 0.68, 1) 1.1s,
    opacity 0.95s cubic-bezier(0.33, 1, 0.68, 1) 1.05s;
}

.intro-contact__copy-stack {
  display: block;
  height: 1.5rem;
  overflow: hidden;
  width: 100%;
  text-align: center;
}

.intro-contact__copy-track {
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

.intro-contact__copy-line {
  flex: 0 0 1.5rem;
  height: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}

.intro-contact__copy.is-copied .intro-contact__copy-track {
  transform: translateY(-1.5rem);
}

@media (prefers-reduced-motion: reduce) {
  .btn-linkedin,
  .btn-linkedin:hover,
  .btn-linkedin:focus-visible {
    transform: none;
    box-shadow: none;
  }

  .intro-contact__shell,
  .intro-contact:hover .intro-contact__shell,
  .intro-contact.is-open .intro-contact__shell {
    transform: none;
    box-shadow: none;
  }

  .intro-contact:active .intro-contact__shell {
    transform: none;
  }

  .intro-contact__shell {
    transition-duration: 0.01ms;
  }

  .intro-contact__panel {
    transition-duration: 0.01ms;
  }

  .intro-contact__pin img {
    transform: none;
    transition-duration: 0.01ms;
  }

  .intro-contact__idle {
    transition-duration: 0.01ms;
  }

  .intro-contact__email,
  .intro-contact:hover .intro-contact__email,
  .intro-contact.is-open .intro-contact__email {
    opacity: 1;
    transform: none;
    transition-duration: 0.01ms;
  }

  .intro-contact__copy,
  .intro-contact:hover .intro-contact__copy,
  .intro-contact.is-open .intro-contact__copy {
    opacity: 1;
    transform: none;
    transition-duration: 0.01ms;
  }

  .intro-contact__copy-track {
    transition-duration: 0.01ms;
  }
}

.intro-contact__copy:hover {
  background: #c7c7c7;
  color: #000;
}

.intro-contact__copy:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.intro-contact__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ——— Sections ——— */

main .column > .section:first-child {
  margin-top: var(--space-section);
}

.section {
  margin-top: var(--space-section);
}

.section[aria-labelledby="about-heading"] {
  margin-top: var(--space-section);
}

.section[aria-labelledby="talks-heading"] {
  margin-top: var(--space-section);
}

.section[aria-labelledby="listening-heading"] {
  margin-top: var(--space-section);
}

.section[aria-labelledby="reading-heading"] {
  margin-top: var(--space-section);
}

.section-title {
  margin: 0 0 var(--space-heading-to-content);
  font-family: var(--font-sans);
  font-size: var(--fs-intro-lead);
  font-weight: 400;
  font-synthesis: none;
  line-height: var(--lh-intro-lead);
  letter-spacing: var(--track-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

#experience-heading.section-title {
  margin-bottom: 24px;
  letter-spacing: -0.24px;
}

#about-heading.section-title {
  margin-bottom: 24px;
}

#talks-heading.section-title {
  margin-bottom: 24px;
}

#listening-heading.section-title {
  margin-bottom: 24px;
}

#reading-heading.section-title {
  margin-bottom: 24px;
}

/* ——— Legal / Imprint (Figma 6:16) ——— */

main .column > .legal-page:first-child {
  margin-top: var(--space-intro-block-padding-top);
}

.legal-page {
  max-width: min(var(--max-text), 100%);
  margin-bottom: 0;
}

body.page-imprint,
body.page-privacy {
  padding-bottom: var(--space-intro-block-padding-top);
}

.legal-page__title.section-title {
  margin-bottom: 24px;
}

.legal-part-title {
  margin: 0 0 24px;
  font-family: var(--font-sans);
  font-size: var(--fs-job-meta);
  font-weight: 500;
  font-synthesis: none;
  line-height: var(--lh-job-meta);
  letter-spacing: var(--track-body);
  color: var(--color-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* h1 already has margin-bottom; avoid double gap */
.legal-page__title + .legal-part-title {
  margin-top: 0;
}

.legal-part-title--major {
  margin-top: var(--space-section);
  margin-bottom: 24px;
}

.legal-block + .legal-block {
  margin-top: 30px;
}

.legal-heading {
  margin: 0 0 0;
  font-family: var(--font-sans);
  font-size: var(--fs-job-meta);
  font-weight: 500;
  font-synthesis: none;
  line-height: var(--lh-job-meta);
  letter-spacing: var(--track-body);
  color: var(--color-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.legal-text {
  margin: 0;
  margin-top: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-job-meta);
  font-weight: 400;
  font-synthesis: none;
  line-height: var(--lh-job-meta);
  letter-spacing: var(--track-body);
  color: var(--color-muted);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.legal-text--prose {
  max-width: 100%;
}

.legal-text a {
  color: var(--color-muted);
  text-decoration: underline;
  text-decoration-skip-ink: none;
}

.legal-text a:hover {
  color: var(--color-text);
}

.legal-text a:focus-visible {
  outline: 2px solid var(--color-text);
  outline-offset: 2px;
}

.legal-label {
  display: inline;
  color: var(--color-muted);
}

.legal-text--contact-line {
  display: flex;
  flex-wrap: nowrap;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}

.legal-text--contact-line .legal-label {
  flex-shrink: 0;
}

.legal-text--contact-line a {
  white-space: nowrap;
}

.legal-contact .legal-text + .legal-text {
  margin-top: 0;
}

/* ——— Experience — semantic <ol> (gleiche Textbreite wie Intro: --max-text) ——— */

.experience-timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
  max-width: min(var(--max-text), 100%);
}

.timeline-item {
  position: relative;
  margin: 0;
}

.experience-item {
  margin: 0;
}

.experience-item--before {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
}

.job-title {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-job-title);
  font-weight: 400;
  font-synthesis: none;
  line-height: var(--lh-job-title);
  letter-spacing: var(--track-body);
}

.job-title-arrow {
  font-family: inherit;
  font-weight: inherit;
}

.job-meta {
  margin: 0;
  padding: 8px 0;
  font-size: var(--fs-job-meta);
  font-weight: 400;
  line-height: var(--lh-job-meta);
  letter-spacing: var(--track-body);
  color: var(--color-muted);
}

.job-meta-strong {
  font-weight: 500;
  color: var(--color-text);
}

.job-body {
  margin: 0;
  font-size: var(--fs-prose);
  font-weight: 400;
  font-synthesis: none;
  line-height: var(--lh-prose);
  letter-spacing: var(--track-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.job-before {
  margin: 0;
  font-size: var(--fs-prose);
  font-weight: 400;
  font-synthesis: none;
  line-height: var(--lh-prose);
  letter-spacing: var(--track-body);
  color: var(--color-muted);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.divider {
  display: block;
  border: none;
  height: 1px;
  margin: var(--rhythm-divider) 0;
  background: var(--color-divider);
}

.divider--flush {
  margin-top: var(--rhythm-divider);
  margin-bottom: 0;
}

/* ——— Prose (16px / 24px) ——— */

.prose {
  margin: 0;
  font-size: var(--fs-prose);
  font-weight: 400;
  font-synthesis: none;
  line-height: var(--lh-prose);
  letter-spacing: var(--track-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.talks-intro {
  margin-bottom: var(--rhythm-divider);
}

.prose + .meta-list {
  margin-top: var(--rhythm-divider);
}

.meta-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.meta-list-item {
  font-size: var(--fs-job-meta);
  font-weight: 400;
  line-height: var(--lh-job-meta);
  letter-spacing: var(--track-body);
  color: var(--color-muted);
}

.meta-list-item + .meta-list-item {
  margin-top: var(--rhythm-divider);
  padding-top: var(--rhythm-divider);
  border-top: 1px solid var(--color-divider);
}

.meta-list-item p {
  margin: 0;
}

.meta-list-strong {
  font-weight: 500;
  color: var(--color-text);
}

.meta-list-dark {
  color: var(--color-text);
}

.meta-list--talks .meta-list-item {
  position: relative;
  color: var(--color-muted);
}

/* ——— Listening / Reading ——— */

.media-row {
  display: flex;
  align-items: center;
  gap: var(--space-media-gap);
}

.media-row-body {
  flex: 1;
  min-width: 0;
  letter-spacing: var(--track-body);
  color: var(--color-muted);
}

/* Same stack as .meta-list-item: 18/24; titles use .meta-list-strong like Talks */
.media-row-body,
.media-row-body p {
  font-size: var(--fs-job-meta);
  font-weight: 400;
  line-height: var(--lh-job-meta);
}

.media-row-body p {
  margin: 0;
}

.media-row-body .meta-list-strong {
  font-size: var(--fs-job-meta);
  line-height: var(--lh-job-meta);
  font-weight: 500;
  color: var(--color-text);
}

.chip {
  flex-shrink: 0;
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  height: var(--chip-height);
  min-height: var(--chip-height);
  padding: var(--chip-pad-y) var(--chip-pad-x);
  font-family: var(--font-sans);
  font-size: var(--chip-font-size);
  font-weight: var(--chip-font-weight);
  line-height: var(--chip-line-height);
  letter-spacing: var(--track-chip);
  color: var(--color-text);
  background: var(--color-surface);
  border-radius: var(--radius-chip);
  white-space: nowrap;
}

.media-row + .divider--flush {
  margin-top: var(--rhythm-divider);
}

.media-row--book {
  margin-top: var(--rhythm-divider);
}

.media-row--book:first-of-type {
  margin-top: 0;
}

.media-thumb-link {
  flex-shrink: 0;
  line-height: 0;
  color: inherit;
  text-decoration: none;
  border-radius: var(--radius-thumb);
}

.media-thumb-link:focus-visible {
  outline: 2px solid var(--color-text);
  outline-offset: 2px;
}

.media-thumb {
  flex-shrink: 0;
  object-fit: cover;
  border-radius: var(--radius-thumb);
}

.media-thumb--album {
  width: 64px;
  height: 64px;
}

.media-thumb--book {
  width: 64px;
  height: 85px;
}

/* ——— Footer: full-width bar, 24px inset; left cluster + credit right ——— */

.site-footer {
  margin-top: var(--space-section);
  padding-bottom: 32px;
  padding-inline: 24px;
  box-sizing: border-box;
}

.footer-bar {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  width: 100%;
  max-width: none;
  min-width: 0;
}

.footer-bar__left {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px;
  min-width: 0;
  flex: 1 1 auto;
  font-size: 14px;
  line-height: 20px;
}

.footer-bar__brand {
  display: flex;
  align-items: center;
  gap: 8px;
}

.footer-bar__legal {
  display: flex;
  align-items: center;
  gap: 24px;
  margin: 0;
  line-height: inherit;
}

.footer-bar__icon {
  flex-shrink: 0;
  display: block;
  width: 16px;
  height: 16px;
}

.footer-bar__meta {
  margin: 0;
  font-size: inherit;
  font-weight: 400;
  line-height: inherit;
  letter-spacing: var(--track-body);
  color: var(--color-muted);
}

.footer-bar__link {
  font-size: inherit;
  font-weight: 400;
  line-height: inherit;
  letter-spacing: var(--track-body);
  color: var(--color-muted);
  text-decoration: none !important;
  text-decoration-line: none !important;
  border-bottom: none;
  background-image: none;
}

.footer-bar__link:link,
.footer-bar__link:visited,
.footer-bar__link:hover,
.footer-bar__link:active,
.footer-bar__link:focus {
  text-decoration: none !important;
  text-decoration-line: none !important;
}

.footer-bar__credit {
  margin: 0;
  flex: 0 1 auto;
  min-width: 0;
  max-width: min(36rem, 100%);
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: var(--track-body);
  color: var(--color-muted);
  text-align: right;
}

.site-footer p.footer-bar__credit a[href] {
  font-size: inherit;
  color: inherit;
  text-decoration: none !important;
  text-decoration-line: none !important;
  -webkit-text-decoration: none;
  -webkit-text-decoration-line: none;
  border-bottom: none !important;
  background-image: none;
  box-shadow: none;
}

.site-footer p.footer-bar__credit a[href]:link,
.site-footer p.footer-bar__credit a[href]:visited,
.site-footer p.footer-bar__credit a[href]:hover,
.site-footer p.footer-bar__credit a[href]:active,
.site-footer p.footer-bar__credit a[href]:focus,
.site-footer p.footer-bar__credit a[href]:focus-visible {
  text-decoration: none !important;
  text-decoration-line: none !important;
  -webkit-text-decoration-line: none;
}

.footer-bar__credit a:focus-visible,
.footer-bar__link:focus-visible {
  outline: 2px solid var(--color-text);
  outline-offset: 2px;
}

@media (max-width: 480px) {
  .intro-top {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-media-gap);
  }

  .media-row {
    flex-wrap: wrap;
  }

  .chip {
    margin-left: 0;
    width: 100%;
    margin-top: var(--space-media-gap);
  }

  .footer-bar {
    flex-wrap: wrap;
    flex-direction: column;
    align-items: flex-start;
  }

  .footer-bar__left {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    justify-items: start;
    gap: 0;
    row-gap: 0;
    column-gap: 0;
    flex: none;
    width: 100%;
  }

  .footer-bar__brand {
    margin: 0;
    padding: 0;
  }

  .footer-bar__legal {
    margin: 0;
    padding: 0;
  }

  .footer-bar__credit {
    text-align: left;
    max-width: none;
    align-self: stretch;
  }

  main .column > .section:first-child {
    margin-top: min(var(--space-section), 120px);
  }
}