/* =============================================================================
   Dokumentation der Schnittstelle.

   Eigenständig und ohne main.css: Die Seite steht ohne Anmeldung und ohne das
   Gerüst der Anwendung, und sie soll auch dann lesbar bleiben, wenn an deren
   Kaskade etwas geändert wird. Dieselbe Palette wie die Startseite, damit es
   trotzdem nach demselben Haus aussieht.
   ============================================================================= */

:root {
    --papier: #f7f3ea;
    --karte: #fffdf7;
    --tinte: #1d2b25;
    --tinte-weich: #47564f;
    --tinte-leise: #7a877f;
    --tanne: #0e3f2f;
    --bernstein: #c77f0a;
    --linie: #d8cfba;
    --code-grund: #14231c;
    --bahn: 940px;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: InterVariable, Inter, system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-size: 16px;
    line-height: 1.65;
    color: var(--tinte);
    background: var(--papier);
    -webkit-font-smoothing: antialiased;
}

.bahn {
    width: min(100% - 40px, var(--bahn));
    margin: 0 auto;
}

/* --- Kopfleiste --- */
.kopf {
    position: sticky;
    top: 0;
    z-index: 5;
    background: rgba(247, 243, 234, 0.94);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--linie);
}

.kopf .bahn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    height: 62px;
}

.marke {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    color: var(--tanne);
    text-decoration: none;
}

.kopf nav {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
    font-size: 0.86rem;
}

.kopf nav a {
    color: var(--tinte-weich);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: color 0.2s, border-color 0.2s;
}

.kopf nav a:hover {
    color: var(--tanne);
    border-bottom-color: var(--bernstein);
}

/* --- Inhalt --- */
main {
    padding: 54px 0 90px;
}

h1 {
    font-size: clamp(1.8rem, 4vw, 2.5rem);
    line-height: 1.15;
    letter-spacing: -0.02em;
    margin-bottom: 16px;
}

.lead {
    font-size: 1.08rem;
    color: var(--tinte-weich);
    max-width: 62ch;
    margin-bottom: 12px;
}

section {
    margin-top: 54px;
    scroll-margin-top: 78px;
}

h2 {
    font-size: 1.45rem;
    margin-bottom: 14px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--tanne);
}

h3 {
    font-size: 1.05rem;
    margin: 26px 0 10px;
    color: var(--tanne);
}

p {
    max-width: 72ch;
    margin-bottom: 14px;
    color: var(--tinte-weich);
}

.wort {
    font-size: 0.88rem;
    color: var(--tinte-leise);
    margin: 14px 0 6px;
}

ul {
    margin: 0 0 14px 20px;
    color: var(--tinte-weich);
}

li {
    margin-bottom: 8px;
    max-width: 72ch;
}

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

/* --- Code --- */
pre {
    background: var(--code-grund);
    color: #dfe9e2;
    padding: 16px 18px;
    border-radius: 12px;
    overflow-x: auto;
    font-size: 0.83rem;
    line-height: 1.55;
    margin-bottom: 16px;
}

pre code {
    background: none;
    color: inherit;
    padding: 0;
    font-size: inherit;
}

code {
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;
    font-size: 0.86em;
    background: #ece5d6;
    padding: 1px 6px;
    border-radius: 5px;
    color: var(--tanne);
}

/* --- Tabellen --- */
table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 16px;
    background: var(--karte);
    border: 1px solid var(--linie);
    border-radius: 12px;
    overflow: hidden;
    font-size: 0.9rem;
}

th,
td {
    padding: 11px 14px;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--linie);
}

tr:last-child th,
tr:last-child td {
    border-bottom: 0;
}

thead th {
    background: #efe8d8;
    font-size: 0.78rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--tinte-leise);
}

.steckbrief th {
    width: 32%;
    color: var(--tinte);
    font-weight: 600;
}

.marke-klein {
    display: inline-block;
    padding: 1px 7px;
    border-radius: 20px;
    background: var(--bernstein);
    color: #fff;
    font-size: 0.68rem;
    letter-spacing: 0.04em;
    vertical-align: middle;
}

/* --- Die aus Markdown gerenderte Anleitung --- */
.anleitung {
    padding: 46px 0 80px;
}

.anleitung h1 {
    margin-bottom: 24px;
}

.anleitung h2 {
    margin-top: 46px;
}

.anleitung h3 {
    margin-top: 30px;
}

.anleitung ul,
.anleitung ol {
    margin: 0 0 16px 22px;
    color: var(--tinte-weich);
}

.anleitung li {
    margin-bottom: 7px;
    max-width: 74ch;
}

.anleitung em {
    color: var(--tinte-leise);
}

/* --- Fuß --- */
.fuss {
    padding: 22px 0 40px;
    border-top: 1px solid var(--linie);
    font-size: 0.8rem;
    color: var(--tinte-leise);
}

.fuss .bahn {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

@media (max-width: 700px) {

    .kopf .bahn {
        height: auto;
        padding: 12px 0;
        flex-direction: column;
        align-items: flex-start;
    }

    .steckbrief th {
        width: 40%;
    }
}