/* ---------- Tokens ---------- */
:root {
  --bg: #f6f4ef;
  --surface: #ffffff;
  --text: #172033;
  --muted: #586172;
  --line: #ddd8cc;
  --accent: #22395a;
  --accent-strong: #1a2c47;
  --accent-ink: #ffffff;
  --accent-soft: #e5eaf1;
  --highlight: #a85a12;
  --hero-bg: #22395a;
  --hero-text: #ffffff;
  --hero-muted: #c3cfdf;
  --shadow: 0 1px 2px rgb(23 32 51 / 6%), 0 8px 24px rgb(23 32 51 / 8%);

  --font-display: "Iowan Old Style", Charter, "Bitstream Charter", Cambria, Georgia, serif;
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --text-hero: clamp(2.3rem, 1.5rem + 3.6vw, 4rem);
  --text-h2: clamp(1.6rem, 1.3rem + 1.2vw, 2.2rem);
  --space-section: clamp(3rem, 2rem + 4vw, 5.5rem);
  --gutter: 16px;
  --content: 880px;
  --radius-s: 6px;
  --radius-pill: 999px;
  --duration: 160ms;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0e141e;
    --surface: #161f2d;
    --text: #e7ebf1;
    --muted: #9ba6b6;
    --line: #283447;
    --accent: #a9c1e4;
    --accent-strong: #c7d7ee;
    --accent-ink: #0e141e;
    --accent-soft: #1d2a3e;
    --highlight: #e8a95e;
    --hero-bg: #172a45;
    --hero-muted: #a9b9cf;
    --shadow: 0 1px 2px rgb(0 0 0 / 30%), 0 8px 24px rgb(0 0 0 / 25%);
  }
}

:root[data-theme="dark"] {
  --bg: #0e141e;
  --surface: #161f2d;
  --text: #e7ebf1;
  --muted: #9ba6b6;
  --line: #283447;
  --accent: #a9c1e4;
  --accent-strong: #c7d7ee;
  --accent-ink: #0e141e;
  --accent-soft: #1d2a3e;
  --highlight: #e8a95e;
  --hero-bg: #172a45;
  --hero-muted: #a9b9cf;
  --shadow: 0 1px 2px rgb(0 0 0 / 30%), 0 8px 24px rgb(0 0 0 / 25%);
}

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

html { scroll-behavior: smooth; scroll-padding-top: 72px; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 1rem/1.6 var(--font-body);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { line-height: 1.15; margin: 0; }
h2 { font: 600 var(--text-h2)/1.1 var(--font-display); letter-spacing: -0.01em; margin-bottom: 1.5rem; }
h3 { font-size: 1.05rem; font-weight: 650; }
p { margin: 0; }
a { color: var(--accent); text-underline-offset: 3px; }

:focus-visible { outline: 3px solid var(--highlight); outline-offset: 3px; border-radius: 4px; }
/* Ocker auf Marineblau erreicht keine 3:1 – im Hero deshalb die Textfarbe als Fokusrahmen. */
.hero :focus-visible { outline-color: var(--hero-text); }
[tabindex="-1"]:focus { outline: none; }

.notice {
  margin: 0; padding: 0.75rem var(--gutter); text-align: center;
  background: var(--accent-soft); color: var(--text); border-bottom: 1px solid var(--line);
}
.notice[hidden] { display: none; }

.skip-link {
  position: absolute; left: var(--gutter); top: -100px; z-index: 20;
  background: var(--accent); color: var(--accent-ink); padding: 0.5rem 1rem; border-radius: var(--radius-s);
}
.skip-link:focus { top: 0.75rem; }

/* ---------- Kopfleiste ---------- */
.topbar {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0.6rem max(var(--gutter), calc((100% - var(--content)) / 2));
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.topbar nav { display: flex; gap: 1.25rem; overflow-x: auto; scrollbar-width: none; }
.topbar nav a {
  color: var(--muted); text-decoration: none; font-size: 0.92rem; font-weight: 550; white-space: nowrap;
  padding: 0.35rem 0; border-bottom: 2px solid transparent;
  transition: color var(--duration) var(--ease), border-color var(--duration) var(--ease);
}
.topbar nav a:hover { color: var(--text); border-color: var(--highlight); }
.controls { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; }

.lang-switch { display: flex; border: 1px solid var(--line); border-radius: var(--radius-pill); padding: 2px; }
.lang-switch button, .icon-button {
  font: 600 0.8rem/1 var(--font-body); color: var(--muted); background: none; border: 0; cursor: pointer;
  border-radius: var(--radius-pill); padding: 0.4rem 0.6rem; min-height: 32px;
}
.lang-switch button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); }
.icon-button { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 1px solid var(--line); }
.icon-button:hover, .lang-switch button:hover:not([aria-pressed="true"]) { color: var(--text); }

