/* ==========================================================================
   Design-Tokens
   Hell: kühles Mineralweiß, tiefes Schiefergrün, Signal-Petrol.
   Dunkel: Konsole bei Nacht. Status-LEDs tragen die Farbe, nicht Deko.
   ========================================================================== */
@font-face {
  font-family: 'Schibsted Grotesk';
  src: url('/fonts/schibsted-grotesk-latin-wght-normal.woff2') format('woff2-variations');
  font-weight: 400 900; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Schibsted Grotesk';
  src: url('/fonts/schibsted-grotesk-latin-ext-wght-normal.woff2') format('woff2-variations');
  font-weight: 400 900; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face { font-family: 'JetBrains Mono'; src: url('/fonts/jetbrains-mono-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url('/fonts/jetbrains-mono-latin-500-normal.woff2') format('woff2'); font-weight: 500; font-display: swap; }

:root {
  --paper:   #f3f5f2;
  --raised:  #fbfcfa;
  --ink:     #18211e;
  --muted:   #58655f;
  --line:    #d3dad5;
  --signal:  #1a6b58;
  --signal-ink: #ffffff;
  --prompt:  #1a6b58;

  --led-active: #22a565;
  --led-paused: #d69a17;
  --led-done:   #8a9691;
  --led-idea:   #5c6fd6;
  --err:        #b3261e;

  --sans: 'Schibsted Grotesk', ui-sans-serif, system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  --step--1: 0.875rem;
  --step-0:  1.0625rem;
  --step-1:  1.25rem;
  --step-2:  1.6rem;
  --step-3:  clamp(2rem, 4.5vw, 2.8rem);
  --step-hero: clamp(3.4rem, 12vw, 8.5rem);

  --wrap: 70rem;
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --radius: 6px;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #0f1513; --raised: #151d1a; --ink: #dce5e1; --muted: #8e9c96; --line: #26312d;
    --signal: #5cc6a6; --signal-ink: #0b1210; --prompt: #5cc6a6; --led-done: #6c7873; --err: #ff8a80;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #0f1513; --raised: #151d1a; --ink: #dce5e1; --muted: #8e9c96; --line: #26312d;
  --signal: #5cc6a6; --signal-ink: #0b1210; --prompt: #5cc6a6; --led-done: #6c7873; --err: #ff8a80;
  color-scheme: dark;
}

/* ---------- Basis ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 400 var(--step-0)/1.6 var(--sans);
  font-feature-settings: 'ss01';
  -webkit-font-smoothing: antialiased;
  min-height: 100vh; display: flex; flex-direction: column;
}
main { flex: 1; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--signal); text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; border-radius: 2px; }
h1, h2, h3 { line-height: 1.15; margin: 0; font-weight: 700; letter-spacing: -0.015em; }
h1 { font-size: var(--step-3); letter-spacing: -0.025em; }
h2 { font-size: var(--step-2); }
h3 { font-size: var(--step-1); }
p { margin: 0; }
.muted { color: var(--muted); }
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.skip { position: absolute; left: -999px; top: 0; background: var(--ink); color: var(--paper); padding: .6rem 1rem; z-index: 10; }
.skip:focus { left: 1rem; top: 1rem; }

/* ---------- Header ---------- */
.site-header { border-bottom: 1px solid var(--line); }
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem 2rem; flex-wrap: wrap; padding-block: 1.1rem; }
.brand { font-family: var(--mono); font-size: 0.95rem; color: var(--ink); text-decoration: none; display: inline-flex; }
.brand__name { font-weight: 500; }
.brand__path { color: var(--muted); }
.brand:hover .brand__name { color: var(--signal); }
.nav { display: flex; align-items: center; gap: 1.25rem; }
.nav ul { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; list-style: none; margin: 0; padding: 0; }
.nav a { color: var(--muted); text-decoration: none; font-weight: 500; padding-block: .25rem; border-bottom: 2px solid transparent; }
.nav a:hover { color: var(--ink); }
.nav a[aria-current] { color: var(--ink); border-bottom-color: var(--signal); }
.theme-toggle { background: none; border: 1px solid var(--line); color: var(--muted); border-radius: 50%; width: 2.1rem; height: 2.1rem; display: grid; place-items: center; cursor: pointer; }
.theme-toggle:hover { color: var(--ink); border-color: var(--muted); }

/* ---------- Hero: die eine laute Stelle ---------- */
.hero { padding-block: clamp(3.5rem, 10vw, 7.5rem) clamp(3rem, 7vw, 5rem); }
.prompt { font-family: var(--mono); font-size: clamp(.9rem, 2vw, 1.05rem); color: var(--muted); margin-bottom: 1.1rem; min-height: 1.6em; }
.prompt__user { color: var(--prompt); font-weight: 500; }
.prompt__sep { margin-right: .5ch; }
.prompt__cmd { color: var(--ink); }
.prompt--err { color: var(--err); }
.caret { display: inline-block; width: .6ch; height: 1.1em; background: var(--ink); vertical-align: text-bottom; margin-left: .15ch; animation: blink 1.1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

.hero__name {
  font-size: var(--step-hero); font-weight: 800; line-height: .92; letter-spacing: -0.045em;
  margin-left: -0.05em; /* optischer Randausgleich */
}
.hero__role { font-size: var(--step-2); font-weight: 500; color: var(--muted); margin-top: .9rem; letter-spacing: -0.01em; }
.hero__tagline { font-size: var(--step-1); max-width: 38ch; margin-top: 1.6rem; line-height: 1.45; }

.sysinfo {
  font-family: var(--mono); font-size: .92rem; margin: 2.5rem 0 0; padding: 0;
  display: grid; gap: .35rem; max-width: 36rem;
}
.sysinfo__row { display: grid; grid-template-columns: 11ch 1fr; gap: 1rem; }
.sysinfo dt { color: var(--muted); }
.sysinfo dd { margin: 0; display: flex; align-items: center; gap: .55rem; }
.sysinfo dd .led { margin-left: -1.1rem; } /* LED hängt in den Abstand, Text bleibt bündig */
.hero--portrait { display: grid; grid-template-columns: minmax(0, 1fr) minmax(14rem, 22rem); gap: 3rem; align-items: center; }
.hero__portrait img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius); border: 1px solid var(--line); filter: grayscale(.15); }

.hero__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2.5rem; }
.inline-links { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; padding: 0; margin: 1.75rem 0 0; }
.inline-links a { font-weight: 500; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .5rem; padding: .7rem 1.15rem; border-radius: var(--radius);
  border: 1px solid var(--line); background: var(--raised); color: var(--ink);
  font: 600 var(--step--1)/1 var(--sans); text-decoration: none; cursor: pointer;
}
.btn:hover { border-color: var(--ink); }
.btn--primary { background: var(--signal); border-color: var(--signal); color: var(--signal-ink); }
.btn--primary:hover { filter: brightness(1.08); border-color: var(--signal); }

