/* vam.valkyriangaming.com – "Nordlicht 2" for the public pages.
   Loaded after site.css. Building blocks carry the prefix .s2-, rules for whole pages sit under body:not(.cp) as a second guard.
   Tokens live in site.css :root.
   Phone first (390 × 844): text >= 14 px, tap targets >= 44 px, no italics, no pulse. Cardo SC only for five roles – brand,
   hero H1, page H1, section H2, release names (.s2-name); everything else, and every version number, in the sans.

   Blocks:  .s2-abschnitt  .s2-kopfzeile (+ .s2-mehr)  .s2-karte (--next, --live; __kopf, .s2-bildkopf)  .s2-name
            .s2-vchip[data-z=live|next|geplant|alt]  .s2-status[data-zustand=frisch]  .s2-fahrplan > li[data-z=live|next|geplant|spaeter]
            .s2-spur  .s2-fortschritt[data-form=karte|voll|zeile] with .s2-phasen, .s2-phase-satz, .s2-anteil, .s2-zuletzt, .s2-neu,
            .s2-kurz  .s2-liste / .s2-zeile  .s2-falte (--breit)  .s2-chips / .s2-chip  .s2-knopf (--primaer, --leise, --voll)
            .s2-knoepfe (--paar)  .s2-balken
   Page blocks: .s2-hero  .s2-seitenkopf  .s2-kacheln + .s2-zahl  .s2-notizen / .s2-notiz (--offen)  .s2-fuss
   Next update: lines without data are left out by the server – nothing here reserves room for a missing line, and an emptied
   element hides itself. */

/* ---------- Page ground and type ---------- */
body:not(.cp) {
  /* the aurora sits at the top of the page, under the header – no light/dark sections any more */
  background: var(--nordlicht), var(--grund);
  background-repeat: no-repeat; background-size: 100% 960px; background-position: 50% 0;
  font-size: var(--fs-text); line-height: 1.5;
  --s2-pfeil-r: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5.5l6.5 6.5L9 18.5'/%3E%3C/svg%3E");
  --s2-pfeil-u: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 9l6.5 6.5L18.5 9'/%3E%3C/svg%3E");
  --s2-haken: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%230b1a0a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.6 6.3l2.2 2.2 4.6-4.9'/%3E%3C/svg%3E");
}
body:not(.cp) :is(.seitenkopf, .hero)::before { content: none; }   /* their glow is replaced by the page ground */

/* No italics on the public pages, CJK included (their fonts have none). */
body:not(.cp), body:not(.cp) *, body:not(.cp) *::before, body:not(.cp) *::after { font-style: normal !important; }

/* Cardo SC only for the five roles; the old blocks that wore it switch to the sans (the header bar: site.css). A release name
   (.s2-name) or note title stays Cardo even on an h3. */
body:not(.cp) :is(:is(h3, h4):not(.s2-name, .s2-notiz__titel), .knopf, .chip, .etikett, .live, .feld > label, .feld > .label,
  fieldset legend, .ablage strong, .wahl label > span, details.hilfe summary, .rm-filter button, .vergleich .thema) {
  font-family: var(--f-ui); letter-spacing: .01em;
}
body:not(.cp) :is(h3, h4, .faq summary):not(.s2-name, .s2-notiz__titel) { font-weight: 600; }
/* Labels where they stay (page heads): 14 px 700 capitals. */
body:not(.cp) :is(.etikett, .vergleich .thema) { font: 700 var(--fs-min)/1.3 var(--f-ui); letter-spacing: .06em; text-transform: uppercase; }
/* No visible text below 14 px. */
body:not(.cp) :is(.chip, .rm-punkt .chip, .sprachwahl summary, .datei__info, .datei__bild, .ware__tag, .ware__jetzt small, .linkfeld input,
  .terr-herold time, .terr-server__stand, .terr-reiche__zahl.leise, .live) { font-size: var(--fs-min); }
/* Old titles at the new sizes: page H1 32 px, section H2 26 px at 390, no glow line under them. */
body:not(.cp) .seitenkopf h1 { font-size: var(--fs-h1); }
body:not(.cp) .abschnitt__kopf h2 { font-size: var(--fs-h2); letter-spacing: .01em; }
body:not(.cp) .abschnitt__kopf h2::after { content: none; }
body:not(.cp) .galerie a, body:not(.cp) dialog.lupe img { border-radius: var(--r-bild); }

/* Focus, motion, touch */
body:not(.cp) :is(input, textarea, select):focus-visible { outline: 2px solid var(--akzent-hell); outline-offset: 1px; }
body:not(.cp) .mk--in_arbeit { animation: none; }
body:not(.cp) .menue nav a { min-height: 48px; display: flex; align-items: center; }
body:not(.cp) .springen { display: inline-flex; align-items: center; min-height: 44px; }
/* The label over a sub-page title is only kept where it leads somewhere (audit D23): "‹ Territories" on a server's page. */
body:not(.cp) .etikett--zurueck a { display: inline-flex; align-items: center; min-height: 44px; padding-block: 0; margin-block: -13px; text-decoration: none; }
body:not(.cp) .etikett--zurueck a::before { content: "\2039"; margin-inline-end: .45em; font-size: 1.3em; line-height: 1; }
/* Links in running text (hints on /report, /account): the hit area grows to 44 px without moving a line – vertical padding on
   an inline box does not change the line height; the focus ring stays at the text. */
body:not(.cp) :is(p, li, dd) > a:not([class]) { padding-block: 12px; }
body:not(.cp) :is(p, li, dd) > a:not([class]):focus-visible { outline-offset: -10px; }
body:not(.cp) details.hilfe summary { min-height: 44px; padding-block: 12px; line-height: 20px; }
@media (max-width: 479.98px) { body:not(.cp) .rm-filter { flex-wrap: wrap; overflow-x: visible; } }   /* "Готово" was cut off */
body:not(.cp) .rm-filter button { min-width: 44px; }   /* in the sans "All" is 41 px wide */
:is([data-slot="status"], [data-slot="fahrplan"], [data-slot="spur"]):empty { display: none; }

/* ---------- Section and its head ---------- */
.s2-abschnitt { padding-block: var(--abstand); border-top: 1px solid var(--linie); }
.s2-kopfzeile { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px 12px; margin-bottom: 16px; }
.s2-kopfzeile > * { grid-column: 1 / -1; }
.s2-kopfzeile > h2 { grid-column: 1; font: 700 var(--fs-h2)/1.15 var(--f-titel); letter-spacing: .01em; color: var(--text-1); }
.s2-kopfzeile > h2::after { content: none; }
.s2-kopfzeile > .s2-mehr { grid-column: 2; grid-row: 1; }
.s2-kopfzeile > p { max-width: 60ch; font-size: var(--fs-text); color: var(--text-2); }
.s2-kopfzeile > .hinweis-en { margin: 0; }
/* quiet "All notes ›" link */
.s2-mehr { display: inline-flex; align-items: center; min-height: 44px; padding-inline: 4px; color: var(--akzent-hell); font: 600 .9375rem/1.2 var(--f-ui); text-decoration: none; white-space: nowrap; }
.s2-mehr:hover { color: var(--text-1); text-decoration: underline; }