/* ---------- Hero: diagonale Fläche wie im PDF-Lebenslauf ---------- */
.hero {
  position: relative;
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2rem;
  padding: clamp(2.5rem, 2rem + 4vw, 5rem) max(var(--gutter), calc((100% - var(--content)) / 2)) clamp(3.5rem, 3rem + 4vw, 6rem);
  background: var(--hero-bg); color: var(--hero-text);
  clip-path: polygon(0 0, 100% 0, 100% 82%, 0 100%);
}
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(115deg, transparent 55%, rgb(255 255 255 / 6%) 55%);
}
.hero-text { grid-column: 1; grid-row: 1; }
.photo {
  grid-column: 2; grid-row: 1;
  width: clamp(140px, 100px + 12vw, 220px); height: auto; aspect-ratio: 1; border-radius: 50%; object-fit: cover;
  border: 4px solid var(--hero-text); box-shadow: 0 12px 40px rgb(0 0 0 / 30%);
}
.eyebrow { color: var(--hero-muted); font-size: 0.82rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.hero h1 { font: 600 var(--text-hero)/1.02 var(--font-display); letter-spacing: -0.02em; margin: 0.4rem 0 0.6rem; }
.role { font-size: 1.15rem; font-weight: 600; }
.tagline { color: var(--hero-muted); max-width: 46ch; margin-top: 0.6rem; }

.actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.5rem; }
.btn {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 1.1rem;
  font: 600 0.95rem/1 var(--font-body); text-decoration: none; cursor: pointer;
  border-radius: var(--radius-pill); border: 1.5px solid currentColor; color: inherit; background: transparent;
  transition: transform var(--duration) var(--ease), background-color var(--duration) var(--ease);
}
.btn:hover { transform: translateY(-1px); background: rgb(255 255 255 / 10%); }
.btn:active { transform: translateY(0); }
.btn.primary { background: var(--hero-text); color: var(--hero-bg); border-color: var(--hero-text); }
.btn.primary:hover { background: var(--hero-muted); border-color: var(--hero-muted); }

.links { list-style: none; display: flex; flex-wrap: wrap; gap: 1.1rem; padding: 0; margin: 1.1rem 0 0; }
.links a { color: var(--hero-text); font-size: 0.92rem; font-weight: 550; }
.links a:hover { color: var(--hero-muted); }

/* ---------- Abschnitte ---------- */
main > .section, .split, .noscript { width: min(100% - 2 * var(--gutter), var(--content)); margin-inline: auto; }
.section { padding-top: var(--space-section); }
.lead { font-size: clamp(1.05rem, 1rem + 0.3vw, 1.2rem); max-width: 62ch; }
.hint { color: var(--muted); font-size: 0.92rem; margin: -0.75rem 0 1.25rem; }
.noscript { padding: 1rem; margin-top: 1rem; background: var(--surface); border-radius: var(--radius-s); }

.highlights {
  list-style: none; padding: 0; margin: 2rem 0 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  border-top: 1px solid var(--line);
}
.highlights[hidden] { display: none; }
.highlights li { padding: 1.25rem 1.25rem 0 0; display: grid; gap: 0.35rem; align-content: start; }
.highlights li + li { padding-left: 1.25rem; border-left: 1px solid var(--line); }
.highlight-value { font: 600 2.1rem/1 var(--font-display); color: var(--highlight); }
.highlight-label { color: var(--muted); font-size: 0.92rem; }

