/* ============================================================
   resume.css — /resume and /lebenslauf
   Builds on theme.css (tokens) and home.css (header, buttons, reveals).
   ============================================================ */

.cv-print-only { display: none }

/* ── Intro ── */
.cv-hero { padding-top: clamp(130px, 16vw, 200px); padding-bottom: clamp(56px, 7vw, 96px) }
.cv-hero h1 { margin: 0; font: 500 clamp(56px, 11vw, 168px)/.9 var(--f-display); letter-spacing: -.055em }
.cv-role { margin: 18px 0 0; font: 500 clamp(22px, 2.4vw, 34px)/1.15 var(--f-display); letter-spacing: -.025em; color: var(--accent) }
.cv-summary { margin: 22px 0 0; max-width: 58ch; color: var(--muted); font-size: clamp(16px, 1.25vw, 18px) }
.cv-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 36px }
.cv-pdf-meta { font-size: 10.5px; opacity: .65; letter-spacing: .06em }
.btn .arr-down { transition: transform .6s var(--ease) }
.btn:hover .arr-down { transform: translateY(3px) }
button.btn { border: 0; cursor: pointer; font-family: inherit }

/* ── Layout: sticky "at a glance" + main column ── */
.cv-layout { display: grid; grid-template-columns: minmax(0, 290px) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: start; padding-bottom: clamp(80px, 10vw, 140px) }
.cv-aside { position: sticky; top: 100px; padding: 24px; border-radius: 18px; background: var(--surface); box-shadow: var(--shadow) }
.cv-aside__title { margin: 0 0 18px; font-size: 11.5px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--accent) }
.cv-aside dl { margin: 0; display: grid; gap: 18px }
.cv-aside dt { font-size: 10.5px; margin-bottom: 4px }
.cv-aside dd { margin: 0; font-weight: 500; display: grid; gap: 2px }
.cv-aside dd .muted { font-weight: 400; font-size: 14px }
.cv-lang b { font-weight: 400; color: var(--muted); margin-left: 4px }
.cv-links a { width: fit-content; font-weight: 400; font-size: 14.5px; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .5s var(--ease), color .3s }
.cv-links a:hover { color: var(--accent); background-size: 100% 1px }

.cv-main { min-width: 0 }
.cv-section + .cv-section, .cv-section + .cv-grid { margin-top: clamp(72px, 9vw, 120px) }
.cv-grid > .cv-section { margin-top: 0 }
.cv-section .sec-label h2 { margin: 0; font: inherit; letter-spacing: inherit; text-transform: inherit }

/* ── Experience timeline ── */
.cv-timeline { list-style: none; margin: 0; padding: 0 }
.role { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 28px; padding-bottom: 44px }
.role:last-child { padding-bottom: 0 }
.role__when { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding-top: 6px; font-size: 11.5px; letter-spacing: .06em; color: var(--muted) }
.role__now { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 999px; background: var(--accent); color: var(--accent-ink); font-size: 10px; letter-spacing: .1em; text-transform: uppercase }
.role__body { position: relative; padding-left: 32px; border-left: 1px solid var(--rule) }
.role__body::before { content: ""; position: absolute; left: -5px; top: 10px; width: 9px; height: 9px; border-radius: 50%; background: var(--bg); box-shadow: inset 0 0 0 1.5px var(--ink); transform: scale(0); transition: transform .7s var(--ease-spring) .2s }
.role.in .role__body::before { transform: none }
.role--now .role__body::before { background: var(--accent); box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 22%, transparent) }
.role:last-child .role__body { border-left-color: transparent; background: linear-gradient(var(--rule), var(--rule)) 0 0 / 1px 24px no-repeat }
.role h3 { margin: 0; display: grid; gap: 4px }
.role__company { font: 500 clamp(22px, 2.2vw, 30px)/1.1 var(--f-display); letter-spacing: -.03em }
.role__title { font-size: 16px; font-weight: 500; color: var(--muted) }
.role__meta { margin: 10px 0 0; font-size: 11px; letter-spacing: .06em }
.role__summary { margin: 14px 0 0; max-width: 68ch; font-size: 16px; line-height: 1.55; color: var(--ink) }
.role__points strong { font-weight: 500; color: var(--ink) }
.role__points { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 10px; max-width: 70ch }
.role__points li { position: relative; padding-left: 20px; color: var(--muted); font-size: 15.5px; line-height: 1.55 }
.role__points li::before { content: ""; position: absolute; left: 0; top: .74em; width: 9px; height: 1px; background: var(--accent) }
.role__links { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 18px }
.cv-link { display: inline-flex; align-items: baseline; gap: 6px; font-size: 14px; font-weight: 500; color: var(--accent) }
.cv-link span[aria-hidden] { display: inline-block; transition: transform .5s var(--ease) }
.cv-link:hover span[aria-hidden] { transform: translateX(3px) }
.cv-link[target="_blank"]:hover span[aria-hidden] { transform: translate(2px, -2px) }