/* ---------- Card: flat, one radius, colour only on the two state cards ---------- */
.s2-karte {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; align-content: start; min-width: 0;
  padding: 16px; background: var(--karte); border: 1px solid var(--linie); border-radius: var(--r-karte);
}
@media (min-width: 640px) { .s2-karte { padding: 20px; } }
/* the glow is mixed into the card colour, not see-through: on the aurora at the top of a page the corner fell to 4.4 : 1 for text-3 */
.s2-karte--next { border-color: color-mix(in srgb, var(--akzent) 50%, transparent); background: linear-gradient(160deg, color-mix(in srgb, var(--akzent) 12%, var(--karte)), var(--karte) 60%); }
.s2-karte--live { border-color: color-mix(in srgb, var(--gut) 40%, transparent); }
.s2-karte__kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; min-width: 0; }
.s2-karte__kopf > time { margin-left: auto; font-size: var(--fs-meta); color: var(--text-3); }
.s2-karte > p { color: var(--text-2); }
/* painting (64 px) beside chip, name and one line */
.s2-bildkopf { display: grid; grid-template-columns: 64px minmax(0, 1fr); align-items: center; gap: 4px 14px; min-width: 0; }
.s2-bildkopf > :not(img, picture) { grid-column: 2; justify-self: start; max-width: 100%; }
.s2-bildkopf > img, .s2-bildkopf > picture { grid-column: 1; grid-row: 1 / span 3; align-self: start; }
.s2-bildkopf img { display: block; width: 64px; height: 64px; object-fit: cover; border-radius: var(--r-bild); background: var(--slot); }
/* release name: the fifth Cardo role */
.s2-name { margin: 0; font: 700 var(--fs-name)/1.2 var(--f-titel); letter-spacing: .01em; color: var(--text-1); text-wrap: balance; hyphens: auto; }
.s2-karte .s2-zeilen-3 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }

/* ---------- Version chip: one pill, always sans, "v0.0.20b" stays lowercase ----------
   Inline blocks, not flex: the server writes texts like "v0.0.21 <b>live</b>" – in a flex box every text run became a column. */
.s2-vchip {
  --s2-ton: var(--text-3);
  position: relative; display: inline-block; min-height: 30px; padding: 4px 12px 4px 26px; border-radius: 999px; justify-self: start;
  font: 700 var(--fs-min)/20px var(--f-ui); font-variant-numeric: tabular-nums; letter-spacing: 0; text-transform: none; white-space: nowrap;
  color: var(--text-2); background: var(--karte-2); border: 1px solid var(--linie); text-decoration: none;
}
.s2-vchip::before { content: ""; position: absolute; left: 10px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: var(--s2-ton); }
.s2-vchip[data-z="live"] { --s2-ton: var(--gut); color: #d9f3d6; background: color-mix(in srgb, var(--gut) 14%, transparent); border-color: color-mix(in srgb, var(--gut) 45%, transparent); }
.s2-vchip[data-z="next"] { --s2-ton: var(--akzent); color: var(--akzent-hell); background: color-mix(in srgb, var(--akzent) 13%, transparent); border-color: color-mix(in srgb, var(--akzent) 45%, transparent); }
.s2-vchip[data-z="geplant"] { --s2-ton: var(--aurora); color: #ddd5ff; background: color-mix(in srgb, var(--aurora) 14%, transparent); border-color: color-mix(in srgb, var(--aurora) 45%, transparent); }
a.s2-vchip:hover { border-color: currentColor; }
@media (pointer: coarse) { a.s2-vchip { padding-block: 11px; } }   /* 44 px as a link on touch */

/* ---------- Status chip (hero, page heads): green dot, never a pulse; text flows, may take two lines ---------- */
.s2-status {
  position: relative; display: inline-block; max-width: 100%; min-height: 44px; padding: 11px 16px 11px 30px; border-radius: 22px; justify-self: start;
  font: 400 .9375rem/20px var(--f-ui); color: var(--text-1); text-decoration: none; background: var(--karte); border: 1px solid var(--linie-stark);
}
.s2-status::before { content: ""; position: absolute; left: 14px; top: 21px; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: var(--gut); }
.s2-status b { font-weight: 700; font-variant-numeric: tabular-nums; }
.s2-status time, .s2-zeile__meta time { white-space: nowrap; }   /* "since 4 Oct", "10月28日" stay on one line */
.s2-status[data-zustand="frisch"] { background: color-mix(in srgb, var(--gut) 12%, var(--karte)); border-color: color-mix(in srgb, var(--gut) 45%, transparent); }
a.s2-status { padding-right: 34px; }
a.s2-status::after { content: ""; position: absolute; right: 12px; top: 50%; width: 16px; height: 16px; margin-top: -8px; background: var(--text-3); -webkit-mask: var(--s2-pfeil-r) center / 16px no-repeat; mask: var(--s2-pfeil-r) center / 16px no-repeat; }
a.s2-status:hover { color: var(--text-1); border-color: var(--gut); }
/* Advance notice under the status chip (vorlaufHtml): amber bar on the left, plain text, no link */
[data-slot="status"] > .s2-vorlauf {
  max-width: 62ch; margin: 12px 0 0; padding: 12px 16px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--warn) 35%, transparent);
  border-left: 4px solid var(--warn); background: color-mix(in srgb, var(--warn) 8%, var(--karte)); color: var(--text-1); font: 400 .9375rem/1.45 var(--f-ui);
}