/* ---------- Zeitleiste ---------- */
.timeline { list-style: none; margin: 0; padding: 0 0 0 1.5rem; border-left: 2px solid var(--line); }
.entry { position: relative; padding-bottom: 2.25rem; }
.entry:last-child { padding-bottom: 0; }
.entry::before {
  content: ""; position: absolute; left: calc(-1.5rem - 7px); top: 0.3rem;
  width: 12px; height: 12px; border-radius: 50%; background: var(--bg); border: 2px solid var(--accent);
}
.entry.is-current::before { background: var(--highlight); border-color: var(--highlight); box-shadow: 0 0 0 4px color-mix(in srgb, var(--highlight) 25%, transparent); }
.entry-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 0.5rem 1.5rem; flex-wrap: wrap; }
.org { color: var(--muted); font-weight: 550; }
.entry-link { margin-left: 0.6rem; font-weight: 500; font-size: 0.9rem; }
.entry-title { display: flex; align-items: center; gap: 0.9rem; min-width: 0; }
/* Logos sind für hellen Grund gemacht – die Kachel bleibt auch im Dunkelmodus weiß. */
.entry-logo {
  flex-shrink: 0; width: 72px; height: 42px; object-fit: contain;
  background: #ffffff; border: 1px solid var(--line); border-radius: 8px;
}

/* Projekt-Screenshots */
.gallery { list-style: none; display: flex; flex-wrap: wrap; gap: 0.75rem; padding: 0; margin: 1rem 0 0; }
.gallery li { width: 128px; }
.gallery-item {
  display: block; width: 100%; aspect-ratio: 600 / 909; padding: 0; overflow: hidden; cursor: zoom-in;
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow);
  transition: transform var(--duration) var(--ease), border-color var(--duration) var(--ease);
}
.gallery-item:hover { transform: translateY(-3px); border-color: var(--accent); }
.gallery-item img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }

.lightbox { padding: 0; border: 0; background: transparent; width: min(92vw, 460px); max-height: 94vh; overflow: visible; }
.lightbox::backdrop { background: rgb(8 12 20 / 82%); }
.lightbox figure { margin: 0; }
.lightbox img { display: block; width: 100%; height: auto; max-height: 82vh; object-fit: contain; border-radius: 18px; background: #fff; }
.lightbox figcaption { margin-top: 0.7rem; color: #fff; text-align: center; font-size: 0.92rem; }
.lightbox-close {
  position: absolute; top: -2.75rem; right: 0; min-height: 36px; padding: 0 0.9rem; cursor: pointer;
  font: 600 0.88rem/1 var(--font-body); color: #fff; background: rgb(255 255 255 / 14%);
  border: 1px solid rgb(255 255 255 / 35%); border-radius: var(--radius-pill);
}
.lightbox-close:hover { background: rgb(255 255 255 / 24%); }
.empty-hint { color: var(--muted); font-style: italic; padding-bottom: 0.5rem; }
.period { display: grid; justify-items: end; font-size: 0.88rem; font-variant-numeric: tabular-nums; font-weight: 600; color: var(--accent); }
.duration { color: var(--muted); font-weight: 450; }
.entry-items { margin: 0.8rem 0 0; padding-left: 1.1rem; display: grid; gap: 0.55rem; }
.entry-items li::marker { color: var(--highlight); }
.entry-items strong { font-weight: 650; }
.entry-items .result { display: block; color: var(--highlight); font-weight: 600; font-size: 0.95rem; }
.entry-items .detail { display: block; color: var(--muted); font-size: 0.95rem; }
.entry-items strong + .detail { margin-top: 0.1rem; }

.filter-status {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem;
  margin: -0.5rem 0 1.5rem; padding: 0.6rem 0.9rem; background: var(--accent-soft); border-radius: var(--radius-s);
}
.filter-status[hidden] { display: none; }
.link-button { margin-left: auto; background: none; border: 0; padding: 0.25rem; color: var(--accent); font: 600 0.9rem var(--font-body); text-decoration: underline; cursor: pointer; }

/* ---------- Fähigkeiten ---------- */
.skill-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 1.75rem 2.5rem; }
.skill-group h3 { font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.7rem; }
.chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.9rem; }
.skill-group .chips { margin-top: 0; }
.chip {
  display: inline-flex; align-items: center; gap: 0.4rem; min-height: 32px; padding: 0 0.75rem;
  font: 550 0.86rem/1 var(--font-body); color: var(--text);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-pill);
}
button.chip { cursor: pointer; transition: border-color var(--duration) var(--ease), background-color var(--duration) var(--ease), transform var(--duration) var(--ease); }
button.chip:hover { border-color: var(--accent); transform: translateY(-1px); }
button.chip[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.chip-static { color: var(--muted); background: transparent; border-style: dashed; }
.chip-count { font-size: 0.72rem; font-weight: 700; padding: 0.15rem 0.4rem; border-radius: var(--radius-pill); background: var(--accent-soft); color: var(--accent); }
button.chip[aria-pressed="true"] .chip-count { background: rgb(255 255 255 / 20%); color: inherit; }

/* ---------- Ausbildung & Sprachen ---------- */
.split { display: grid; grid-template-columns: 3fr 2fr; gap: 0 3rem; }
.split > .section { width: auto; }
.language-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 1rem; }
.language-list li { display: grid; grid-template-columns: 1fr auto; gap: 0.35rem 1rem; }
.language-name { font-weight: 650; }
.language-level { color: var(--muted); font-size: 0.9rem; }
.language-list meter { grid-column: 1 / -1; width: 100%; height: 6px; appearance: none; border: 0; border-radius: 3px; background: var(--line); }
.language-list meter::-webkit-meter-bar { background: var(--line); border: 0; border-radius: 3px; height: 6px; }
.language-list meter::-webkit-meter-optimum-value { background: var(--accent); border-radius: 3px; }
.language-list meter::-moz-meter-bar { background: var(--accent); border-radius: 3px; }

