/* site.css — gemeinsames Stylesheet für alle Seiten.
   Eine Schrift (Inter, lokal), Schwarz-Weiß, große Typografie.
   Keine externen Aufrufe, kein Tracking. */

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
    src: url('/fonts/inter-latin.woff2') format('woff2');
    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: 'Inter';
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
    src: url('/fonts/inter-latin-ext.woff2') format('woff2');
    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;
}

:root {
    --bg: #FFFFFF;
    --ink: #0D0D0D;
    --muted: #8A8A8A;      /* Problem-Text, nur in großer Schrift */
    --secondary: #5F5F5F;  /* kleiner Begleittext */
    --line: #E6E6E6;
    --line-strong: #0D0D0D;
    --surface: #F5F5F4;
    --font: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --wrap: 1080px;
    --gutter: clamp(20px, 5vw, 48px);
    --show-light: block;   /* Elemente nur für das helle Design */
    --show-dark: none;     /* Elemente nur für das dunkle Design */
    color-scheme: light dark;
}

/* Dunkles Design: folgt dem System, außer der Umschalter hat
   data-theme="light" bzw. "dark" auf <html> gesetzt. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --bg: #0E0E0E;
        --ink: #EDEDEC;
        --muted: #7C7C7A;
        --secondary: #A3A3A0;
        --line: #262626;
        --line-strong: #EDEDEC;
        --surface: #181818;
        --show-light: none;
        --show-dark: block;
    }
}

:root[data-theme="dark"] {
    --bg: #0E0E0E;
    --ink: #EDEDEC;
    --muted: #7C7C7A;
    --secondary: #A3A3A0;
    --line: #262626;
    --line-strong: #EDEDEC;
    --surface: #181818;
    --show-light: none;
    --show-dark: block;
    color-scheme: dark;
}

:root[data-theme="light"] { color-scheme: light; }

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

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: 24px;
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--font);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, p, ul, ol, figure, blockquote { margin: 0; }

a { color: inherit; }

a:focus-visible, button:focus-visible {
    outline: 2px solid var(--ink);
    outline-offset: 3px;
    border-radius: 2px;
}

::selection { background: var(--ink); color: var(--bg); }

img { max-width: 100%; height: auto; display: block; }

.container {
    max-width: var(--wrap);
    margin: 0 auto;
    padding: 0 var(--gutter);
}

.container-narrow {
    max-width: calc(680px + 2 * var(--gutter));
    margin: 0 auto;
    padding: 0 var(--gutter);
}

/* Unterstrichener Link — das einzige Link-Muster der Seite */
.link {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
}
.link:hover { text-decoration-thickness: 2px; }

/* ============ Kopf ============ */

.site-header .container {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px 24px;
    padding-top: 22px;
    padding-bottom: 22px;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: 500;
    font-size: 15px;
    text-decoration: none;
    letter-spacing: -0.01em;
}

.site-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 22px;
    font-size: 14px;
}

.brand-logo-light { display: var(--show-light); }
.brand-logo-dark { display: var(--show-dark); }

.site-nav a {
    color: var(--secondary);
    text-decoration: none;
}
.site-nav a:hover { color: var(--ink); }

.site-nav { align-items: center; }

.theme-toggle {
    display: inline-flex;
    padding: 4px;
    margin: -4px;
    border: 0;
    background: none;
    color: var(--secondary);
    cursor: pointer;
}
.theme-toggle[hidden] { display: none; }
.theme-toggle:hover { color: var(--ink); }
.theme-toggle svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
/* Mond im hellen Design (wechselt zu dunkel), Sonne im dunklen */
.theme-icon-moon { display: var(--show-light); }
.theme-icon-sun { display: var(--show-dark); }
.site-nav a[aria-current="page"] {
    color: var(--ink);
    text-decoration: underline;
    text-underline-offset: 6px;
    text-decoration-thickness: 1px;
}

/* ============ Fuß ============ */

.site-footer {
    margin-top: 120px;
    border-top: 1px solid var(--line);
    font-size: 13px;
    color: var(--secondary);
}

.site-footer .container {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px 24px;
    padding-top: 24px;
    padding-bottom: 32px;
}

.site-footer nav { display: flex; gap: 20px; }
.site-footer a { text-decoration: none; }
.site-footer a:hover { color: var(--ink); }

/* ============ Startseite: Einstieg ============ */

.hero {
    padding-top: clamp(48px, 9vw, 120px);
    padding-bottom: clamp(56px, 8vw, 96px);
}

.hero-title {
    font-size: clamp(36px, 6.4vw, 72px);
    line-height: 1.04;
    letter-spacing: -0.04em;
    font-weight: 500;
    max-width: 14em;
}

.hero-sub {
    margin-top: 28px;
    font-size: clamp(17px, 1.6vw, 19px);
    line-height: 1.55;
    color: var(--secondary);
    max-width: 34em;
}