/* ── Competencies ── */
.cv-comp { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px) }
.cv-comp__group h3 { margin: 0 0 14px; font-size: 11px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--accent) }
.cv-comp__group ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px }
.cv-comp__group li { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--rule); font-size: 13.5px; line-height: 1.35; transition: border-color .3s, color .3s }
.cv-comp__group li:hover { border-color: var(--accent); color: var(--accent) }

/* ── Cards (education, publication) ── */
.cv-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px }
.cv-grid--split { gap: clamp(32px, 4vw, 56px); align-items: start }
.cv-card { padding: 22px 24px; border-radius: 16px; background: var(--surface); box-shadow: var(--shadow); transition: transform .5s var(--ease), box-shadow .5s var(--ease) }
.cv-card:hover { transform: translateY(-3px) }
.cv-card p { margin: 0 }
.cv-card .mono { font-size: 11px; letter-spacing: .06em }
.cv-card h3 { margin: 10px 0 6px; font: 500 20px/1.2 var(--f-display); letter-spacing: -.02em }
.cv-card p + p { margin-top: 4px; font-size: 14.5px }
.cv-accent { color: var(--accent) }
.cv-pub h3 { font-size: 19px; line-height: 1.25 }

.cv-certs { list-style: none; margin: 0; padding: 0 }
.cv-certs li { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--rule) }
.cv-certs li:first-child { padding-top: 0 }
.cv-certs b { display: block; font-weight: 500 }
.cv-certs .muted { font-size: 13.5px }

/* ── Closing ── */
.cv-cta { padding-top: clamp(80px, 10vw, 130px); padding-bottom: clamp(80px, 10vw, 130px); border-top: 1px solid var(--rule) }
.cv-cta h2 { margin: 0 0 clamp(36px, 4vw, 56px); font: 500 clamp(38px, 6.2vw, 104px)/.97 var(--f-display); letter-spacing: -.05em; max-width: 15ch }
.cv-cta h2 em { font-style: normal }
.cv-cta h2 em > .w > span, .cv-cta h2 em { color: var(--accent) }
.cv-cta .btn.ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--rule) }
.cv-foot { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-top: 22px; padding-bottom: calc(26px + env(safe-area-inset-bottom)); border-top: 1px solid var(--rule) }
.cv-foot a:hover { color: var(--accent) }

/* German: long compounds */
:lang(de) .cv-hero h1 { letter-spacing: -.05em }
:lang(de) .cv-cta h2 { font-size: clamp(34px, 4.8vw, 80px); max-width: 19ch }
@media (max-width: 760px) { :lang(de) .cv-cta h2 { font-size: clamp(30px, 9vw, 48px) } }