/* ---------- Fehler & Footer ---------- */
.load-error { width: min(100% - 2 * var(--gutter), var(--content)); margin: 3rem auto; display: grid; gap: 1rem; justify-items: start; }
.load-error .btn.primary { color: var(--accent-ink); background: var(--accent); border-color: var(--accent); }

.footer {
  width: min(100% - 2 * var(--gutter), var(--content)); margin: var(--space-section) auto 0;
  padding: 1.5rem 0 2.5rem; border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem 1.5rem; color: var(--muted); font-size: 0.88rem;
}
.footer a { color: var(--muted); }

/* ---------- Rechtstexte ---------- */
.legal { width: min(100% - 2 * var(--gutter), 720px); margin: 0 auto; padding: 3rem 0; }
.legal h1 { font: 600 var(--text-h2)/1.1 var(--font-display); margin-bottom: 1.5rem; }
.legal h2 { font-size: 1.15rem; font-family: var(--font-body); margin: 2rem 0 0.5rem; }
.legal p + p { margin-top: 0.75rem; }

/* ---------- Responsiv (nur Bildschirm – A4 ist schmaler als 720px und soll das Desktop-Layout behalten) ---------- */
@media screen and (max-width: 720px) {
  .hero { grid-template-columns: 1fr; clip-path: polygon(0 0, 100% 0, 100% 92%, 0 100%); }
  .photo { grid-column: 1; grid-row: 1; width: 128px; }
  .hero-text { grid-row: 2; }
  .split { grid-template-columns: 1fr; }
  .highlights li + li { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); margin-top: 1.25rem; }
  .period { justify-items: start; }
  .topbar nav { gap: 0.9rem; }
  .entry-logo { width: 56px; height: 33px; }
  .gallery li { width: calc((100% - 1.5rem) / 3); }
}

/* Auf schmalen Bildschirmen nur die Sprungziele, die weit unten liegen. */
@media screen and (max-width: 480px) {
  .topbar nav a[href="#about"], .topbar nav a[href="#projects"], .topbar nav a[href="#education"] { display: none; }
  .topbar nav a { font-size: 0.86rem; }
}