/* ---------- Status-LEDs ---------- */
.led { width: .55rem; height: .55rem; border-radius: 50%; display: inline-block; flex: none; background: var(--led-done); }
.led--active { background: var(--led-active); box-shadow: 0 0 0 3px color-mix(in srgb, var(--led-active) 22%, transparent); }
.led--paused { background: var(--led-paused); }
.led--idea   { background: var(--led-idea); }
.status-label { margin-left: .5rem; }

/* ---------- Abschnitte ---------- */
.section { padding-block: 1rem 5rem; }
.section__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; }
.section__more { font-weight: 600; white-space: nowrap; }

/* ---------- Projektliste: Zeilen statt Karten ---------- */
.projects { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.project-row {
  display: grid; grid-template-columns: 9.5rem 1fr auto; gap: .5rem 2rem; align-items: baseline;
  padding-block: 1.6rem; border-bottom: 1px solid var(--line);
}
.project-row__status { font-size: var(--step--1); color: var(--muted); display: flex; align-items: center; }
.project-row__title a { color: var(--ink); text-decoration: none; }
.project-row__title a:hover { color: var(--signal); text-decoration: underline; }
.project-row__summary { color: var(--muted); margin-top: .35rem; max-width: 60ch; }
.project-row__period { font-family: var(--mono); font-size: .82rem; color: var(--muted); white-space: nowrap; }

.tags { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; padding: 0; margin: .8rem 0 0; }
.tags a, .tags span {
  display: inline-block; font-size: .8rem; font-weight: 500; padding: .18rem .55rem; border-radius: 3px;
  border: 1px solid var(--line); color: var(--muted); text-decoration: none;
}
.tags a:hover { color: var(--ink); border-color: var(--muted); }

/* ---------- Unterseiten ---------- */
.page { padding-block: clamp(2.5rem, 7vw, 4.5rem) 5rem; }
.page__head { margin-bottom: 2.5rem; max-width: 46rem; }
.lead { font-size: var(--step-1); color: var(--muted); margin-top: .9rem; line-height: 1.5; }
.empty { color: var(--muted); padding: 2rem 0; border-top: 1px solid var(--line); }
.crumbs { font-family: var(--mono); font-size: .85rem; margin-bottom: 1.25rem; }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a::before { content: '../'; }
.crumbs a:hover { color: var(--signal); }

.filter { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 2rem; }
.filter a { font-size: var(--step--1); font-weight: 500; padding: .35rem .8rem; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); text-decoration: none; }
.filter a:hover { color: var(--ink); border-color: var(--muted); }
.filter a[aria-current] { background: var(--ink); color: var(--paper); border-color: var(--ink); }