/* ---------- Timetable on / : live → next → then → later, one vertical line ---------- */
.s2-fahrplan { --s2-knoten-y: 32px; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--luecke); }
.s2-fahrplan > li { --s2-von: var(--linie-feld); --s2-bis: var(--linie-feld); position: relative; min-width: 0; padding-left: 28px; }
.s2-fahrplan > li::before {   /* the stop */
  content: ""; position: absolute; z-index: 1; left: 0; top: calc(var(--s2-knoten-y) - 8px); width: 16px; height: 16px; box-sizing: border-box;
  border-radius: 50%; border: 2px solid var(--linie-feld); background: var(--grund);
}
.s2-fahrplan > li:not(:last-child)::after {   /* the line down to the next stop */
  content: ""; position: absolute; left: 7px; top: var(--s2-knoten-y); width: 2px; height: calc(100% + var(--luecke)); border-radius: 1px;
  background: linear-gradient(180deg, var(--s2-von), var(--s2-bis));
}
.s2-fahrplan > li[data-z="live"] { --s2-von: var(--gut); --s2-bis: var(--akzent); }
.s2-fahrplan > li[data-z="live"]::before { border-color: var(--gut); background: var(--gut) var(--s2-haken) center / 10px no-repeat; }
.s2-fahrplan > li[data-z="next"] { --s2-von: var(--akzent); --s2-bis: var(--aurora); }
.s2-fahrplan > li[data-z="next"]::before { border-color: var(--akzent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--akzent) 22%, transparent); }
.s2-fahrplan > li[data-z="geplant"] { --s2-von: var(--aurora); --s2-bis: var(--aurora); }
.s2-fahrplan > li[data-z="geplant"]::before { border-color: var(--aurora); }
.s2-fahrplan > li[data-z="spaeter"]::before { border-style: dashed; }
.s2-fahrplan > li:has(+ li[data-z="spaeter"]) { --s2-bis: var(--linie-feld); }
@media (min-width: 960px) {   /* live and next side by side, the rest in one row below; order and chips carry the sequence */
  .s2-fahrplan { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
  .s2-fahrplan > li { display: grid; padding-left: 0; grid-column: span 2; }
  .s2-fahrplan > li::before, .s2-fahrplan > li:not(:last-child)::after { display: none; }
  .s2-fahrplan > li:is([data-z="live"], [data-z="next"]), .s2-fahrplan:not(:has(> li:nth-child(5))) > li { grid-column: span 3; }
  .s2-fahrplan > li[data-z="next"]:first-child { grid-column: 1 / -1; }
}

/* ---------- Track on /roadmap: up to four stops as links ---------- */
.s2-spur:empty { display: none; }   /* no stops (live data on a short break): no empty landmark */
.s2-spur ol { list-style: none; margin: 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
.s2-spur li { --s2-von: var(--linie-feld); --s2-bis: var(--linie-feld); position: relative; display: grid; min-width: 0; }
.s2-spur li:not(:last-child)::after { content: ""; position: absolute; top: 15px; left: 50%; width: 100%; height: 2px; background: linear-gradient(90deg, var(--s2-von), var(--s2-bis)); }
.s2-spur a {
  position: relative; z-index: 1; display: grid; justify-items: center; align-content: start; gap: 2px; min-width: 44px; min-height: 44px;
  padding: 30px 4px 8px; border-radius: var(--r-knopf); text-align: center; text-decoration: none; color: var(--text-3);
}
.s2-spur a::before {
  content: ""; position: absolute; top: 9px; left: 50%; width: 14px; height: 14px; margin-left: -7px; box-sizing: border-box;
  border-radius: 50%; border: 2px solid var(--linie-feld); background: var(--grund);
}
.s2-spur b { font: 800 .9375rem/1.2 var(--f-ui); font-variant-numeric: tabular-nums; color: var(--text-1); }
.s2-spur a > span { font-size: var(--fs-meta); line-height: 1.25; color: var(--text-3); }
.s2-spur a:hover b { color: var(--akzent-hell); text-decoration: underline; }
.s2-spur li[data-z="live"] { --s2-von: var(--gut); --s2-bis: var(--akzent); }
.s2-spur li[data-z="live"] a::before { border-color: var(--gut); background: var(--gut) var(--s2-haken) center / 8px no-repeat; }
.s2-spur li[data-z="next"] { --s2-von: var(--akzent); --s2-bis: var(--aurora); }
.s2-spur li[data-z="next"] a::before { border-color: var(--akzent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--akzent) 22%, transparent); }
.s2-spur li[data-z="next"] b { color: var(--akzent-hell); }
.s2-spur li[data-z="geplant"] { --s2-von: var(--aurora); --s2-bis: var(--aurora); }
.s2-spur li[data-z="geplant"] a::before { border-color: var(--aurora); }
.s2-spur li[data-z="spaeter"] a::before { border-style: dashed; }
.s2-spur li:has(+ li[data-z="spaeter"]) { --s2-bis: var(--linie-feld); }

/* ---------- Next update: phase track, sentence, share, last progress, latest ---------- */
.s2-fortschritt { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; min-width: 0; }
.s2-phasen { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
.s2-phasen > li {
  display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 6px; min-width: 0; text-align: center; hyphens: auto; overflow-wrap: break-word;
  font: 600 var(--fs-min)/1.25 var(--f-ui); color: var(--text-3);
}
.s2-phasen > li::before { content: ""; height: 8px; box-sizing: border-box; border-radius: 4px; background: var(--slot); border: 1px solid var(--linie-feld); }
/* "done" at 55 % akzent: 45 % gave 2.8 : 1 on the next card's corner, below the 3 : 1 for UI parts */
.s2-phasen > li[data-z="da"]::before { background: color-mix(in srgb, var(--akzent) 55%, transparent); border-color: transparent; }
.s2-phasen > li[data-z="jetzt"]::before { background: var(--akzent); border-color: var(--akzent); }
.s2-phasen > li[data-z="jetzt"] { font-weight: 700; color: var(--text-1); }
.s2-phase-satz { margin: 0; font-size: var(--fs-text); line-height: 1.45; color: var(--text-1); }
.s2-anteil { display: grid; gap: 8px; }
.s2-anteil__balken { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 3px; max-width: 420px; }
.s2-anteil__balken > i { height: 6px; box-sizing: border-box; border-radius: 3px; background: var(--slot); border: 1px solid var(--linie-feld); }
:is(.s2-anteil[data-anteil="1"] i:nth-child(-n+1), .s2-anteil[data-anteil="2"] i:nth-child(-n+2), .s2-anteil[data-anteil="3"] i:nth-child(-n+3),
    .s2-anteil[data-anteil="4"] i:nth-child(-n+4), .s2-anteil[data-anteil="5"] i:nth-child(-n+5), .s2-anteil[data-anteil="6"] i:nth-child(-n+6),
    .s2-anteil[data-anteil="7"] i:nth-child(-n+7), .s2-anteil[data-anteil="8"] i:nth-child(-n+8), .s2-anteil[data-anteil="9"] i:nth-child(-n+9),
    .s2-anteil[data-anteil="10"] i) { background: var(--akzent); border-color: var(--akzent); }
.s2-anteil > p { margin: 0; font-size: .9375rem; line-height: 1.4; color: var(--text-2); }
.s2-zuletzt { margin: 0; font-size: var(--fs-meta); line-height: 1.4; color: var(--text-3); }
.s2-zuletzt time { color: var(--text-2); }
.s2-neu { margin: 0; padding-top: 12px; border-top: 1px solid var(--linie); display: grid; gap: 8px; }
.s2-neu figcaption { font: 700 var(--fs-min)/1.3 var(--f-ui); color: var(--text-2); }
.s2-neu ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 12px; }
.s2-neu li { display: grid; grid-template-columns: subgrid; grid-column: 1 / -1; align-items: baseline; font-size: .9375rem; line-height: 1.4; color: var(--text-2); }
.s2-neu time { font-size: var(--fs-meta); color: var(--text-3); font-variant-numeric: tabular-nums; }
.s2-neu li[data-art="live"] { color: var(--text-1); }
/* a line the server or site.js left empty takes no room */
:is(.s2-phase-satz, .s2-zuletzt, .s2-anteil > p, .s2-kurz):empty, .s2-anteil:not(:has(p:not(:empty))):not(:has(i)), .s2-neu:not(:has(li)) { display: none; }
/* form "zeile" on /updates: one row – "Next update: v0.0.22 · Building", the share sentence, "Roadmap ›" */
.s2-fortschritt[data-form="zeile"] {
  grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px 12px; min-height: 64px; padding: 8px 16px;
  background: var(--karte); border: 1px solid var(--linie); border-radius: var(--r-karte);
}
.s2-fortschritt[data-form="zeile"] > * { grid-column: 1; }
.s2-fortschritt[data-form="zeile"] :is(.s2-phasen, .s2-phase-satz, .s2-anteil__balken, .s2-zuletzt, .s2-neu) { display: none; }
.s2-fortschritt[data-form="zeile"] > :is(.s2-mehr, .s2-knopf--leise) { grid-column: 2; grid-row: 1; justify-self: end; }
.s2-fortschritt[data-form="zeile"]:has(> .s2-anteil p:not(:empty)) > :is(.s2-mehr, .s2-knopf--leise) { grid-row: 1 / span 2; }
.s2-kurz { margin: 0; font: 600 var(--fs-text)/1.4 var(--f-ui); color: var(--text-1); font-variant-numeric: tabular-nums; }
.s2-fortschritt[data-form="zeile"] .s2-anteil > p { font-size: var(--fs-meta); color: var(--text-2); }

/* ---------- List and row: one frame, rows >= 56 px, arrow only on links ---------- */
.s2-liste {
  list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); overflow: clip;
  background: var(--karte); border: 1px solid var(--linie); border-radius: var(--r-karte);
}
.s2-liste > * + * { border-top: 1px solid var(--linie); }
.s2-zeile { display: flex; align-items: center; gap: 12px; min-width: 0; min-height: 56px; padding: 10px 16px; color: var(--text-2); text-decoration: none; }
:not(.s2-liste, .s2-liste > li) > .s2-zeile { background: var(--karte); border: 1px solid var(--linie); border-radius: var(--r-karte); }
.s2-zeile img { flex: none; width: 40px; height: 40px; object-fit: cover; border-radius: var(--r-bild); background: var(--slot); }
.s2-zeile img.s2-zeile__bild { width: 48px; height: 48px; margin-block: -2px; }
.s2-zeile__text { flex: 1 1 auto; display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; min-width: 0; }   /* the track, not only the box, may shrink: a long Russian word wraps instead of running under the chip */
.s2-zeile__titel { font: 600 var(--fs-text)/1.35 var(--f-ui); color: var(--text-1); hyphens: auto; }
.s2-zeile__meta { font-size: var(--fs-meta); line-height: 1.35; color: var(--text-3); }
.s2-zeile p { margin: 0; font-size: .9375rem; line-height: 1.45; color: var(--text-2); }
a.s2-zeile::after { content: ""; flex: none; width: 20px; height: 20px; margin-left: auto; background: var(--text-3); -webkit-mask: var(--s2-pfeil-r) center / 20px no-repeat; mask: var(--s2-pfeil-r) center / 20px no-repeat; }
a.s2-zeile:hover { color: var(--text-2); background: var(--karte-hover); }
a.s2-zeile:hover::after { background: var(--akzent-hell); }
.s2-liste :is(a, summary):focus-visible { outline-offset: -3px; border-radius: 12px; }
@media (min-width: 960px) {
  .s2-liste--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .s2-liste--2 > :nth-child(2) { border-top: 0; }
  .s2-liste--2 > :nth-child(even) { border-left: 1px solid var(--linie); }
}

