/* Nr. 468 E4 — die Wiki-Seite `/hilfe` (Entwurf `docs/entwurf-468-englisch-wiki.html`, Szenen „Wiki“, „Artikel“, „Suche“).
   Tokens 1:1 aus Portal und Entwurf (hell festgelegt wie die DOOH-Oberfläche). Was die alte `hilfe.html` an Auszeichnungen hatte
   (Pfad, Takt, Hinweiskasten), steht unten bei `.artikel`. */
:root {
  color-scheme: light;
  --bg:#faf8f4; --flaeche:#fff; --flaeche2:#f3efe8;
  --linie:#e7e0d5; --linie2:#d5cbbb;
  --tinte:#1c1917; --tinte2:#4b453e; --tinte3:#837b70; --tinte4:#a9a196;
  --akzent:#d4541f; --akzent-weich:#fdefe6; --akzent-tief:#8a3410;
  --ok:#0f7a5a; --ok-weich:#e6f4ee;
  --warten:#b07d0a; --warten-weich:#fbf3df;
  --stopp:#b93a2c; --stopp-weich:#fbeae7;
  --schatten:0 1px 2px rgba(28,25,23,.05), 0 8px 24px rgba(28,25,23,.05);
  --kopf:'Bricolage Grotesque','Helvetica Neue',Helvetica,sans-serif;
  --lese:'Public Sans',-apple-system,'Helvetica Neue',Helvetica,sans-serif;
}
* { box-sizing:border-box; }
html, body { overflow-x:hidden; }
body.wiki-seite { margin:0; background:var(--bg); color:var(--tinte); font:14px/1.55 var(--lese); min-height:100vh; display:flex; flex-direction:column; }
.wiki-seite button, .wiki-seite input { font:inherit; color:inherit; }
.wiki-seite a { color:var(--akzent); text-decoration:none; }
.wiki-seite a:hover { color:var(--akzent-tief); }
.wiki-seite .dsp { font-family:var(--kopf); font-weight:700; letter-spacing:-.018em; }
.wiki-seite h2 { font:600 22px/1.2 var(--kopf); letter-spacing:-.015em; margin:0 0 4px; text-wrap:balance; }
.wiki-seite .unter { color:var(--tinte2); margin:0 0 16px; font-size:13.5px; }
.wiki-seite .unter.klein { font-size:12px; margin:0 0 0 4px; color:var(--tinte3); }
.wiki-seite .lbl { font-size:11px; font-weight:600; letter-spacing:.07em; text-transform:uppercase; color:var(--tinte3); }
.wiki-seite .wachs { flex-grow:1; }
.wiki-seite .marke { display:inline-flex; align-items:center; gap:6px; padding:2px 9px; border-radius:999px; font-size:11.5px; font-weight:600; white-space:nowrap; }
.wiki-seite .m-neut { background:var(--flaeche2); color:var(--tinte2); }
.wiki-seite .knopf { display:inline-flex; align-items:center; gap:6px; border:1px solid var(--linie2); background:#fff; color:var(--tinte); border-radius:8px; padding:0 12px; min-height:34px; font-weight:600; font-size:13px; }
.wiki-seite .knopf:hover { border-color:var(--akzent); color:var(--tinte); }
.wiki-seite .leer { color:var(--tinte2); }
.wiki-seite :focus-visible { outline:2px solid var(--akzent); outline-offset:2px; }

/* Kopf */
.pkopf { display:flex; align-items:center; gap:10px; min-height:56px; padding:8px 16px; background:#fff; border-bottom:1px solid var(--linie); flex-wrap:wrap; }
.pkopf .logo-link { display:inline-flex; align-items:center; gap:9px; color:var(--tinte); }
.pkopf .logo { width:24px; height:24px; border-radius:6px; background:var(--akzent); }
.pkopf .marke-wort { font-size:16px; }

/* Suche + Sicht */
.wkopf { background:#fff; border-bottom:1px solid var(--linie); padding:16px; }
.wkopf .zeile { display:flex; gap:10px; align-items:center; flex-wrap:wrap; max-width:1240px; margin:0 auto; }
.suche { position:relative; flex:1 1 280px; }
.suche input { width:100%; height:42px; border:1px solid var(--linie2); border-radius:10px; padding:0 12px 0 36px; background:#fff; font-size:14px; }
.suche svg { position:absolute; left:11px; top:12px; width:18px; height:18px; color:var(--tinte3); }
.sichten { display:flex; gap:6px; flex-wrap:wrap; margin:12px auto 0; align-items:center; max-width:1240px; }
.sichten .lbl { margin-right:4px; }
.chip { border:1px solid var(--linie2); background:#fff; border-radius:999px; padding:4px 11px; font-size:12.5px; font-weight:600; color:var(--tinte2); min-height:30px; cursor:pointer; }
.chip[aria-pressed="true"] { background:var(--tinte); border-color:var(--tinte); color:#fff; }
.chip:disabled { cursor:default; }

/* 1240 px Inhalt + je 16 px Rand: Kacheln, Treffer und Artikel stehen bündig unter Suchfeld und Überschrift (Durchklick 3.15.0, B19). */
main#inhalt { flex:1 0 auto; width:100%; max-width:1272px; margin:0 auto; }

/* Startseite: Kategorien */
.kats { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; padding:16px; }
.kat { padding:14px; text-align:left; border:1px solid var(--linie); background:#fff; border-radius:12px; box-shadow:var(--schatten); display:grid; grid-template-columns:36px 1fr; gap:4px 12px; color:var(--tinte) !important; }
.kat:hover { border-color:var(--akzent); }
.kat .sym { grid-row:span 3; width:36px; height:36px; border-radius:9px; background:var(--akzent-weich); color:var(--akzent-tief); display:grid; place-items:center; font:700 15px var(--kopf); }
.kat b { font-family:var(--kopf); font-size:15px; }
.kat small { color:var(--tinte2); font-size:12.5px; }
.kat .zahl { color:var(--tinte3); font-size:12px; }

/* Artikel */
.wgitter { display:grid; grid-template-columns:230px minmax(0,1fr); gap:0; }
.wnav { border-right:1px solid var(--linie); padding:14px 8px; background:#fff; font-size:13px; }
.wnav .k { font-weight:700; padding:8px 10px 2px; font-family:var(--kopf); }
.wnav a { display:block; width:100%; text-align:left; padding:5px 10px 5px 18px; border-radius:7px; color:var(--tinte2); }
.wnav a.an { background:var(--akzent-weich); color:var(--akzent-tief); font-weight:600; }
.artikel { padding:20px; max-width:760px; min-width:0; }
.artikel h2 { font-size:26px; }
.artikel h3 { font:600 18px/1.3 var(--kopf); margin:22px 0 6px; }
.artikel h4 { font:600 15px var(--kopf); margin:18px 0 6px; }
.artikel p, .artikel li { color:var(--tinte); overflow-wrap:anywhere; }
.artikel ol, .artikel ul { padding-left:20px; }
.artikel .meta { display:flex; gap:6px; flex-wrap:wrap; margin:6px 0 12px; }
.brot { font-size:12.5px; color:var(--tinte3); margin-bottom:8px; }
/* aus der alten hilfe.html: Menüweg, Takt, Hinweiskasten */
.artikel .pfad { font-family:ui-monospace,'SF Mono',Menlo,monospace; font-size:12px; background:var(--flaeche2); border:1px solid var(--linie); border-radius:6px; padding:1px 7px; color:var(--tinte); }
.artikel .takt { display:inline-block; font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; padding:2px 8px; border-radius:999px; margin-left:6px; vertical-align:middle; background:var(--flaeche2); color:var(--tinte2); }
.artikel .t-tag { background:var(--stopp-weich); color:var(--stopp); }
.artikel .t-woche { background:var(--warten-weich); color:var(--warten); }
.artikel .t-monat { background:var(--ok-weich); color:var(--ok); }
.artikel .warum { margin:8px 0 12px; font-size:13.5px; color:var(--tinte2); background:var(--flaeche2); border-radius:8px; padding:8px 10px; }
.artikel .warum b { color:var(--tinte); }

/* Suche */
.treffer { display:grid; gap:10px; padding:16px; }
.treffer-zeile { text-align:left; border:1px solid var(--linie); background:#fff; border-radius:10px; padding:12px 14px; display:grid; gap:4px; color:var(--tinte) !important; }
.treffer-zeile:hover { border-color:var(--akzent); }
.treffer-zeile b { font-family:var(--kopf); font-size:15px; }
.treffer-zeile .pfad-k { color:var(--tinte3); font-size:12px; }
.treffer-zeile .aus { color:var(--tinte2); font-size:13px; }
.vorschlag { color:var(--tinte2); }
.treffer-zeile .ueber { font-size:12px; color:var(--ok); font-weight:600; }
mark { background:#ffe3cf; color:inherit; border-radius:3px; padding:0 2px; }

/* Fuß */
.pfuss { border-top:1px solid var(--linie); padding:12px 16px; display:flex; gap:8px 16px; flex-wrap:wrap; align-items:center; font-size:12.5px; background:#fff; }
.pfuss .marke-text { color:var(--tinte3); }

@media (max-width:900px) {
  .kats { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .wgitter { grid-template-columns:minmax(0,1fr); }
  .wnav { border-right:0; border-bottom:1px solid var(--linie); }
}
@media (max-width:760px) {
  .wiki-seite .knopf, .chip, .spr-wahl button { min-height:44px; }
  .kats { grid-template-columns:minmax(0,1fr); }
  .wnav { display:none; }
  .artikel { padding:16px; }
}