@font-face { font-family: 'Vollkorn'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/vollkorn-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Vollkorn'; font-style: italic; font-weight: 400; font-display: swap; src: url('/fonts/vollkorn-latin-400-italic.woff2') format('woff2'); }
@font-face { font-family: 'Vollkorn'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/vollkorn-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Source Sans 3'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/source-sans-3-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Source Sans 3'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/source-sans-3-latin-600-normal.woff2') format('woff2'); }

:root {
  --bg: #faf7f2; --bg-soft: #f1ece3; --ink: #2b2722; --ink-soft: #5c554b;
  --accent: #9a6b4f; --accent-soft: #c4a68f; --line: #e3dccf; --max: 42rem;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg); color: var(--ink);
  font-family: 'Source Sans 3', 'Source Sans Pro', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 1.0625rem; line-height: 1.75; -webkit-font-smoothing: antialiased;
}
h1, h2, h3, .serif { font-family: 'Vollkorn', Georgia, "Times New Roman", serif; font-weight: 400; letter-spacing: 0.01em; }
a { color: var(--accent); text-decoration: none; border-bottom: 1px solid var(--accent-soft); transition: border-color .2s; }
a:hover { border-bottom-color: var(--accent); }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 1.5rem; }

/* Navigation */
.topnav {
  text-align: center; padding: 1.1rem 0; border-bottom: 1px solid var(--line);
  font-family: 'Vollkorn', Georgia, serif; font-size: .95rem; letter-spacing: .06em;
}
.topnav a { color: var(--accent); border-bottom: 1px solid var(--accent-soft); }
.topnav a:hover { border-bottom-color: var(--accent); }
.topnav .current { color: var(--ink); }
.topnav .sep { color: var(--accent-soft); margin: 0 .6rem; }

/* Hero */
header { padding: 4.5rem 0 3.5rem; text-align: center; }
.avatar {
  width: 8.5rem; height: 8.5rem; border-radius: 50%; object-fit: cover; object-position: center top;
  border: 3px solid var(--line); margin-bottom: 1.9rem; background: var(--bg-soft);
}
h1 { font-size: clamp(1.5rem, 2.4vw, 1.8rem); line-height: 1.2; font-weight: 600; }
h1 a, h1 a:hover { color: var(--ink); border: none; }
.tagline { margin-top: 1.3rem; font-size: clamp(1.02rem, 2.2vw, 1.15rem); color: var(--ink-soft); font-style: italic; font-family: 'Vollkorn', Georgia, serif; }
.meta { margin-top: .9rem; color: var(--ink-soft); font-size: .95rem; letter-spacing: .04em; }
.meta .dot { margin: 0 .55rem; color: var(--accent-soft); }

/* Section heading (Über mich, /now-, /blog-Label) – so prominent wie der Name */
.section-label, main > h2:first-child {
  font-family: 'Vollkorn', Georgia, serif; font-weight: 600;
  font-size: clamp(1.4rem, 2.2vw, 1.65rem); color: var(--ink); margin-bottom: .5rem;
}
.now-note { font-family: 'Vollkorn', Georgia, serif; font-size: .88rem; color: var(--ink-soft); margin: 0 0 1.7rem; }
.section-label:has(+ .now-note) { margin-bottom: .15rem; }
.stand { color: var(--ink-soft); font-size: .88rem; margin-bottom: 2rem; }

main { padding: 2.5rem 0 3.5rem; border-top: 1px solid var(--line); }
main h2 { font-size: 1.45rem; color: var(--accent); margin: 2.2rem 0 .8rem; }
main h3 { font-size: 1.2rem; color: var(--accent); margin: 1.8rem 0 .6rem; }
main p { margin: 0 0 1.1rem; }
main ul, main ol { margin: 0 0 1.1rem 1.2rem; }
main li { margin: .3em 0; }
main img { max-width: 100%; border-radius: .5rem; margin: 1rem 0; }
main blockquote {
  background: var(--bg-soft); border-left: 3px solid var(--accent);
  padding: 1.2rem 1.4rem; margin: 1.4rem 0; border-radius: 0 .5rem .5rem 0;
  font-family: 'Vollkorn', Georgia, serif; font-style: italic;
}
main blockquote p { margin: 0 0 .5rem; }
main blockquote p:last-child { margin: 0; }
main hr { border: 0; height: 1px; background: var(--line); margin: 2rem 0; }
main code { background: var(--bg-soft); border: 1px solid var(--line); border-radius: .3em; padding: .1em .35em; font-size: .9em; }

/* Leitmotiv-Kasten (Startseite) */
.leitmotiv {
  background: var(--bg-soft); border-left: 3px solid var(--accent);
  padding: 1.4rem 1.6rem; margin-top: 1.6rem; border-radius: 0 .5rem .5rem 0;
  font-family: 'Vollkorn', Georgia, serif; font-style: italic; font-size: 1.08rem;
}

/* Link-Gruppen (Startseite) */
.link-group { margin-bottom: 2.2rem; }
.link-group:last-child { margin-bottom: 0; }
.link-group h3 { font-family: 'Vollkorn', Georgia, serif; font-weight: 400; font-size: 1.15rem; color: var(--ink-soft); margin-bottom: .9rem; }
.links { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: .8rem; }
@media (max-width: 540px) { .links { grid-template-columns: 1fr; } }
.links a { display: block; padding: 1rem 1.2rem; background: var(--bg-soft); border: 1px solid var(--line); border-radius: .6rem; color: var(--ink); transition: border-color .2s, transform .15s; }
.links a:hover { border-color: var(--accent-soft); transform: translateY(-2px); }
.links .label { display: block; font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); margin-bottom: .15rem; }
.links .name { display: block; font-size: .98rem; font-weight: 600; }
.links .desc { display: block; font-size: .88rem; color: var(--ink-soft); line-height: 1.5; margin-top: .25rem; }

/* Kontakt-Link (Startseite) */
.contact-btn { display: inline-block; margin-top: .3rem; font-size: 1.05rem; color: var(--accent); border-bottom: 1px solid var(--accent-soft); }
.contact-btn:hover { border-bottom-color: var(--accent); }

/* Blog-Archiv-Link */
.archiv-link { margin-top: 2.5rem; }

footer {
  border-top: 1px solid var(--line); padding: 2.5rem 0 3.5rem;
  color: var(--ink-soft); font-size: .88rem; text-align: center; line-height: 1.7;
}
footer p + p { margin-top: .8rem; }

/* Tabellen */
.table-wrap { overflow-x: auto; margin: 1.75rem 0; -webkit-overflow-scrolling: touch; }
.table-wrap table { border-collapse: collapse; width: 100%; font-size: 0.97rem; line-height: 1.5; }
.table-wrap th, .table-wrap td { border: 1px solid var(--line); padding: 0.55rem 0.7rem; text-align: left; vertical-align: top; }
.table-wrap th { background: var(--bg-soft); font-weight: 600; }