/* ---------- Fold: details, arrow turns 180° in 150 ms ----------
   The arrow is not a flex item: in a wrapping row a long question ("Can I use it together with Wings of Valhalla?") pushed it
   onto a line of its own. It sits fixed at the right edge, centred; the text (often a bare text node, which takes no flex
   rules) wraps in the room the padding leaves it. */
:is(.s2-falte, .s2-liste > details) > summary {
  position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; min-height: 52px; padding-right: 32px;
  cursor: pointer; list-style: none; font: 600 var(--fs-text)/1.35 var(--f-ui); color: var(--text-1);
}
:is(.s2-falte, .s2-liste > details) > summary > :only-child { flex: 1 1 0; min-width: 0; }
:is(.s2-falte, .s2-liste > details) > summary::-webkit-details-marker { display: none; }
:is(.s2-falte, .s2-liste > details) > summary::after {
  content: ""; position: absolute; right: 0; top: 50%; width: 20px; height: 20px; margin-top: -10px; background: var(--text-3);
  -webkit-mask: var(--s2-pfeil-u) center / 20px no-repeat; mask: var(--s2-pfeil-u) center / 20px no-repeat;
}
@media (prefers-reduced-motion: no-preference) { :is(.s2-falte, .s2-liste > details) > summary::after { transition: transform 150ms ease-out; } }
:is(.s2-falte, .s2-liste > details)[open] > summary::after { transform: rotate(180deg); }
:is(.s2-falte, .s2-liste > details) > summary:hover::after { background: var(--akzent-hell); }
.s2-falte[open] > summary { margin-bottom: 8px; }
/* The two older folds (log file help on /report, zone list under the map) wear the same chevron on the right (audit D21). */
:is(details.hilfe, details.terr-liste) > summary { position: relative; list-style: none; padding-right: 32px; cursor: pointer; }
:is(details.hilfe, details.terr-liste) > summary::-webkit-details-marker { display: none; }
details.terr-liste > summary::before { content: none; }   /* its old triangle (site.css) */
:is(details.hilfe, details.terr-liste) > summary::after {
  content: ""; position: absolute; right: 0; top: 50%; width: 20px; height: 20px; margin-top: -10px; background: var(--text-3);
  -webkit-mask: var(--s2-pfeil-u) center / 20px no-repeat; mask: var(--s2-pfeil-u) center / 20px no-repeat;
}
@media (prefers-reduced-motion: no-preference) { :is(details.hilfe, details.terr-liste) > summary::after { transition: transform 150ms ease-out; } }
:is(details.hilfe, details.terr-liste)[open] > summary::after { transform: rotate(180deg); }
.s2-liste > details > summary { min-height: 56px; padding: 12px 48px 12px 16px; }
.s2-liste > details > summary::after { right: 16px; }
.s2-liste > details[open] > summary { margin-bottom: 0; }
.s2-liste > details > :not(summary) { margin: 0; padding: 0 16px 16px; max-width: 68ch; }
.s2-karte.s2-falte { display: block; padding-block: 2px; }   /* a details element is no reliable grid container */
/* roadmap filter: a block without a matching point goes, also when it is a fold card (the rule above has the same weight and
   comes later than site.css); "Show n done" holds only done points, so it goes under "In progress" and "Planned" */
.rm-raster :is(.rm-abschnitt, .rm-gruppe).ist-leer { display: none; }
.rm-raster:is([data-filter="in_arbeit"], [data-filter="geplant"]) .rm-mehr { display: none; }
/* no points (roadmap not published yet, live data on a short break): no legend */
.rm-legende:has(+ .rm-raster > .leer:only-child) { display: none; }   /* :has() cannot nest */
.s2-karte.s2-falte[open] { padding-bottom: 16px; }
.s2-karte.s2-falte > :not(summary) + * { margin-top: 12px; }
/* site.js opens it from 960 px, then its title goes; still closed (no JS), the title stays so the reader can open it */
@media (min-width: 960px) { details.s2-falte--breit[open] > summary { display: none; } }

