/* wiki.css — das Loraplex-Wiki. Zweite Fassung 26.10.2026 nach Enricos vier Entwürfen („Loraplex Wiki“ mit Spielmodi, „BedWars“,
   „ME-Laufwerk“, Mods): Leiste links über die ganze Höhe mit feiner Trennlinie, Inhalt breit daneben, Inhaltsverzeichnis nur
   neben dem Kopf, Karten mit Rahmen statt Kacheln im Leeren, eigener schlanker Fuß.
   Farben, Schriften und Radien kommen aus den Tokens der Website (tokens.css) — hier steht nur, was das Wiki eigen hat.
   Schrift bewusst groß (Fließtext 17 px): Enrico liest schlecht, das Wiki soll man gern lesen. */

.wk { --wk-leiste: 290px; --pad-x: clamp(18px, 3vw, 44px); --pad-top: 26px; --wk-hell: #dfe6f5;
  display: grid; grid-template-columns: var(--wk-leiste) minmax(0, 1fr); min-height: calc(100vh - var(--head-h));
  font-size: 17px; line-height: 1.6; color: var(--txt); }
.wk a { color: inherit; text-decoration: none; }
.wk-i { width: 20px; height: 20px; flex: none; }
.wk h1, .wk h2, .wk h3 { font-family: var(--f-head); letter-spacing: -.02em; color: var(--txt); margin: 0; }
.wk-haupt { min-width: 0; padding: var(--pad-top) var(--pad-x) 70px; overflow-x: clip; }
.wk-innen { max-width: 1180px; margin: 0 auto; }

/* ------------------------------------------------------------------ Seitenleiste (Entwurf: volle Höhe, Linie rechts) */
.wk-seite { border-right: 1px solid var(--line-soft); padding: 30px 20px 48px 26px; min-width: 0; background: linear-gradient(90deg, rgba(4,7,15,.35), transparent 70%); }
.wk-seite-klapp > summary { list-style: none; }
.wk-seite-klapp > summary::-webkit-details-marker { display: none; }
.wk-seite-titel { display: flex; align-items: center; justify-content: space-between; margin: 0 0 18px; font: 800 26px/1 var(--f-head); letter-spacing: .03em; cursor: default; }
.wk-seite-pfeil { display: none; }
.wk-nav { display: flex; flex-direction: column; gap: 2px; margin-top: 16px; }
.wk-nav-titel { margin: 24px 0 8px 12px; font: 700 12.5px/1 var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: var(--txt-3); }
.wk-nav-a { position: relative; display: flex; align-items: center; gap: 13px; min-height: 46px; padding: 6px 12px; border-radius: 8px;
  color: #c9d4ee; font-size: 16px; font-weight: 500; transition: background var(--t), color var(--t); }
.wk-nav-a:hover { background: var(--card-hi); color: var(--txt); }
.wk-nav-a .wk-i { width: 21px; height: 21px; color: var(--txt-2); }
.wk-nav-a img, .wk-nav-bild { width: 26px; height: 26px; flex: none; }
.wk-nav-bild img { width: 26px; height: 26px; display: block; }
.wk-nav-a.on { background: rgba(47,144,255,.13); color: var(--blue-lite); font-weight: 600; }
.wk-nav-a.on::before { content: ''; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--blue); }
.wk-nav-a.on .wk-i { color: var(--blue-lite); }
/* die offene Mod: Kategorien mit Kapiteln (Entwurf ME-Laufwerk) */
.wk-baum { margin: 2px 0 8px 25px; padding-left: 12px; border-left: 1px solid var(--line); display: flex; flex-direction: column; gap: 1px; }
.wk-baum-gruppe > summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; border-radius: 7px;
  font-size: 15px; color: #c3cee8; cursor: pointer; }
.wk-baum-gruppe > summary::-webkit-details-marker { display: none; }
.wk-baum-gruppe > summary:hover { background: var(--card-hi); color: var(--txt); }
.wk-baum-pfeil { width: 16px; height: 16px; color: var(--txt-3); transition: transform var(--t); }
.wk-baum-gruppe[open] > summary .wk-baum-pfeil { transform: rotate(180deg); }
.wk-baum-kap { position: relative; display: block; margin: 1px 0 1px 10px; padding: 7px 10px; border-radius: 7px; font-size: 14.5px; color: var(--txt-3); line-height: 1.35; }
.wk-baum-kap:hover { color: var(--txt); background: var(--card-hi); }
.wk-baum-kap.on { color: var(--blue-lite); background: rgba(47,144,255,.13); font-weight: 600; }
.wk-fragen { display: flex; gap: 12px; margin-top: 28px; padding: 16px; border: 1px solid var(--line); border-radius: 10px; background: linear-gradient(var(--card-top), var(--card-bottom)); }
.wk-fragen > .wk-i { width: 24px; height: 24px; margin-top: 2px; color: var(--txt-2); }
.wk-fragen b { font-size: 15.5px; }
.wk-fragen p { margin: 3px 0 8px; font-size: 14px; line-height: 1.4; color: var(--txt-3); }
.wk-fragen a { display: inline-flex; align-items: center; gap: 6px; color: var(--blue-lite); font-weight: 600; font-size: 14.5px; }
.wk-fragen a .wk-i { width: 15px; height: 15px; }

/* ------------------------------------------------------------------ Suche */
.wk-suche { position: relative; display: flex; align-items: center; gap: 10px; padding: 0 14px; border: 1px solid var(--line); border-radius: 9px;
  background: var(--inset); color: var(--txt-3); transition: border-color var(--t), box-shadow var(--t); }
.wk-suche:focus-within { border-color: var(--blue-line); box-shadow: 0 0 0 3px var(--blue-ghost); }
.wk-suche input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: none; color: var(--txt); font: inherit; }
.wk-suche input::placeholder { color: var(--txt-3); }
.wk-suche input::-webkit-search-cancel-button { filter: invert(.6); }
.wk-suche-leiste { height: 46px; font-size: 15px; }
.wk-suche-leiste .wk-i { width: 18px; height: 18px; }
.wk-suche-mittel { height: 52px; flex: 1; }
.wk-suche-gross { height: 64px; max-width: 660px; font-size: 18px; border-color: var(--line-strong); border-radius: 10px; background: rgba(8,13,25,.88); backdrop-filter: blur(6px); }
.wk-suche-gross .wk-i { width: 22px; height: 22px; }
.wk-suche-block { margin: 22px 0 6px; }
.wk-taste { padding: 6px 9px; border: 1px solid var(--line-strong); border-radius: 7px; font: 600 13px/1 var(--f-body); color: var(--txt-3); white-space: nowrap; }
.wk-treffer { position: absolute; z-index: 40; top: calc(100% + 8px); left: 0; right: 0; max-height: 460px; overflow-y: auto; padding: 6px;
  border: 1px solid var(--line-strong); border-radius: 12px; background: var(--card); box-shadow: var(--sh-pop); }