.hero-news {
    display: inline-flex;
    gap: 10px;
    margin-top: 32px;
    font-size: 14px;
    text-decoration: none;
}
.hero-news time { color: var(--secondary); font-variant-numeric: tabular-nums; }
.hero-news span { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.hero-news:hover span { text-decoration-thickness: 2px; }

/* ============ Abschnitte ============ */

.section { padding-top: clamp(64px, 9vw, 112px); }

.section-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--line-strong);
    font-size: 14px;
}

.section-title {
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0;
}

.section-head a { color: var(--secondary); text-decoration: none; }
.section-head a:hover { color: var(--ink); }

/* ============ Projekte als Kapitel ============ */

.chapter {
    padding: clamp(40px, 6vw, 72px) 0;
    border-bottom: 1px solid var(--line);
}
.chapter:last-child { border-bottom: 0; }

.chapter-meta {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 4px 24px;
    margin-bottom: clamp(20px, 3vw, 32px);
    font-size: 13px;
    color: var(--secondary);
    font-variant-numeric: tabular-nums;
}

.chapter-name { color: var(--ink); font-weight: 500; }
.chapter-name .num { color: var(--secondary); font-weight: 400; margin-right: 6px; }

.chapter-problem,
.chapter-solution {
    font-size: clamp(24px, 3.4vw, 38px);
    line-height: 1.16;
    letter-spacing: -0.03em;
    font-weight: 400;
    max-width: 21em;
}

.chapter-problem { color: var(--muted); }
.chapter-solution { margin-top: 0.6em; }

.chapter-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 24px;
    margin-top: clamp(24px, 3vw, 36px);
    font-size: 14px;
}
.chapter-links .note { color: var(--secondary); }

/* ============ Zeilenlisten (News, Werdegang, Engagement …) ============ */

.rows { list-style: none; padding: 0; }

.row {
    display: grid;
    grid-template-columns: 140px minmax(0, 1fr) auto;
    gap: 4px 24px;
    align-items: baseline;
    padding: 16px 0;
    border-bottom: 1px solid var(--line);
    text-decoration: none;
}

.row-date {
    font-size: 13px;
    color: var(--secondary);
    font-variant-numeric: tabular-nums;
}

.row-title { font-size: 17px; font-weight: 500; letter-spacing: -0.01em; line-height: 1.4; }
.row-text { font-size: 14px; color: var(--secondary); margin-top: 2px; line-height: 1.5; }
.row-end { font-size: 13px; color: var(--secondary); text-align: right; white-space: nowrap; }

a.row:hover .row-title { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }

/* ============ Über mich ============ */

.about {
    display: grid;
    grid-template-columns: 140px minmax(0, 1fr);
    gap: 0 24px;
}

.about-block {
    display: contents;
}

.about-label {
    padding-top: 40px;
    font-size: 13px;
    color: var(--secondary);
}

.about-body { padding-top: 40px; }
.about-body .rows .row { grid-template-columns: minmax(0, 1fr) auto; }
.about-body .rows .row:first-child { padding-top: 0; }

.about-intro {
    display: flex;
    gap: 28px;
    align-items: flex-start;
}

.about-intro p {
    font-size: clamp(18px, 2vw, 21px);
    line-height: 1.5;
    letter-spacing: -0.015em;
    max-width: 32em;
}

.portrait {
    width: 96px;
    flex-shrink: 0;
    aspect-ratio: 1;
    object-fit: cover;
    object-position: 50% 20%;
    border-radius: 50%;
    filter: grayscale(1);
}

/* ============ Kontakt ============ */

.contact { padding-top: clamp(80px, 12vw, 160px); }

.contact-lead {
    font-weight: 400;
    font-size: 14px;
    color: var(--secondary);
    margin-bottom: 16px;
}

.contact-line {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 12px 24px;
}

.contact-mail {
    font-size: clamp(30px, 6vw, 64px);
    line-height: 1.1;
    letter-spacing: -0.04em;
    font-weight: 500;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 0.14em;
    overflow-wrap: anywhere;
}
.contact-mail:hover { text-decoration-thickness: 4px; }

/* ============ Knöpfe ============ */

.text-btn,
.share-btn {
    appearance: none;
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    font-size: 14px;
    color: var(--secondary);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.text-btn:hover,
.share-btn:hover { color: var(--ink); }
.share-btn svg { width: 15px; height: 15px; }

/* ============ Unterseiten: Kopf ============ */

.page-head {
    padding: clamp(40px, 7vw, 88px) 0 clamp(32px, 5vw, 56px);
}

.page-tag,
.section-label {
    display: block;
    font-size: 13px;
    color: var(--secondary);
    margin-bottom: 14px;
    letter-spacing: 0;
    text-transform: none;
}

.page-title {
    font-size: clamp(36px, 6vw, 64px);
    line-height: 1.05;
    letter-spacing: -0.04em;
    font-weight: 500;
}

.page-desc {
    margin-top: 18px;
    font-size: 18px;
    color: var(--secondary);
    max-width: 34em;
}

/* ============ News-Übersicht ============ */

.post-list { border-top: 1px solid var(--line-strong); }

.post-row {
    display: grid;
    grid-template-columns: 140px minmax(0, 1fr);
    gap: 6px 24px;
    padding: 24px 0;
    border-bottom: 1px solid var(--line);
    text-decoration: none;
}

.post-row-date,
.post-row-cat {
    display: block;
    font-size: 13px;
    color: var(--secondary);
    font-variant-numeric: tabular-nums;
}

.post-row-title {
    font-size: clamp(20px, 2.4vw, 26px);
    line-height: 1.25;
    letter-spacing: -0.025em;
    font-weight: 500;
}
.post-row:hover .post-row-title { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }

.post-row-excerpt {
    margin-top: 8px;
    font-size: 15px;
    color: var(--secondary);
    max-width: 38em;
}

.post-row-arrow { display: none; }

/* ============ Beitrag ============ */

.article-head { padding: clamp(32px, 6vw, 72px) 0 40px; }

.back-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    color: var(--secondary);
    text-decoration: none;
    margin-bottom: 40px;
}
.back-link:hover { color: var(--ink); }
.back-link svg { width: 15px; height: 15px; }

