/* Self-hosted webfonts — do not edit the @font-face blocks by hand.
 *
 * Source: Google Fonts, fetched 2026-08-12 via
 *   https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,400..700;1,400..700&display=swap
 *   https://fonts.googleapis.com/css2?family=IM+Fell+English&display=swap
 * Files live in static/fonts/ and are the exact woff2 bytes Google served
 * (Jost v20, IM Fell English v14). The unicode-range values are copied
 * verbatim from those responses — they gate which subset the browser fetches.
 *
 * Jost is a variable font, so one file per subset+style covers 400 and 700.
 * The cyrillic subsets are intentionally omitted (no cyrillic content here).
 *
 * To update: re-fetch the CSS above, download the new woff2 URLs into
 * static/fonts/ under the same names, and refresh the unicode-ranges.
 * Licence: SIL Open Font Licence 1.1 for both families.
 */

/* Jost, upright — latin */
@font-face {
 font-family: 'Jost';
 font-style: normal;
 font-weight: 400 700;
 font-display: swap;
 src: url(../fonts/jost-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;
}

/* Jost, upright — latin-ext */
@font-face {
 font-family: 'Jost';
 font-style: normal;
 font-weight: 400 700;
 font-display: swap;
 src: url(../fonts/jost-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;
}

/* Jost, italic — latin */
@font-face {
 font-family: 'Jost';
 font-style: italic;
 font-weight: 400 700;
 font-display: swap;
 src: url(../fonts/jost-italic-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;
}

/* Jost, italic — latin-ext */
@font-face {
 font-family: 'Jost';
 font-style: italic;
 font-weight: 400 700;
 font-display: swap;
 src: url(../fonts/jost-italic-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;
}

/* IM Fell English — latin (the only subset upstream ships) */
@font-face {
 font-family: 'IM Fell English';
 font-style: normal;
 font-weight: 400;
 font-display: swap;
 src: url(../fonts/imfellenglish-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;
}

/* #006B88
 * #FCF5E5 Parchment for main body
 * #ffffec for header
 */

body {
 background-color: #FCF5E5;
 font-family: 'Jost', sans-serif;
}

body > header {
 background-color: #ffffec;
}

header .site-title { /* Header Title — an h1 on the homepage, a <p> elsewhere */
 font-family: 'IM Fell English', serif;
 font-size: 3em;
 /* Restate what the <h1> used to get for free from the element type, so the
  * <p> variant on subpages renders identically: line-height from
  * simple.css's h1,h2,h3{}; max-width from body>header h1{} (a bare <p> would
  * get 40rem); font-weight from the browser's default h1 style. Note IM Fell
  * English only ships weight 400 — the bold is synthesized, as it always was. */
 line-height: 1.1;
 max-width: 1200px;
 font-weight: 700;
}

main article h2 a[href] {
 text-decoration: none;
 font-size: 2rem;
}

a, a:visited {
 color: #006B88;
}

header nav ul {
 align-items: baseline;
}

header nav a, header nav a:visited {
 border: none;
 border-radius: 0;
 background: none;
 padding: 0;
 text-transform: uppercase;
 letter-spacing: 0.05em;
}

header nav a:hover {
 background: none;
 border-color: transparent;
 color: #006B88;
 text-decoration: underline;
}

header nav li + li::before {
 content: "·";
 display: inline-block;
 margin: 0 0.6em;
 color: #000000;
 opacity: 0.6;
}

header nav .current {
 text-transform: uppercase;
 letter-spacing: 0.05em;
 font-weight: 700;
 border-bottom: 2px solid #006B88;
 padding-bottom: 0.2rem;
}

.tag-cloud a {
 margin-right: 1rem;
 display: inline-block;
 line-height: 2.5;
}

.tag-cloud .tag-sm {
 font-size: 1.4rem;
}

.tag-cloud .tag-md {
 font-size: 2rem;
}

.tag-cloud .tag-lg {
 font-size: 2.8rem;
}

main > article {
 /* baseof.html legt jede Seite in ein nacktes <article>, und simple.css macht
  * daraus eine gerahmte Karte — jede Seite stand dadurch als Kasten in einer
  * ohnehin schmalen Spalte. Ohne padding:1rem sind zusätzlich 2rem Breite
  * zurück. Die verschachtelten article.entry-preview trifft der Selektor
  * nicht, die setzen sich unten weiterhin selbst zurück. */
 border: none;
 border-radius: 0;
 padding: 0;
}

article.entry-preview {
 /* simple.css styles bare <article> as a bordered card by default; undo that here */
 border: none;
 border-radius: 0;
 padding: 0;
 margin-top: 4rem;
 margin-bottom: 0;
}

article.entry-preview:first-child {
 margin-top: 0;
}

article h2.entry-title {
 /* needs to outrank simple.css's `article h2:first-child{margin-top:1rem}` */
 margin-top: 0;
 margin-bottom: 0.5rem;
}

p.entry-summary {
 margin-bottom: 0;
}

#pagination {
 /* Three fixed slots so the page counter stays centred even when
  * "Zurück" or "Weiter" is missing on the first/last page. */
 display: grid;
 grid-template-columns: 1fr auto 1fr;
 align-items: baseline;
 gap: 1rem;
}

#pagination .pagination-prev {
 justify-self: start;
}

#pagination .pagination-next {
 justify-self: end;
}

/* Status, shared by kodex entries (verbindlich | empfehlung | entwurf) and
 * campaigns (aktiv | geplant | ruhend | beendet). Deliberately *not* a badge:
 * boxed, uppercase and accent-coloured, it pulled far more attention than the
 * information is worth and fought with the rest of the page. It now carries
 * exactly the weight of the system name next to it, so a campaign line reads
 * as one quiet annotation instead of two competing ones.
 *
 * `data-status` stays on the element. Nothing selects on it today; it is the
 * hook if one state ever has to stand out again, and it keeps the layouts
 * unchanged. The class name is likewise kept — six layouts reference it. */
.status-badge {
 color: var(--text-light);
 font-size: 0.9em;
}

/* The small grey line under a heading that carries status/date/version. */
.meta-line {
 color: var(--text-light);
 font-size: 0.9em;
}

/* Already 0.9em and muted out here, so inheriting keeps the status on the same
 * optical level rather than compounding to 0.81em. */
.meta-line .status-badge {
 font-size: inherit;
 margin-right: 0.5em;
}

/* Campaign header block: label/value pairs, not the browser's indented dl. */
.kampagne-meta {
 display: grid;
 grid-template-columns: max-content 1fr;
 gap: 0.3rem 1.5rem;
 margin-bottom: 2rem;
}

.kampagne-meta dt {
 color: var(--text-light);
 font-size: 0.9em;
 text-transform: uppercase;
 letter-spacing: 0.05em;
}

.kampagne-meta dd {
 margin: 0;
}

/* Here the sibling <dd>s are full-size body text, so a muted, smaller status
 * would read as a rendering fault rather than as restraint. The <dt> beside it
 * already says "Status"; the value is just a value. */
.kampagne-meta .status-badge {
 color: inherit;
 font-size: inherit;
}

/* Compact, dated index of a campaign's posts — too many for full previews. */
.post-list time {
 color: var(--text-light);
 font-size: 0.9em;
 margin-right: 0.5em;
}

.breadcrumb {
 color: var(--text-light);
 font-size: 0.9em;
 margin-bottom: 0;
}

/* The campaign list on the home page: name, status badge, system, one line. */
.kampagnen-liste li {
 margin-bottom: 0.4rem;
}

.kampagnen-liste .status-badge {
 margin-left: 0.4em;
}

/* Without the box, status and system are two muted words separated by nothing
 * but a space. The adjacent-sibling selector puts the dot in only when a
 * status actually precedes the system, so a campaign that has one but not the
 * other never gets a dangling separator. */
.kampagnen-liste .status-badge + .kampagne-system::before {
 content: "·";
 margin: 0 0.4em;
}

.kampagne-system {
 color: var(--text-light);
 font-size: 0.9em;
}

/* "nimmt Spieler auf" — steht nur da, wenn es stimmt, und ist die Information,
 * wegen der die Liste überhaupt überflogen wird. Deshalb in Textfarbe statt
 * ausgegraut wie System und Zeitraum daneben; in der .meta-line auf /kampagnen/
 * hebt genau das die Angabe aus der sonst durchgehend grauen Zeile heraus. Mehr
 * nicht: kein Kasten, keine Akzentfarbe, wie beim status-badge. */
.kampagne-aufnahme {
 color: var(--text);
 font-size: 0.9em;
}

/* Der Trenner in der Kampagnenliste kommt von den beiden Geschwisterselektoren,
 * damit er nur erscheint, wenn links davon wirklich etwas steht — eine Kampagne
 * ohne `system` bekommt so keinen Punkt ins Leere. In der .meta-line steht der
 * Punkt dagegen schon im Template, wie bei Zeitraum daneben auch. */
.kampagnen-liste .kampagne-system + .kampagne-aufnahme::before,
.kampagnen-liste .status-badge + .kampagne-aufnahme::before {
 content: "·";
 margin: 0 0.4em;
 color: var(--text-light);
}

/* Hilfsmittel einer Kampagne: Karte, VTT, Bogen. Der Link trägt die Zeile, das
 * <span> dahinter ist die knappe Erklärung und tritt zurück. */
.kampagne-links span {
 color: var(--text-light);
 font-size: 0.9em;
}

.kampagne-links span::before {
 content: "—";
 margin-right: 0.4em;
}

/* Startseite: der Wegweiser. Frage links, Ziel rechts, zweispaltig
 * ausgerichtet. Ein leeres <dt> ist zulässig und gewollt — solange die Frage
 * im Front Matter fehlt, steht in der Zeile nur der Pfeil mit dem Link. */
.wegweiser {
 display: grid;
 grid-template-columns: max-content 1fr;
 gap: 0.4rem 1.5rem;
 margin-bottom: 2rem;
}

.wegweiser dt {
 color: var(--text-light);
}

.wegweiser dd {
 margin: 0;
}

.wegweiser dd::before {
 content: "→";
 margin-right: 0.5em;
 color: var(--text-light);
}

@media (max-width: 480px) {
 /* Zu schmal für zwei Spalten: Frage über ihr Ziel, die Paare durch Abstand
  * getrennt. Hier — und nur hier — darf eine noch ungeschriebene Frage ganz
  * verschwinden; zweispaltig würde das die dt/dd-Abwechslung zerlegen und die
  * übrigen Zeilen in die falsche Spalte rutschen lassen. */
 .wegweiser {
  grid-template-columns: 1fr;
  gap: 0;
 }

 .wegweiser dt:empty {
  display: none;
 }

 .wegweiser dd {
  margin-bottom: 0.8rem;
 }
}

/* Waagerechte Linkliste mit ·-Trenner, wie die Navigation oben. */
.linkliste {
 list-style: none;
 padding: 0;
 display: flex;
 flex-wrap: wrap;
}

.linkliste li + li::before {
 content: "·";
 display: inline-block;
 margin: 0 0.6em;
 color: var(--text-light);
}

/* Das Footer-Menü. text-align:center aus simple.css greift bei display:flex
 * nicht, die Reihe muss selbst zentriert werden. `current` markiert die
 * aktuelle Seite — nur fett, der Footer soll leise bleiben; header nav
 * .current mit seinem Unterstrich ist auf den Kopf beschränkt. */
footer nav .linkliste {
 justify-content: center;
 margin-bottom: 0.6rem;
}

footer nav .current {
 font-weight: 700;
}

/* Einstieg: die nummerierte Folge mit einer Zeile Beschreibung je Schritt.
 * p.entry-summary bringt nur margin-bottom:0 mit, der Vorgabe-Abstand oben
 * bleibt stehen — dadurch hängt die Beschreibung optisch am nächsten Schritt
 * statt an ihrem eigenen Titel. Hier andersherum: eng an den Titel, Abstand
 * zum nächsten Paar. */
.einstieg-schritte p {
 margin-top: 0.2rem;
 margin-bottom: 1.2rem;
}

.einstieg-schritte li:last-child p {
 margin-bottom: 0;
}

@media (prefers-color-scheme: dark) {
 body {
  --bg: #2b241c;
  --text: #ece3d2;
  --accent: #4fb3c9;
  --accent-hover: #7fd1e3;
  --text-light: #c9bfa9;
  --border: #5a5040;
  --accent-bg: #34291c;
  background-color: #2b241c;
 }

 body > header {
  background-color: #241f18;
 }

 a, a:visited {
  color: #4fb3c9;
 }

 header nav a:hover {
  color: #4fb3c9;
 }

 header nav li + li::before {
  color: #ece3d2;
 }

 header nav .current {
  border-bottom-color: #4fb3c9;
 }
}