.wk-suche-leiste .wk-treffer { width: min(440px, 86vw); }
.wk-treffer-z { display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 9px; color: var(--txt); }
.wk-treffer-z:hover, .wk-treffer-z.on { background: var(--card-hi); }
.wk-treffer-z img, .wk-treffer-z > .wk-i { width: 32px; height: 32px; flex: none; }
.wk-treffer-z > .wk-i { color: var(--blue-lite); padding: 4px; }
.wk-treffer-z span { display: flex; flex-direction: column; min-width: 0; }
.wk-treffer-z b { overflow: hidden; font-size: 16px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.wk-treffer-z small { font-size: 13.5px; color: var(--txt-3); }
.wk-treffer-leer { padding: 12px; font-size: 15px; color: var(--txt-3); }
.wk-trefferliste { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 8px; margin-top: 12px; }
.wk-trefferliste .wk-treffer-z { border: 1px solid var(--line-soft); background: var(--card); }

/* ------------------------------------------------------------------ Pfad, Kopf, Inhaltsverzeichnis */
.wk-pfad { position: relative; z-index: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 9px; margin-bottom: 20px; font-size: 14.5px; color: var(--txt-3); }
.wk-pfad .wk-i { width: 16px; height: 16px; }
.wk-pfad a:hover { color: var(--txt); }
.wk-pfad [aria-current] { color: var(--txt-2); }
.wk-pfad-trenn { color: var(--line-strong); }
.wk-kopf { display: grid; grid-template-columns: minmax(0, 1fr); gap: 36px; align-items: start; scroll-margin-top: calc(var(--head-h) + 16px); }
.wk-kopf-text { min-width: 0; }
.wk-kopf.mit-toc { grid-template-columns: minmax(0, 1fr) 220px; }
.wk-kopf.mit-bild { grid-template-columns: minmax(0, 1fr) 250px; }
.wk-kopf.mit-bild.mit-toc { grid-template-columns: minmax(0, 1fr) 250px 210px; gap: 30px; }
.wk-kicker { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font: 800 14px/1.2 var(--f-body); letter-spacing: .14em; text-transform: uppercase;
  color: color-mix(in srgb, var(--k, var(--blue)) 78%, white); }
.wk-kicker img, .wk-kicker .wk-i { width: 22px; height: 22px; }
.wk h1 { font-size: clamp(40px, 4.4vw, 60px); font-weight: 800; line-height: 1.04; }
.wk-zweitname { margin: 8px 0 0; font-size: 19px; color: var(--txt-2); }
.wk-lead { max-width: 62ch; margin: 16px 0 0; font-size: 20px; line-height: 1.5; color: var(--wk-hell); }
.wk-kopf-satz { max-width: 68ch; margin: 12px 0 0; font-size: 17px; line-height: 1.6; color: var(--txt-2); }
.wk-toc { padding-top: 4px; }
.wk-toc > p { margin: 0 0 12px; font: 700 12.5px/1 var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: var(--txt-3); }
.wk-toc ul { margin: 0; padding: 0; list-style: none; border-left: 2px solid var(--line); }
.wk-toc li a { display: block; margin-left: -2px; padding: 7px 0 7px 16px; border-left: 2px solid transparent; font-size: 15.5px; color: var(--txt-2); line-height: 1.35; }
.wk-toc li a:hover { color: var(--txt); }
.wk-toc li a.on { border-left-color: var(--blue); color: var(--blue-lite); font-weight: 600; }
.wk-imkapitel > div { display: flex; flex-direction: column; gap: 10px; }
.wk-id { display: inline-flex; align-items: center; gap: 4px; margin-top: 18px; padding: 4px 4px 4px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--inset); }
.wk-id code, .wk-codezeile code { font: 500 14.5px/1.4 var(--f-mono); color: var(--txt-2); }
.wk-id code { padding: 0; border: 0; background: none; }
.wk-id button, .wk-codezeile button { display: grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: 7px; background: none; color: var(--txt-3); cursor: pointer; }
.wk-id button:hover, .wk-codezeile button:hover { background: var(--card-hi); color: var(--txt); }
.wk-id button.ok, .wk-codezeile button.ok { color: var(--green); }
.wk-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.wk-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border: 1px solid var(--line-strong); border-radius: 7px; background: #0b1324;
  font-size: 14px; font-weight: 600; color: var(--txt-2); }
.wk-modchip { display: inline-flex; align-items: center; padding: 5px 11px; border-radius: 7px; font: 800 13px/1.2 var(--f-body); letter-spacing: .04em;
  color: color-mix(in srgb, var(--mod) 80%, white); background: color-mix(in srgb, var(--mod) 16%, transparent); border: 1px solid color-mix(in srgb, var(--mod) 45%, transparent); }
.wk-plakette { display: inline-flex; align-items: center; padding: 4px 11px; border: 1px solid var(--blue-line); border-radius: 7px; background: var(--blue-ghost);
  font-size: 13.5px; font-weight: 600; color: var(--blue-lite); white-space: nowrap; }
.wk-knoepfe { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.wk-bildkarte { display: flex; flex-direction: column; align-items: center; gap: 12px; margin: 0; padding: 22px 20px 14px; border: 1px solid var(--line); border-radius: 12px;
  background: radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--mod, var(--blue)) 18%, transparent), transparent 68%), linear-gradient(var(--card-top), var(--card-bottom)); }
.wk-bildkarte img { width: 180px; height: 180px; object-fit: contain; filter: drop-shadow(0 18px 22px rgba(0,0,0,.55)); }
.wk-bildkarte figcaption { font-size: 14.5px; color: var(--txt-3); text-align: center; }
.wk-bildkarte.klein { padding: 18px; }
.wk-bildkarte.klein img { width: 128px; height: 128px; }

/* ------------------------------------------------------------------ Abschnitte */
.wk-block { margin-top: 58px; scroll-margin-top: calc(var(--head-h) + 16px); }
.wk-block.erst { margin-top: 40px; }
.wk-block-kopf { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; margin-bottom: 20px; }
.wk-block-kopf h2 { display: flex; align-items: center; gap: 12px; font-size: 30px; font-weight: 800; line-height: 1.15; }
.wk-block-unter { margin: 6px 0 0; font-size: 17px; color: var(--txt-2); }
.wk-mehr { display: inline-flex; align-items: center; gap: 7px; padding-bottom: 3px; font-size: 15.5px; font-weight: 600; color: var(--blue-lite); white-space: nowrap; }
.wk-mehr .wk-i, .wk-link .wk-i { width: 17px; height: 17px; }
.wk-mehr:hover, .wk-link:hover { color: #8cc2ff; }
.wk-link { display: inline-flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 600; color: var(--blue-lite); }
.wk-gruppe-titel { display: flex; align-items: center; gap: 10px; margin: 26px 0 12px; font-size: 19px; font-weight: 700; color: var(--txt-2) !important; }
.wk-gruppe-titel:first-child { margin-top: 0; }
.wk-gruppe-titel img { width: 24px; height: 24px; }
.wk-modtitel img { width: 30px; height: 30px; }
.wk-zahl { padding: 3px 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); font: 700 14px/1.2 var(--f-body); color: var(--txt-3); }