.post-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 10px;
    font-size: 13px;
    color: var(--secondary);
    margin-bottom: 18px;
}
.post-cat { color: var(--ink); }

.article-title {
    font-size: clamp(34px, 5.6vw, 56px);
    line-height: 1.06;
    letter-spacing: -0.04em;
    font-weight: 500;
}

.article-lead {
    margin-top: 24px;
    font-size: clamp(19px, 2.2vw, 22px);
    line-height: 1.5;
    letter-spacing: -0.015em;
    color: var(--secondary);
}

.prose { font-size: 17px; line-height: 1.75; }
.prose > * + * { margin-top: 1.2em; }
.prose h2 {
    margin-top: 2.2em;
    font-size: 22px;
    line-height: 1.3;
    letter-spacing: -0.02em;
    font-weight: 500;
}
.prose a { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.prose a:hover { text-decoration-thickness: 2px; }
.prose strong { font-weight: 600; }
.prose ul, .prose ol { padding-left: 1.2em; }
.prose li + li { margin-top: 0.4em; }
.prose blockquote {
    padding-left: 20px;
    border-left: 2px solid var(--line-strong);
    font-size: 20px;
    line-height: 1.5;
    letter-spacing: -0.015em;
}
.prose del { color: var(--muted); }

.callout {
    background: var(--surface);
    padding: 20px 24px;
    border-radius: 4px;
}
.callout-title { font-weight: 500; margin-bottom: 4px; }

.article-actions {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 56px;
    padding-top: 20px;
    border-top: 1px solid var(--line);
    font-size: 14px;
    color: var(--secondary);
}

.author-box {
    display: flex;
    gap: 16px;
    align-items: center;
    margin-top: 40px;
}
.author-photo {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    object-fit: cover;
    object-position: 50% 20%;
    filter: grayscale(1);
}
.author-name { font-weight: 500; }
.author-role { font-size: 14px; color: var(--secondary); }
.author-link { font-size: 14px; text-decoration: underline; text-underline-offset: 3px; }

/* ============ Rechtliches ============ */

.info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 24px;
    padding: 24px 0 8px;
    border-top: 1px solid var(--line-strong);
}

.card-label {
    display: block;
    font-size: 13px;
    color: var(--secondary);
    margin-bottom: 8px;
    text-transform: none;
}
.card-title { font-size: 17px; font-weight: 500; }
.card-text { margin-top: 4px; }
.contact-list { list-style: none; padding: 0; }
.contact-list a, .legal-section a { text-decoration: underline; text-underline-offset: 3px; }

.intro-card {
    padding: 20px 0;
    border-top: 1px solid var(--line-strong);
    font-size: 18px;
    line-height: 1.55;
    max-width: 38em;
}

.legal-content { max-width: 720px; margin-top: 40px; }
.legal-section { padding: 28px 0; border-top: 1px solid var(--line); }
.legal-section h2 { font-size: 20px; font-weight: 500; letter-spacing: -0.02em; margin-bottom: 12px; }
.legal-section h3 { font-size: 16px; font-weight: 500; margin: 20px 0 6px; }
.legal-section p + p { margin-top: 12px; }
.legal-section p { color: var(--ink); }
.legal-section ul { margin: 8px 0; padding-left: 1.2em; }

/* ============ Schmale Displays ============ */

@media (max-width: 640px) {
    .row,
    .post-row,
    .about {
        grid-template-columns: minmax(0, 1fr);
    }
    .row-end { text-align: left; }
    .about-label { padding-top: 48px; padding-bottom: 12px; border-bottom: 1px solid var(--line); margin-bottom: 16px; }
    .about-body { padding-top: 0; }
    .about-intro { flex-direction: column; gap: 20px; }
    .site-footer { margin-top: 80px; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
}

/* ============ Fließtext: weitere Bausteine ============ */

.prose h3 { margin-top: 1.8em; font-size: 18px; font-weight: 500; letter-spacing: -0.01em; }
.prose figure img { border-radius: 4px; }
.prose figcaption { margin-top: 8px; font-size: 14px; color: var(--secondary); }
.prose code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.9em;
    background: var(--surface);
    padding: 1px 5px;
    border-radius: 3px;
}