.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 1.25rem 2rem; margin: 0 0 2rem; padding: 1.25rem 0; border-block: 1px solid var(--line); }
.facts dt { font-size: var(--step--1); color: var(--muted); margin-bottom: .25rem; }
.facts dd { margin: 0; display: flex; align-items: center; font-weight: 500; }
.facts .tags { margin: 0; }
.link-buttons { list-style: none; display: flex; flex-wrap: wrap; gap: .6rem; padding: 0; margin: 0 0 2.5rem; }
.cover { margin: 0 0 2.5rem; }
.cover img { border-radius: var(--radius); border: 1px solid var(--line); width: 100%; }

.prose { max-width: 68ch; }
.prose > * + * { margin-top: 1.1em; }
.prose h2 { font-size: var(--step-2); margin-top: 2em; }
.prose h3 { font-size: var(--step-1); margin-top: 1.6em; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li + li { margin-top: .35em; }
.prose code { font-family: var(--mono); font-size: .88em; background: var(--raised); border: 1px solid var(--line); border-radius: 3px; padding: .05em .35em; }
.prose pre { font-family: var(--mono); font-size: .88rem; background: var(--raised); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.2rem; overflow-x: auto; }
.prose pre code { background: none; border: 0; padding: 0; }
.prose blockquote { margin-inline: 0; padding-left: 1.2rem; border-left: 3px solid var(--signal); color: var(--muted); }
.prose img { border-radius: var(--radius); }
.prose--small { font-size: .98rem; color: var(--muted); }
.prose--small > * + * { margin-top: .7em; }

.pager { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 4rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.pager a { display: grid; gap: .2rem; font-weight: 600; text-decoration: none; color: var(--ink); }
.pager a:hover { color: var(--signal); }
.pager .muted { font-size: var(--step--1); font-weight: 400; }
.pager__next { text-align: right; }

/* ---------- Lebenslauf ---------- */
.cv-section + .cv-section { margin-top: 4rem; }
.cv-section > h2 { margin-bottom: 1.25rem; }
.timeline { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.timeline__item { display: grid; grid-template-columns: 12rem 1fr; gap: .5rem 2rem; padding-block: 1.6rem; border-bottom: 1px solid var(--line); }
.timeline__when { font-family: var(--mono); font-size: .85rem; color: var(--muted); padding-top: .2rem; }
.timeline__where { color: var(--muted); margin-top: .2rem; font-weight: 500; }
.timeline__body .prose { margin-top: .75rem; }

.skills { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 2rem 3rem; }
.skills__group h3 { font-size: var(--step-0); margin-bottom: .6rem; }
.skills__group ul { list-style: none; margin: 0; padding: 0; }
.skill { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding-block: .45rem; border-bottom: 1px dashed var(--line); }
.meter { display: inline-flex; gap: 3px; }
.meter span { width: .9rem; height: .4rem; border-radius: 1px; background: var(--line); }
.meter span.on { background: var(--signal); }

.certs { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.certs li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .25rem 1rem; padding-block: .9rem; border-bottom: 1px solid var(--line); }
.certs__title { font-weight: 600; }
.print-hint { margin-top: 3.5rem; }

/* ---------- Kontakt & Formulare ---------- */
.contact__grid { display: grid; grid-template-columns: minmax(0, 36rem) minmax(12rem, 1fr); gap: 3rem 5rem; align-items: start; }
.contact__aside h2 { font-size: var(--step-0); margin-bottom: .75rem; }
.contact__aside ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; }
.contact__aside a { font-weight: 500; }
.form { display: grid; gap: 1.25rem; }
.field { display: grid; gap: .4rem; }
.field label { font-weight: 600; font-size: .95rem; }
.field__hint { font-size: var(--step--1); color: var(--muted); }
.field input[type="text"], .field input[type="email"], .field textarea {
  width: 100%; font: inherit; color: var(--ink); background: var(--raised);
  border: 1px solid var(--line); border-radius: var(--radius); padding: .7rem .85rem;
}
.field input:focus, .field textarea:focus { outline: none; border-color: var(--signal); box-shadow: 0 0 0 3px color-mix(in srgb, var(--signal) 22%, transparent); }
.field textarea { resize: vertical; min-height: 9rem; }
.field--check { grid-template-columns: auto 1fr; align-items: start; gap: .7rem; }
.field--check input { width: 1.15rem; height: 1.15rem; margin-top: .2rem; accent-color: var(--signal); }
.field--check label { font-weight: 400; font-size: .95rem; color: var(--muted); }
.form .btn { justify-self: start; padding: .85rem 1.4rem; font-size: var(--step-0); }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.notice { border-radius: var(--radius); padding: 1rem 1.2rem; margin-bottom: 1.5rem; border: 1px solid; }
.notice ul { margin: .5rem 0 0; padding-left: 1.2rem; }
.notice--ok { border-color: var(--led-active); background: color-mix(in srgb, var(--led-active) 10%, var(--paper)); }
.notice--err { border-color: var(--err); background: color-mix(in srgb, var(--err) 8%, var(--paper)); }

/* ---------- 404 ---------- */
.notfound .prompt { margin-bottom: .3rem; }
.notfound h1 { margin-top: 2rem; }

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--line); margin-top: 2rem; font-size: var(--step--1); }
.site-footer__inner { display: grid; grid-template-columns: 1fr auto auto; gap: 1.5rem 3rem; padding-block: 2.25rem 2.5rem; align-items: start; }
.site-footer__name { font-weight: 700; font-size: var(--step-0); }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.site-footer a { color: var(--muted); text-decoration: none; }
.site-footer a:hover { color: var(--ink); text-decoration: underline; }