/* ── Responsive ── */
@media (max-width: 1000px) {
  .cv-layout { grid-template-columns: minmax(0, 1fr) }
  .cv-aside { position: static }
  .cv-aside dl { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .cv-grid--split { grid-template-columns: minmax(0, 1fr) }
}
@media (max-width: 760px) {
  .role { grid-template-columns: minmax(0, 1fr); gap: 10px }
  .role__when { flex-direction: row; align-items: center; padding-left: 32px }
  .cv-comp { grid-template-columns: minmax(0, 1fr) }
  .cv-grid { grid-template-columns: minmax(0, 1fr) }
  .cv-aside dl { grid-template-columns: minmax(0, 1fr) }
  .cv-actions .btn { flex: 1 1 auto; justify-content: center }
  .cv-certs li { flex-direction: column; align-items: flex-start; gap: 6px }
}

@media (prefers-reduced-motion: reduce) {
  .role__body::before { transform: none }
}

/* ═════════════════════ Print / Save as PDF — a tidy two-page A4 resume ═════════════════════
   Same content as the page, typeset for paper: no motion, no cards, no timeline
   graphics; dates sit on the company line; roles may continue onto the next
   page but a role heading never sits alone at the bottom of one. */
@media print {
  @page { size: A4; margin: 15mm 16mm 14mm }

  :root, :root[data-theme] {
    --bg: #fff; --surface: #fff; --ink: #111; --muted: #4a4a48; --faint: #8a8a86;
    --rule: #d6d6d2; --accent: #2a3cf4; --accent-ink: #fff; color-scheme: light;
  }
  html, body { background: #fff !important; color: var(--ink); font: 400 9.2pt/1.42 var(--f-body) }
  * { box-shadow: none !important; transition: none !important; animation: none !important }

  /* screen-only furniture */
  .hdr, .mnav, .wipe, .skip, .cursor, .m-progress, .cv-actions, .cv-cta, .cv-foot a,
  .cv-hero .eyebrow, .cv-aside__title, .role__links, .role__now, .cv-certs .cv-link, .cv-pub .role__links { display: none !important }
  .cv-print-only { display: inline }
  .fade, .w > span, .sec-label { opacity: 1 !important; transform: none !important }
  .sec-label::after { transform: none !important }
  .pad { padding-left: 0 !important; padding-right: 0 !important }
  a { color: inherit !important; text-decoration: none; background: none !important }

  /* header */
  .cv-hero { padding: 0; break-after: avoid }
  .cv-hero h1 { font-size: 25pt; line-height: 1; letter-spacing: -.035em }
  .cv-role { margin-top: 1.2mm; font-size: 11.5pt; letter-spacing: -.01em }
  .cv-summary { margin-top: 2.6mm; max-width: none; font-size: 9.2pt; color: var(--muted) }

  /* contact strip */
  .cv-layout { display: block; padding-bottom: 0 }
  .cv-aside { position: static; margin: 4.5mm 0 6mm; padding: 2.6mm 0; border-radius: 0; background: none;
    border-top: .6pt solid var(--rule); border-bottom: .6pt solid var(--rule) }
  .cv-aside dl { grid-template-columns: 1fr 1fr .8fr 1.6fr; gap: 5mm }
  .cv-aside dt { margin-bottom: .6mm; font-size: 6.6pt; letter-spacing: .12em }
  .cv-aside dd { font-size: 8.6pt; gap: 0 }
  .cv-aside dd .muted { font-size: 8pt }
  .cv-links a { font-size: 8.6pt }

  /* Heading ladder for paper:
     name 25pt → section 12.5pt semibold → entry 10–11pt semibold → details */
  .cv-section + .cv-section, .cv-section + .cv-grid { margin-top: 7mm }
  .cv-grid > .cv-section { margin-top: 0 }
  .sec-label, .sec-label.mono { display: block; margin-bottom: 3.2mm; padding-bottom: 1.6mm;
    font: 600 12.5pt/1.15 var(--f-display); letter-spacing: -.015em; text-transform: none; color: var(--ink); break-after: avoid }
  .sec-label::after { height: .9pt; background: var(--ink) }
  .sec-label h2 .muted { display: none }   /* web-only "01–05" numbering */

  /* experience */
  .cv-timeline { display: block }
  .role { display: block; position: relative; padding: 0 0 3.8mm; break-inside: auto }
  /* short roles stay together; only long ones may continue on the next page */
  .role:not(:has(.role__points li:nth-child(5))) { break-inside: avoid }
  .role__when { position: absolute; top: .9mm; right: 0; display: block; padding: 0; font-size: 7.4pt; letter-spacing: .08em; color: var(--muted); text-align: right }
  .role__body { padding: 0; border: 0 !important; background: none !important }
  .role__body::before { display: none }
  .role h3 { display: block; padding-right: 36mm; break-after: avoid }
  .role__company { display: inline; font-size: 11pt; font-weight: 600; letter-spacing: -.015em }
  .role__title { display: block; margin-top: .4mm; font-size: 9pt; font-weight: 500 }
  .role__meta { margin-top: .8mm; font-size: 6.8pt; letter-spacing: .08em; break-after: avoid }
  .role__summary { margin-top: 1.4mm; max-width: none; font-size: 9pt; line-height: 1.42; break-after: avoid }
  .role__points strong { font-weight: 600; color: var(--ink) }
  .role__points { margin-top: 1.5mm; gap: .6mm; max-width: none }
  .role__points li { padding-left: 3.4mm; font-size: 8.8pt; line-height: 1.42; color: #222; break-inside: avoid }
  .role__points li::before { top: .68em; width: 1.8mm; height: .6pt }

  /* competencies: three tidy columns, one skill per line */
  .cv-comp { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6mm; break-inside: avoid }
  .cv-comp__group h3, .cv-comp__group h3.mono { margin-bottom: 1.4mm; font: 600 9pt/1.3 var(--f-display); letter-spacing: -.005em; text-transform: none; color: var(--ink) }
  .cv-comp__group ul { display: block }
  .cv-comp__group li { display: block; padding: 0; border: 0; border-radius: 0; font-size: 8.6pt; line-height: 1.5 }

  /* education: a plain two-column list */
  .cv-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3.4mm 8mm }
  .cv-grid--split { gap: 8mm; break-inside: avoid }
  .cv-card { padding: 0; border: 0; border-radius: 0; background: none; transform: none !important; break-inside: avoid }
  .cv-card .mono { font-size: 6.8pt; letter-spacing: .1em }
  .cv-card h3 { margin: .7mm 0 .3mm; font-size: 9.8pt; font-weight: 600; letter-spacing: -.01em }
  .cv-card p + p { margin-top: .2mm; font-size: 8.4pt }

  /* certificates + publication */
  .cv-certs li { padding: 1.4mm 0; border-bottom: .6pt solid var(--rule); break-inside: avoid }
  .cv-certs li:first-child { padding-top: 0 }
  .cv-certs b { font-size: 9.4pt; font-weight: 600 }
  .cv-certs .muted { font-size: 8pt }
  .cv-pub h3 { font-size: 9.6pt; font-weight: 600; line-height: 1.3 }

  /* footer line */
  .cv-foot { margin-top: 7mm; padding: 2mm 0 0; border-top: .6pt solid var(--rule); font-size: 6.6pt }
}