:root {
    --hintergrund: #f5f5f2;
    --flaeche: #ffffff;
    --text: #1f2328;
    --leise: #5f6670;
    --akzent: #2f5d8a;
    --intern: #8a4b2f;
    --rand: #e2e2dc;
    --fehler: #b42318;
}

@media (prefers-color-scheme: dark) {
    :root {
        --hintergrund: #16181b;
        --flaeche: #1f2226;
        --text: #e8e8e6;
        --leise: #9aa0a8;
        --akzent: #7fb0e0;
        --intern: #e0a07f;
        --rand: #30343a;
        --fehler: #ff8a80;
    }
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    line-height: 1.6;
    background: var(--hintergrund);
    color: var(--text);
}

a { color: var(--akzent); }

.kopf {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    max-width: 860px;
    margin: 0 auto;
}

.logo {
    font-weight: 700;
    font-size: 1.15rem;
    text-decoration: none;
    color: var(--text);
}

nav { display: flex; gap: 16px; align-items: center; }
nav a { text-decoration: none; }
nav a:hover { text-decoration: underline; }

main {
    max-width: 860px;
    margin: 0 auto;
    padding: 0 16px;
}

.karte {
    background: var(--flaeche);
    border: 1px solid var(--rand);
    border-radius: 10px;
    padding: 24px;
    margin-bottom: 16px;
}

.karte.intern { border-left: 4px solid var(--intern); }
.karte.schmal { max-width: 420px; margin: 32px auto; }

h1, h2 { margin-top: 0; line-height: 1.25; }

form { display: flex; flex-direction: column; gap: 10px; }
form.inline { display: inline; }

label { font-weight: 600; }

input[type="password"], input[type="text"], select, textarea {
    font: inherit;
    padding: 10px 12px;
    border: 1px solid var(--rand);
    border-radius: 6px;
    background: var(--hintergrund);
    color: var(--text);
    width: 100%;
}

textarea { font-family: ui-monospace, Menlo, monospace; font-size: 0.85rem; }

button {
    font: inherit;
    padding: 10px 16px;
    border: 0;
    border-radius: 6px;
    background: var(--akzent);
    color: var(--flaeche);
    font-weight: 600;
    cursor: pointer;
}

button.link {
    background: none;
    color: var(--akzent);
    padding: 0;
    font-weight: 400;
}
button.link:hover { text-decoration: underline; }

.fehler { color: var(--fehler); font-weight: 600; }
.hinweis { color: var(--leise); font-size: 0.95rem; }

.fuss {
    text-align: center;
    color: var(--leise);
    font-size: 0.9rem;
    padding: 32px 16px;
}

/* ---------- Startseite / Lebenslauf ---------- */

h3 { margin: 0; font-size: 1.05rem; line-height: 1.3; }

.held {
    display: flex;
    gap: 28px;
    align-items: center;
    padding: 24px 0 32px;
}
.held h1 { font-size: 2.2rem; margin-bottom: 0; }
.untertitel { color: var(--leise); margin: 4px 0 12px; font-size: 1.1rem; }

.foto {
    width: 150px;
    height: 150px;
    flex-shrink: 0;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid var(--flaeche);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
}

.knoepfe { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 0; }
.knopf {
    display: inline-block;
    padding: 9px 16px;
    border-radius: 6px;
    background: var(--akzent);
    color: var(--flaeche);
    font-weight: 600;
    text-decoration: none;
}
.knopf.zweitrangig {
    background: transparent;
    color: var(--akzent);
    border: 1px solid var(--akzent);
}

.zeitleiste {
    list-style: none;
    margin: 0;
    padding: 0 0 0 20px;
    border-left: 2px solid var(--rand);
}
.zeitleiste > li { position: relative; padding-bottom: 20px; }
.zeitleiste > li:last-child { padding-bottom: 0; }
.zeitleiste > li::before {
    content: "";
    position: absolute;
    left: -27px;
    top: 6px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--flaeche);
    border: 2px solid var(--akzent);
}
.zeitleiste p { margin: 2px 0; }
.zeitleiste ul { margin: 6px 0 0; padding-left: 20px; }

.zeile { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.zeit { color: var(--leise); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ort { color: var(--akzent); font-weight: 500; }

.raster {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px;
    margin-bottom: 16px;
}
.raster .karte { margin-bottom: 0; }

.werte { list-style: none; margin: 0; padding: 0; }
.werte li {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 8px 0;
    border-bottom: 1px solid var(--rand);
}
.werte li:last-child { border-bottom: 0; }
.werte li > span:first-child { font-weight: 600; }
.stufe { color: var(--leise); }

.schlagworte { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.schlagworte li {
    padding: 5px 12px;
    border-radius: 999px;
    background: var(--hintergrund);
    border: 1px solid var(--rand);
    font-size: 0.95rem;
}

@media (max-width: 600px) {
    .held { flex-direction: column; text-align: center; }
    .knoepfe { justify-content: center; }
}

/* Claude-Seite */
.claude-frage { font-family: inherit; font-size: 1rem; width: 100%; box-sizing: border-box; }
.claude-antwort { white-space: pre-wrap; overflow-wrap: anywhere; }

/* Podcast-Seite */
input[type="file"] { font: inherit; }
.jobliste { list-style: none; padding: 0; margin: 0; }
.jobliste li { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: baseline; padding: 10px 0; border-bottom: 1px solid var(--rand); }
.jobliste li:last-child { border-bottom: 0; }
.jobliste li > a { font-weight: 600; flex: 1 1 220px; }
.status { font-size: 0.85rem; padding: 2px 10px; border-radius: 999px; border: 1px solid var(--rand); background: var(--hintergrund); }
.status-fehler { color: var(--fehler); border-color: var(--fehler); }
.textvorschau { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 60vh; overflow: auto; font-size: 0.85rem; }
summary { cursor: pointer; font-weight: 600; }
.knoepfe form.inline { display: inline; }
button.zweitrangig { background: none; color: var(--akzent); border: 1px solid var(--akzent); }
button:disabled { opacity: 0.5; cursor: not-allowed; }
.skript h3 { margin-top: 1.4em; }
.beitrag { margin: 0.4em 0; padding-left: 12px; border-left: 3px solid var(--rand); }
.beitrag-A { border-left-color: var(--akzent); }
.beitrag-B { border-left-color: var(--intern); }
.player { width: 100%; margin: 6px 0; }
label.auswahl { font-weight: 400; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.kapitelliste { padding-left: 1.4em; }
.kapitelliste .zeit { font-variant-numeric: tabular-nums; color: var(--leise); margin-right: 6px; }