/* ---------- Mobil ---------- */
@media (max-width: 760px) {
  .project-row { grid-template-columns: 1fr; gap: .4rem; }
  .project-row__period { order: -1; }
  .project-row__status { order: -2; }
  .timeline__item { grid-template-columns: 1fr; gap: .3rem; }
  .contact__grid { grid-template-columns: 1fr; }
  .site-footer__inner { grid-template-columns: 1fr; }
  .sysinfo__row { grid-template-columns: 10ch 1fr; }
  .hero--portrait { grid-template-columns: 1fr; }
  .hero__portrait { order: -1; max-width: 12rem; }
}

/* ---------- Bewegung reduzieren ---------- */
@media (prefers-reduced-motion: reduce) {
  .caret { animation: none; }
  * { scroll-behavior: auto !important; }
}

/* ---------- Druck: Lebenslauf als PDF ---------- */
@media print {
  :root { --paper: #fff; --ink: #000; --muted: #444; --line: #ccc; --signal: #000; }
  .site-header, .site-footer, .print-hint, .skip, .theme-toggle { display: none !important; }
  body { font-size: 11pt; }
  .page { padding: 0; }
  a { color: inherit; text-decoration: none; }
  .timeline__item, .skill, .certs li { break-inside: avoid; }
}

/* ==========================================================================
   Hintergrund: Leiterbahnen oder eigenes Bild
   Das Muster ist eine Maske, die Farbe kommt aus --signal. Dadurch passt es
   automatisch zu Hell und Dunkel. Zur Textseite hin wird es ausgeblendet.
   ========================================================================== */
.bg-subtle { --bg-o: .13; --bg-veil: 82%; }
.bg-medium { --bg-o: .24; --bg-veil: 62%; }
.bg-strong { --bg-o: .4;  --bg-veil: 38%; }

.hero-band { position: relative; isolation: isolate; overflow: hidden; }
.backdrop { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.backdrop--page { position: fixed; }
.bg-none .backdrop { display: none; }

/* Leiterbahnen */
.bg-circuit .backdrop {
  --fade: linear-gradient(to right, transparent 18%, #000 72%);
  background-color: var(--signal);
  opacity: var(--bg-o);
  -webkit-mask-image: url('/img/circuit.svg'), var(--fade);
          mask-image: url('/img/circuit.svg'), var(--fade);
  -webkit-mask-size: 640px 640px, 100% 100%;
          mask-size: 640px 640px, 100% 100%;
  -webkit-mask-repeat: repeat, no-repeat;
          mask-repeat: repeat, no-repeat;
  -webkit-mask-composite: source-in;
          mask-composite: intersect;
}
.bg-circuit .backdrop--page { opacity: calc(var(--bg-o) * .55); }

/* Eigenes Bild (URL kommt aus /theme.css) */
.bg-image .backdrop { background-size: cover; background-position: center; }
.bg-image .backdrop::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to right,
    var(--paper) 22%,
    color-mix(in srgb, var(--paper) var(--bg-veil), transparent) 70%);
}
.bg-image .backdrop--page::after { background: color-mix(in srgb, var(--paper) 90%, transparent); }

/* Weicher Übergang vom Kopfbereich in den Rest der Seite */
.hero-band::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 6rem; z-index: -1;
  background: linear-gradient(transparent, var(--paper));
}
.bg-none .hero-band::after { display: none; }