/* ---------- Chips (not clickable) ---------- */
.s2-zeile__text > .s2-chip { justify-self: start; margin-top: 4px; }   /* the chip as the last line of a row, as wide as its text */
.s2-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
:is(.s2-chips > li, .s2-chip) {
  display: inline-block; max-width: 100%; min-height: 30px; padding: 5px 10px; border-radius: 15px;
  font: 600 var(--fs-min)/18px var(--f-ui); font-variant-numeric: tabular-nums; color: var(--text-2); background: var(--karte-2); border: 1px solid var(--linie);
}
/* chips that are links (live card on /): the link fills the chip, 44 px tall on phones and touch screens */
.s2-chips > li:has(> a) { padding: 0; }
.s2-chips > li > a { display: flex; align-items: center; min-height: 28px; padding: 5px 10px; border-radius: inherit; color: inherit; text-decoration: none; }
.s2-chips > li > a:hover { color: var(--text-1); }
.s2-chips > li > a:focus-visible { outline: 2px solid var(--akzent-hell); outline-offset: 2px; }
@media (max-width: 767.98px), (pointer: coarse) { .s2-chips > li > a { min-height: 44px; min-width: 44px; justify-content: center; } }   /* phones and every touch screen */
:is(.s2-chips > li, .s2-chip)[data-z="live"] { color: #d9f3d6; background: color-mix(in srgb, var(--gut) 14%, transparent); border-color: color-mix(in srgb, var(--gut) 45%, transparent); }
:is(.s2-chips > li, .s2-chip)[data-z="next"] { color: var(--akzent-hell); background: color-mix(in srgb, var(--akzent) 13%, transparent); border-color: color-mix(in srgb, var(--akzent) 45%, transparent); }
:is(.s2-chips > li, .s2-chip)[data-z="geplant"] { color: #ddd5ff; background: color-mix(in srgb, var(--aurora) 14%, transparent); border-color: color-mix(in srgb, var(--aurora) 45%, transparent); }
/* inside a row or a fold title a chip keeps its size; the text beside it wraps instead */
:is(.s2-zeile, .s2-karte__kopf, .s2-falte > summary, .s2-liste > details > summary) > :is(.s2-chip, .s2-vchip, time) { flex: none; white-space: nowrap; }

/* ---------- Buttons: primary 52 (one per section) · secondary 46 · quiet 44 – sans 700 16, radius 14 ---------- */
.s2-knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 6px 18px; border-radius: var(--r-knopf);
  font: 700 var(--fs-text)/1.2 var(--f-ui); letter-spacing: .01em; text-align: center; text-decoration: none; cursor: pointer;
  color: var(--text-1); background: var(--karte-2); border: 1px solid var(--linie-stark); transition: background-color 150ms, border-color 150ms;
}
.s2-knopf:hover { color: var(--text-1); background: var(--karte-hover); border-color: var(--akzent); }
.s2-knopf:active { transform: translateY(1px); }
.s2-knopf svg { width: 20px; height: 20px; flex: none; fill: currentColor; }
.s2-knopf--primaer { min-height: 52px; color: var(--akzent-text); border-color: transparent; background: linear-gradient(180deg, var(--knopf-von), var(--knopf-bis)); box-shadow: var(--schatten-primaer); }
.s2-knopf--primaer:hover { color: var(--akzent-text); border-color: transparent; background: linear-gradient(180deg, var(--knopf-von), var(--knopf-von)); }
/* the quiet one lines its text up with the text around it (padding taken back by the margin) */
.s2-knopf--leise { justify-self: start; min-height: 44px; padding: 0 6px; margin-inline: -6px; color: var(--akzent-hell); background: none; border-color: transparent; }
.s2-knopf--leise:hover { color: var(--text-1); background: none; border-color: transparent; text-decoration: underline; }
.s2-knopf[disabled] { opacity: .55; cursor: default; transform: none; }
.s2-knoepfe { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.s2-knoepfe--paar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.s2-knoepfe--paar > .s2-knopf { min-height: 52px; padding-inline: 10px; }
.s2-balken { display: block; height: 6px; border-radius: 3px; background: var(--slot); box-shadow: inset 0 0 0 1px var(--linie-feld); overflow: hidden; }
.s2-balken > span { display: block; height: 100%; border-radius: inherit; background: var(--akzent); }

/* ---------- Hero on /: status, emblem + H1, lead, Subscribe, What's new, facts ---------- */
.s2-hero { padding-block: 20px 28px; }
.s2-hero > .wrap { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; justify-items: start; }
.s2-hero__kopf { display: grid; grid-template-columns: 88px minmax(0, 1fr); align-items: center; gap: 16px; }
.s2-hero__kopf img { display: block; width: 88px; height: 88px; border-radius: 14px; box-shadow: 0 0 0 1px var(--linie-stark); }
.s2-hero h1 { font: 700 var(--fs-display)/.95 var(--f-titel); letter-spacing: .01em; color: var(--text-1); text-wrap: balance; }
.s2-hero__unter { margin: 6px 0 0; font: 600 var(--fs-text)/1.3 var(--f-ui); color: var(--text-2); }
.s2-hero__lead { max-width: 40ch; font: 400 var(--fs-lead)/1.45 var(--f-ui); color: var(--text-1); }
.s2-hero .s2-knopf--primaer { width: 100%; }
.s2-hero .steam { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 4px 16px; margin: 0; padding: 0; list-style: none; font-size: var(--fs-meta); color: var(--text-3); }
.s2-hero .steam b { color: var(--text-1); font-weight: 700; }
@media (min-width: 960px) {
  .s2-hero { padding-block: 48px 56px; }
  .s2-hero > .wrap { grid-template-columns: 200px minmax(0, 1fr); column-gap: 48px; align-items: start; }
  .s2-hero > .wrap > *, .s2-hero__kopf > * { grid-column: 2; }
  .s2-hero__kopf { display: contents; }
  .s2-hero__kopf > :is(img, picture) { grid-column: 1; grid-row: 1 / span 7; }
  .s2-hero__kopf img { width: 200px; height: 200px; }
  .s2-hero .s2-knopf--primaer { width: auto; min-width: 260px; }
}
/* The live release's painting in a third column from 1200 px (audit D10; at 1100 the text column got too narrow); below that it is not shown (and, lazy, not loaded). */
.s2-hero__seite { display: none; }
@media (min-width: 1200px) {
  .s2-hero > .wrap:has(> .s2-hero__seite > a) { grid-template-columns: 200px minmax(0, 1fr) minmax(0, 400px); }
  .s2-hero > .wrap > .s2-hero__seite:has(> a) { display: block; grid-column: 3; grid-row: 1 / span 9; align-self: center; }
  .s2-hero__seite a { display: grid; justify-items: center; gap: 4px; color: var(--text-2); text-decoration: none; text-align: center; }
  .s2-hero__seite img { display: block; width: 100%; height: auto;   /* soft edges on all four sides, the crown at the top stays whole */
    --kante: linear-gradient(to right, transparent, #000 14%, #000 86%, transparent), linear-gradient(to bottom, transparent, #000 6%, #000 80%, transparent);
    -webkit-mask-image: var(--kante); -webkit-mask-composite: source-in; mask-image: var(--kante); mask-composite: intersect; }
  .s2-hero__seite .s2-name { margin-top: -18px; color: var(--text-1); }
  .s2-hero__bildzeile { font: 400 var(--fs-meta)/1.4 var(--f-ui); color: var(--text-2); }
  .s2-hero__seite a:hover .s2-name, .s2-hero__seite a:focus-visible .s2-name { color: var(--akzent-hell); }
}

/* ---------- Page head of a subpage (/roadmap, /updates) ---------- */
.s2-seitenkopf { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; justify-items: start; padding-block: 28px 8px; }
.s2-seitenkopf h1 { font: 700 var(--fs-h1)/1.1 var(--f-titel); letter-spacing: .01em; color: var(--text-1); }
.s2-seitenkopf p { max-width: 60ch; color: var(--text-2); }
.s2-seitenkopf .s2-zuletzt { color: var(--text-3); }

/* ---------- Number tiles (systems head): 2 × 2 on phones, 4 in a row from 960 ---------- */
.s2-kacheln { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--luecke); }
.s2-kacheln > .s2-karte { gap: 6px; }
.s2-zahl { display: block; font: 800 1.75rem/1.05 var(--f-ui); font-variant-numeric: tabular-nums; color: var(--akzent-hell); }
.s2-kacheln h3 { font: 600 var(--fs-text)/1.3 var(--f-ui); letter-spacing: 0; color: var(--text-1); hyphens: auto; }
.s2-kacheln p { font-size: .9375rem; line-height: 1.45; color: var(--text-2); }
@media (min-width: 960px) { .s2-kacheln { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } }

/* ---------- Update notes (/updates): newest open, older ones one line each ---------- */
.s2-notizen { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--luecke); }
.s2-notiz { display: block; min-width: 0; padding: 16px; background: var(--karte); border: 1px solid var(--linie); border-radius: var(--r-karte); scroll-margin-top: 80px; }
@media (min-width: 640px) { .s2-notiz { padding: 20px; } }
.s2-notiz > * + * { margin-top: 12px; }
.s2-notiz--offen { border-color: var(--linie-stark); }
.s2-notiz__kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.s2-notiz time { font-size: var(--fs-meta); color: var(--text-3); font-variant-numeric: tabular-nums; }
.s2-notiz :is(h2, .s2-notiz__titel) { margin: 0; font: 700 1.5rem/1.2 var(--f-titel); letter-spacing: .01em; color: var(--text-1); text-wrap: balance; hyphens: auto; }
.s2-notiz__unter { font-size: var(--fs-text); color: var(--text-2); }
.s2-notiz__bild { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--r-bild); border: 1px solid var(--linie); }
.s2-notiz .s2-falte { border-top: 1px solid var(--linie); }
.s2-notiz .s2-falte > :is(ul, ol) { margin: 0 0 8px; padding-left: 22px; display: grid; gap: 6px; max-width: 72ch; }
.s2-notiz__unter { max-width: 72ch; }
.s2-notiz__fuss { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
details.s2-notiz { padding-block: 0; }
details.s2-notiz > summary { flex-wrap: wrap; gap: 4px 10px; min-height: 56px; padding-block: 8px; }
details.s2-notiz > summary > :is(b, strong, .s2-notiz__titel) { font: 600 var(--fs-text)/1.35 var(--f-ui); color: var(--text-1); }
details.s2-notiz > summary > .s2-zeile__meta { color: var(--text-3); }
/* closed notes and released versions: chips, day and count in the first row, the name always on its own row below
   (wrapping by length put short names beside the chips and long ones under them, so the rows did not line up) */
:is(details.s2-notiz > summary > :is(b, strong), .rm-abschnitt--released > summary > .s2-zeile__titel) { order: 1; flex: 1 1 100%; min-width: 0; }
details.s2-notiz[open] { padding-bottom: 16px; }
details.s2-notiz[open] > summary { margin-bottom: 4px; }

/* ---------- Footer groups: Play | Mod, Help below on phones; three columns from 720 ---------- */
/* target height at 390: <= 470 px for the whole footer – tighter than the old link cloud needed */
body:not(.cp) .fuss:has(.s2-fuss) { margin-top: 0; padding-block: 24px calc(24px + env(safe-area-inset-bottom)); }
.fuss:has(.s2-fuss) .fuss__innen { gap: 10px; grid-template-columns: minmax(0, 1fr); }   /* groups, then the disclaimer, then "Privacy · Imprint" */
.fuss:has(.s2-fuss) p { font-size: var(--fs-meta); line-height: 1.45; }
.fuss nav.s2-fuss { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 24px; justify-content: stretch; }
.s2-fuss > div { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; min-width: 0; }
.s2-fuss > div > :first-child:not(a) { margin: 0 0 2px; font: 700 var(--fs-min)/1.3 var(--f-ui); letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); }
.fuss .s2-fuss a { display: flex; align-items: center; min-height: 44px; padding: 0; color: var(--text-2); text-decoration: none; }
.fuss .s2-fuss a:hover { color: var(--text-1); text-decoration: underline; }
.s2-fuss > div:nth-child(3) { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; }
.s2-fuss > div:nth-child(3) > :first-child:not(a) { grid-column: 1 / -1; }
body:not(.cp) .fuss p a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; }   /* "Privacy · Imprint" */
@media (min-width: 720px) {
  .fuss nav.s2-fuss { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 760px; }
  .s2-fuss > div:nth-child(3) { grid-column: auto; grid-template-columns: minmax(0, 1fr); }
}
/* with a mouse the link rows need no 44-px finger height (touch keeps it) */
@media (min-width: 720px) and (pointer: fine) { .fuss .s2-fuss a { min-height: 36px; } }

