/*
 * Gestaltung der Schnittstellenbeschreibung. Ergänzt grundlage.css und
 * marken.css um die Bauteile, die nur auf dieser einen Seite vorkommen.
 */
/* Diese Seite steht für sich. Sie darf einem fremden Entwickler
   gegeben werden und setzt keine Kenntnis des Projekts voraus. */
.doku { max-width: 1180px; margin: 0 auto; padding: 0 var(--abstand-4) var(--abstand-7); }

.titelblatt {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
    gap: var(--abstand-6);
    align-items: end;
    padding: var(--abstand-7) 0 var(--abstand-6);
    border-bottom: 2px solid var(--tinte);
}

.titelblatt h1 {
    margin: 0;
    font-family: var(--schrift-titel);
    font-size: var(--gr-riese);
    font-weight: 600;
    line-height: 1.02;
    letter-spacing: var(--spur-eng);
}

.titelblatt .augenmerk {
    display: block;
    margin-bottom: var(--abstand-3);
    font-size: var(--gr-mikro);
    letter-spacing: var(--spur-weit);
    text-transform: uppercase;
    color: var(--zinnober);
}

.titelblatt p { margin: var(--abstand-4) 0 0; max-width: 58ch; color: var(--tinte-2); }

.steckbrief { font-size: var(--gr-klein); }
.steckbrief div {
    display: flex;
    justify-content: space-between;
    gap: var(--abstand-3);
    padding: var(--abstand-2) 0;
    border-bottom: 1px solid var(--linie);
}
.steckbrief dt, .steckbrief b { color: var(--tinte-3); font-weight: 400; }
.steckbrief span { font-family: var(--schrift-werk); text-align: right; }

.wegweiser {
    display: flex;
    flex-wrap: wrap;
    gap: var(--abstand-2) var(--abstand-4);
    padding: var(--abstand-3) 0;
    margin-bottom: var(--abstand-5);
    font-size: var(--gr-klein);
    border-bottom: 1px solid var(--linie);
}
.wegweiser a { color: var(--tinte-2); text-decoration: none; }
.wegweiser a:hover { color: var(--zinnober); }

.kapitel { margin-top: var(--abstand-6); }
.kapitel > h2 {
    margin: 0 0 var(--abstand-4);
    font-family: var(--schrift-titel);
    font-size: var(--gr-gross);
    font-weight: 600;
}
.kapitel > h2 small {
    display: block;
    margin-top: var(--abstand-1);
    font-family: var(--schrift-werk);
    font-size: var(--gr-mikro);
    font-weight: 400;
    letter-spacing: var(--spur-weit);
    text-transform: uppercase;
    color: var(--tinte-3);
}
.kapitel p { max-width: 74ch; margin: 0 0 var(--abstand-3); color: var(--tinte-2); }
.kapitel .rollfeld + p { margin-top: var(--abstand-4); }
.kapitel h3 {
    margin: var(--abstand-5) 0 var(--abstand-2);
    font-size: var(--gr-mittel);
    font-weight: 600;
}

pre {
    margin: var(--abstand-3) 0;
    padding: var(--abstand-4);
    font-family: var(--schrift-werk);
    font-size: var(--gr-klein);
    line-height: 1.7;
    color: var(--nacht-schrift);
    background: var(--nacht);
    border-radius: var(--kante-blatt);
    overflow-x: auto;
}
pre b { color: #e9a87f; font-weight: 500; }
code { font-family: var(--schrift-werk); font-size: .94em; }
p code, td code, li code {
    padding: 1px 4px;
    background: var(--papier-tief);
    border-radius: var(--kante-feld);
}

.tafel .weg { font-family: var(--schrift-werk); white-space: nowrap; }
.tafel .verb {
    display: inline-block;
    min-width: 52px;
    margin-right: var(--abstand-2);
    font-size: var(--gr-mikro);
    letter-spacing: .06em;
    color: var(--zinnober);
}
.tafel td { vertical-align: top; }
.tafel .parameter { font-family: var(--schrift-werk); font-size: var(--gr-mikro); color: var(--tinte-2); }

.stufenmarke {
    display: inline-block;
    padding: 1px 6px;
    font-size: var(--gr-mikro);
    letter-spacing: .06em;
    color: var(--tinte-2);
    border: 1px solid var(--linie-stark);
    border-radius: var(--kante-chip);
    white-space: nowrap;
}
.stufenmarke.hoch { color: var(--zinnober); border-color: var(--zinnober); }

.merksatz {
    margin: var(--abstand-4) 0;
    padding: var(--abstand-4);
    font-size: var(--gr-basis);
    background: var(--papier-warm);
    border-left: 3px solid var(--zinnober);
    border-radius: 0 var(--kante-blatt) var(--kante-blatt) 0;
}
.merksatz strong { display: block; margin-bottom: var(--abstand-2); }

.fuss {
    margin-top: var(--abstand-7);
    padding-top: var(--abstand-4);
    font-size: var(--gr-klein);
    color: var(--tinte-3);
    border-top: 1px solid var(--linie);
}

ul.liste { max-width: 74ch; padding-left: var(--abstand-4); color: var(--tinte-2); font-size: var(--gr-basis); }
ul.liste li { margin-bottom: var(--abstand-2); }

@media (max-width: 860px) {
    .titelblatt { grid-template-columns: 1fr; gap: var(--abstand-5); padding-top: var(--abstand-5); }
    .titelblatt h1 { font-size: var(--gr-titel); }
}