@media (max-width: 760px) {
  /* Auf dem Handy steht Text über die ganze Breite: Hintergrund deutlich zurücknehmen */
  .bg-circuit .backdrop { --fade: linear-gradient(to bottom, #000, transparent 85%); opacity: calc(var(--bg-o) * .6); }
  .bg-image .backdrop::after { background: color-mix(in srgb, var(--paper) 84%, transparent); }
}
@media print { .backdrop, .hero-band::after { display: none !important; } }

/* ==========================================================================
   Blog
   ========================================================================== */
.posts { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.post-row { display: grid; grid-template-columns: 1fr; gap: 1.5rem; padding-block: 1.6rem; border-bottom: 1px solid var(--line); }
.post-row.has-image { grid-template-columns: 14rem 1fr; align-items: start; }
.post-row__img img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--radius); border: 1px solid var(--line); }
.post-row__meta { font-family: var(--mono); font-size: .82rem; color: var(--muted); display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; }
.post-row__project a { color: var(--muted); }
.post-row__project a:hover { color: var(--signal); }
.post-row__title { margin-top: .35rem; }
.post-row__title a { color: var(--ink); text-decoration: none; }
.post-row__title a:hover { color: var(--signal); text-decoration: underline; }
.post-row__excerpt { color: var(--muted); margin-top: .4rem; max-width: 62ch; }

.post__head { max-width: 46rem; }
.post__meta { font-family: var(--mono); font-size: .85rem; color: var(--muted); display: flex; flex-wrap: wrap; gap: .3rem 1.4rem; margin-bottom: 1rem; }
.post__meta a { color: var(--muted); }
.post .prose { font-size: 1.08rem; }
.post__tags { margin-top: 2.5rem; }

.pagination { display: grid; grid-template-columns: 1fr auto 1fr; gap: 1rem; align-items: center; margin-top: 2.5rem; font-weight: 600; }
.pagination > :last-child { text-align: right; }
.pagination .muted { font-weight: 400; font-size: var(--step--1); }

.section-inline { margin-top: 4rem; }
.section-inline > h2 { margin-bottom: 1.25rem; }
.home-text { max-width: 46rem; margin-inline: 0; }
.home-text.wrap { margin-inline: auto; max-width: var(--wrap); }

/* ---------- Bilder im Text ---------- */
.prose picture, .prose > img { display: block; margin-block: 1.6em; }
.prose picture img { border-radius: var(--radius); border: 1px solid var(--line); }
.md-figure { margin: 1.8em 0; }
.md-figure picture { margin: 0; }
.md-figure figcaption { font-size: var(--step--1); color: var(--muted); margin-top: .5rem; }
.cover picture img, .cover img { width: 100%; border-radius: var(--radius); border: 1px solid var(--line); }

/* ---------- Galerie ---------- */
.gallery-section { margin-top: 3.5rem; }
.gallery-section__title { margin-bottom: 1.1rem; }
.gallery { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); gap: 1rem; }
.gallery a { display: block; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); cursor: zoom-in; }
.gallery img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .25s ease; }
.gallery a:hover img { transform: scale(1.03); }
.gallery__cap { font-size: var(--step--1); color: var(--muted); margin-top: .45rem; }