/* ---------- Guide (/guide): topic list above the chapters on phones, beside them from 960 px ---------- */
.seitenkopf p.guide-quelle { font-size: var(--fs-meta); color: var(--text-2); margin-top: 10px; }
.guide { display: grid; gap: 28px; grid-template-columns: minmax(0, 1fr); }
.guide-inhalt { display: grid; gap: 14px 22px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); align-items: start; }
.guide-inhalt ul { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 2px 14px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.guide-inhalt a { display: flex; align-items: center; min-height: 44px; padding: 4px 10px; margin-inline: -10px; border-radius: var(--r-klein); color: var(--text-2); text-decoration: none; }
.guide-inhalt a:hover, .guide-inhalt a:focus-visible { color: var(--text-1); background: var(--slot); }
.guide-text { display: grid; gap: 40px; max-width: 760px; min-width: 0; }
.guide-gruppe { display: grid; gap: 14px; }
.guide-thema { display: grid; gap: 8px; }
.guide-thema h3 { margin: 0; font-size: var(--fs-name); hyphens: auto; }
.guide-thema p { margin: 0; line-height: 1.6; }
.guide-zurueck { justify-self: start; font-size: var(--fs-meta); min-height: 44px; display: inline-flex; align-items: center; }
@media (pointer: fine) { .guide-inhalt a { min-height: 36px; } }
@media (min-width: 960px) {
  .guide { grid-template-columns: 230px minmax(0, 1fr); gap: 44px; align-items: start; }
  .guide-inhalt { grid-template-columns: minmax(0, 1fr); position: sticky; top: 84px; max-height: calc(100vh - 100px); overflow-y: auto; padding-right: 4px; padding-bottom: 24px;
    scrollbar-width: thin; -webkit-mask-image: linear-gradient(#000 calc(100% - 28px), transparent); mask-image: linear-gradient(#000 calc(100% - 28px), transparent); }
  .guide-inhalt ul { grid-template-columns: minmax(0, 1fr); }
  .guide-zurueck { display: none; }
}

/* ---------- Ways in for new players (home hero), servers, back to top ---------- */
.s2-wege { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.s2-wege a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; border: 1px solid var(--linie-stark); border-radius: 22px; color: var(--text-1); text-decoration: none; font: 600 var(--fs-meta)/1.2 var(--f-ui); }
.s2-wege a:hover, .s2-wege a:focus-visible { border-color: var(--akzent); background: var(--slot); }
body:not(.cp) .server h2 { font: 600 1.25rem/1.3 var(--f-ui); letter-spacing: 0; }
.server-hinweis { margin: 0 0 14px; font-size: var(--fs-meta); color: var(--text-2); }
#antrag .abschnitt__kopf, #antrag .antrag-feld { max-width: 760px; }
.s2-nach-oben { position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center;
  background: var(--karte); border: 1px solid var(--linie-stark); color: var(--text-1); text-decoration: none; font: 700 1.25rem/1 var(--f-ui); z-index: 20; box-shadow: 0 6px 18px -8px #000; }
.s2-nach-oben:hover, .s2-nach-oben:focus-visible { border-color: var(--akzent); }
@media print { .s2-nach-oben { display: none; } }

/* ---------- Japanese, Korean, Chinese: no letter spacing (Cardo SC has no glyphs for them) ---------- */
:is(:lang(ja), :lang(ko), :lang(zh)) :is(.s2-kopfzeile > h2, .s2-name, .s2-hero h1, .s2-seitenkopf h1, .s2-notiz h2, .s2-knopf, .s2-fuss > div > :first-child) { letter-spacing: 0; }
body:not(.cp):is(:lang(ja), :lang(ko), :lang(zh)) :is(h3, h4, .knopf, .chip, .etikett, .live, .feld > label, .feld > .label,
  fieldset legend, .ablage strong, .wahl label > span, details.hilfe summary, .rm-filter button, .vergleich .thema) { letter-spacing: 0; }
/* Japanese breaks at phrase boundaries, not after any character (a lone kana on the next line); browsers without it keep normal */
body:not(.cp):lang(ja) { word-break: auto-phrase; }

/* ---------- Territories: ranking per server ----------
   A table from 900 px; below, one card per realm and the column heads (sort buttons from site.js) as a row of pills. */
.terr-rang-abschnitt { padding-top: 8px; }
.terr-rang-abschnitt h2 { margin: 0 0 8px; }
.terr-rang__alter { margin: 0 0 16px; color: var(--text-2); }
.terr-rang-rahmen { overflow-x: auto; }
.terr-rang { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.terr-rang :is(th, td) { padding: 10px 12px; text-align: right; vertical-align: middle; border-bottom: 1px solid var(--linie); }
.terr-rang thead th { font: 600 var(--fs-min)/1.3 var(--f-ui); color: var(--text-2); }
.terr-rang thead th[aria-sort] { color: var(--akzent-hell); }
.terr-rang thead button { all: unset; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: flex-end; gap: 6px; min-height: 44px; cursor: pointer; border-radius: 8px; }
.terr-rang thead button:focus-visible { outline: 2px solid var(--akzent-hell); outline-offset: 2px; }
.terr-rang thead [aria-sort] button::after { content: ""; flex: none; width: 12px; height: 12px; background: currentColor; -webkit-mask: var(--s2-pfeil-u) center / contain no-repeat; mask: var(--s2-pfeil-u) center / contain no-repeat; }
.terr-rang thead [aria-sort="ascending"] button::after { transform: rotate(180deg); }
.terr-rang thead th[data-sort="name"], .terr-rang tbody th { text-align: left; }
.terr-rang tbody th { font-weight: 400; }
.terr-rang .terr-rang__platz { width: 2.5em; color: var(--text-3); }
.terr-rang__reich { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; overflow-wrap: anywhere; }
.terr-rang__reich .wappen { flex: none; }
.terr-rang__pokale { display: inline-block; max-width: 18ch; text-align: right; }
.terr-rang__legende { margin: 12px 0 0; max-width: 72ch; }
.terr-rang__vorbei { margin-top: 16px; }
.terr-rang__vorbei ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.terr-rang__vorbei li { display: grid; gap: 2px; }
.terr-rang__vorbei li > span { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
@media (max-width: 899.98px) {
  .terr-rang, .terr-rang :is(thead, tbody, tr, th, td) { display: block; }
  .terr-rang thead { display: none; }
  .terr-rang.terr-rang--sortierbar thead { display: block; margin-bottom: 12px; }
  .terr-rang thead tr { display: flex; flex-wrap: wrap; gap: 8px; }
  .terr-rang thead th { padding: 0; border: 0; }
  .terr-rang thead .terr-rang__platz { display: none; }
  .terr-rang thead button { padding: 0 14px; border: 1px solid var(--linie); border-radius: 999px; }
  .terr-rang thead th[aria-sort] button { border-color: currentColor; }
  .terr-rang tbody { display: grid; gap: 8px; }
  .terr-rang tbody tr { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px 12px; padding: 12px 16px;
    background: var(--karte); border: 1px solid var(--linie); border-radius: var(--r-karte); }
  .terr-rang tbody :is(th, td) { padding: 0; border: 0; text-align: left; }
  .terr-rang tbody th { grid-column: 1 / -1; padding: 0 3em 4px 0; }
  .terr-rang tbody .terr-rang__platz { position: absolute; top: 12px; right: 16px; width: auto; }
  .terr-rang tbody .terr-rang__platz::before { content: "#"; }
  .terr-rang tbody td:not(.terr-rang__platz) { display: grid; gap: 0; }
  .terr-rang tbody td:not(.terr-rang__platz)::before { content: attr(data-label); color: var(--text-3); font-size: var(--fs-min); }
  .terr-rang tbody td[data-spalte="pokale"] { grid-column: 1 / -1; order: 1; }   /* last, after the numbers */
  .terr-rang__pokale { max-width: none; text-align: left; }
}

/* ---------- Detailed guide (/guide chapter list + search, /guide/<chapter>; src/guide_neu.js, GUIDE-NEU G4) ----------
   Chapter text is running text (.prosa): its links count as inline links for the 44-px rule. <em> marks names, never italics. */
.gk-liste { display: grid; gap: 14px; max-width: 980px; }
.gk-liste > h2 { margin: 0; }
.gk-liste > p { margin: 0; color: var(--text-2); max-width: 760px; }
.gk-hinweis { margin: 0; padding: 10px 14px; border-left: 3px solid var(--linie-stark); background: var(--slot); border-radius: var(--r-klein); color: var(--text-2); font-size: var(--fs-meta); max-width: 760px; }
.gk-hinweis--version { border-left-color: var(--warn); }
.gk-karten { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.gk-karte { display: flex; gap: 14px; align-items: flex-start; height: 100%; text-decoration: none; color: var(--text-2); min-height: 44px; }
.gk-karte:hover, .gk-karte:focus-visible { border-color: var(--linie-stark); background: linear-gradient(180deg, var(--karte-hover), var(--karte)); }
.gk-icon { width: 56px; height: 56px; flex: none; }
.gk-karte__text { display: grid; gap: 4px; min-width: 0; }
.gk-karte__nr { font-size: var(--fs-min); color: var(--akzent); font-weight: 700; }
.gk-karte__text strong { color: var(--text-1); font-size: var(--fs-h3); }
.gk-karte__kurz { font-size: var(--fs-meta); line-height: 1.5; }
.gk-suche { display: grid; gap: 8px; max-width: 760px; margin-top: 6px; }
.gk-suche label { font-weight: 600; color: var(--text-1); }
.gk-suche input { min-height: 44px; padding: 8px 12px; border-radius: var(--r-klein); border: 1px solid var(--linie-feld); background: var(--slot); color: var(--text-1); font: inherit; width: 100%; }
.gk-suche input:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
.gk-suche__status { margin: 0; font-size: var(--fs-meta); color: var(--text-3); min-height: 1em; }
.gk-suche__treffer { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.gk-suche__treffer:empty { display: none; }
.gk-suche__treffer a { display: grid; gap: 2px; min-height: 44px; padding: 8px 12px; border-radius: var(--r-klein); background: var(--karte); border: 1px solid var(--linie); text-decoration: none; color: var(--text-2); }
.gk-suche__treffer a:hover, .gk-suche__treffer a:focus-visible { border-color: var(--linie-stark); color: var(--text-1); }
.gk-suche__treffer strong { color: var(--text-1); }
.gk-suche__text { font-size: var(--fs-meta); line-height: 1.5; }
.gk-suche__treffer mark { background: var(--akzent-dunkel); color: var(--text-1); border-radius: 3px; padding: 0 2px; }

.gk-pfad { margin: 0 0 10px; font-size: var(--fs-meta); }
.gk-pfad a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }
.gk-pfad a::before { content: "\2039"; margin-inline-end: .45em; font-size: 1.3em; line-height: 1; }
.gk-titel { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.seitenkopf .gk-hinweis { margin-top: 10px; }
.gk-kurz { margin-top: 16px; max-width: 760px; display: grid; gap: 8px; }
.gk-kurz p { margin: 0; font-size: var(--fs-lead); line-height: 1.6; color: var(--text-1); }
.gk-bild { margin: 8px 0 4px; max-width: 760px; }
.gk-bild img { display: block; width: 100%; height: auto; border-radius: var(--r-bild); border: 1px solid var(--linie); }
.gk-bild--kopf { margin-top: 18px; }
.gk-artikel { display: grid; gap: 14px; max-width: 760px; line-height: 1.65; }
.gk-artikel h2 { margin: 26px 0 0; font-size: var(--fs-h2); scroll-margin-top: 84px; }
.gk-artikel h2:first-child { margin-top: 0; }
.gk-artikel h3 { margin: 12px 0 0; font-size: var(--fs-h3); }
.gk-artikel p, .gk-artikel ul, .gk-artikel ol { margin: 0; }
.gk-artikel ul, .gk-artikel ol { padding-left: 22px; display: grid; gap: 6px; }
.gk-artikel li > ul { margin-top: 6px; }
.gk-artikel strong { color: var(--text-1); }
.gk-artikel em { font-style: normal; color: var(--text-1); }
.gk-artikel code { font: .9em var(--f-mono); background: var(--slot); border: 1px solid var(--linie); border-radius: 4px; padding: 1px 5px; overflow-wrap: anywhere; }
.gk-tabelle { overflow-x: auto; max-width: 100%; border: 1px solid var(--linie); border-radius: var(--r); }
.gk-tabelle table { border-collapse: collapse; width: 100%; font-size: var(--fs-meta); line-height: 1.45; }
.gk-tabelle th, .gk-tabelle td { text-align: left; vertical-align: top; padding: 8px 10px; border-bottom: 1px solid var(--linie); }
.gk-tabelle th { color: var(--text-1); background: var(--slot); font-weight: 600; }
.gk-tabelle tr:last-child td { border-bottom: 0; }
.gk-tabelle td:first-child { color: var(--text-1); }
.gk-stand { margin: 28px 0 0; font-size: var(--fs-meta); color: var(--text-3); max-width: 760px; }
.gk-blaettern { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; max-width: 760px; }
.gk-blaettern a { display: grid; gap: 2px; min-height: 44px; padding: 12px 14px; border: 1px solid var(--linie); border-radius: var(--r); background: var(--karte); text-decoration: none; color: var(--text-2); font-size: var(--fs-meta); }
.gk-blaettern a strong { color: var(--text-1); font-size: var(--fs-text); }
.gk-blaettern a:hover, .gk-blaettern a:focus-visible { border-color: var(--linie-stark); }
.gk-blaettern__nach { text-align: right; grid-column: 2; }
@media (max-width: 520px) { .gk-blaettern { grid-template-columns: 1fr; } .gk-blaettern__nach { grid-column: 1; text-align: left; } }
/* reading paths (/guide?path=…) and their steps on the chapter pages */
.gk-pfade { display: grid; gap: 10px; max-width: 760px; margin-top: 10px; scroll-margin-top: 84px; }
.gk-pfade > .etikett { margin: 0; }
.gk-pfade__chips a[aria-current] { border-color: var(--akzent); background: var(--slot); color: var(--text-1); }
.gk-pfadliste { margin: 0; padding: 0; list-style: none; counter-reset: gk-schritt; display: grid; gap: 6px; }
.gk-pfadliste li { counter-increment: gk-schritt; }
.gk-pfadliste a { display: grid; grid-template-columns: 32px minmax(0, 1fr); column-gap: 10px; align-items: center; min-height: 44px; padding: 8px 12px;
  border: 1px solid var(--linie); border-radius: var(--r-klein); background: var(--karte); text-decoration: none; color: var(--text-2); }
.gk-pfadliste a::before { content: counter(gk-schritt); grid-row: span 2; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  background: var(--slot); border: 1px solid var(--linie-stark); color: var(--akzent); font: 700 var(--fs-meta)/1 var(--f-ui); }
.gk-pfadliste a:hover, .gk-pfadliste a:focus-visible { border-color: var(--linie-stark); }
.gk-pfadliste strong { color: var(--text-1); }
.gk-pfadliste span { font-size: var(--fs-meta); }
.gk-schritt { display: flex; align-items: center; gap: 10px; margin: 0; font-size: var(--fs-meta); color: var(--text-2); }
.gk-schritt a { display: inline-flex; align-items: center; min-height: 44px; }
.gk-schritt__nr { flex: none; width: 28px; height: 28px; border-radius: 50%; display: inline-grid; place-items: center; background: var(--slot);
  border: 1px solid var(--akzent); color: var(--akzent); font: 700 var(--fs-meta)/1 var(--f-ui); }
.gk-schritt__nr--klein { width: 22px; height: 22px; margin-inline-end: 8px; font-size: var(--fs-min); }
.gk-weiter { display: grid; gap: 2px; justify-self: start; min-height: 44px; margin-top: 4px; padding: 10px 14px; border: 1px solid var(--akzent); border-radius: var(--r);
  background: var(--karte); text-decoration: none; color: var(--text-2); font-size: var(--fs-meta); }
.gk-weiter strong { color: var(--text-1); font-size: var(--fs-text); }
.gk-weiter strong::after { content: " \203A"; color: var(--akzent); }
.gk-weiter:hover, .gk-weiter:focus-visible { background: var(--slot); }
.gk-weiter--ende { border-style: dashed; }
.gk-weiter--ende a { display: inline-flex; align-items: center; min-height: 44px; }
/* the chapter's contents: under the title on phones (closed), the sticky column beside the text from 960 px */
.gk-inhalt-klein { margin: 0 0 12px; max-width: 760px; border: 1px solid var(--linie); border-radius: var(--r-klein); background: var(--karte); }
.gk-inhalt-klein summary { min-height: 44px; display: flex; align-items: center; gap: 6px; padding: 0 14px; cursor: pointer; font-weight: 600; color: var(--text-1); }
.gk-inhalt-klein summary span { font-weight: 400; color: var(--text-3); }
.gk-inhalt-klein ul { list-style: none; margin: 0; padding: 0 14px 10px; display: grid; }
.gk-inhalt-klein a { display: flex; align-items: center; min-height: 44px; text-decoration: none; color: var(--text-2); border-top: 1px solid var(--linie); }
.gk-inhalt-klein a:hover, .gk-inhalt-klein a:focus-visible { color: var(--text-1); }
@media (max-width: 959.98px) { .guide.gk > .gk-inhalt { display: none; } }
@media (min-width: 960px) { .gk-inhalt-klein { display: none; } }
.gk-kurzguide { margin: 0 0 8px; }
.gk-kurzguide__unter { display: grid; gap: 6px; margin-bottom: 22px; max-width: 760px; }
.gk-kurzguide__unter p { margin: 0; color: var(--text-2); }
.gk-kurzguide__unter .guide-quelle { font-size: var(--fs-meta); }