<meta charset="utf-8">
<title>Bedrock Society</title>
<link rel="icon" type="image/png" href="atlas/favicon.png">
<link rel="apple-touch-icon" href="atlas/favicon.png">
<style>
  /* Rollennamen, nicht Herstellernamen: ein Schriftwechsel ist damit eine Zeile statt
     neun. Indies Wahl vom 19.10. (Paar 1 der Vorschauseite): Jacquard 12 fuer Titel,
     Ueberschriften und Knoepfe, Silkscreen fuer allen Text.

     WARUM SILKSCREEN NICHT UEBERALL: sie baut 1,49x breiter als die alte Schrift
     (gemessen an den Schriftdateien). Mit ihr im Fliesstext meldete der Fall "design"
     17 Ueberlaeufe, darunter die Faehigkeiten-Knoten mit 45px Inhalt auf 40px Platz.
     Jacquarda baut nur 1,06-1,19x breiter und passt. Wer das noch einmal dreht, lasse
     vorher "sh pruefung/pruefe.sh design" laufen - vorher 0 Ueberlaeufe, das ist die Messlatte.

     Beiden Schriften fehlt der Pfeil U+2192; im Spieltext steht darum durchgehend ». */
  @font-face { font-family: "SpielTitel"; src: url("atlas/Jacquard12.ttf"); }
  @font-face { font-family: "SpielText";  src: url("atlas/Silkscreen.ttf"); }
  @font-face { font-family: "SpielMini";  src: url("atlas/Silkscreen.ttf"); }

  /* Jacquarda traegt Titel, Ueberschriften und Knoepfe; Silkscreen allen Text.
     Eine Regel fuer alle Ueberschriften und Knoepfe, damit ein Wechsel nicht
     wieder durch zwanzig Zeilen muss. */
  .knopf, .menueknopf, .menuepunkt, .kbefehl b,
  .gruppe, .fahne, .dname, .einstellkopf,
  .menue h2, .szweig h3, .kseite h3, .tastengruppe h4 {
    font-family: "SpielTitel", ui-monospace, monospace;
  }

  /* Eine feste Welt: Holz, Pergament, Stein, Efeu - bewusst ohne Hell/Dunkel-Umschaltung */
  :root {
    --p: 3px;                                   /* ein "Pixel" der Oberflaeche */
    --nacht: #1a1512;
    --holz: #6b4424; --holz-hell: #9a6a3a; --holz-dunkel: #3a2414; --kontur: #1e120a;
    --pergament: #e9d8a6; --perg-hell: #f6ead0; --perg-dunkel: #c9ae78;
    --tinte: #3b2a1a; --tinte-blass: #7a5c3a; --tinte-aus: #b09a70;
    --gold: #e8b84a; --gold-dunkel: #a8741e;
    --tuch: #8a2a2a; --tuch-dunkel: #5a1818;
    /* Namen in Gesprächen: du selbst rot, Bewohner navyblau. Beide sind auf dem Pergament
       geprüft (Kontrast über 7:1) - ein helleres Rot wäre auf dem warmen Grund untergegangen. */
    --name-pc: #9c2b20; --name-npc: #1f3a6e;
    --kerbe: polygon(var(--p) 0, calc(100% - var(--p)) 0, 100% var(--p), 100% calc(100% - var(--p)),
                     calc(100% - var(--p)) 100%, var(--p) 100%, 0 calc(100% - var(--p)), 0 var(--p));
  }
  * { box-sizing: border-box; }
  [hidden] { display: none !important; }
  /* Alles passt ins Fenster, nichts scrollt: Start und Welt fuellen die Hoehe, Anmeldung und
     Schmiede werden bei Bedarf verkleinert (einpassen() in spiel.js) */
  html, body { margin: 0; height: 100%; overflow: hidden; background: var(--nacht); color: var(--tinte); }
  body {
    font: 16px/1.25 "SpielText", ui-monospace, Menlo, monospace;
    -webkit-font-smoothing: none; font-smooth: never;
    padding-block: 12px; padding-inline: 16px; display: flex; flex-direction: column;
    background:
      repeating-linear-gradient(90deg, transparent 0 45px, rgba(0,0,0,.18) 45px 48px),
      repeating-linear-gradient(0deg, #231b16 0 21px, #1a1512 21px 24px);
  }
  canvas { image-rendering: pixelated; image-rendering: crisp-edges; display: block; }

  /* Holzrahmen um alles, Efeu als Pixel-Overlay */
  .rahmen {
    position: relative; margin: 0 auto; width: 100%; max-width: 820px; padding: 16px 20px 26px;
    flex: 0 1 auto; min-height: 0; display: flex; flex-direction: column;
    background: repeating-linear-gradient(0deg, var(--holz) 0 15px, #5e3b1f 15px 18px);
    border: var(--p) solid var(--kontur); clip-path: var(--kerbe);
    box-shadow: inset var(--p) var(--p) 0 var(--holz-hell), inset calc(-1 * var(--p)) calc(-1 * var(--p)) 0 var(--holz-dunkel);
  }
  .efeu { position: absolute; pointer-events: none; z-index: 2; }
  main { display: grid; grid-template-columns: minmax(0, 384px) minmax(0, 1fr); gap: 22px; align-items: start; }
  @media (max-width: 820px) { main { grid-template-columns: minmax(0, 1fr); } }
  .vorschau { position: sticky; top: 16px; min-width: 0; }
  main > section { min-width: 0; }
  @media (max-width: 820px) { .vorschau { position: static; } }

  h1 {
    font: clamp(18px, 5.2vw, 36px)/1.1 "SpielTitel", ui-monospace, monospace; margin: 0 0 18px; text-align: center;
    color: var(--gold); text-shadow: var(--p) var(--p) 0 var(--kontur); letter-spacing: 1px; overflow-wrap: anywhere;
    margin-bottom: 12px;
  }

  /* Hinweis ueber den Rezepten: leer nimmt er keine Hoehe ein, damit nichts verrutscht */
  .werkbuchkopf { color: #e8b84a; font-size: 11px; text-align: center; }
  .werkbuchkopf:not(:empty) { padding: 2px 0 4px; }
  /* Buehne: Steinfassung, drinnen Pixel-Wiese (Canvas) */
  .buehne {
    position: relative; width: 100%; aspect-ratio: 1; max-width: 100%;
    border: var(--p) solid var(--kontur); clip-path: var(--kerbe);
    padding: 9px; background: #6b6b73;
    box-shadow: inset var(--p) var(--p) 0 #9a9aa2, inset calc(-1 * var(--p)) calc(-1 * var(--p)) 0 #45454c;
  }
  #haupt { width: 100%; height: 100%; border: var(--p) solid var(--kontur); transition: transform 90ms steps(2); }
  #haupt.pop { transform: scale(1.04); }
  .posenname, .laden {
    position: absolute; bottom: 18px; padding: 2px 8px 1px; font-size: 13px;
    background: var(--pergament); color: var(--tinte); border: var(--p) solid var(--kontur); clip-path: var(--kerbe);
  }
  .posenname { left: 18px; }
  .laden { right: 18px; opacity: 0; }
  .laden.an { opacity: 1; }

  .richtungen { display: flex; gap: 8px; margin-top: 12px; }
  .richtungen figure { margin: 0; flex: 1 1 0; min-width: 0; text-align: center; font-size: 13px; color: var(--perg-dunkel); }
  .richtungen canvas {
    width: 100%; max-width: 100%; aspect-ratio: 1; height: auto; cursor: pointer;
    border: var(--p) solid var(--kontur); outline: var(--p) solid var(--holz-dunkel);
  }
  .richtungen figure.aktiv canvas { outline-color: var(--gold); }
  .richtungen figure.aktiv { color: var(--gold); }
  .richtungen figcaption { margin-top: 5px; text-shadow: 2px 2px 0 var(--kontur); }

  /* Pergament mit Tinte */
  .panel {
    background: var(--pergament); border: var(--p) solid var(--kontur); clip-path: var(--kerbe); padding: 10px 8px;
    box-shadow: inset var(--p) var(--p) 0 var(--perg-hell), inset calc(-1 * var(--p)) calc(-1 * var(--p)) 0 var(--perg-dunkel);
  }
  .gruppe {
    display: inline-block; margin: 10px 0 4px -2px; padding: 3px 18px 2px 12px; font-size: 13px; letter-spacing: 1px;
    color: var(--gold); background: var(--tuch); text-shadow: 2px 2px 0 var(--tuch-dunkel);
    clip-path: polygon(0 0, 100% 0, calc(100% - 8px) 50%, 100% 100%, 0 100%);
  }
  .gruppe:first-child { margin-top: 0; }
  .zeile {
    display: grid; grid-template-columns: minmax(0, 118px) 16px minmax(0, 1fr) 16px; align-items: center; gap: 4px;
    padding: 4px 6px; cursor: pointer; user-select: none; border: var(--p) solid transparent;
  }
  .zeile .name { color: var(--tinte-blass); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .zeile .wert { text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--tinte); }
  .zeile .wert small { color: var(--tinte-blass); margin-left: 6px; font-size: 12px; }
  .zeile .pf { width: 9px; height: 12px; justify-self: center; background: transparent; }
  .zeile .pf[data-d="-1"] { clip-path: polygon(100% 0, 100% 100%, 0 50%); }
  .zeile .pf[data-d="1"]  { clip-path: polygon(0 0, 0 100%, 100% 50%); }
  .zeile.aktiv {
    background: var(--perg-hell); border-color: var(--gold-dunkel); clip-path: var(--kerbe);
    box-shadow: inset 0 calc(-1 * var(--p)) 0 var(--perg-dunkel);
  }
  .zeile.aktiv .name { color: var(--tuch); }
  .zeile.aktiv .pf { background: var(--tuch); }
  .zeile.aus { cursor: default; }
  .zeile.aus .name, .zeile.aus .wert { color: var(--tinte-aus); }
  .zeile.unter .name { padding-left: 14px; }
  .zeile.blink .wert { animation: blink .25s steps(3); }
  @keyframes blink { from { color: var(--tuch); transform: translateX(var(--dx, 0)); } to { transform: none; } }

  .info {
    margin-top: 12px; min-height: 2.5em; font-size: 13px; color: var(--perg-hell); text-shadow: 2px 2px 0 var(--kontur);
  }
  .tasten { margin-top: 8px; font-size: 13px; color: var(--perg-dunkel); line-height: 2; text-shadow: 2px 2px 0 var(--kontur); }
  kbd {
    display: inline-block; min-width: 22px; padding: 0 5px; text-align: center; font: inherit; text-shadow: none;
    color: var(--perg-hell); background: var(--holz-hell); border: 2px solid var(--kontur);
    box-shadow: inset 2px 2px 0 #c08a50, inset -2px -2px 0 var(--holz-dunkel);
  }
  /* Tastenübersicht: drei Spalten, je Gruppe eine Überschrift */
  /* Vier Spalten und etwas kleiner: die Uebersicht ist auf sieben Gruppen mit 47 Zeilen
     gewachsen (Zeichen im Dorfbuch, Was Gruppen sind) und ragte in drei Spalten heraus. */
  /* An die Fensterhoehe gekoppelt: bei 600 px Hoehe ragte die Uebersicht sonst 118 px
     heraus. Sieben Gruppen mit 47 Zeilen brauchen in einem flachen Fenster kleinere Schrift. */
  .tastenliste { flex: 1 1 auto; min-height: 0; column-count: 4; column-gap: 16px;
    font-size: clamp(8px, 1.45vh, 13px); }
  @media (max-width: 700px) { .tastenliste { column-count: 2; } }
  .tastengruppe { break-inside: avoid; margin: 0 0 7px; }
  .tastengruppe h4 { margin: 0 0 2px; font: inherit; font-size: 1.05em; letter-spacing: 1px; color: var(--tuch); }
  .tastenzeile { display: grid; grid-template-columns: 78px minmax(0, 1fr); gap: 6px; align-items: baseline; }
  .tastenzeile span { color: var(--tinte-blass); }
  .tastenzeile kbd { min-width: 16px; padding: 0 3px; font-size: .92em; }

  /* Weltenliste auf dem Titelbildschirm: ein Kasten je Welt, wie ein Regalbrett */
  .weltenliste { display: flex; flex-direction: column; gap: 8px; width: min(560px, 100%); margin-bottom: 6px; }
  .leerhinweis { color: var(--perg-hell); text-shadow: 2px 2px 0 var(--kontur); font-size: 15px; margin-bottom: 4px; }
  .weltzeile {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 12px;
    padding: 8px 12px; background: var(--pergament); color: var(--tinte);
    border: var(--p) solid var(--kontur); clip-path: var(--kerbe);
    box-shadow: inset var(--p) var(--p) 0 var(--perg-hell), inset calc(-1 * var(--p)) calc(-1 * var(--p)) 0 var(--perg-dunkel);
  }
  .weltzeile.an { outline: var(--p) solid var(--gold-dunkel); outline-offset: -8px; }
  /* Jede Kachel bekommt ihren festen Platz: sonst raeumt das Raster die Knoepfe nach links
     und draengt den Weltnamen in die auto-Spalte rechts, wo ihn nichts mehr begrenzt. */
  .weltzeile b { grid-column: 1; grid-row: 1; font-weight: normal; font-size: 17px;
    min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .weltzeile small { grid-column: 1; grid-row: 2; font-size: 12px; color: var(--tinte-blass);
    min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .weltknoepfe { grid-column: 2; grid-row: 1 / span 2; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
  /* Wird es doch einmal zu eng, rutschen die Knoepfe unter den Namen statt ihn zu verdraengen */
  @media (max-width: 560px) {
    .weltzeile { grid-template-columns: minmax(0, 1fr); }
    .weltknoepfe { grid-column: 1; grid-row: auto; justify-content: flex-start; }
  }
  .knopf.klein { font-size: 14px; padding: 6px 12px 5px; }
  /* Holzknoepfe: heller Text statt Gold - Gold auf Holzbraun war kaum zu lesen */
  .knopf.leise { background: var(--holz); color: var(--perg-hell); text-shadow: 2px 2px 0 var(--holz-dunkel);
    box-shadow: inset var(--p) var(--p) 0 var(--holz-hell), inset calc(-1 * var(--p)) calc(-1 * var(--p)) 0 var(--holz-dunkel); }
  .namefeld { width: min(320px, 80%); margin: 0 auto 12px; display: block; font: inherit; padding: 6px 10px;
    background: var(--perg-hell); color: var(--tinte); border: var(--p) solid var(--kontur); }
  .fokus { color: var(--gold); }
  .fehler { color: #ff9a8a; }

  /* Holzknopf mit rotem Tuch */
  .knopf {
    font: 18px/1 "SpielText", ui-monospace, monospace; color: var(--gold); cursor: pointer;
    padding: 10px 18px 8px; background: var(--tuch); text-shadow: 2px 2px 0 var(--tuch-dunkel);
    border: var(--p) solid var(--kontur); clip-path: var(--kerbe);
    box-shadow: inset var(--p) var(--p) 0 #b04040, inset calc(-1 * var(--p)) calc(-1 * var(--p)) 0 var(--tuch-dunkel);
  }
  .knopf:hover { background: #9c3030; }
  .knopf:active { transform: translateY(2px); }
  .knopf:focus-visible { outline: var(--p) solid var(--gold); outline-offset: 2px; }
  #weiter { display: block; width: 100%; margin-top: 16px; font-size: 20px; }

  /* Bildschirme: Start, Anmeldung, Schmiede, Welt */
  .rahmen:not(.breit) { flex: 0 0 auto; margin-block: auto; }   /* volle Hoehe; zu hoch -> einpassen() verkleinert */
  .rahmen.breit { max-width: none; flex: 1 1 auto; }           /* Titel und Welt: ganzes Fenster */
  body.vollflaeche { padding: 0; }
  body.vollflaeche .rahmen.breit { padding: 10px 12px 12px; }
  .dorfform { display: flex; flex-direction: column; gap: 8px; }
  .dorfform input { font: inherit; color: var(--tinte); background: var(--perg-hell); border: var(--p) solid var(--kontur); padding: 6px 10px; }
  .dorfform input:focus-visible { outline: var(--p) solid var(--gold); }
  .dorfform .knopf { font-size: .85em; }
  .rahmen.breit > .bildschirm:not([hidden]) { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
  /* Karte und Titelbild: groesstes 640:448-Feld, das in den freien Platz passt */
  .titelbild, .kartenfeld { flex: 1 1 auto; min-height: 0; container-type: size; display: grid; place-items: center; }
  .menue { width: min(100cqw - 12px, (100cqh - 12px) * 640 / 448); height: min(100cqh - 12px, (100cqw - 12px) * 448 / 640); }
  .titelbuehne, .karte { width: calc(100cqw - 12px); height: calc(100cqh - 12px); overflow: hidden; }   /* fuellen das Feld */
  .titelbuehne { position: relative; outline: var(--p) solid var(--kontur); box-shadow: 0 0 0 6px #45454c; }
  #titelkarte { display: block; width: 100%; height: 100%; object-fit: cover; filter: saturate(1.05); }
  .titeltext {
    position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
    background: radial-gradient(ellipse 60% 45% at 50% 50%, rgba(26,21,18,.62), rgba(26,21,18,.08));
    text-align: center; padding: 16px;
  }
  /* Das steinerne B: haengt an der Feldhoehe, damit Logo, Name und Knoepfe zusammen
     ins 640:448-Feld passen und nichts ueberlappt. */
  .titellogo {
    display: block; width: auto; height: clamp(56px, 30cqh, 196px); min-height: 0; flex: 0 1 auto;
    image-rendering: pixelated; filter: drop-shadow(4px 4px 0 rgba(26,21,18,.7)) drop-shadow(0 0 10px rgba(26,21,18,.5));
  }
  .spielname {
    font: clamp(22px, 5.2vw, 50px)/1 "SpielTitel", ui-monospace, monospace; color: var(--gold);
    text-shadow: 4px 4px 0 var(--kontur), -2px -2px 0 var(--kontur), 2px -2px 0 var(--kontur), -2px 2px 0 var(--kontur);
  }
  .untertitel { font-size: clamp(14px, 2.2vw, 22px); color: var(--perg-hell); text-shadow: 2px 2px 0 var(--kontur); }
  .titelknoepfe { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 18px; }
  /* Nur die grossen Knoepfe direkt auf dem Titel ("Neue Welt"), nicht die kleinen in den
     Weltzeilen: drei Knoepfe mit je 240px Mindestbreite passen nicht in eine 560px-Zeile -
     der Weltname wurde dann auf null gequetscht und "Loeschen" ragte rechts heraus. */
  .titelknoepfe > .knopf { min-width: 240px; font-size: 20px; }
  /* Nur die zurueckhaltenden Knoepfe DIREKT auf dem Titelbild ("Zurueck"). Mit dem
     Nachfahren-Selektor traf diese Regel auch "Umbenennen" und "Loeschen" in den
     Weltzeilen - blasser Text auf blassem Pergament, praktisch unlesbar. Schon einmal
     passiert, damals mit .knopf.leise (siehe .knopf.zurueck weiter unten). */
  .titelknoepfe > .leise {
    background: none; border: 0; color: var(--perg-hell); font: 14px "SpielText", monospace; cursor: pointer;
    text-decoration: underline; text-shadow: 2px 2px 0 var(--kontur); padding: 6px;
  }
  .titelknoepfe > .leise:focus-visible { outline: 2px solid var(--gold); }
  .laedt { color: var(--perg-hell); text-shadow: 2px 2px 0 var(--kontur); }

  .brief {
    position: relative; max-width: 620px; margin: 10px auto 6px; padding: 26px 26px 22px 26px;
    background: var(--pergament); color: var(--tinte); border: var(--p) solid var(--kontur); clip-path: var(--kerbe);
    box-shadow: inset var(--p) var(--p) 0 var(--perg-hell), inset calc(-1 * var(--p)) calc(-1 * var(--p)) 0 var(--perg-dunkel);
    font-size: 17px; line-height: 1.5;
  }
  .brief .dname {
    position: absolute; top: 0; left: 14px; padding: 3px 18px 2px 12px; font-size: 13px; letter-spacing: 1px;
    color: var(--gold); background: var(--tuch); text-shadow: 2px 2px 0 var(--tuch-dunkel);
    clip-path: polygon(0 0, 100% 0, calc(100% - 8px) 50%, 100% 100%, 0 100%);
  }
  .brief p { margin: 10px 0; }
  #anmeldeform { max-width: 760px; margin-top: 0; }
  .formzeile { display: flex; flex-wrap: wrap; gap: 6px 28px; align-items: flex-end; }
  .formzeile > div { flex: 1 1 220px; min-width: 0; }
  .biome { border: 0; padding: 0; margin: 14px 0 0; min-width: 0; }
  .biome legend { padding: 0; margin-bottom: 6px; color: var(--tinte-blass); font-size: 14px; }
  .biomwahl { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
  @media (max-width: 560px) { .biomwahl { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  .biom { position: relative; display: block; margin: 0 !important; cursor: pointer; text-align: center; font-size: 14px; color: var(--tinte) !important; }
  .biom input { position: absolute; opacity: 0; pointer-events: none; }
  .biom canvas { display: block; width: 100%; aspect-ratio: 640 / 448; border: var(--p) solid var(--kontur); image-rendering: auto; }
  .biom input:checked + canvas { outline: var(--p) solid var(--gold); outline-offset: 2px; }
  .biom input:focus-visible + canvas { outline: var(--p) solid var(--tuch); outline-offset: 2px; }
  .biome legend em { font-style: normal; color: var(--tuch); margin-left: 8px; }
  .biom span { display: block; margin-top: 6px; }
  .biom input:checked ~ span { color: var(--tuch); }
  .biomtext { margin-top: 6px; min-height: 1.3em; font-size: 14px; color: var(--tinte-blass); }
  .brief label { display: block; margin: 8px 0 4px; color: var(--tinte-blass); font-size: 14px; }
  .brief label em { font-style: normal; color: var(--tuch); }
  .brief input, .brief select {
    font: 18px "SpielText", ui-monospace, monospace; color: var(--tinte); background: var(--perg-hell);
    border: var(--p) solid var(--kontur); padding: 6px 10px; border-radius: 0;
  }
  .brief input { width: 100%; max-width: 320px; }
  .brief input:focus-visible, .brief select:focus-visible { outline: var(--p) solid var(--gold); }
  .brief .datum { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
  .brief .knopf { margin-top: 18px; }
  .fehlertext { color: var(--tuch); font-size: 14px; margin-top: 6px; }
  .brief.klein { max-width: 460px; margin: 0; }
  .knopfreihe { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }
  .knopfreihe .knopf { margin-top: 6px; font-size: 16px; }
  .knopf.hell { background: var(--holz-hell); color: var(--perg-hell); text-shadow: 2px 2px 0 var(--holz-dunkel);
    box-shadow: inset var(--p) var(--p) 0 #c08a50, inset calc(-1 * var(--p)) calc(-1 * var(--p)) 0 var(--holz-dunkel); }
  .fragebild:not([hidden]) { display: grid !important; place-items: center; padding: 16px 0; }

  /* Welt: Kopfleiste (Uhr, Meldung, Ort) - Karte ODER ein Menue - darunter nur das Gespraech.
     Nichts liegt ueber etwas anderem; Hinweise haengen als Schild ueber der Figur. */
  #reise { gap: 8px; }
  .kopfleiste { flex: 0 0 auto; display: flex; gap: 8px; align-items: stretch; min-height: 42px; }
  .tafel, .menue, .dialog {
    background: var(--pergament); color: var(--tinte); border: var(--p) solid var(--kontur); clip-path: var(--kerbe);
    box-shadow: inset var(--p) var(--p) 0 var(--perg-hell), inset calc(-1 * var(--p)) calc(-1 * var(--p)) 0 var(--perg-dunkel);
  }
  .tafel { display: flex; align-items: center; gap: 10px; padding: 4px 12px 3px; white-space: nowrap; }
  .uhr canvas { width: 60px; height: 26px; border: 2px solid var(--kontur); image-rendering: pixelated; }
  .uhr .datumzeile { font-size: 13px; color: var(--tinte-blass); }
  .ortname { margin-left: auto; font-size: 14px; color: var(--tinte-blass); }
  /* Das Band hat immer denselben Platz - sonst misst sich die Karte bei jeder Meldung neu */
  .meldung {
    flex: 1 1 auto; min-width: 0; display: flex !important; align-items: center; justify-content: center; text-align: center;
    padding: 4px 14px 3px; font-size: 15px; color: var(--gold); background: var(--tuch);
    border: var(--p) solid var(--kontur); clip-path: var(--kerbe); text-shadow: 2px 2px 0 var(--tuch-dunkel);
    height: 42px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  }
  .meldung[hidden] { visibility: hidden; }
  .meldung + .ortname { margin-left: 0; }
  .schild.hinweis { color: var(--tinte); }
  .schild.hinweis kbd { margin: 0 5px 0 0; }
  .schild.fokusschild { left: 50%; top: 100%; transform: translate(-50%, -140%); color: var(--tinte-blass); }
  .karte { position: relative; display: grid; place-items: center;
    outline: var(--p) solid var(--kontur); box-shadow: 0 0 0 6px #45454c; background: #000; }
  #welt { display: block; }                                  /* Größe setzt kameraAnpassen: ganzzahliger Zoom */

  /* Menues im Kartenfeld: Pergament in Kartengroesse, Schrift waechst mit */
  .menue { position: relative; display: flex; flex-direction: column; padding: 30px 18px 10px; overflow: hidden;
    font-size: clamp(11px, 3.1cqh, 17px); }
  .menue .dname, .dialog .dname, .brief .dname {
    position: absolute; top: 0; left: 14px; padding: 3px 18px 2px 12px; font-size: 13px; letter-spacing: 1px;
    color: var(--gold); background: var(--tuch); text-shadow: 2px 2px 0 var(--tuch-dunkel);
    clip-path: polygon(0 0, 100% 0, calc(100% - 8px) 50%, 100% 100%, 0 100%);
  }
  /* Im Fließtext genügt die Farbe; ein Fettdruck würde die Pixelschrift nur unruhig machen. */
  .n-pc { color: var(--name-pc); }
  .n-npc { color: var(--name-npc); }
  /* Im Namensschild des Sprechers steht die Schrift auf dunklem Tuch - dort braucht es
     hellere Töne, sonst verschwindet sie. */
  .dialog .dname.n-pc { color: #ffb0a0; }
  .dialog .dname.n-npc { color: #a8c8f0; }
  .menuefuss { flex: 0 0 auto; display: flex; justify-content: space-between; gap: 12px; margin-top: 8px; font-size: .8em; color: var(--tinte-blass); }
  .raster { flex: 1 1 auto; min-height: 0; display: grid; gap: 6px;
    grid-template-columns: repeat(5, minmax(0, 1fr)); grid-template-rows: repeat(4, minmax(0, 1fr)); }
  .fach { position: relative; min-height: 0; background: var(--perg-hell); border: 2px solid var(--perg-dunkel); }
  .fach canvas { width: 100%; height: 100%; object-fit: contain; }
  .fach .anzahl { position: absolute; right: 4px; bottom: 2px; color: var(--tinte); text-shadow: 1px 1px 0 var(--perg-hell); }
  .fach { cursor: pointer; }
  .fach.an { border-color: var(--gold-dunkel); outline: 2px solid var(--gold-dunkel); outline-offset: -4px; background: var(--pergament); }
  .rezepte { flex: 1 1 auto; min-height: 0; display: grid; gap: 6px;
    grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(4, minmax(0, 1fr)); }
  /* ---- Fertigkeitsnetz (Indie, 15.10.: "wie in Anno 117") ----------------
     Zweige sind Straenge, Stufen sind Knoten, dazwischen Linien. Durchgezogen, wo der Weg
     offen ist; gepunktet, wo er gesperrt ist. Kein frei liegendes Netz: die UI-Regel sagt,
     nichts darf ueberlappen, und ein Kraeftegraph kann das nicht zusichern. */
  .skillleute { display: flex; flex-wrap: wrap; gap: 4px; margin: 2px 0 4px; }
  .sperson { display: flex; align-items: center; gap: 4px; padding: 1px 6px; cursor: pointer;
    border: 2px solid var(--perg-dunkel); background: var(--perg-hell); font-size: .74em; }
  .sperson.an { border-color: var(--gold-dunkel); background: var(--pergament); }
  .sperson b { font-weight: normal; }
  .sperson .frei { color: #3c7a2a; }
  .sperson .plant { color: var(--tuch); }
  .szweig { display: flex; flex-direction: column; align-items: center; gap: 0; }
  .szweig h3 { margin: 0 0 2px; font: inherit; font-size: .74em; letter-spacing: 1px; color: var(--tuch); }
  /* Gross genug, dass das Netz den Bildschirm fuellt: mit 26px blieben zwei Drittel leer,
     weil die alten Textkaesten wegfielen. Jetzt traegt jeder Knoten seinen Namen. */
  .sknoten { position: relative; width: 46px; height: 46px; border-radius: 50%; cursor: pointer;
    border: 3px solid var(--perg-dunkel); background: var(--perg-hell);
    display: flex; align-items: center; justify-content: center; }
  .sknoten canvas { width: 32px; height: 32px; image-rendering: pixelated; }
  .sname { font-size: .68em; text-align: center; max-width: 9em; line-height: 1.15;
    margin: 1px 0 0; color: var(--tinte-blass); }
  .sknoten.hat + .sname, .szweig .sname.hat { color: var(--tinte); }
  .sknoten.hat { background: var(--gold); border-color: var(--gold-dunkel); }
  .sknoten.offen { background: var(--perg-hell); border-color: #3c7a2a; }
  .sknoten.zu { background: #6a6258; border-color: #4a443c; }
  .sknoten.an { outline: 2px solid var(--gold-dunkel); outline-offset: 2px; }
  .sknoten .srang { position: absolute; right: 1px; bottom: 1px;
    font-size: 9px; line-height: 15px;
    background: var(--pergament); border: 2px solid var(--perg-dunkel); border-radius: 50%;
    width: 15px; height: 15px; text-align: center; }
  .sknoten.ziel { box-shadow: 0 0 0 2px var(--tuch); }
  .slinie { width: 4px; height: 30px; background: var(--perg-dunkel); margin: 2px 0; }
  .slinie.zu { background: none; border-left: 4px dotted var(--perg-dunkel); width: 0; }
  .skillinfo { min-height: 2.1em; font-size: .76em; color: var(--tinte); margin-top: 2px; }
  .skillinfo b { font-weight: normal; color: var(--tuch); }
  .standhinweis { margin: 2px 0 6px; font-size: .78em; line-height: 1.3; }
  .standhinweis b { font-weight: normal; color: var(--tuch); }
  #standfeld { flex: 1 1 auto; min-height: 0; width: 100%; box-sizing: border-box;
    font: inherit; font-size: .72em; line-height: 1.2; resize: none;
    background: var(--perg-hell); color: var(--tinte);
    border: 2px solid var(--perg-dunkel); padding: 6px; }
  .rezept { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 10px; align-content: center; min-height: 0;
    overflow: hidden; padding: 2px 10px; background: var(--perg-hell); border: 2px solid var(--perg-dunkel); cursor: pointer; }
  .rezept canvas { grid-row: 1 / span 3; align-self: center; width: 2.6em; height: 2.6em; }
  .rezept b { font-weight: normal; }
  .rezept small { grid-column: 2 / span 2; font-size: .74em; color: var(--tinte-blass); line-height: 1.25; }
  .rezept small .fehlt { color: var(--tuch); }
  /* "fehlt noch" stand in --tinte-aus (#b09a70) auf --perg-hell (#f6ead0): Kontrast 2,28,
     unter der WCAG-Schwelle 3,0, die der Fall "design" prueft. Aufgefallen am 15.10., als
     die umverteilten Rezepte den Hinweis haeufiger zeigten - der Fehler war aber schon
     vorher da. Nur hier geaendert: --tinte-aus steht anderswo auf dunklerem Grund. */
  .rezept em { grid-column: 3; grid-row: 1; font-style: normal; font-size: .72em; color: #877043; }
  .rezept.geht em { color: #3c7a2a; }
  .rezept.an { border-color: var(--gold-dunkel); outline: 2px solid var(--gold-dunkel); outline-offset: -4px; }
  .tagebuchspalten { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 18px; }
  .menue h2 { margin: 0 0 4px; font: inherit; font-size: .8em; letter-spacing: 1px; color: var(--tuch); }
  .meilensteine { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 14px; }
  .nachbar { display: grid; grid-template-columns: 1fr auto; column-gap: 8px; padding: 2px 0; border-bottom: 2px solid var(--perg-dunkel); }
  .nachbar small { grid-column: 1; color: var(--tinte-blass); font-size: .72em; }
  .nachbar .herzen { grid-row: 1 / span 2; grid-column: 2; align-self: center; display: flex; gap: 2px; }
  .herzen i { width: 9px; height: 8px; background: var(--perg-dunkel);
    clip-path: polygon(0 25%, 25% 0, 50% 25%, 75% 0, 100% 25%, 100% 50%, 50% 100%, 0 50%); }
  .herzen i.an { background: #c83c50; }
  /* Meilensteine als Baum: je Kette eine Reihe, Stufen mit Strich verbunden */
  /* Die Ketten duerfen enger stehen und schrumpfen, wenn es viele werden - sonst scrollt
     die Tafel, sobald ein Meilenstein dazukommt. */
  .meilenbaum { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 4px;
    overflow: hidden; font-size: .94em; }
  .meilenbaum .mkette { flex: 0 1 auto; min-height: 0; }
  /* Chronik: ein Block je Abschnitt, die Nacht dunkler abgesetzt */
  .chronikblock { padding: 4px 8px; background: var(--perg-hell); border-left: var(--p) solid var(--perg-dunkel);
    display: flex; flex-direction: column; gap: 1px; }
  .chronikblock.nacht { border-left-color: var(--tuch); background: #e2cfa0; }
  .chronikblock b { font-weight: normal; font-size: .82em; color: var(--tuch); letter-spacing: 1px; }
  .chronikblock span { font-size: .72em; color: var(--tinte-blass); }
  .steuermehr { margin: 10px 0 0; font-size: .8em; color: var(--tinte-blass); }
  .mkette { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; align-items: stretch; }
  .mstein { position: relative; display: flex; flex-direction: column; justify-content: center; margin-right: 14px;
    padding: 3px 9px; background: var(--perg-hell); border: 2px solid var(--perg-dunkel); color: var(--tinte-blass); }
  .mstein + .mstein::before { content: ""; position: absolute; left: -16px; top: 50%; width: 14px; height: 3px; background: var(--perg-dunkel); }
  .mstein b { font-weight: normal; font-size: .82em; }
  .mstein small { font-size: .66em; }
  .mstein.erreicht { color: var(--tinte); background: var(--pergament); border-color: var(--gold-dunkel); }
  .mstein.erreicht b::before { content: "✓ "; color: #3c7a2a; }
  .mstein.erreicht + .mstein::before { background: var(--gold-dunkel); }
  .mstein.offen { color: var(--tinte); border-color: var(--tuch); }

  /* Dorfbuch: Werte oben, links die Bewohner mit ihrer Aufgabe, rechts der Bericht des Morgens */
  .dorfwerte { flex: 0 0 auto; display: flex; flex-wrap: wrap; gap: 6px 14px; padding-bottom: 8px; }
  .dwert { display: flex; flex-direction: column; min-width: 4.5em; font-size: .72em; color: var(--tinte-blass); }
  .dwert b { font-weight: normal; font-size: 1.5em; color: var(--tuch); }
  .dorfspalten { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 12px; }
  .dorfleute { display: flex; flex-direction: column; gap: 2px; min-height: 0; }
  /* Erste Spalte ist der Kopf, feste Breite - sonst wandert die Textspalte je Zeile.
     Einzeilig und flach, damit zehn Bewohner untereinander ins Feld passen: vorher stand
     die Aufgabe unter dem Namen, das kostete je Zeile eine zweite Textzeile - bei sechs
     Namen war das Feld voll. */
  /* Der Name bekommt seine natuerliche Breite, die Statuszeile den Rest und weicht zuerst:
     vorher war es umgekehrt (1fr fuer den Namen, auto fuer die Zeile), und eine lange
     Statuszeile drueckte den Namen auf 20 Pixel zusammen - gemessen am 14.10. */
  /* ZWEI ZEILEN, seit dem 22.10. Vorher stand alles nebeneinander, und die Statuszeile
     brauchte 593 Pixel, wo 379 waren: jeder Bewohner endete mit "... 1 VERTE...". Ein
     Druide hat nun einmal fuenf Werte, eine Gruppe, einen Ort und vielleicht ein Tier -
     das sind keine Worte, die man kuerzen kann, ohne dass sie aufhoeren, etwas zu sagen.
     Unter der Liste standen zugleich 400 Pixel leer. Also bekommt die Statuszeile eine
     eigene Zeile und darf umbrechen; dorfbuchEinpassen misst die Liste ohnehin selbst
     ein und nimmt Namen weg, bis sie ins Feld passt - hohe Zeilen sind dabei kein
     Sonderfall. Abgeschnitten wird jetzt nichts mehr. */
  .dleute { display: grid; grid-template-columns: 20px auto minmax(0, 1fr) auto;
    align-items: center; gap: 0 8px;
    padding: 1px 8px; background: var(--perg-hell); border: 2px solid var(--perg-dunkel); cursor: pointer; }
  .dkopf { grid-column: 1; grid-row: 1 / 3; width: 20px; height: 20px; image-rendering: pixelated;
    align-self: center; }
  .dkopf.leer { display: block; }
  .dleute b { grid-column: 2; grid-row: 1; font-weight: normal; line-height: 1.1;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  /* Eng gesetzt, damit zehn Namen ins Feld passen (Wunsch vom 08.10.): zwei Zeilen
     je Bewohner kosten Hoehe, und das Feld ist 554 Pixel hoch. */
  .dleute small { grid-column: 2 / -1; grid-row: 2; font-size: .58em; color: var(--tinte-blass);
    min-width: 0; text-align: left; line-height: 1.2; }
  .dleute em { grid-column: 4; grid-row: 1; font-style: normal; font-size: .8em; color: var(--tuch);
    white-space: nowrap; }
  .dleute.an { border-color: var(--gold-dunkel); outline: 2px solid var(--gold-dunkel); outline-offset: -4px; }
  /* Wo jemand steckt: draußen hell, daheim gedämpft - auf einen Blick unterscheidbar */
  .dleute .dort { color: var(--tuch); }
  .dleute.wund b::after { content: " ✚"; color: var(--tuch); }
  /* Die eine Warnung, die über Leben und Tod des Dorfes entscheidet */
  .dwarnung { flex: 0 0 auto; margin-bottom: 6px; padding: 4px 10px; font-size: .78em; color: var(--perg-hell);
    background: var(--tuch); border: 2px solid var(--tuch-dunkel); text-shadow: 2px 2px 0 var(--tuch-dunkel); }
  .dorfbericht { font-size: .78em; line-height: 1.45; color: var(--tinte); overflow: hidden; }
  .dorfbericht div { padding: 2px 0; border-bottom: 2px solid var(--perg-dunkel); }

  /* Truhe und andere Ablagen: links was drinliegt, rechts die Taschen - man sieht
     beide Seiten und legt mit Enter hin und her (wie in Minecraft). */
  .ablagespalten { flex: 1 1 auto; min-height: 0; display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
  .ablagespalten > div { display: flex; flex-direction: column; min-height: 0; gap: 4px; }
  .ablageraster { grid-template-columns: repeat(5, minmax(0, 1fr));
    grid-template-rows: repeat(5, minmax(0, 1fr)); }
  .fach.leer { opacity: .5; }

  /* Lager: oben die vier Vorräte, darunter was aus den Taschen hineinpasst */
  .lagerwerte { flex: 0 0 auto; display: flex; flex-wrap: wrap; gap: 6px 18px; padding-bottom: 10px; }
  .lagerliste { flex: 1 1 auto; min-height: 0; display: grid; gap: 6px;
    grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; }
  .lagerzeile { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center;
    column-gap: 10px; padding: .35em .7em; background: var(--perg-hell);
    border: 2px solid var(--perg-dunkel); cursor: pointer; }
  .lagerzeile canvas { width: 2em; height: 2em; }
  .lagerzeile b { font-weight: normal; }
  .lagerzeile small { grid-column: 2 / -1; font-size: .7em; color: var(--tinte-blass); }
  .lagerzeile em { font-style: normal; font-size: .8em; color: var(--tuch); }
  .lagerzeile.an { border-color: var(--gold-dunkel); outline: 2px solid var(--gold-dunkel); outline-offset: -4px; }
  .lagerleer { grid-column: 1 / -1; font-size: .8em; color: var(--tinte-blass); }

  .einstellungsliste { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 4px; }
  /* Auf dem Titelbild steht der Kasten fuer sich, nicht im Kartenfeld */
  .menue.imtitel { width: min(420px, 86%); max-height: 82%; font-size: 13px; padding: 26px 16px 12px; }
  .einstellkopf { margin: 8px 0 2px; font-size: .82em; letter-spacing: 1px; text-transform: uppercase;
    color: var(--tinte-blass); font-weight: normal; }
  .einstellkopf:first-child { margin-top: 0; }

  .wozu { display: block; margin-top: 2px; font-size: .78em; color: var(--tinte-blass); }

  .knopfreihe { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
  /* Nur die Rueckwege in Anmeldung, Schmiede und Einstellungen sind zurueckhaltend.
     Vorher stand hier .knopf.leise - das traf auch "Umbenennen" und "Loeschen" in der
     Weltenliste und machte deren Schrift blass auf blassem Grund. */
  .knopf.zurueck { background: transparent; color: var(--tinte-blass); box-shadow: none; }

  /* Auftragsbuch */
  .questliste { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 6px; }
  .quest { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding: 4px 10px;
    background: var(--perg-hell); border: 2px solid var(--perg-dunkel); cursor: pointer; }
  .quest b { font-weight: normal; }
  .quest .qart { font-style: normal; font-size: .68em; color: var(--tinte-blass);
    border: 2px solid var(--perg-dunkel); padding: 0 4px; margin-left: 6px; }
  .quest small { grid-column: 1; grid-row: 2; font-size: .72em; color: var(--tinte-blass); }
  .quest em { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-style: normal; font-size: .78em; color: var(--tinte-blass); }
  .quest.geht em { color: #3c7a2a; }
  .quest.an { border-color: var(--gold-dunkel); outline: 2px solid var(--gold-dunkel); outline-offset: -4px; }
  .qleer { font-size: .8em; color: var(--tinte-blass); }

  /* Faehigkeiten: die Zweige nebeneinander, vier Stufen untereinander. Die Spaltenzahl
     setzt skillsZeigen(), denn mit einem Haustier kommt ein vierter Zweig dazu - bei drei
     festen Spalten rutschte der vierte in eine zweite Reihe und war halb abgeschnitten. */
  .skillklassen { flex: 0 0 auto; font-size: .72em; color: var(--tinte-blass); padding-bottom: 8px; }
  .skillfeld { flex: 1 1 auto; min-height: 0; display: grid;
    grid-template-columns: repeat(var(--zweige, 3), minmax(0, 1fr)); gap: 12px; }
  .szweig { display: flex; flex-direction: column; gap: 6px; min-height: 0; }
  .szweig h3 { margin: 0; font: inherit; font-size: .8em; letter-spacing: 1px; color: var(--tuch); }
  .sfeld { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; justify-content: center;
    padding: 4px 10px; background: var(--perg-hell); border: 2px solid var(--perg-dunkel); cursor: pointer; opacity: .55; }
  .sfeld b { font-weight: normal; }
  .sfeld small { font-size: .68em; color: var(--tinte-blass); }
  .sfeld.offen { opacity: 1; }
  .sfeld.hat { opacity: 1; background: var(--pergament); border-color: var(--gold-dunkel); }
  .sfeld.hat b::before { content: "✓ "; color: #3c7a2a; }
  .sfeld.an { outline: 2px solid var(--gold-dunkel); outline-offset: -4px; }
  /* Verschlossen: die letzte Stufe, zu der dem Dorf die Erkenntnis fehlt. Sie bleibt
     sichtbar - man soll wissen, dass es sie gibt - aber der Rahmen ist gestrichelt.
     Der Grund bleibt hell: auf var(--perg-dunkel) kam die blasse Tinte nur auf Kontrast
     2,8 und der Designtest schlug zu Recht an. */
  .sfeld.zu { opacity: 1; background: var(--pergament); border-style: dashed; border-color: var(--tinte-aus); }
  .sfeld.zu b { color: var(--tinte); }
  .sfeld.zu b::before { content: "· "; color: var(--tuch); }
  .sfeld.zu small { color: var(--tinte-blass); }

  /* Dorfkarte: die Parzellen der Karte, daneben wem was gehoert */
  .kartefeld { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 1fr); gap: 14px; align-items: start; }
  .kartefeld canvas { width: 100%; height: auto; image-rendering: pixelated; border: var(--p) solid var(--kontur); }
  .kartelegende div { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 8px; align-items: center; padding: 3px 0; }
  .kartelegende i { width: 12px; height: 12px; border: 2px solid var(--kontur); }
  .kartelegende b { font-weight: normal; }
  .kartelegende small { grid-column: 2; font-size: .7em; color: var(--tinte-blass); }

  /* Kampf: Gruppe links, Bild in der Mitte, Monster rechts; darunter Befehle und Verlauf */
  /* Die Buehne oben ueber die ganze Breite, darunter Gruppe und Horde nebeneinander */
  .kampffeld { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: minmax(0, auto) minmax(0, 1fr); gap: 8px 12px; align-items: start; }
  .kampffeld canvas { grid-column: 1 / -1; display: block; width: 100%; aspect-ratio: 24 / 10; height: auto;
    max-height: 46cqh; margin: 0 auto; image-rendering: pixelated; border: 2px solid var(--kontur); }
  .kseite { display: flex; flex-direction: column; gap: 5px; min-height: 0; }
  .kseite h3 { margin: 0; font: inherit; font-size: .76em; letter-spacing: 1px; color: var(--tuch); }
  .kzeile { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1px 8px; padding: 3px 8px;
    background: var(--perg-hell); border: 2px solid var(--perg-dunkel); }
  .kzeile b { font-weight: normal; }
  .kzeile small { grid-column: 1; grid-row: 2; font-size: .68em; color: var(--tinte-blass); }
  .kzeile em { grid-column: 2; grid-row: 1; font-style: normal; font-size: .8em; }
  .kzeile .balken { grid-column: 1 / span 2; grid-row: 3; height: 6px; background: var(--perg-dunkel); }
  .kzeile .balken i { display: block; height: 100%; background: #3c7a2a; }
  .kzeile .balken.feind i { background: var(--tuch); }
  .kzeile.an { border-color: var(--gold-dunkel); outline: 2px solid var(--gold-dunkel); outline-offset: -4px; }
  .kzeile.ziel { border-color: var(--tuch); outline: 2px solid var(--tuch); outline-offset: -4px; }
  .kzeile.aus { opacity: .45; }
  .kampfunten { flex: 0 0 auto; display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 10px; padding-top: 8px; }
  .kbefehle { display: flex; gap: 6px; }
  .kbefehl { flex: 1 1 0; padding: 3px 8px; background: var(--perg-hell); border: 2px solid var(--perg-dunkel); cursor: pointer; }
  .kbefehl b { display: block; font-weight: normal; }
  .kbefehl small { font-size: .66em; color: var(--tinte-blass); }
  .kbefehl.an { border-color: var(--gold-dunkel); outline: 2px solid var(--gold-dunkel); outline-offset: -4px; }
  .kbefehl.alle { flex: 0 0 auto; background: var(--pergament); border-color: var(--tuch); }
  .kbefehl.alle b { color: var(--tuch); }
  .klog { font-size: .78em; line-height: 1.45; color: var(--tinte-blass); align-self: end; }

  /* Namensschilder gehoeren zur Karte (wie die Figuren selbst) */
  .schild {
    position: absolute; transform: translate(-50%, -100%); white-space: nowrap; pointer-events: none;
    padding: 1px 7px; font-size: 13px; background: var(--pergament); color: var(--tinte);
    border: 2px solid var(--kontur); clip-path: var(--kerbe);
  }
  .schild kbd { margin-left: 5px; min-width: 16px; padding: 0 3px; font-size: 11px; box-shadow: none; }

  /* Unterfeld: nur fuer das Gespraech; ohne Gespraech gehoert der Platz der Karte */
  .unterfeld { flex: 0 0 auto; display: flex; flex-direction: column; }
  .unterfeld > :not([hidden]) { flex: 1 1 auto; height: 132px; min-height: 0; }
  .menueknopf { font: inherit; font-size: 14px; cursor: pointer; }
  .menueknopf:focus-visible { outline: var(--p) solid var(--gold); }
  .menueknopf kbd { font-size: 11px; box-shadow: none; }
  .bauliste { display: flex; flex-direction: column; gap: 8px; }
  .baustoff { display: grid; grid-template-columns: auto minmax(0, 8em) minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: 12px;
  /* Ein Balken fuer das gesamte Baumaterial - darueber, was man dabeihat */
  .baufortschritt { display: flex; align-items: center; gap: 10px; padding: 4px 10px; margin-bottom: 6px;
    background: var(--perg-hell); border: 2px solid var(--gold-dunkel); }
  .baufortschritt b { font-weight: normal; font-size: .9em; }
  .baufortschritt > span:last-child { margin-left: auto; font-size: .9em; }
    align-items: center; padding: .4em .7em; background: var(--perg-hell); border: 2px solid var(--perg-dunkel); cursor: pointer; }
  .baustoff canvas { grid-row: 1 / span 2; width: 2.4em; height: 2.4em; }
  .baustoff b { font-weight: normal; }
  .baustoff small { grid-column: 2 / -1; font-size: .72em; color: var(--tinte-blass); }
  .baustoff.an { border-color: var(--gold-dunkel); outline: 2px solid var(--gold-dunkel); outline-offset: -4px; }
  .fortschritt { display: flex; gap: 3px; }
  .fortschritt i { flex: 1 1 0; max-width: 1.6em; height: .8em; background: var(--perg-dunkel); }
  .fortschritt i.an { background: #6a8a3a; }
  .bautext { margin: 10px 0 0; font-size: .8em; color: var(--tinte-blass); }
  .kurse { flex: 1 1 auto; min-height: 0; display: grid; gap: 6px; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; }
  .kurs { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; column-gap: 8px;
    padding: .35em .6em; background: var(--perg-hell); border: 2px solid var(--perg-dunkel); cursor: pointer; color: var(--tinte-aus); }
  .kurs.geht { color: var(--tinte); }
  .kurs.an { border-color: var(--gold-dunkel); outline: 2px solid var(--gold-dunkel); outline-offset: -4px; }
  .kurs .seite { display: flex; align-items: center; gap: 6px; min-width: 0; }
  .kurs .seite b { font-weight: normal; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .kurs canvas { width: 2em; height: 2em; flex: 0 0 auto; }
  .kurs .pfeil { color: var(--tuch); }
  .kurs small { grid-column: 1 / -1; font-size: .7em; color: var(--tinte-blass); }
  .reisespalten { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 16px; }
  #sternkarte { width: 100%; height: 100%; min-height: 0; object-fit: contain; border: 2px solid var(--kontur); cursor: pointer; }
  .reiseseite { display: flex; flex-direction: column; justify-content: space-between; gap: 10px; min-height: 0; }
  .reiseinfo { display: grid; grid-template-columns: auto 1fr; gap: .3em 10px; margin: 0; font-size: .8em; }
  .reiseinfo dt { color: var(--tuch); } .reiseinfo dd { margin: 0; }
  #reiseknopf { font-size: .9em; }
  #reiseknopf:disabled { opacity: .45; cursor: default; }
  .menuespalten { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 22px; align-items: start; }
  /* Zweispaltig, sobald es viele Punkte werden: mit "Bauprojekte" lief die einspaltige
     Liste 27 px über den Rahmen hinaus, und im Spiel scrollt nichts (UI-Regel). Die Spalten
     füllen sich von oben nach unten, damit die Reihenfolge lesbar bleibt. */
  .menueliste { display: grid; grid-auto-flow: column; gap: 6px 14px;
                grid-template-rows: repeat(8, auto); align-content: start;
                min-width: 0; }
  .menuepunkt { display: flex; justify-content: space-between; align-items: center; gap: 8px; width: 100%; text-align: left;
    font: inherit; color: var(--tinte); cursor: pointer; padding: .3em .7em; background: var(--perg-hell); border: 2px solid var(--perg-dunkel); }
  /* Fuenfzehn Punkte passen nur eng: vorher ragte die Spalte 16 px heraus */
  .menuepunkt { padding-block: 5px; font-size: .92em; }
  .menuepunkt.an, .menuepunkt:hover { color: var(--tuch); border-color: var(--gold-dunkel); }
  .menuepunkt.an > span:first-child::before { content: "▸ "; }
  /* Einzeilig JA, aber nicht um den Preis des Ueberlaufs: "Dorf umbenennen: <Name>"
     waechst mit dem Dorfnamen und lief am 20.10. bei Indie aus seiner Grid-Spalte
     heraus, mitten auf die Tastenhilfe daneben. min-width:0 erlaubt dem Punkt zu
     schrumpfen, die Ellipse kuerzt den Namen statt die Nachbarspalte zu ueberdecken.
     Der volle Name steht ohnehin im Dorfbuch. */
  .menuepunkt { min-width: 0; }
  .menuepunkt > span:first-child { white-space: nowrap; min-width: 0;
                                   overflow: hidden; text-overflow: ellipsis; }
  .menuepunkt:focus-visible { outline: 2px solid var(--gold); }
  .menuepunkt kbd { font-size: .75em; box-shadow: none; }
  .regler { display: flex; align-items: center; gap: 2px; }
  .regler i { width: .5em; height: .9em; background: var(--perg-dunkel); }
  .regler i.an { background: var(--tuch); }
  .regler small { min-width: 3.2em; margin-left: 6px; text-align: right; font-size: .8em; color: var(--tinte-blass); }
  /* Enger gesetzt: die Liste kommt jetzt aus TASTENHILFE und ist auf zwoelf Zeilen
     gewachsen - mit den alten Abstaenden ragte das Menue 16 px aus dem Rahmen. */
  .steuerung dl { display: grid; grid-template-columns: auto 1fr; gap: .2em 10px; margin: 0; font-size: .74em; }
  .steuerung dt { white-space: nowrap; } .steuerung dd { margin: 0; color: var(--tinte-blass); }
  .steuerung kbd { font-size: .8em; box-shadow: none; min-width: 0; }
  .tastenreihe { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13px; color: var(--tinte-blass); }
  .dialog { position: relative; overflow: hidden; padding: 24px 20px 10px; font-size: 16px; line-height: 1.4; }
  .dialog .wahl { display: flex; flex-wrap: wrap; gap: 4px 8px; margin-top: 6px; }
  .dialog .wahl div { padding: 1px 8px; border: 2px solid var(--perg-dunkel); }
  .dialog .wahl div.an { background: var(--perg-hell); color: var(--tuch); border-color: var(--gold-dunkel); }
  .dialog .wahl div.an::before { content: "▸ "; }
  .dialog .dweiter { position: absolute; right: 16px; bottom: 6px; font-size: 12px; color: var(--tinte-blass); }
  .dialog .dweiter.an { animation: nicken 1s steps(2) infinite; }
  @keyframes nicken { 50% { transform: translateY(3px); } }
  @media (prefers-reduced-motion: reduce) { #haupt, .zeile.blink .wert { transition: none; animation: none; } }
  /* Der kleine Balken je Baustoff im Hausbaumenue */
  .fortschritt.klein { display: flex; gap: 1px; margin: 2px 0; }
  .fortschritt.klein i { width: 4px; height: 4px; background: var(--perg-dunkel); }
  .fortschritt.klein i.an { background: var(--gold-dunkel); }
  .baugruppe { font-size: 7px; letter-spacing: .5px; color: #8a7a5a; margin: 7px 0 2px 2px;
    text-transform: uppercase; }
  .baugruppe:first-child { margin-top: 0; }
  .baubalken { height: 4px; background: #2a2018; border: 1px solid #4a3a28; margin-top: 3px; }
  .baubalken i { display: block; height: 100%; background: #b08840; }
  .quest.geht .baubalken i { background: #7fb05a; }
</style>


<div class="rahmen breit" id="rahmen">
<h1 id="titel" data-t="Bedrock Society">Bedrock Society</h1>

<!-- Titelbild -->
<section id="start" class="bildschirm">
  <div class="titelbild"><div class="titelbuehne">
    <canvas id="titelkarte" width="640" height="448"></canvas>
    <div class="titeltext">
      <img class="titellogo" src="atlas/logo.png" alt="Bedrock Society" width="157" height="215">
      <div class="spielname" data-t="Bedrock Society">Bedrock Society</div>
      <div class="untertitel" data-t="Das Leben am Waldrand">Das Leben am Waldrand</div>
      <div class="titelknoepfe" id="titelknoepfe">
        <span class="laedt" id="startlaedt" data-t="Die Lichtung erwacht …">Die Lichtung erwacht …</span>
      </div>
    </div>
  </div></div>
</section>

<!-- Anmeldung: Name (Pflicht), Geburtstag, Biom -->
<section id="anmeldung" class="bildschirm" hidden>
  <form class="brief" id="anmeldeform" novalidate>
    <div class="dname" data-t="Ein neuer Anfang">Ein neuer Anfang</div>
    <p data-t="Irgendwo wartet eine Welt auf dich – noch ganz ohne Häuser. Wie heißt du?">Irgendwo wartet eine Welt auf dich – noch ganz ohne Häuser. Wie heißt du?</p>
    <div class="formzeile">
      <div>
        <label for="spielername"><span data-t="Dein Name">Dein Name</span> <em data-t="(Pflicht)">(Pflicht)</em></label>
        <input id="spielername" name="spielername" maxlength="16" autocomplete="off" spellcheck="false" required>
      </div>
      <div>
        <label for="gebtag" data-t="Geburtstag">Geburtstag</label>
        <div class="datum">
          <select id="gebtag" name="gebtag" aria-label="Tag"></select>
          <select id="gebmonat" name="gebmonat" aria-label="Monat"></select>
        </div>
      </div>
      <div>
        <label for="sprachwahl" data-t="Sprache">Sprache</label>
        <select id="sprachwahl" name="sprachwahl" aria-label="Sprache"></select>
      </div>
    </div>
    <div class="fehlertext" id="namefehler" hidden></div>
    <fieldset class="biome">
      <legend><span data-t="Wo möchtest du leben?">Wo möchtest du leben?</span> <em id="weltlos"></em></legend>
      <div class="biomwahl" id="biomwahl"></div>
      <div class="biomtext" id="biomtext"></div>
    </fieldset>
    <div class="knopfreihe">
      <button class="knopf zurueck" type="button" id="anmeldungZurueck" hidden data-t="◂ Zurück">◂ Zurück</button>
      <button class="knopf" type="submit" data-t="Weiter zur Figurenschmiede ▸">Weiter zur Figurenschmiede ▸</button>
    </div>
  </form>
</section>

<main id="schmiede" class="bildschirm" hidden>
  <section class="vorschau">
    <div class="buehne" id="buehne">
      <canvas id="haupt" width="384" height="384"></canvas>
      <span class="posenname" id="posenname"></span>
      <span class="laden" id="laden" data-t="lädt …">lädt …</span>
    </div>
    <div class="richtungen" id="richtungen"></div>
    <div class="knopfreihe">
      <button class="knopf zurueck" id="schmiedeZurueck" type="button" data-t="◂ Zurück">◂ Zurück</button>
      <button class="knopf" id="weiter" type="button" data-t="So soll es sein ▸">So soll es sein ▸</button>
    </div>
  </section>

  <section>
    <div class="panel" id="liste"></div>
    <div class="info" id="info"></div>
    <div class="tasten">
      <kbd>↑</kbd><kbd>↓</kbd> <span data-t="Eigenschaft">Eigenschaft</span>&nbsp; <kbd>←</kbd><kbd>»</kbd> <span data-t="Auswahl">Auswahl</span><br>
      <kbd>Z</kbd> <span data-t="Zufall">Zufall</span>&nbsp; <kbd>0</kbd> <span data-t="zurücksetzen">zurücksetzen</span>&nbsp; <kbd>Enter</kbd> <span data-t="weiter">weiter</span>
      <div class="fokus" id="fokus" hidden data-t="Einmal in die Seite klicken, dann reagieren die Pfeiltasten.">Einmal in die Seite klicken, dann reagieren die Pfeiltasten.</div>
    </div>
  </section>
</main>
<section id="reise" class="bildschirm" hidden>
  <div class="kopfleiste">
    <div class="tafel uhr" id="uhr"><canvas id="himmel" width="60" height="26"></canvas><span class="datumzeile" id="uhrdatum"></span></div>
    <div class="meldung" id="meldung" hidden></div>
    <div class="tafel ortname" id="ortname"></div>
    <button class="tafel menueknopf" id="menueknopf" type="button"><span data-t="Menü">Menü</span> <kbd>Esc</kbd></button>
  </div>
  <div class="kartenfeld">
    <div class="karte" id="karte">
      <canvas id="welt" width="640" height="448"></canvas>
      <div class="schild hinweis" id="hinweisschild" hidden></div>
      <div class="schild fokusschild" id="weltfokus" hidden data-t="Einmal in die Karte klicken">Einmal in die Karte klicken</div>
    </div>
    <div class="menue" id="dorfbuch" hidden>
      <div class="dname" data-t="Dorfbuch">Dorfbuch</div>
      <div class="dorfwerte" id="dorfwerte"></div>
      <div class="dwarnung" id="dorfwarnung" hidden></div>
      <div class="dorfspalten">
        <div class="dorfleute" id="dorfleute"></div>
        <div class="dorfbericht" id="dorfbericht"></div>
      </div>
      <div class="menuefuss"><span id="dorffuss"></span></div>
    </div>
    <div class="menue" id="quests" hidden>
      <div class="dname" data-t="Aufträge">Aufträge</div>
      <div class="questliste" id="questliste"></div>
      <div class="menuefuss"><span id="questfuss"></span></div>
    </div>
    <!-- Achtung: NICHT "bauliste" nennen - diese id hat das Bauplatz-Menue (weiter unten)
         schon fuer seine Baustoffliste. Zwei gleiche ids, und getElementById nimmt die
         erste: das Bauplatz-Menue schrieb seine Stoffe hierher und blieb selbst leer. -->
    <div class="menue" id="bauprojekte" hidden>
      <div class="dname" data-t="Bauprojekte">Bauprojekte</div>
      <div class="questliste" id="bauprojekteinhalt"></div>
      <div class="menuefuss"><span id="bauprojektefuss"></span></div>
    </div>
    <div class="menue" id="skills" hidden>
      <div class="dname" id="skillkopf" data-t="Fähigkeiten">Fähigkeiten</div>
      <!-- Bewohnerleiste: alle auf einmal, statt jede Person einzeln zu oeffnen (15.10.) -->
      <div class="skillleute" id="skillleute"></div>
      <div class="skillklassen" id="skillklassen"></div>
      <div class="skillfeld" id="skillfeld"></div>
      <!-- Was der gewaehlte Knoten kann - im Netz steht nur das Symbol -->
      <div class="skillinfo" id="skillinfo"></div>
      <div class="menuefuss"><span id="skillfuss"></span></div>
    </div>
    <div class="menue" id="dorfkarte" hidden>
      <div class="dname" data-t="Dorfkarte">Dorfkarte</div>
      <div class="kartefeld">
        <canvas id="kartebild" width="320" height="224"></canvas>
        <div class="kartelegende" id="kartelegende"></div>
      </div>
      <div class="menuefuss"><span id="kartefuss"></span></div>
    </div>
    <div class="menue" id="kampf" hidden>
      <div class="dname" id="kampfkopf" data-t="Kampf">Kampf</div>
      <div class="kampffeld">
        <canvas id="kampfbild" width="640" height="266"></canvas>
        <div class="kseite" id="kampfgruppe"></div>
        <div class="kseite" id="kampffeinde"></div>
      </div>
      <div class="kampfunten">
        <div class="kbefehle" id="kampfbefehle"></div>
        <div class="klog" id="kampflog"></div>
      </div>
      <div class="menuefuss"><span id="kampffuss"></span></div>
    </div>
    <div class="menue" id="taschen" hidden>
      <div class="dname" data-t="Taschen">Taschen</div>
      <div class="raster" id="taschenraster"></div>
      <div class="menuefuss"><span id="taschenwahl"></span><span id="taschenfrei"></span><span><kbd>I</kbd> <span data-t="schließen">schließen</span></span></div>
    </div>
    <div class="menue" id="ablage" hidden>
      <div class="dname" id="ablagename">Truhe</div>
      <div class="ablagespalten">
        <div><h2 id="ablagetitel"></h2><div class="raster ablageraster" id="ablageraster"></div></div>
        <div><h2 data-t="Deine Taschen">Deine Taschen</h2><div class="raster ablageraster" id="ablagetaschen"></div></div>
      </div>
      <div class="menuefuss"><span><kbd>↑</kbd><kbd>↓</kbd><kbd>←</kbd><kbd>»</kbd> <span data-t="wählen">wählen</span> · <kbd>Enter</kbd> <span data-t="umlegen">umlegen</span></span><span id="ablagefuss"></span><span><kbd>Esc</kbd> <span data-t="schließen">schließen</span></span></div>
    </div>
    <div class="menue" id="lager" hidden>
      <div class="dname" data-t="Lager">Lager</div>
      <div class="lagerwerte" id="lagerwerte"></div>
      <div class="lagerliste" id="lagerliste"></div>
      <div class="menuefuss"><span id="lagerfuss"></span><span><kbd>G</kbd> <span data-t="schließen">schließen</span></span></div>
    </div>
    <div class="menue" id="werkbuch" hidden>
      <div class="dname" data-t="Werkbuch">Werkbuch</div>
      <!-- Steht nur da, wenn das Werkbuch an einem Tisch geoeffnet wurde (welt.js: amTisch) -->
      <div class="werkbuchkopf" id="werkbuchkopf"></div>
      <div class="rezepte" id="rezepte"></div>
      <div class="menuefuss"><span><kbd>↑</kbd><kbd>↓</kbd> <span data-t="oder Klick wählen">oder Klick wählen</span> · <kbd>Enter</kbd> <span data-t="herstellen">herstellen</span></span><span id="werkbuchseite"></span><span><kbd>H</kbd> <span data-t="schließen">schließen</span></span></div>
    </div>
    <!-- Spielstand mitnehmen: Textfeld statt Datei, weil im Artifact kein Download
         durchgeht - und genau von dort soll der Stand ja weg. -->
    <div class="menue" id="standtausch" hidden>
      <div class="dname" id="standkopf" data-t="Spielstand mitnehmen">Spielstand mitnehmen</div>
      <p class="standhinweis" id="standhinweis"></p>
      <textarea id="standfeld" spellcheck="false" autocomplete="off" autocorrect="off"
                autocapitalize="off" wrap="off"></textarea>
      <div class="menuefuss"><span id="standfuss"></span></div>
    </div>
    <div class="menue" id="einstellungen" hidden>
      <div class="dname" data-t="Einstellungen">Einstellungen</div>
      <div class="einstellungsliste" id="einstellungsliste"></div>
    </div>
    <div class="menue" id="spielmenue" hidden>
      <div class="dname" data-t="Menü">Menü</div>
      <div class="menuespalten">
        <div class="menueliste" id="menueliste"></div>
        <div class="steuerung">
          <h2 data-t="Unterwegs">Unterwegs</h2>
          <!-- Wird aus TASTENHILFE erzeugt (welt.js): eine Quelle statt zweier, die
               auseinanderlaufen. Die vollständige Übersicht steht weiter unter ?. -->
          <dl id="steuerkurz"></dl>
          <p class="steuermehr"><kbd>?</kbd> <span data-t="alle Tasten">alle Tasten</span></p>
        </div>
      </div>
      <div class="menuefuss"><span><kbd>↑</kbd><kbd>↓</kbd> <span data-t="wählen">wählen</span> · <kbd>←</kbd><kbd>»</kbd> <span data-t="Lautstärke">Lautstärke</span> · <kbd>Enter</kbd> <span data-t="los">los</span></span><span><kbd>Esc</kbd> <span data-t="schließen">schließen</span></span></div>
    </div>
    <div class="menue" id="bauplatz" hidden>
      <div class="dname" id="baukopf" data-t="Bauplatz">Bauplatz</div>
      <div class="bauliste" id="bauliste"></div>
      <p class="bautext" id="bautext"></p>
      <div class="menuefuss"><span><kbd>↑</kbd><kbd>↓</kbd> <span data-t="oder Klick wählen">oder Klick wählen</span> · <kbd>Enter</kbd> <span data-t="abgeben">abgeben</span></span><span><kbd>Esc</kbd> <span data-t="fertig">fertig</span></span></div>
    </div>
    <div class="menue" id="handel" hidden>
      <div class="dname" id="handelkopf" data-t="Tauschen">Tauschen</div>
      <div class="kurse" id="handelliste"></div>
      <div class="menuefuss"><span id="handelfuss"></span><span><kbd>↑</kbd><kbd>↓</kbd> <span data-t="oder Klick wählen">oder Klick wählen</span> · <kbd>Enter</kbd> <span data-t="tauschen">tauschen</span> · <kbd>Esc</kbd> <span data-t="fertig">fertig</span></span></div>
    </div>
    <div class="menue" id="reisekarte" hidden>
      <div class="dname" data-t="Weltkarte">Weltkarte</div>
      <div class="reisespalten">
        <canvas id="sternkarte" width="640" height="448" aria-label="Welten in Reichweite"></canvas>
        <div class="reiseseite">
          <dl class="reiseinfo" id="reiseinfo"></dl>
          <button class="knopf" id="reiseknopf" type="button" data-t="Hinwandern ▸">Hinwandern ▸</button>
        </div>
      </div>
      <div class="menuefuss"><span data-t="Gold = hier leben Leute · Wege = in Reichweite">Gold = hier leben Leute · Wege = in Reichweite</span><span><kbd>←</kbd><kbd>»</kbd><kbd>↑</kbd><kbd>↓</kbd> <span data-t="Welt">Welt</span> · <kbd>Enter</kbd> <span data-t="los">los</span> · <kbd>Esc</kbd> <span data-t="bleiben">bleiben</span></span></div>
    </div>
    <div class="menue" id="tasten" hidden>
      <div class="dname" data-t="Tasten">Tasten</div>
      <div class="tastenliste" id="tastenliste"></div>
      <div class="menuefuss"><span data-t="Alles, was man drücken kann">Alles, was man drücken kann</span><span><kbd>?</kbd> <span data-t="schließen">schließen</span></span></div>
    </div>
    <div class="menue" id="meilen" hidden>
      <div class="dname" id="meilentitel" data-t="Meilensteine">Meilensteine</div>
      <div class="meilenbaum" id="meilenbaum"></div>
      <div class="menuefuss"><span id="meilenfuss"></span><span><kbd>↑</kbd><kbd>↓</kbd> <span data-t="Seite">Seite</span> · <kbd>←</kbd><kbd>»</kbd> <span data-t="blättern">blättern</span> · <kbd>J</kbd> <span data-t="schließen">schließen</span></span></div>
    </div>
  </div>
  <div class="unterfeld">
    <div class="dialog" id="dialog" hidden>
      <div class="dname" id="dname"></div>
      <div class="dtext" id="dtext"></div>
      <div class="wahl" id="dwahl" hidden></div>
      <div class="dweiter" id="dweiter" data-t="T ▼">T ▼</div>
    </div>

  </div>
</section>

<!-- Rueckfrage: ersetzt den aktuellen Bildschirm, liegt nie darueber -->
<section class="bildschirm fragebild" id="frage" hidden>
  <div class="brief klein" role="alertdialog" aria-labelledby="fragetext">
    <p id="fragetext"></p>
    <div class="knopfreihe" id="frageknoepfe"></div>
  </div>
</section>

</div>

<script src="js/sprache.js"></script>
<script src="js/texte_en.js"></script>
<script src="atlas/daten.js"></script>
<!-- Karten, Biome und Stuben. Der Ordner liegt seit dem 10.10. unter Assets/Bauten/;
     bundle_creator.py legt ihn im Buendel wieder flach als Assets/10_testmap/ ab. -->
<script src="Assets/10_testmap/testmap.js"></script>
<script src="Assets/10_testmap/biome.js"></script>
<script src="Assets/10_testmap/karten.js"></script>
<script src="Assets/10_testmap/innen.js"></script>
<!-- NACH den Datendateien und VOR schmiede.js: schmiede.js haelt window.ATLAS fest
     (const D = window.ATLAS), universum.js spaeter window.KARTEN. Wer ein ReGame erst
     danach anwendet, erreicht diese beiden nicht mehr. -->
<!-- formel.js steht VOR regame.js: regame.js legt die Formeln eines .RGM auf
     window.REGAME_REGELN, und der Auswerter muss dann schon da sein. -->
<script src="js/formel.js"></script>
<script src="js/regame.js"></script>
<script src="js/schmiede.js"></script>
<script src="js/welt.js"></script>
<script src="js/haus.js"></script>
<script src="js/dorf.js"></script>
<script src="js/nacht.js"></script>
<script src="js/felder.js"></script>
<script src="js/skills.js"></script>
<script src="js/quests.js"></script>
<script src="js/universum.js"></script>
<script src="js/bauen.js"></script>
<script src="js/regeln.js"></script>
<script src="js/szenen.js"></script>
<script src="js/einstellungen.js"></script>
<script src="js/geraeusche.js"></script>
<script src="js/spiel.js"></script>
<script src="js/trailer.js"></script>