.lightbox { position: fixed; inset: 0; z-index: 50; background: color-mix(in srgb, #050807 92%, transparent); display: grid; grid-template-columns: 4rem 1fr 4rem; align-items: center; padding: 1rem; }
.lightbox[hidden] { display: none; }
.lightbox figure { margin: 0; display: grid; justify-items: center; gap: .75rem; max-height: 100%; }
.lightbox img { max-width: 100%; max-height: calc(100vh - 6rem); object-fit: contain; border-radius: 4px; }
.lightbox figcaption { color: #dce5e1; font-size: var(--step--1); text-align: center; }
.lightbox button { background: none; border: 1px solid #3a4743; color: #dce5e1; border-radius: 50%; width: 2.8rem; height: 2.8rem; font-size: 1.4rem; cursor: pointer; justify-self: center; }
.lightbox button:hover { border-color: #dce5e1; }
.lightbox__close { position: absolute; top: 1rem; right: 1rem; font-size: 1rem !important; }

/* ---------- Eigene Felder ---------- */
.facts--custom { margin-top: 2.5rem; }
.facts--compact { margin: 1rem 0 0; padding: .75rem 0 0; border-bottom: 0; font-size: .95rem; }
.facts__img img { max-width: 14rem; border-radius: var(--radius); }
.facts__links { list-style: none; margin: 0; padding: 0; display: grid; gap: .2rem; }
.pre { white-space: pre-line; font-weight: 400; }
.custom-block { margin-top: 3rem; }
.custom-block > h2 { margin-bottom: 1rem; }

/* ---------- Vorschau-Hinweis für Admins ---------- */
.preview-bar { background: var(--led-paused); color: #1b1300; padding: .55rem var(--gutter); display: flex; justify-content: space-between; gap: 1rem; font-size: var(--step--1); position: sticky; top: 0; z-index: 20; }
.preview-bar a { color: inherit; font-weight: 700; }

@media (max-width: 760px) {
  .post-row.has-image { grid-template-columns: 1fr; }
  .lightbox { grid-template-columns: 1fr; grid-template-rows: 1fr auto; }
  .lightbox figure { grid-column: 1; grid-row: 1; }
  .lightbox__nav--prev, .lightbox__nav--next { grid-row: 2; position: static; }
  .lightbox__nav--prev { justify-self: start !important; }
  .lightbox__nav--next { justify-self: end !important; margin-top: -2.8rem; }
}
@media print { .gallery-section, .lightbox, .preview-bar { display: none !important; } }

/* ==========================================================================
   Kopfzeile & Burger-Menü
   Ohne JavaScript bricht das Menü einfach um. Mit JavaScript klappt es zum
   Burger-Menü zusammen, sobald die Punkte nicht mehr in eine Zeile passen.
   ========================================================================== */
.site-header { position: relative; z-index: 30; background: var(--paper); }
.site-header__inner { flex-wrap: nowrap; }
.brand { min-width: 0; overflow: hidden; white-space: nowrap; }
.brand__path { overflow: hidden; text-overflow: ellipsis; }
.nav { margin-left: auto; }
.header-actions { display: flex; align-items: center; gap: .6rem; flex: none; }

.menu-toggle { display: none; align-items: center; gap: .55rem; height: 2.5rem; padding: 0 .85rem 0 .7rem; border: 1px solid var(--line); border-radius: 999px; background: var(--raised); color: var(--ink); font: 600 .9rem var(--sans); cursor: pointer; }
.menu-toggle:hover { border-color: var(--muted); }
.menu-toggle__bars { position: relative; width: 1.1rem; height: .8rem; display: inline-block; }
.menu-toggle__bars span { position: absolute; left: 0; right: 0; height: 2px; border-radius: 2px; background: currentColor; transition: transform .2s ease, opacity .15s ease, top .2s ease; }
.menu-toggle__bars span:nth-child(1) { top: 0; }
.menu-toggle__bars span:nth-child(2) { top: calc(50% - 1px); }
.menu-toggle__bars span:nth-child(3) { top: calc(100% - 2px); }
.nav-open .menu-toggle__bars span:nth-child(1) { top: calc(50% - 1px); transform: rotate(45deg); }
.nav-open .menu-toggle__bars span:nth-child(2) { opacity: 0; }
.nav-open .menu-toggle__bars span:nth-child(3) { top: calc(50% - 1px); transform: rotate(-45deg); }

/* Messmodus: alles einzeilig, kein Burger */
.nav-measure .nav ul { flex-wrap: nowrap; white-space: nowrap; }
.nav-measure .menu-toggle { display: none !important; }
.js:not(.nav-compact) .nav ul { flex-wrap: nowrap; white-space: nowrap; }

/* Kompakt: Burger zeigen, Menü als aufklappbares Panel unter der Kopfzeile */
.nav-compact .menu-toggle { display: inline-flex; }
.nav-compact .nav {
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--paper); border-bottom: 1px solid var(--line);
  box-shadow: 0 18px 30px -18px rgb(0 0 0 / .25);
  padding: .5rem var(--gutter) 1.25rem;
  visibility: hidden; opacity: 0; transform: translateY(-.5rem);
  transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
  max-height: calc(100vh - 4.5rem); overflow-y: auto;
}
.nav-compact.nav-open .nav { visibility: visible; opacity: 1; transform: none; transition: opacity .18s ease, transform .18s ease; }
.nav-compact .nav ul { flex-direction: column; gap: 0; max-width: var(--wrap); margin-inline: auto; }
.nav-compact .nav li + li { border-top: 1px solid var(--line); }
.nav-compact .nav a { display: flex; align-items: center; justify-content: space-between; padding: .95rem .25rem; font-size: 1.2rem; color: var(--ink); border-bottom: 0; }
.nav-compact .nav a[aria-current] { color: var(--signal); }
.nav-compact .nav a[aria-current]::after { content: ''; width: .5rem; height: .5rem; border-radius: 50%; background: var(--signal); }
.nav-compact.nav-open main, .nav-compact.nav-open .site-footer { opacity: .35; transition: opacity .18s ease; }

/* Ohne JS: Umbruch wie bisher */
html:not(.js) .site-header__inner { flex-wrap: wrap; }

/* Lange Namen und Links dürfen nie aus dem Bildschirm laufen */
.hero__name, h1, h2 { overflow-wrap: break-word; hyphens: auto; }
.prose a, .facts a, .timeline__where a { overflow-wrap: anywhere; }
.prose table { display: block; overflow-x: auto; }

@media (max-width: 760px) {
  .nav { width: auto; }
  .site-header__inner { padding-block: .8rem; }
  .theme-toggle { width: 2.5rem; height: 2.5rem; }
  .hero__actions .btn { flex: 1 1 auto; justify-content: center; }
  .pager { grid-template-columns: 1fr; }
  .pager__next { text-align: left; }
  .pagination { grid-template-columns: 1fr 1fr; }
  .pagination .muted { grid-column: 1 / -1; grid-row: 1; text-align: center; }
  .facts { grid-template-columns: 1fr 1fr; }
  .section__head { flex-wrap: wrap; }
}
@media (max-width: 420px) {
  .menu-toggle__label { display: none; }
  .menu-toggle { padding: 0; width: 2.5rem; justify-content: center; }
  .facts { grid-template-columns: 1fr; }
  .sysinfo__row { grid-template-columns: 1fr; gap: 0; margin-bottom: .45rem; }
  .sysinfo dd .led { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .nav-compact .nav, .menu-toggle__bars span { transition: none !important; }
}
@media print { .menu-toggle, .header-actions { display: none !important; } }
.nav-compact .nav { display: block; margin-left: 0; } .nav-compact .nav ul { width: 100%; }

/* ==========================================================================
   Suche
   ========================================================================== */
.icon-link { width: 2.1rem; height: 2.1rem; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; color: var(--muted); }
.icon-link:hover, .icon-link[aria-current] { color: var(--ink); border-color: var(--muted); }
@media (max-width: 760px) { .icon-link { width: 2.5rem; height: 2.5rem; } }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.search__form { display: flex; gap: .6rem; max-width: 40rem; margin-bottom: 2rem; }
.search__form input { flex: 1; min-width: 0; font: inherit; font-size: var(--step-1); color: var(--ink); background: var(--raised); border: 1px solid var(--line); border-radius: var(--radius); padding: .75rem 1rem; }
.search__form input:focus { outline: none; border-color: var(--signal); box-shadow: 0 0 0 3px color-mix(in srgb, var(--signal) 22%, transparent); }
.search__form .btn { padding-inline: 1.3rem; font-size: var(--step-0); }
.search__count { font-family: var(--mono); font-size: .85rem; margin-bottom: 1rem; }
.search__hint kbd { font-family: var(--mono); font-size: .85em; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 4px; padding: .05em .4em; background: var(--raised); }
.search__none p { margin-bottom: 1rem; }
.search__results { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); max-width: 52rem; }
.search-hit { padding-block: 1.3rem; border-bottom: 1px solid var(--line); }
.search-hit__meta { font-family: var(--mono); font-size: .8rem; color: var(--muted); display: flex; flex-wrap: wrap; gap: .2rem 1.1rem; }
.search-hit__kind { color: var(--signal); }
.search-hit__title { font-size: var(--step-1); margin-top: .3rem; }
.search-hit__title a { color: var(--ink); text-decoration: none; }
.search-hit__title a:hover { color: var(--signal); text-decoration: underline; }
.search-hit__snippet { color: var(--muted); margin-top: .35rem; max-width: 68ch; }
.search mark { background: color-mix(in srgb, var(--signal) 22%, transparent); color: inherit; border-radius: 2px; padding: 0 .1em; }
@media (max-width: 480px) { .search__form .btn { padding-inline: 1rem; } }
/* Seitenaufbau frei sortierbar: gleichmäßige Abstände zwischen Lebenslauf-Abschnitten, egal in welcher Reihenfolge */
.cv-section + .print-hint, .print-hint + .cv-section { margin-top: 3.5rem; }
.page > .cover:first-child, .page__head + .cover { margin-top: 0; }
.prose + .cover, .gallery-section + .cover, .facts + .cover { margin-top: 2.5rem; }
.cover + .facts, .prose + .facts, .gallery-section + .facts { margin-top: 2.5rem; }