@media screen and (max-width: 360px) {
  .topbar nav a[href="#skills"] { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
}

/* ---------- Druck / „Als PDF speichern“ ---------- */
.print-only { display: none; }

/* Das PDF übernimmt das Website-Design (Marine-Diagonale, Serifen-Überschriften, Ocker-Akzente),
   nur dichter gesetzt. Seite 1 beginnt randlos mit dem Hero. */
@media print {
  @page { size: A4; margin: 12mm 0 14mm; }
  @page :first { margin-top: 0; }

  /* Muss mindestens so spezifisch sein wie die Dunkel-Regel, sonst druckt ein Dunkelmodus-System die Dunkel-Farben. */
  :root, :root:not([data-theme="light"]), :root[data-theme="dark"] {
    --bg: #ffffff; --surface: #ffffff; --text: #172033; --muted: #525b6b; --line: #dcd7cb;
    --accent: #22395a; --accent-ink: #ffffff; --accent-soft: #e5eaf1; --highlight: #a85a12;
    --hero-bg: #22395a; --hero-text: #ffffff; --hero-muted: #c3cfdf;
    --print-x: 15mm;
  }
  /* Farben auch drucken, wenn im Druckdialog "Hintergrundgrafiken" aus ist. */
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }

  body { font-size: 9pt; line-height: 1.4; background: var(--bg); }
  .topbar, .actions, .hint, .skip-link, .filter-status, .chip-count, .noscript, .notice,
  .footer p:last-child, .entry .chips { display: none !important; }
  .print-only { display: revert; }
  main > .section, .split, .footer { width: auto; margin-inline: var(--print-x); }

  /* Hero */
  .hero {
    padding: 11mm var(--print-x) 14mm; gap: 8mm;
    clip-path: polygon(0 0, 100% 0, 100% 80%, 0 100%);
  }
  .photo { width: 36mm; border-width: 3px; box-shadow: none; }
  .eyebrow { font-size: 7.5pt; }
  .hero h1 { font-size: 27pt; margin: 1mm 0 1.5mm; }
  .role { font-size: 11.5pt; }
  .tagline { font-size: 9.5pt; margin-top: 1.5mm; max-width: 110mm; }
  .links { gap: 1mm 6mm; margin-top: 4mm; font-size: 8.5pt; }
  .links a { font-size: inherit; text-decoration: none; }
  .links a[data-print]::after { content: " " attr(data-print); font-weight: 400; color: var(--hero-muted); }

  /* Abschnitte */
  .section { padding-top: 4mm; }
  h2 { font-size: 14pt; margin-bottom: 2.2mm; break-after: avoid; }
  .lead { font-size: 9.8pt; max-width: none; }
  .highlights { margin-top: 3.5mm; }
  .highlights li { padding-top: 2.5mm; }
  .highlight-value { font-size: 17pt; }
  .highlight-label { font-size: 8pt; }

  /* Zeitleiste */
  .timeline { margin-left: 2mm; padding-left: 5mm; }
  .entry { padding-bottom: 2.6mm; break-inside: avoid; }
  .entry::before { left: calc(-5mm - 7px); }
  .entry h3 { font-size: 10pt; }
  .entry-link { font-size: 8.5pt; text-decoration: none; }
  .entry-logo { width: 52px; height: 30px; }
  .gallery, .lightbox { display: none !important; }
  .entry-items { margin-top: 1.2mm; gap: 0.8mm; }
  .entry-items .result, .entry-items .detail { font-size: 8.8pt; }
  .period { font-size: 8.3pt; }

  /* Fähigkeiten: zwei Spalten wie am Desktop */
  .skill-groups { grid-template-columns: 1fr 1fr; gap: 2mm 8mm; break-inside: avoid; }
  .skill-group h3 { margin-bottom: 1.5mm; font-size: 7pt; }
  .chips { gap: 1.2mm; }
  .chip, .chip-static { min-height: 0; padding: 0.7mm 2.2mm; font-size: 7.8pt; color: var(--text); background: var(--accent-soft); border: 0; }

  .split { gap: 0 10mm; break-inside: avoid; }
  .language-list { gap: 2.5mm; }
  .language-level { font-size: 8.5pt; }
  .footer { margin-top: 1.5mm; padding: 0; border-top: 0; font-size: 7pt; }
}