/* Hinweis (blau, Entwurf) */
.wk-hinweis { display: flex; align-items: flex-start; gap: 14px; margin-top: 16px; padding: 15px 18px; border: 1px solid rgba(47,144,255,.45); border-radius: 10px;
  background: rgba(47,144,255,.08); font-size: 16px; color: #cfe0ff; }
.wk-hinweis .wk-i { width: 23px; height: 23px; margin-top: 1px; color: var(--blue-lite); }
.wk-hinweis p { margin: 0; }
.wk-hinweis a { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; color: var(--blue-lite); }
.wk-hinweis a .wk-i { width: 16px; height: 16px; margin: 0; }

/* Tabellen */
.wk-tabelle-rahmen { overflow-x: auto; border: 1px solid var(--line); border-radius: 10px; background: linear-gradient(var(--card-top), var(--card-bottom)); }
.wk-tabelle { width: 100%; border-collapse: collapse; font-size: 16px; }
.wk-tabelle th, .wk-tabelle td { padding: 14px 20px; border-bottom: 1px solid var(--line-soft); text-align: left; vertical-align: middle; }
.wk-tabelle tr:last-child th, .wk-tabelle tr:last-child td { border-bottom: 0; }
.wk-tabelle thead th { padding: 13px 20px; background: #0a1122; font: 700 12.5px/1.2 var(--f-body); letter-spacing: .12em; text-transform: uppercase; color: var(--txt-3); }
.wk-tabelle td { color: var(--txt-2); }
.wk-tab th, .wk-tab td { border-right: 1px solid var(--line-soft); }
.wk-tab th:last-child, .wk-tab td:last-child { border-right: 0; }
.wk-tab-name { display: flex; align-items: center; gap: 14px; }
.wk-tab-name img { width: 36px; height: 36px; flex: none; }
.wk-tab-name b { font-size: 16.5px; font-weight: 700; color: var(--txt); }
.wk-tab tbody th { width: 26%; font-weight: 400; }
.wk-blick th { width: 30%; border-right: 1px solid var(--line-soft); font-weight: 700; color: var(--txt); }
.wk-blick td a, .wk-text a, .wk-frage a, .wk-tabelle a { color: var(--blue-lite); }

/* ------------------------------------------------------------------ Knöpfe */
.wk-knopf { display: inline-flex; align-items: center; justify-content: center; gap: 9px; height: 48px; padding: 0 20px; border: 1px solid var(--line-strong); border-radius: 9px;
  background: var(--card); font: 700 16px/1 var(--f-head); color: var(--txt); cursor: pointer; white-space: nowrap; transition: background var(--t), border-color var(--t), color var(--t); }
.wk-knopf:hover { border-color: var(--blue-line); background: var(--card-hi); }
.wk-knopf .wk-i { width: 19px; height: 19px; }
.wk-knopf-blau { border-color: transparent; background: var(--blue); color: #fff; box-shadow: var(--sh-blue); }
.wk-knopf-blau:hover { border-color: transparent; background: #4a9fff; }
.wk-knopf-rand { border: 1.5px solid var(--blue); background: transparent; color: var(--blue-lite); }
.wk-knopf-rand:hover { border-color: #5fa9ff; background: var(--blue-ghost); color: #8cc2ff; }
.wk-knopf.klein { height: 40px; padding: 0 15px; font-size: 15px; }
.wk-text .wk-knopf { height: auto; padding: 8px 14px; font-size: 15px; vertical-align: middle; }
.wk-knopf.copied { background: var(--green-deep); }

/* ------------------------------------------------------------------ Startseite: Held (Entwurf „Loraplex Wiki“) */
.wk-held { position: relative; isolation: isolate; min-height: 360px; padding: 0 0 4px; }
.wk-held-bild { position: absolute; z-index: -1; top: calc(-1 * var(--pad-top)); right: calc(-1 * var(--pad-x)); bottom: -26px; width: min(64%, 860px); pointer-events: none; }
.wk-held-bild img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 45%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.45) 20%, #000 46%, #000 94%, rgba(0,0,0,.7) 100%), linear-gradient(180deg, #000 0%, #000 52%, transparent 100%);
  -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.45) 20%, #000 46%, #000 94%, rgba(0,0,0,.7) 100%), linear-gradient(180deg, #000 0%, #000 52%, transparent 100%);
  mask-composite: intersect; }
.wk-held-bild::after { content: ''; position: absolute; inset: 0; background: rgba(4,8,16,.18); }
.wk-held-text { position: relative; max-width: 680px; padding-top: 8px; }
.wk-held h1 { font-size: clamp(46px, 5.2vw, 70px); text-shadow: 0 4px 30px rgba(0,0,0,.55); }
.wk-held-satz { margin: 10px 0 28px; font-size: 20px; color: var(--wk-hell); text-shadow: 0 2px 16px rgba(0,0,0,.6); }
.wk-beliebt { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 16px 0 0; font-size: 15.5px; }
.wk-beliebt span { font-weight: 700; color: var(--txt-2); }
.wk-beliebt a, .wk-weitere a { font-weight: 600; color: var(--blue-lite); }
.wk-beliebt a:hover, .wk-weitere a:hover { color: #8cc2ff; }
.wk-beliebt i, .wk-weitere i { font-style: normal; color: var(--txt-4); }
/* drei Wege unter dem Held */
.wk-schnell { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 34px; }
.wk-schnell-k { display: flex; align-items: center; gap: 16px; padding: 20px 22px; border: 1px solid var(--line); border-radius: 10px;
  background: linear-gradient(var(--card-top), var(--card-bottom)); transition: border-color var(--t), transform var(--t); }
.wk-schnell-k:hover { border-color: var(--blue-line); transform: translateY(-1px); }
.wk-schnell-sym { width: 36px; height: 36px; color: var(--txt); }
.wk-schnell-k span { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.wk-schnell-k b { font-size: 17.5px; font-weight: 700; }
.wk-schnell-k small { font-size: 14.5px; color: var(--txt-3); }
.wk-schnell-pfeil { color: var(--txt-2); }

/* Spielmodus-Karten (Liste, Entwurf „Unsere Spielmodi“) */
.wk-spiele { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 36px; }
.wk-spiel { display: grid; grid-template-columns: 250px minmax(0, 1fr) 22px; gap: 22px; align-items: start; padding: 16px 0; border-bottom: 1px solid var(--line-soft); }
.wk-spiel-bild { display: block; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 7px; background: var(--card); }
.wk-spiel-bild img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-slow); }
.wk-spiel:hover .wk-spiel-bild img { transform: scale(1.04); }
.wk-spiel-text { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; padding-top: 2px; }
.wk-spiel-text b { font: 800 21px/1.2 var(--f-head); color: var(--txt); }
.wk-spiel:hover .wk-spiel-text b { color: var(--blue-lite); }
.wk-spiel-satz { font-size: 16px; line-height: 1.5; color: var(--txt-2); }
.wk-tag { margin-top: 6px; padding: 3px 11px; border: 1px solid var(--line-strong); border-radius: 6px; font-size: 13.5px; font-weight: 600;
  color: color-mix(in srgb, var(--k, var(--blue)) 45%, var(--txt-2)); }
.wk-spiel-pfeil { margin-top: 4px; color: var(--txt-2); transition: transform var(--t); }
.wk-spiel:hover .wk-spiel-pfeil { transform: translateX(3px); color: var(--blue-lite); }
.wk-spiel.box { grid-template-columns: 190px minmax(0, 1fr) 22px; align-items: center; padding: 12px; border: 1px solid var(--line); border-radius: 10px;
  background: linear-gradient(var(--card-top), var(--card-bottom)); }
.wk-spiel.box .wk-spiel-text b { font-size: 19px; }
.wk-spiel.box .wk-spiel-satz { font-size: 15px; }
.wk-spiel.box .wk-spiel-pfeil { margin-top: 0; }
.wk-spiele.boxen { gap: 16px; }
.wk-weitere { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 18px 0 0; font-size: 15.5px; }
.wk-weitere span { font-weight: 700; color: var(--txt); }

/* Mod-Karten (Entwurf „Mods & Technik“) */
.wk-modkarten { display: grid; gap: 20px; }
.wk-modkarten.zwei { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.wk-modkarten.drei { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 26px; }
.wk-modkarte { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: linear-gradient(var(--card-top), var(--card-bottom));
  transition: border-color var(--t), transform var(--t); }
.wk-modkarte:hover { border-color: color-mix(in srgb, var(--mod) 60%, transparent); transform: translateY(-2px); }
.wk-modkarte-bild { display: block; aspect-ratio: 2.3 / 1; overflow: hidden; border-bottom: 1px solid var(--line-soft);
  background: radial-gradient(circle at 50% 60%, color-mix(in srgb, var(--mod) 24%, transparent), transparent 70%), #080e1c; }
.wk-modkarten.drei .wk-modkarte-bild { aspect-ratio: 16 / 9; }
.wk-modkarte-bild img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-slow); }
.wk-modkarte-bild img.szene { object-fit: contain; padding: 12px; }
.wk-modkarte:hover .wk-modkarte-bild img { transform: scale(1.03); }
.wk-modkarte-text { display: flex; flex: 1; flex-direction: column; gap: 8px; padding: 18px 22px 20px; }
.wk-modkarte-kopf { display: flex; align-items: center; gap: 12px; }
.wk-modkarte-kopf img { width: 34px; height: 34px; }
.wk-modkarte-kopf b { font: 800 24px/1.15 var(--f-head); color: var(--txt); }
.wk-modkarten.drei .wk-modkarte-kopf b { font-size: 20px; }
.wk-modkarte-satz { flex: 1; font-size: 16px; line-height: 1.5; color: var(--txt-2); }
.wk-modkarten.drei .wk-modkarte-satz { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-size: 15px; }
.wk-modkarte .wk-chips { margin-top: 2px; }
.wk-modkarte .wk-chip { padding: 4px 11px; font-size: 13.5px; }
.wk-modkarte .wk-link { margin-top: 8px; }

/* „Neu auf Loraplex?“ — große Nummer, Text, Bild läuft weich von links ein */
.wk-neu { border-top: 1px solid var(--line-soft); }
.wk-neu-z { position: relative; display: grid; grid-template-columns: 92px minmax(0, 1fr) 30px; align-items: center; gap: 18px; min-height: 116px; padding: 12px 6px;
  overflow: hidden; border-bottom: 1px solid var(--line-soft); isolation: isolate; }
.wk-neu-nr { font: 800 62px/1 var(--f-head); letter-spacing: -.04em; color: #c3cfe9; }
.wk-neu-t { display: flex; flex-direction: column; gap: 4px; max-width: 54%; }
.wk-neu-t b { font: 800 22px/1.2 var(--f-head); }
.wk-neu-t span { font-size: 16px; color: var(--txt-2); }
.wk-neu-z:hover .wk-neu-t b { color: var(--blue-lite); }
.wk-neu-bild { position: absolute; z-index: -1; top: 8px; right: 52px; bottom: 8px; width: 44%; border-radius: 8px; overflow: hidden; }
.wk-neu-bild img { width: 100%; height: 100%; object-fit: cover; -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.6) 28%, #000 60%);
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.6) 28%, #000 60%); transition: transform var(--t-slow); }
.wk-neu-z:hover .wk-neu-bild img { transform: scale(1.03); }
.wk-neu-pfeil { grid-column: 3; color: var(--txt); }

/* Zeilen: „Direkt zur passenden Anleitung“ (2 Spalten mit Trennlinien), „Passende Items“ (Kästen) */
.wk-zeilen.zwei { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--line-soft); }
.wk-zeilen.zwei > .wk-zeile:nth-child(odd) { border-right: 1px solid var(--line-soft); }
.wk-zeilen.drei { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.wk-zeile { display: grid; grid-template-columns: 56px minmax(0, 1fr) 22px; align-items: center; gap: 16px; padding: 16px 18px; border-bottom: 1px solid var(--line-soft); }
.wk-zeile:hover b { color: var(--blue-lite); }
.wk-zeile-sym { display: grid; place-items: center; width: 56px; height: 56px; }
.wk-zeile-sym img { width: 48px; height: 48px; }
.wk-zeile-buch { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 9px; background: var(--blue-ghost); color: var(--blue-lite); }
.wk-zeile-buch .wk-i { width: 26px; height: 26px; }
.wk-zeile-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.wk-zeile-t b { font-size: 17px; font-weight: 700; line-height: 1.3; }
.wk-zeile-t small { overflow: hidden; font-size: 14.5px; color: var(--txt-3); text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.wk-zeile-pfeil { color: var(--txt-2); }
.wk-zeile.box { border: 1px solid var(--line); border-radius: 10px; background: linear-gradient(var(--card-top), var(--card-bottom)); }
.wk-zeile.box:hover { border-color: var(--blue-line); }

/* ------------------------------------------------------------------ Spielmodus-Artikel (Entwurf „BedWars“) */
.wk-figur { margin: 0; }
.wk-figur img { display: block; width: 100%; height: auto; border: 1px solid var(--line-soft); border-radius: 8px; background: var(--card); }
.wk-figur figcaption { margin-top: 9px; font-size: 14px; color: var(--txt-3); }
.wk-held-figur { margin-top: 28px; }
.wk-held-figur img { aspect-ratio: 2.75 / 1; object-fit: cover; object-position: 50% 45%; }
.wk-figur-breit { margin-top: 22px; }
.wk-figur-breit img { aspect-ratio: 3.2 / 1; object-fit: cover; }
/* drei Kästen: Spielprinzip · Spielziel · Schwerpunkt */
.wk-streifen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 22px; border: 1px solid var(--line); border-radius: 10px;
  background: linear-gradient(var(--card-top), var(--card-bottom)); }
.wk-streifen-z { display: flex; align-items: center; gap: 18px; padding: 18px 22px; min-width: 0; }
.wk-streifen-z + .wk-streifen-z { border-left: 1px solid var(--line); }
.wk-streifen-z > .wk-i { width: 38px; height: 38px; color: var(--txt); }
.wk-streifen-z > .wk-i path, .wk-schnell-sym path { stroke-width: 1.6; }
.wk-streifen-z span { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.wk-streifen-z small { font: 700 12.5px/1.2 var(--f-body); letter-spacing: .13em; text-transform: uppercase; color: var(--txt-3); }
.wk-streifen-z b { font-size: 16.5px; font-weight: 600; line-height: 1.35; color: var(--wk-hell); }
/* So läuft eine Runde ab: Nummern im Kreis, Linie mit Punkt, rechts zwei Bilder */
.wk-ablauf { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 34px; align-items: start; }
.wk-ablauf-bilder { display: flex; flex-direction: column; gap: 18px; }
.wk-ablauf-bilder img, .wk-tipps-bild { display: block; width: 100%; aspect-ratio: 2.35 / 1; object-fit: cover; border: 1px solid var(--line-soft); border-radius: 8px; background: var(--card); }
.wk-zeit, .wk-nummern { margin: 0; padding: 0; list-style: none; }
.wk-zeit li { position: relative; display: flex; gap: 0; min-height: 96px; padding: 0 0 22px 100px; }
.wk-zeit li::before { content: ''; position: absolute; left: 77px; top: 14px; bottom: -14px; width: 2px; background: var(--line); }
.wk-zeit li:last-child::before { display: none; }
.wk-zeit li::after { content: ''; position: absolute; left: 73px; top: 10px; width: 10px; height: 10px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 4px rgba(47,144,255,.18); }
.wk-nr { display: grid; place-items: center; flex: none; width: 56px; height: 56px; border: 2px solid var(--line-strong); border-radius: 50%; background: #0b1324;
  font: 800 19px/1 var(--f-head); color: var(--txt); }
.wk-zeit .wk-nr { position: absolute; left: 0; top: -12px; }
.wk-zeit b, .wk-nummern b { display: block; font-size: 19px; font-weight: 700; line-height: 1.3; color: var(--txt); }
.wk-zeit p, .wk-nummern p { margin: 6px 0 0; font-size: 16.5px; line-height: 1.55; color: var(--txt-2); }
.wk-nummern li { display: flex; align-items: flex-start; gap: 20px; padding: 16px 0; border-bottom: 1px solid var(--line-soft); }
.wk-nummern li:first-child { padding-top: 4px; }
.wk-nummern li:last-child { border-bottom: 0; }
.wk-nummern .wk-nr { width: 52px; height: 52px; }
.wk-nummern li > div { padding-top: 2px; min-width: 0; }
.wk-tipps { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 34px; align-items: center; }
.wk-tipps-bild { aspect-ratio: 1.9 / 1; }
/* Dein Bett entscheidet */
.wk-bett { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 22px 24px; border: 1px solid var(--line); border-radius: 10px;
  background: linear-gradient(var(--card-top), var(--card-bottom)); }
.wk-bett-z { display: flex; align-items: center; gap: 24px; padding: 4px 22px 4px 4px; }
.wk-bett-z + .wk-bett-z { padding-left: 26px; border-left: 1px solid var(--line); }
.wk-bett-bild { width: 104px; height: auto; flex: none; filter: drop-shadow(0 12px 16px rgba(0,0,0,.5)); }
.wk-bett-z b { font-size: 20px; font-weight: 700; }
.wk-bett-z p { margin: 6px 0 0; font-size: 16px; color: var(--txt-2); }
.wk-bett .wk-hinweis { grid-column: 1 / -1; margin-top: 20px; }
/* Alle Regeln im Detail (Guide-Abschnitte) */
.wk-details { display: flex; flex-direction: column; gap: 10px; }
.wk-detail { border: 1px solid var(--line); border-radius: 10px; background: linear-gradient(var(--card-top), var(--card-bottom)); scroll-margin-top: calc(var(--head-h) + 16px); }
.wk-detail[open] { border-color: var(--line-strong); }
.wk-detail > summary { list-style: none; display: flex; align-items: center; gap: 16px; padding: 16px 20px; cursor: pointer; font-size: 17.5px; }
.wk-detail > summary::-webkit-details-marker { display: none; }
.wk-detail > summary b { flex: 1; }
.wk-detail-a { max-width: none; padding: 2px 20px 20px; }

/* ------------------------------------------------------------------ Häufige Fragen (Entwurf: blaues Minus, sonst Plus) */
.wk-faq { display: flex; flex-direction: column; gap: 10px; }
.wk-frage { border: 1px solid var(--line); border-radius: 10px; background: linear-gradient(var(--card-top), var(--card-bottom)); }
.wk-frage[open] { border-color: rgba(47,144,255,.5); background: linear-gradient(rgba(47,144,255,.07), rgba(47,144,255,.03)); }
.wk-frage > summary { list-style: none; display: flex; align-items: center; gap: 16px; padding: 16px 20px; cursor: pointer; font-size: 17px; }
.wk-frage > summary::-webkit-details-marker { display: none; }
.wk-frage > summary b { flex: 1; font-weight: 600; }
.wk-frage-zeichen { display: grid; place-items: center; width: 26px; height: 26px; flex: none; border: 1.5px solid var(--line-strong); border-radius: 6px; color: var(--txt-2); }
.wk-frage-zeichen .wk-i { width: 16px; height: 16px; }
.wk-frage .wk-minus, .wk-frage[open] .wk-plus { display: none; }
.wk-frage[open] .wk-minus { display: block; }
.wk-frage[open] .wk-frage-zeichen { border-color: var(--blue); background: var(--blue); color: #fff; }
.wk-frage-pfeil { color: var(--txt-3); transition: transform var(--t); }
.wk-frage[open] > summary .wk-frage-pfeil, .wk-detail[open] > summary .wk-frage-pfeil { transform: rotate(180deg); }
.wk-frage-a { padding: 0 20px 18px 62px; font-size: 16.5px; color: var(--txt-2); }
.wk-frage-a p { margin: 0; }

/* ------------------------------------------------------------------ Aufrufe, Feedback, Fußzeile im Inhalt */
.wk-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 24px; margin-top: 50px; padding: 22px 26px; border: 1px solid var(--line); border-radius: 12px;
  background: linear-gradient(var(--card-top), var(--card-bottom)); }
.wk-cta-sym { width: 46px; height: 46px; color: var(--blue-lite); }
.wk-cta-sym path { stroke-width: 1.6; }
.wk-cta-text { flex: 1; min-width: 240px; }
.wk-cta-text b { font-size: 20px; font-weight: 700; }
.wk-cta-text p { margin: 3px 0 0; font-size: 16px; color: var(--txt-2); }
.wk-cta-knoepfe { display: flex; flex-wrap: wrap; gap: 12px; }
.wk-cta-ip { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.wk-ip-zeile { display: flex; flex-wrap: wrap; gap: 10px; }
.wk .wk-ip { display: inline-flex; align-items: center; height: 48px; padding: 0 18px; border: 1px solid var(--line-strong); border-radius: 9px; background: var(--inset);
  font: 600 16.5px/1 var(--f-mono); color: var(--txt); }
.wk-feedback { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.wk-feedback > span { font-size: 15.5px; color: var(--txt-2); }
.wk-feedback-k { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.wk-feedback-danke { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 15.5px; color: var(--txt-2); }
.wk-feedback-danke .wk-i { color: var(--green); }
.wk-feedback-danke a { color: var(--blue-lite); }
.wk-feedback-box { margin-top: 44px; }
.wk-unten { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-top: 34px; padding-top: 20px; border-top: 1px solid var(--line-soft); }

/* ------------------------------------------------------------------ Wiki-Fuß (Entwurf) */
.wk-fuss { padding: 34px var(--pad-x, 40px) 24px; border-top: 1px solid var(--line-soft); background: var(--bg); font-size: 15px; }
.wiki-seite .wk-fuss { --pad-x: clamp(18px, 3vw, 40px); }
.wk-fuss-oben { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 22px 40px; }
.wk-fuss-marke img { display: block; height: 40px; width: auto; }
.wk-fuss-marke p { margin: 10px 0 0; font-size: 15px; color: var(--txt-2); }
.wk-fuss-links { display: flex; flex-wrap: wrap; gap: 14px 36px; padding-top: 10px; }
.wk-fuss a { color: var(--txt-2); }
.wk-fuss a:hover { color: var(--txt); }
.wk-fuss-unten { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 30px; margin-top: 26px; padding-top: 18px;
  border-top: 1px solid var(--line-soft); font-size: 14px; color: var(--txt-3); }
.wk-fuss-rechts { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 30px; }
.wk-fuss-sprache, .wk-fuss-recht { display: flex; gap: 22px; }
.wk-fuss-sprache a[aria-current] { color: var(--blue-lite); font-weight: 600; }

/* ------------------------------------------------------------------ Rezepte (Entwurf „Herstellung“) */
.wk-rz { margin-bottom: 18px; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: linear-gradient(var(--card-top), var(--card-bottom)); }
.wk-rz-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 14px 20px; border-bottom: 1px solid var(--line-soft); background: #0a1122; font-size: 16.5px; }
.wk-rz-kopf img { width: 24px; height: 24px; }
.wk-rz-kopf a b { color: var(--blue-lite); }
.wk-rz-kopf > span { font-size: 15px; color: var(--txt-3); }
.wk-rz-eu, .wk-rz-zeit { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border: 1px solid var(--line); border-radius: 7px; background: var(--inset); color: var(--txt-2) !important; }
.wk-rz-eu { margin-left: auto; }
.wk-rz-eu .wk-i { width: 15px; height: 15px; color: var(--amber); }
.wk-rz-rumpf { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 340px); }
.wk-rz-bild { display: flex; align-items: center; justify-content: center; gap: 26px; padding: 26px; }
.wk-raster { display: grid; grid-template-columns: repeat(3, 68px); gap: 8px; }
.wk-eingaben { display: flex; flex-wrap: wrap; gap: 8px; max-width: 300px; }
.wk-slot { position: relative; display: grid; place-items: center; width: 68px; height: 68px; border: 1px solid var(--line-strong); border-radius: 7px;
  background: #121a2c; box-shadow: inset 0 2px 0 rgba(0,0,0,.35), inset 0 -1px 0 rgba(255,255,255,.03); }
.wk-slot.leer { border-color: var(--line); background: rgba(10,16,30,.6); }
a.wk-slot:hover { border-color: var(--blue-line); background: #14203a; }
.wk-slot img { width: 46px; height: 46px; }
.wk-n { position: absolute; right: 5px; bottom: 2px; font: 800 15px/1 var(--f-body); color: #fff; text-shadow: 2px 2px 0 #222; }
.wk-alt { position: absolute; left: 5px; top: 3px; font: 800 13px/1 var(--f-body); font-style: normal; color: var(--blue-lite); }
.wk-chance { position: absolute; left: 2px; right: 2px; top: -9px; border-radius: 6px; background: var(--card); text-align: center; font: 700 11px/1.4 var(--f-body); font-style: normal; color: var(--gold); }
.wk-rz-pfeil { color: var(--txt-2); }
.wk-rz-pfeil .wk-i { width: 34px; height: 34px; }
.wk-rz-aus { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.wk-rz-aus .wk-slot { width: 88px; height: 88px; border-color: var(--line-strong); }
.wk-rz-aus .wk-slot img { width: 60px; height: 60px; }
.wk-rz-aus-text { max-width: 160px; font-size: 15px; text-align: center; color: var(--txt-2); }
.wk-rz-mat { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 18px 20px; border-left: 1px solid var(--line-soft); }
.wk-rz-mat > p { margin: 0 0 4px; font-size: 16px; font-weight: 700; color: var(--txt); }
.wk-rz-mat-z { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 12px; border: 1px solid var(--line-soft); border-radius: 8px; background: rgba(10,16,30,.6); }
.wk-rz-mat-z b { font-size: 15.5px; color: var(--txt); white-space: nowrap; }
.wk-rz-text { margin: 0; padding: 0 22px 18px; font-size: 16px; color: var(--txt-2); }
.wk-rz-fuss { margin: 0; padding: 12px 20px; border-top: 1px solid var(--line-soft); font-size: 14.5px; color: var(--txt-3); }
.wk-leer-strich { color: var(--txt-3); }
.wk-fluid { display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--inset); font-size: 14px; color: var(--txt-2); }
.wk-fluid i { width: 14px; height: 14px; border-radius: 4px; background: linear-gradient(135deg, #4aa8ff, #1a5fd0); }
.wk-fluid b { color: var(--txt); }
.wk-ilink { display: inline-flex; align-items: center; gap: 10px; min-width: 0; font-size: 15.5px; font-weight: 600; color: var(--blue-lite); }
.wk-ilink img { width: 30px; height: 30px; flex: none; }
.wk-ilink span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wk-ilink.vanilla { font-weight: 500; color: var(--txt-2); }
.wk-ilink.klein { gap: 8px; font-size: 14.5px; }
.wk-ilink.klein img { width: 22px; height: 22px; }
.wk-rzz-liste { display: flex; flex-direction: column; gap: 8px; margin-top: 26px; }
.wk-rzz { display: grid; grid-template-columns: minmax(0, 1.3fr) auto minmax(0, 1fr) minmax(0, 1.1fr); align-items: center; gap: 14px; padding: 12px 16px;
  border: 1px solid var(--line-soft); border-radius: 10px; background: var(--card); }
.wk-rzz-ein, .wk-rzz-aus { display: flex; flex-wrap: wrap; gap: 6px; }
.wk-rzz .wk-slot { width: 52px; height: 52px; }
.wk-rzz .wk-slot img { width: 36px; height: 36px; }
.wk-rzz-name { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.wk-rzz-name small { font-size: 13.5px; color: var(--txt-3); }

/* ------------------------------------------------------------------ Kacheln, Kapitel, Maschinen, Verwendung */
.wk-kacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.wk-kacheln.gross { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); margin-top: 22px; }
.wk-kachel { display: flex; align-items: center; gap: 14px; min-width: 0; padding: 12px 14px; border: 1px solid var(--line-soft); border-radius: 10px;
  background: linear-gradient(var(--card-top), var(--card-bottom)); transition: border-color var(--t), transform var(--t); }
.wk-kachel:hover { border-color: color-mix(in srgb, var(--mod) 55%, transparent); transform: translateY(-1px); }
.wk-kachel img { width: 46px; height: 46px; flex: none; }
.wk-kachel-t { display: flex; flex-direction: column; min-width: 0; }
.wk-kachel-t b { overflow: hidden; font-size: 16px; font-weight: 600; color: var(--txt); text-overflow: ellipsis; white-space: nowrap; }
.wk-kachel-t small { font-size: 13.5px; color: color-mix(in srgb, var(--mod) 70%, var(--txt-3)); }
.wk-kapkarten, .wk-typen { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.wk-kapkarte, .wk-typ { display: flex; align-items: center; gap: 14px; min-width: 0; padding: 15px 16px; border: 1px solid var(--line); border-radius: 10px;
  background: linear-gradient(var(--card-top), var(--card-bottom)); transition: border-color var(--t); }
.wk-kapkarte:hover, .wk-typ:hover { border-color: var(--blue-line); }
.wk-kapkarte > img, .wk-typ > img { width: 44px; height: 44px; flex: none; }
.wk-kapkarte-sym { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 9px; background: var(--blue-ghost); color: var(--blue-lite); }
.wk-kapkarte > span:not(.wk-kapkarte-sym), .wk-typ > span:not(.wk-kapkarte-sym) { display: flex; flex: 1; flex-direction: column; gap: 3px; min-width: 0; }
.wk-kapkarte b, .wk-typ b { font-size: 16.5px; line-height: 1.3; color: var(--txt); }
.wk-kapkarte small, .wk-typ small { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: 14.5px; line-height: 1.45; color: var(--txt-3); }
.wk-kapkarte-pfeil { color: var(--txt-3); }
.wk-verwendung { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; }
.wk-verw { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 10px 14px; border: 1px solid var(--line-soft); border-radius: 9px; background: var(--card); }
.wk-verw small { padding-left: 40px; font-size: 13.5px; color: var(--txt-3); }
.wk-klapp { margin-top: 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg-soft); }
.wk-klapp > summary { list-style: none; display: flex; align-items: center; gap: 12px; padding: 14px 18px; cursor: pointer; font-size: 17px; }
.wk-klapp > summary::-webkit-details-marker { display: none; }
.wk-klapp > summary > .wk-zahl { margin-left: auto; }
.wk-klapp-pfeil { color: var(--txt-3); transition: transform var(--t); }
.wk-klapp[open] > summary .wk-klapp-pfeil { transform: rotate(180deg); }
.wk-klapp > .wk-kacheln, .wk-klapp > .wk-rz, .wk-klapp > .wk-codezeile { margin: 0 14px 14px; }
.wk-leer { margin: 0; padding: 18px 20px; border: 1px dashed var(--line); border-radius: 10px; font-size: 16.5px; color: var(--txt-3); }
.wk-klein { font-size: 15px; color: var(--txt-3); }
.wk-selten.uncommon { color: #ffd84a; } .wk-selten.rare { color: #5ff2ff; } .wk-selten.epic { color: #ff6bff; }

/* ------------------------------------------------------------------ Fließtext (Handbuch, Guides, Erste Schritte) */
.wk-artikel { margin-top: 30px; }
.wk-teil { margin-bottom: 22px; padding: 6px 0 22px; border-bottom: 1px solid var(--line-soft); scroll-margin-top: calc(var(--head-h) + 16px); }
.wk-teil:last-child { border-bottom: 0; }
.wk-text { max-width: 78ch; font-size: 17px; line-height: 1.75; color: #c9d5ef; }
.wk-artikel-text { font-size: 18px; color: #d6e2fb; }
.wk-text p { margin: 0 0 14px; }
.wk-text strong, .wk-text b { color: #fff; }
.wk-text ul, .wk-text ol:not(.wk-nummern) { margin: 0 0 14px; padding-left: 22px; }
.wk-text li { margin-bottom: 7px; }
.wk-text h4 { margin: 18px 0 10px; font: 700 18px/1.3 var(--f-head); color: var(--txt); }
.wk-text .wk-tabelle-rahmen { margin: 14px 0 16px; }
.wk-text .wk-tabelle { font-size: 15.5px; line-height: 1.5; }
.wk-text .wl-item { display: inline-flex; align-items: center; gap: 5px; vertical-align: bottom; font-weight: 600; color: var(--blue-lite); white-space: nowrap; }
.wk-text .wl-item img { width: 22px; height: 22px; }
.wk-text .wl-vanilla { font-weight: 600; color: #fff; }
.wk-text .wl-kap { color: var(--blue-lite); text-decoration: underline; text-decoration-color: var(--blue-line); text-underline-offset: 3px; }
.mc-0 { color: #6b7280 } .mc-1 { color: #6b86ff } .mc-2 { color: #4ade80 } .mc-3 { color: #2dd4bf } .mc-4 { color: #f87171 } .mc-5 { color: #e879f9 }
.mc-6 { color: #fbbf24 } .mc-7 { color: #cbd5e1 } .mc-8 { color: #94a3b8 } .mc-9 { color: #818cf8 } .mc-a { color: #86efac } .mc-b { color: #67e8f9 }
.mc-c { color: #fca5a5 } .mc-d { color: #f0abfc } .mc-e { color: #fde68a } .mc-f { color: #fff }
.wk-weiter { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.wk-weiterlesen { margin-top: 16px; padding: 9px 14px; border: 1px solid var(--blue-line); border-radius: 9px; background: var(--blue-ghost); font-size: 15.5px; }
.wk code, .wk-cmd { padding: 2px 7px; border: 1px solid var(--line); border-radius: 6px; background: var(--inset); font-family: var(--f-mono); font-size: .88em; color: #cfe0ff; }
.wk kbd { padding: 3px 7px; border: 1px solid var(--line-strong); border-bottom-width: 3px; border-radius: 6px; background: var(--card); font: 700 .85em/1 var(--f-body); color: var(--txt); }
.wk-punkte { margin: 0 0 14px; padding-left: 22px; }
.wk-punkte li { margin-bottom: 8px; }
.wk-gruen { font-weight: 700; color: var(--green); }
.wk-schrittliste li { padding: 18px 0; }
.wk-codezeile { display: flex; align-items: center; gap: 6px; margin-top: 12px; padding: 6px 6px 6px 14px; border: 1px solid var(--line); border-radius: 9px; background: var(--inset); }
.wk-codezeile code { flex: 1; min-width: 0; overflow-x: auto; padding: 6px 0; border: 0; background: none; white-space: nowrap; color: var(--txt); }
.wk-befehle { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--line); border-radius: 10px; }
.wk-befehle > div { display: grid; grid-template-columns: 170px minmax(0, 1fr); align-items: center; gap: 16px; padding: 14px 18px; border-bottom: 1px solid var(--line-soft); background: var(--card); }
.wk-befehle > div:last-child { border-bottom: 0; }
.wk-befehle p { margin: 0; color: var(--txt-2); }

/* ------------------------------------------------------------------ Filter, Seiten */
.wk-filterform { display: flex; gap: 10px; margin: 26px 0 16px; }
.wk-filterzeile { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.wk-filter { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--card);
  font-size: 14.5px; font-weight: 600; color: var(--txt-2); }
.wk-filter img, .wk-filter .wk-i { width: 18px; height: 18px; }
.wk-filter:hover { border-color: var(--line-strong); color: var(--txt); }
.wk-filter.on { border-color: var(--blue-line); background: var(--blue-ghost); color: #fff; }
.wk-seiten { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 26px; }
.wk-seiten a { display: grid; place-items: center; min-width: 42px; height: 42px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); font-weight: 700; color: var(--txt-2); }
.wk-seiten a.on { border-color: var(--blue); background: var(--blue); color: #fff; }

/* ------------------------------------------------------------------ Schmaler */
@media (max-width: 1260px) {
  .wk-kopf.mit-toc { grid-template-columns: minmax(0, 1fr); }
  .wk-kopf.mit-bild.mit-toc { grid-template-columns: minmax(0, 1fr) 230px; }
  .wk-kopf .wk-toc { display: none; }
  .wk-modkarten.drei { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wk-spiel { grid-template-columns: 200px minmax(0, 1fr) 22px; gap: 18px; }
}
@media (max-width: 1040px) {
  .wk { grid-template-columns: minmax(0, 1fr); }
  .wk-seite { padding: 16px var(--pad-x) 0; border-right: 0; background: none; }
  .wk-seite-klapp { padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); }
  .wk-seite-titel { margin: 0; font-size: 22px; cursor: pointer; }
  .wk-seite-klapp[open] .wk-seite-titel { margin-bottom: 14px; }
  .wk-seite-pfeil { display: block; transition: transform var(--t); }
  .wk-seite-klapp[open] .wk-seite-pfeil { transform: rotate(180deg); }
  .wk-haupt { padding-top: 20px; }
  .wk-held-bild { width: 70%; opacity: .55; }
  .wk-spiele, .wk-zeilen.zwei { grid-template-columns: minmax(0, 1fr); }
  .wk-zeilen.zwei > .wk-zeile:nth-child(odd) { border-right: 0; }
  .wk-zeilen.drei { grid-template-columns: minmax(0, 1fr); }
  .wk-ablauf, .wk-tipps { grid-template-columns: minmax(0, 1fr); }
  .wk-ablauf-bilder { flex-direction: row; }
  .wk-ablauf-bilder img { min-width: 0; flex: 1; }
  .wk-rz-rumpf { grid-template-columns: minmax(0, 1fr); }
  .wk-rz-mat { border-top: 1px solid var(--line-soft); border-left: 0; }
  .wk-rzz { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
  .wk-rzz-name { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .wk { font-size: 16.5px; }
  .wk-kopf.mit-bild, .wk-kopf.mit-bild.mit-toc { grid-template-columns: minmax(0, 1fr); }
  .wk-bildkarte { max-width: 280px; }
  .wk-schnell, .wk-modkarten.zwei, .wk-modkarten.drei { grid-template-columns: minmax(0, 1fr); }
  .wk-streifen { grid-template-columns: minmax(0, 1fr); }
  .wk-streifen-z + .wk-streifen-z { border-top: 1px solid var(--line); border-left: 0; }
  .wk-bett { grid-template-columns: minmax(0, 1fr); padding: 18px; }
  .wk-bett-z + .wk-bett-z { margin-top: 16px; padding: 16px 0 0; border-top: 1px solid var(--line); border-left: 0; }
  .wk-bett-bild { width: 80px; }
  .wk-ablauf-bilder { flex-direction: column; }
  .wk-held { min-height: 0; }
  .wk-held-bild { display: none; }
  .wk-neu-z { grid-template-columns: 64px minmax(0, 1fr) 24px; }
  .wk-neu-nr { font-size: 44px; }
  .wk-neu-t { max-width: none; }
  .wk-neu-bild { display: none; }
  .wk-spiel { grid-template-columns: 130px minmax(0, 1fr); gap: 14px; }
  .wk-spiel-pfeil { display: none; }
  .wk-spiel.box { grid-template-columns: 110px minmax(0, 1fr); }
  .wk-spiel-text b { font-size: 19px; }
  .wk-block-kopf { flex-wrap: wrap; align-items: flex-start; }
  .wk-block-kopf h2 { font-size: 26px; }
  .wk-cta { padding: 20px; }
  .wk-zeit li { padding-left: 76px; }
  .wk-zeit li::before { left: 61px; }
  .wk-zeit li::after { left: 57px; }
  .wk-zeit .wk-nr, .wk-nummern .wk-nr { width: 46px; height: 46px; font-size: 16px; }
  .wk-frage-a { padding-left: 20px; }
  .wk-rz-bild { flex-wrap: wrap; gap: 14px; padding: 18px; }
  .wk-raster { grid-template-columns: repeat(3, 54px); }
  .wk-slot { width: 54px; height: 54px; }
  .wk-slot img { width: 38px; height: 38px; }
  .wk-rz-aus .wk-slot { width: 72px; height: 72px; }
  .wk-befehle > div { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .wk-filterform { flex-wrap: wrap; }
  .wk-tabelle th, .wk-tabelle td { padding: 12px 14px; }
  .wk-tab tbody th { width: auto; }
  .wk-fuss-oben, .wk-fuss-unten { flex-direction: column; align-items: flex-start; }
}

/* ------------------------------------------------------------------ So bekommst du es (26.10.2026, Enrico: „wie bekommt man Bronze?“)
   Gleich unter dem Kopf: der kürzeste echte Weg aus Grundstoffen, Schritt für Schritt mit großen Feldern. */
.wk-weg-block { padding: 26px 28px 22px; border: 1px solid var(--blue-line); border-radius: 14px;
  background: linear-gradient(180deg, rgba(47,144,255,.09), rgba(47,144,255,.02)); }
.wk-weg-block .wk-block-kopf { margin-bottom: 12px; }
.wk-weg-satz { margin: 0 0 10px; font-size: 18px; color: var(--txt-2); }
.wk-weg-grund { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-bottom: 12px; }
.wk-weg-schritt { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.wk-weg-schritt > b { font-size: 19px; }
.wk-weg-wo { display: inline-flex; align-items: center; gap: 8px; font-size: 15.5px; color: var(--txt-2); }
.wk-weg-wo img { width: 22px; height: 22px; }
.wk-weg-wo a { color: var(--blue-lite); font-weight: 600; }
.wk-weg-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 4px; }
.wk-weg-zeile .wk-slot { width: 58px; height: 58px; }
.wk-weg-zeile .wk-slot img { width: 40px; height: 40px; }
.wk-weg-zeile .wk-rz-pfeil .wk-i { width: 26px; height: 26px; }
.wk-weg-schritt p { margin: 4px 0 0; font-size: 15.5px; color: var(--txt-2); }
.wk-weg-vorher { margin: 6px 0 8px; }
.wk-weg-vorher > .wk-weg { padding: 0 18px 4px; }
.wk-weg-welt { margin: 14px 0 0; padding: 14px 0 0; border-top: 1px solid var(--line-soft); list-style: none;
  display: flex; flex-direction: column; gap: 10px; font-size: 16.5px; color: var(--txt-2); }
.wk-weg-welt li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
@media (max-width: 760px) {
  .wk-weg-block { padding: 18px 16px; }
  .wk-weg-zeile .wk-slot { width: 50px; height: 50px; }
  .wk-weg-zeile .wk-slot img { width: 34px; height: 34px; }
}