:root {
  color-scheme: light dark;
  --abstand: 1rem;
  --grund: #ffffff;
  --text: #1b1b1f;
  --rand: #88888844;
  --warnung: #b3222f;
  --ruhig: #1f7a4f;
  --geaendert: #1a6fa8;
  --flaeche: #f3f3f6;
  --betont: #1a56c8;
}

/* Plan 3, task 39a (P3-14): the dark scheme follows the system. Only the variables change; no rule
   below uses a colour number of its own. */
@media (prefers-color-scheme: dark) {
  :root {
    --grund: #1b1b1f;
    --text: #e8e8ea;
    --rand: #88888866;
    --warnung: #ff7a88;
    --ruhig: #4cc38a;
    --geaendert: #5aa9e6;
    --flaeche: #26262c;
    --betont: #8ab4ff;
  }
}

/* The two theme classes set the same variables. They are for the sample page (task 51), which shows
   both themes next to each other in one window; the pages of the console never carry them. */
.thema-hell {
  color-scheme: light;
  --grund: #ffffff;
  --text: #1b1b1f;
  --rand: #88888844;
  --warnung: #b3222f;
  --ruhig: #1f7a4f;
  --geaendert: #1a6fa8;
  --flaeche: #f3f3f6;
  --betont: #1a56c8;
}

.thema-dunkel {
  color-scheme: dark;
  --grund: #1b1b1f;
  --text: #e8e8ea;
  --rand: #88888866;
  --warnung: #ff7a88;
  --ruhig: #4cc38a;
  --geaendert: #5aa9e6;
  --flaeche: #26262c;
  --betont: #8ab4ff;
}

body {
  margin: 0;
  font-family: system-ui, -apple-system, sans-serif;
  line-height: 1.5;
  background: var(--grund);
  color: var(--text);
}

/* The page is a container: the arrangement of the navigation follows the width of the page, not of
   the window, so the sample page can show a phone and a computer width in one window (task 51). */
#app,
.app-rahmen {
  container-type: inline-size;
  container-name: app;
}

#app {
  padding: var(--abstand);
  max-width: 72rem;
  margin: 0 auto;
}

#kopf {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--abstand);
  border-bottom: 1px solid var(--rand);
  padding-bottom: 0.5rem;
}

.marke {
  font-weight: 600;
  text-decoration: none;
}

.temp-tp {
  font-size: 0.75rem;
  margin-left: 0.25rem;
}

.zustand {
  font-size: 0.875rem;
}

.zustand-open {
  color: var(--ruhig);
}

.zustand-idle,
.zustand-lost,
.zustand-ended,
.zustand-replaced {
  color: var(--warnung);
}

.unsicher {
  border: 1px solid var(--warnung);
  border-radius: 0.25rem;
  padding: 0.5rem;
  font-size: 0.875rem;
}

/* K-F (V-61): the line about actions that wait for the connection. */
.wartet {
  color: var(--warnung);
  font-size: 0.875rem;
}

.hinweis {
  border-left: 3px solid var(--rand);
  padding: 0.5rem;
}

/* Plan 5, P5-Q (P5-P-g): an error banner stays in view while the page is scrolled - the tools are long, and a refusal at the top was out of sight when the button sat far below. It sticks to
   the top edge with a background of its own, so the text under it does not shine through. A notice of success is not pinned: it fades by itself. */
.hinweis-error {
  border-left-color: var(--warnung);
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--grund);
}

.seite {
  padding-top: var(--abstand);
}

.tat {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: end;
  margin: 0.5rem 0;
}

label {
  display: flex;
  flex-direction: column;
  font-size: 0.875rem;
}

input,
select,
textarea,
button {
  font: inherit;
  padding: 0.35rem 0.5rem;
  color: inherit;
  background: var(--grund);
  border: 1px solid var(--rand);
  border-radius: 0.25rem;
}

/* Design 4.2: every tap target is at least 44 pixels. */
button,
.ansichten button,
select,
input,
summary {
  min-height: 44px;
}

button {
  min-width: 44px;
  cursor: pointer;
}

input[type="checkbox"],
input[type="radio"] {
  min-height: 1.5rem;
  min-width: 1.5rem;
}

ul {
  list-style: none;
  padding: 0;
}

li {
  border-bottom: 1px solid var(--rand);
  padding: 0.35rem 0;
}

.rolle,
.leer {
  font-size: 0.875rem;
  opacity: 0.8;
}

.link {
  word-break: break-all;
  font-family: ui-monospace, monospace;
  font-size: 0.875rem;
}

.fuss {
  border-top: 1px solid var(--rand);
  margin-top: var(--abstand);
  padding-top: 0.5rem;
  font-size: 0.75rem;
  opacity: 0.7;
}

/* The classes the pages of tasks 24 to 26 bring. They stand here so those tasks do not have to
   touch this file again; `.warnung` is the one that has to stand out (design 5.2). */
.warnung {
  color: var(--warnung);
  font-size: 0.875rem;
}

.quelle,
.da,
.klasse,
.art,
.zerlegung,
.feld {
  font-size: 0.875rem;
  opacity: 0.8;
}

.zustand-connecting {
  opacity: 0.7;
}

.runden,
.wege,
.mitglieder,
.einladungen,
.charaktere,
.wuerfe,
.mappe,
.freigaben,
.werte {
  margin: 0.5rem 0;
}

.wer {
  font-weight: 600;
}

.ergebnis {
  font-weight: 600;
}

/* Task 38, design 6.5: a price the game master changed shows in another colour, the old one stays
   next to it until the owning person taps the change. */
.wert-geaendert {
  color: var(--geaendert);
  font-weight: 600;
}

.wert-vorher {
  font-size: 0.875rem;
  opacity: 0.8;
}

.melden {
  margin: 1rem 0;
  border-top: 1px solid var(--rand);
  padding-top: 0.5rem;
}

.melden .klein-titel {
  margin: 0 0 0.25rem;
  font-size: 1rem;
}

.melden textarea {
  display: block;
  width: 100%;
  max-width: 40rem;
}

.klein {
  font-size: 0.9rem;
}

/* K-P3-L (P3-18): „Beim DM melden" - the form of the player in the round view and the list of the game master in her overview. */
.dm-melden,
.dm-meldungen {
  margin: 1rem 0;
  border-top: 1px solid var(--rand);
  padding-top: 0.5rem;
}

.dm-melden textarea {
  display: block;
  width: 100%;
  max-width: 40rem;
}

.meldungen {
  margin: 0.5rem 0;
}

.meldung .text {
  display: block;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

/* K-P3-S (E-099): the section "Zauberangaben" of the game master — one line for each proposal or confirmed value with its buttons,
   long names wrap instead of widening the page, the buttons keep their tap target. */
.zauberangaben {
  margin: 1rem 0;
  border-top: 1px solid var(--rand);
  padding-top: 0.5rem;
}

.vorschlaege,
.bestaetigte {
  list-style: none;
  padding: 0;
  margin: 0.5rem 0;
}

.vorschlaege li,
.bestaetigte li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.75rem;
  padding: 0.25rem 0;
  border-bottom: 1px solid var(--rand);
  overflow-wrap: anywhere;
}

.vorschlaege .tat,
.bestaetigte .tat {
  margin: 0;
}

.zauberangaben .vermerk,
.zauberangaben .zeit {
  font-size: 0.875em;
  opacity: 0.8;
}

.zauberangaben .zauber,
.zauberangaben .wert {
  font-weight: 700;
}

/* Plan 3, task 39a (H-22): „Speichert…" in the header while a request is on its way. */
.speichert {
  font-size: 0.875rem;
  color: var(--ruhig);
}

/* Plan 3, task 39a (H-1, design 4.1): the frame of a round page. Narrow = the navigation sticks to the
   bottom edge like a bar; wide = a column on the left. `sticky` and not `fixed`: a fixed bar would
   fall out of its frame on the sample page and cover the form „Fehler melden" on a phone. */
.rahmen {
  display: block;
}

.ansichten {
  position: sticky;
  bottom: 0;
  display: flex;
  background: var(--flaeche);
  border-top: 1px solid var(--rand);
  padding: 0.25rem 0;
}

/* Plan 4, P4-Y1: `min-width: 0` lets a tab shrink below its word, `overflow-wrap: anywhere` breaks
   a long word; without both, five tabs ran over the edge at 360 and 375 pixels. */
.ansichten .tat {
  flex: 1;
  min-width: 0;
  margin: 0;
}

.ansichten button {
  width: 100%;
  min-width: 0;
  padding-inline: 0.25rem;
  hyphens: auto;
  overflow-wrap: anywhere;
}

.ansichten button[aria-current="page"] {
  background: var(--betont);
  color: var(--grund);
  font-weight: 600;
}

/* Plan 4, P4-Y8: the public results of the saving throws - a list inside a list; the outer item has no line of its own, so no empty row stands at the end. */
.rettungswurf-ergebnisse .ergebnis-aufforderung {
  border-bottom: 0;
  padding: 0;
}

.rettungswurf-ergebnisse .ergebnis-aufforderung + .ergebnis-aufforderung {
  margin-top: 0.5rem;
}

.charakterwahl {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.charakterwahl .tat {
  margin: 0;
}

.charakterwahl button[aria-current="true"] {
  background: var(--betont);
  color: var(--grund);
  font-weight: 600;
}

@container app (min-width: 44rem) {
  .rahmen {
    display: grid;
    grid-template-columns: 11rem minmax(0, 1fr);
    column-gap: var(--abstand);
    align-items: start;
  }

  .rahmen > .rahmen-inhalt {
    grid-column: 2;
    grid-row: 1;
  }

  .rahmen > .ansichten {
    grid-column: 1;
    grid-row: 1;
    flex-direction: column;
    top: 0;
    bottom: auto;
    border-top: 0;
    border-right: 1px solid var(--rand);
    padding: 0 0.5rem 0 0;
  }

  .ansichten .tat {
    flex: none;
  }

  /* Plan 5, P5-Q-a (X7): the sticky error banner sat over the first tab of the side column. On a page with a frame it stands over the content column only: the offset is the width of the
     column plus its gap, the same two numbers as the grid above. On a phone the rule does not apply and the banner keeps the full width. */
  #app:has(.rahmen) > .hinweis-error {
    margin-left: calc(11rem + var(--abstand));
  }
}

/* Plan 3, task 39b (H-16, H-14): icons, the choice of an icon, the marks on a catalogue name. The
   symbols take the colour of the text (`currentColor` in the sprite); no colour number stands here. */
.icon {
  width: 1.5rem;
  height: 1.5rem;
  vertical-align: middle;
  flex: none;
}

button.symbol {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0.25rem;
}

.ikonenwahl {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  border: 1px solid var(--rand);
  border-radius: 0.25rem;
  padding: 0.25rem 0.5rem;
}

.ikone {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  min-height: 44px;
  padding: 0 0.5rem;
  border: 1px solid var(--rand);
  border-radius: 0.25rem;
  cursor: pointer;
}

.ikone:has(input:checked) {
  border-color: var(--betont);
  background: var(--flaeche);
}

.ikone-wort {
  font-size: 0.85rem;
}

.nur-englisch,
.unbekannt {
  font-size: 0.8rem;
  padding: 0 0.35rem;
  border: 1px solid var(--rand);
  border-radius: 0.25rem;
  color: var(--text);
  background: var(--flaeche);
}

/* Plan 3, task 40 (design 4.1, 4.2, 4.6): the head of the sheet, the combat values (big numbers, no
   scrolling to reach them), the tiles of the abilities, the skills and the profile. Colours only as
   variables; every tap target keeps the 44 pixels of the rule above. */
.bogenkopf .name {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.25rem 0;
}

.bogenkopf .name .icon {
  width: 2rem;
  height: 2rem;
}

.beschriftung {
  font-size: 0.875rem;
}

/* A switch (aria-pressed, the heroic inspiration) shows its state to the eye too, not only to a screen reader. */
button[aria-pressed="true"] {
  background: var(--betont);
  color: var(--grund);
}

.kampfwerte {
  border: 1px solid var(--rand);
  border-radius: 0.5rem;
  padding: 0.5rem 0.75rem;
  background: var(--flaeche);
  margin: 0.5rem 0;
}

.kampfwerte p {
  margin: 0.25rem 0;
}

.kampfwerte .gross {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.1;
}

.werte-zeile {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
}

.kacheln {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
  gap: 0.5rem;
  margin: 0.5rem 0;
}

.kachel {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  border: 1px solid var(--rand);
  border-radius: 0.5rem;
  padding: 0.5rem;
  background: var(--flaeche);
}

.kachel-name {
  font-size: 0.875rem;
}

.kachel-wert {
  font-size: 1.5rem;
  font-weight: 700;
}

.kachel-rw {
  font-size: 0.8rem;
  opacity: 0.85;
}

.fertigkeitenliste .fertigkeit {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}

.fertigkeit .bonus {
  margin-left: auto;
  font-weight: 600;
}

.kennzeichen {
  font-size: 0.75rem;
  border: 1px solid var(--rand);
  border-radius: 0.25rem;
  padding: 0 0.35rem;
}

.profil dl {
  margin: 0;
}

.profil .zeile {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.75rem;
  border-bottom: 1px solid var(--rand);
  padding: 0.35rem 0;
}

.profil dt {
  font-weight: 600;
  min-width: 9rem;
}

.profil dd {
  margin: 0;
}

/* Plan 3, task 41: the actions of the sheet. A tap on a tile or a skill rolls; the small buttons beside it
   roll with advantage or disadvantage. Every button keeps the 44 pixels of design 4.2. */
.kachel .tat,
.fertigkeit .tat {
  align-items: stretch;
  flex-wrap: nowrap;
  gap: 0.25rem;
  margin: 0.15rem 0;
  width: 100%;
}

.kachel .probe-haupt {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.fertigkeit .probe-haupt {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  text-align: left;
}

.probe-haupt {
  flex: 1;
}

.probe-klein {
  min-width: 44px;
  font-size: 0.8rem;
  font-weight: 700;
}

.aktionen > h2,
.angriffe > h3,
.proben > h3,
.letzter-wurf > h3,
.merkmale-nutzung > h3,
.werte-hinweise > h3 {
  margin: 0.75rem 0 0.25rem;
}

.angriffsliste,
.nutzungen {
  list-style: none;
  padding: 0;
  margin: 0;
}

.angriff-zeile,
.nutzungen li {
  border: 1px solid var(--rand);
  border-radius: 0.5rem;
  padding: 0.5rem 0.75rem;
  background: var(--flaeche);
  margin: 0.5rem 0;
}

.angriff-zeile .name {
  font-weight: 700;
}

.angriff-zeile .zahlen {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
  margin: 0.25rem 0;
}

.nicht-automatisch {
  border-left: 3px solid var(--warnung);
  padding-left: 0.5rem;
  font-size: 0.875rem;
}

.nicht-automatisch p,
.nicht-automatisch ul {
  margin: 0.15rem 0;
}

.nutzungen .aufgebraucht {
  opacity: 0.75;
}

.nutzungen .aufgebraucht .uebrig {
  font-weight: 700;
}

.schalter[aria-pressed="true"] {
  border-color: var(--betont);
  font-weight: 700;
}

.letzter-wurf {
  border: 1px solid var(--rand);
  border-radius: 0.5rem;
  padding: 0.25rem 0.75rem;
  margin: 0.5rem 0;
}

.letzter-wurf .privat {
  border-left: 3px solid var(--betont);
  padding-left: 0.5rem;
}

/* Plan 3, task 42: conditions, exhaustion, hints of the game master, consequences for the rolls,
   concentration and the death save. Shapes carry the state by fill as well as by colour, and the
   numbers stand in words next to them. */
.zustaende,
.erschoepfung,
.zustand-hinweise,
.folgen,
.konzentration,
.todesrettung {
  border: 1px solid var(--rand);
  border-radius: 0.5rem;
  padding: 0.25rem 0.75rem 0.5rem;
  background: var(--flaeche);
  margin: 0.5rem 0;
}

.zustaende > h3,
.erschoepfung > h3,
.zustand-hinweise > h3,
.folgen > h3,
.konzentration > h3,
.todesrettung > h3 {
  margin: 0.5rem 0 0.25rem;
}

.zustandsliste,
.zustand-hinweise ul,
.folgen ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.zustand-zeile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.75rem;
  padding: 0.25rem 0;
}

.zustand-zeile .name {
  font-weight: 700;
}

.zustand-zeile .regel-satz {
  font-size: 0.875rem;
}

.zustand-hinweis {
  border-left: 3px solid var(--geaendert);
  padding-left: 0.5rem;
  margin: 0.5rem 0;
}

.zustand-hinweis .warnung {
  color: var(--warnung);
  font-weight: 700;
}

.kaestchen-reihe,
.kreise {
  display: inline-flex;
  gap: 0.25rem;
  vertical-align: middle;
}

.kaestchen {
  display: inline-block;
  width: 1.25rem;
  height: 1.25rem;
  border: 2px solid var(--text);
  border-radius: 0.2rem;
}

.kaestchen.voll {
  background: var(--warnung);
}

.kreis {
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
  border: 2px solid var(--text);
  border-radius: 50%;
}

.erfolge .kreis.voll {
  background: var(--ruhig);
}

.misserfolge .kreis.voll {
  background: var(--warnung);
}

.todesrettung form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: end;
}

/* The big tap targets of the death save (H-22). */
button.gross {
  flex: 1 1 10rem;
  min-height: 56px;
  font-size: 1.1rem;
  font-weight: 700;
}

/* Plan 3, task 49b: the quick buttons of the game time stand side by side. */
.schnell {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.schnell .tat {
  margin: 0;
}

/* Plan 3, task 43a: the view of the spells — the slots as boxes, the list by mode, the details, the
   search and the panel for adding. A spent slot is filled; every number stands in words next to it. */
.zauberplaetze,
.zauberliste,
.zauber-details,
.zauber-suche,
.zauber-hinzufuegen,
.zauber-wirken,
.konzentration,
.zauber-wirkungen {
  border: 1px solid var(--rand);
  border-radius: 0.5rem;
  padding: 0.25rem 0.75rem 0.5rem;
  background: var(--flaeche);
  margin: 0.5rem 0;
}

/* Plan 3, task 43b: the panel of the cast — the choice of the slot and the questions are fieldsets of
   radio buttons with tap targets of 44 px; a grade without a free slot stays there, greyed out. */
.zauber-wirken fieldset {
  border: 1px solid var(--rand);
  border-radius: 0.5rem;
  margin: 0.5rem 0;
  padding: 0.25rem 0.75rem;
}

.zauber-wirken label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
}

.zauber-wirken label.ausgegraut {
  opacity: 0.5;
}

/* K-P3-S (E-099): the question at the cast and the panel "Angabe vorschlagen" in the details — one group for each open field, tap
   targets of 44 px, the small notes next to a value (confirmed, own proposal, rejected) set apart from it. */
.angabe-vorschlag {
  border: 1px solid var(--rand);
  border-radius: 0.5rem;
  padding: 0.25rem 0.75rem 0.5rem;
  margin: 0.5rem 0;
}

.angabe-vorschlag fieldset,
.angaben-frage fieldset {
  border: 1px solid var(--rand);
  border-radius: 0.5rem;
  margin: 0.5rem 0;
  padding: 0.25rem 0.75rem;
}

.angabe-vorschlag label,
.angaben-frage label {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  min-height: 44px;
}

.angabe-vorschlag select,
.angaben-frage select {
  min-height: 44px;
  max-width: 100%;
}

.angabe-arten {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1rem;
}

.zauber-details .angaben .tat {
  display: inline-block;
  margin: 0;
}

.zauber-details .angaben .vermerk,
.zauber-details .angaben .vorschlag {
  font-size: 0.875em;
  color: var(--text);
  opacity: 0.8;
}

.zauber-wirkungen-liste {
  list-style: none;
  padding: 0;
  margin: 0;
}

.zauber-wirkungen-liste li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.75rem;
  padding: 0.25rem 0;
  border-bottom: 1px solid var(--rand);
}

.konzentration .tat {
  margin: 0;
}

.platzreihe {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.75rem;
  padding: 0.25rem 0;
}

.platzreihe .grad {
  font-weight: 700;
  min-width: 4rem;
}

.platzreihe .tat,
.zauber-zeile .tat,
.zauber-treffer .tat {
  margin: 0;
}

.zauber,
.zauber-treffer-liste,
.zauber-details .angaben {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* K-P3-H: the rule text on click — English paragraphs that wrap even on a long word, readable line length. */
.regeltext-bereich {
  margin-top: 0.5rem;
}

.regeltext {
  max-width: 70ch;
  overflow-wrap: anywhere;
}

.zauber-zeile,
.zauber-treffer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.75rem;
  padding: 0.25rem 0;
  border-bottom: 1px solid var(--rand);
}

.zauber-zeile .name,
.zauber-treffer .name {
  font-weight: 700;
}

.zauber-treffer.eigen {
  border-left: 3px solid var(--betont);
  padding-left: 0.5rem;
}

.kennzeichen {
  border: 1px solid var(--text);
  border-radius: 0.2rem;
  padding: 0 0.3rem;
  font-weight: 700;
  text-decoration: none;
}

/* Plan 3, task 45 (design 4.1): the round view — one card for each other character, the blocks a grant
   opened below the head of the card — and the book view. */
.charaktere,
.vorbereitet {
  list-style: none;
  padding: 0;
}

.karte {
  border: 1px solid var(--rand);
  border-radius: 0.5rem;
  background: var(--flaeche);
  padding: 0.5rem 0.75rem;
  margin: 0 0 var(--abstand);
}

.karte-kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.75rem;
}

.karte-kopf .icon {
  width: 1.75rem;
  height: 1.75rem;
}

.karte h4 {
  margin: 0.5rem 0 0.25rem;
  font-size: 1rem;
}

.karte-werte,
.karte .zustandsliste,
.karte .gegenstaende {
  list-style: none;
  padding: 0;
  margin: 0;
}

.karte-vorbereitet {
  border-style: dashed;
}

/* K-P3-M: the short description of a template, before the request; long words break instead of widening the card. */
.kurzbeschreibung {
  margin: 0.25rem 0;
  overflow-wrap: anywhere;
}

.buch-ansicht .freigaben,
.buch-ansicht .gefuehle {
  list-style: none;
  padding: 0;
}

/* Plan 3, task 46: the guided creation. The bar of the steps wraps; the step on screen is marked like
   the current view of the sheet. Colours only through the variables (P3-14). */
.schritte {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin: 0.5rem 0;
}

.schritte .tat {
  margin: 0;
}

.schritte button[aria-current="step"],
.wahl-liste button[aria-current="true"] {
  background: var(--betont);
  color: var(--grund);
  font-weight: 600;
}

.schritt-zustand {
  font-size: 0.85em;
}

.schritt-marked {
  color: var(--warnung);
}

.wahl-liste,
.entwuerfe {
  list-style: none;
  padding: 0;
}

.wahl,
.entwurf {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.75rem;
  margin: 0.25rem 0;
}

.klassen-info {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.75rem;
}

/* Plan 3, task 47: the choices of the steps four to seven are pressed buttons (V3-49a); the state shows
   through `aria-pressed` (the rule above). A step that a refused finish found open is lit with the warning
   colour; the word „fehlt noch" says it without the colour. */
.methoden,
.schalter-liste {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.5rem;
  list-style: none;
  padding: 0;
}

.schalter-eintrag {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.5rem;
}

.schalter-eintrag .tat {
  margin: 0;
}

.pakete {
  flex-direction: column;
}

.paket-inhalt {
  list-style: none;
  padding: 0 0 0 0.5rem;
  margin: 0;
}

.schritte button.schritt-hervorgehoben {
  border-color: var(--warnung);
  border-width: 2px;
}

.schritt-fehlt {
  color: var(--warnung);
  font-size: 0.85em;
}

.abschluss {
  margin-top: 1rem;
}

/* Plan 3, task 48b: the prepared characters of the game master and the requests on them. */
.vorlagen,
.antraege {
  list-style: none;
  padding: 0;
}

.vorlage {
  border: 1px solid var(--rand);
  border-radius: 0.5rem;
  background: var(--flaeche);
  padding: 0.5rem 0.75rem;
  margin: 0 0 var(--abstand);
}

.vorlage .werte,
.vorlage .gegenstaende {
  list-style: none;
  padding: 0;
  margin: 0;
}

.antrag {
  margin: 0.25rem 0;
}

/* Plan 3, task 50a (H-17, P3-12): the table screen. It is read from three metres, so everything in
   `.tisch-inhalt` is in `em` and grows with one font size: the width of the page container decides
   (`cqi`), and the fixed size in front of it is for a browser that does not know container units
   (review M-14) — without it the whole declaration would be dropped and the text stay tiny. */
#app:has(.tisch) {
  max-width: none;
}

.tisch-leiste {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.5rem;
}

.tisch-leiste .tat {
  margin: 0;
}

.tisch-leiste .knopf-wort {
  margin-left: 0.35rem;
}

.zoomwert {
  font-size: 0.875rem;
}

.tisch-inhalt {
  font-size: 2rem;
  font-size: clamp(1.25rem, 2.5cqi, 3.5rem);
  line-height: 1.3;
}

.zoom-100 .tisch-inhalt {
  font-size: 2rem;
  font-size: clamp(1.25rem, 2.5cqi, 3.5rem);
}

.zoom-125 .tisch-inhalt {
  font-size: 2.5rem;
  font-size: clamp(1.5625rem, 3.125cqi, 4.375rem);
}

.zoom-150 .tisch-inhalt {
  font-size: 3rem;
  font-size: clamp(1.875rem, 3.75cqi, 5.25rem);
}

.zoom-200 .tisch-inhalt {
  font-size: 4rem;
  font-size: clamp(2.5rem, 5cqi, 7rem);
}

.tisch-inhalt h1 {
  font-size: 1.4em;
  margin: 0 0 0.25em;
}

.tisch-inhalt h2 {
  font-size: 0.9em;
  margin: 0.75em 0 0.25em;
}

.tisch-inhalt .mitglieder,
.tisch-inhalt .wuerfe {
  font-size: 0.6em;
}

.tisch-inhalt .da,
.tisch-inhalt .art,
.tisch-inhalt .quelle,
.tisch-inhalt .zerlegung {
  font-size: 1em;
}

.kacheln {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11em, 1fr));
  gap: 0.5em;
  margin: 0;
}

.kachel {
  display: flex;
  flex-direction: column;
  gap: 0.15em;
  border: 2px solid var(--rand);
  border-radius: 0.4em;
  background: var(--flaeche);
  padding: 0.4em 0.6em;
}

.kachel .kachel-icon .icon {
  width: 1.6em;
  height: 1.6em;
}

.kachel .wer {
  font-size: 1.1em;
  overflow-wrap: anywhere;
}

.kachel .klasse {
  font-size: 0.7em;
  opacity: 0.9;
}

.kachel .zustand-zeile {
  font-size: 0.8em;
  font-weight: 600;
}

.kachel .zeichen {
  display: inline-block;
  min-width: 1.1em;
}

.kachel.zustand-badly_wounded {
  border-color: var(--warnung);
}

.kachel.zustand-unconscious,
.kachel.zustand-fallen {
  border-color: var(--warnung);
  border-style: dashed;
}

/* Plan 4, P4-O: the table screen in the battle. Everything is in `em` of the table content, so the order grows with the zoom and with the width of the container (the
   fixed size of `.tisch-inhalt` stands before its `cqi` size); the grid takes as many columns as fit, one on a phone, several on a television. The bars are the classes of the
   game master's page (`.balken`, `.balken-n`), drawn here thicker; no width in the markup, no number anywhere. The one at the turn has a thick border and a word, an absent
   character is dimmed and says so, a defeated creature has an empty bar and says so: no state is told by colour alone. Colours only through the variables. */
.tisch-kampf {
  margin: 0 0 0.5em;
}

.tisch-phase,
.tisch-spielleitung {
  margin: 0.15em 0;
  font-size: 0.8em;
  font-weight: 700;
}

.tisch-spielleitung {
  color: var(--betont);
}

/* P4-P3 (P4-O-b): the order must stand in the picture of a television of 1920 x 1080 without a scroll, with the participants of a normal fight (four characters, four or five
   creatures). The order is therefore a little smaller than the rest of the screen (`0.78em` of the table content, about 37 px of text at 100 %) and takes four columns where the
   width allows; the word of the phase and the line "Die Spielleitung handelt" stand side by side. Measured on the real page in the visual round (Ergebnis Plan 4). */
.tisch-reihenfolge {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11em, 1fr));
  gap: 0.5em;
  list-style: none;
  margin: 0.25em 0 0;
  padding: 0;
  font-size: 0.78em;
}

.tisch-kampf .tisch-phase,
.tisch-kampf .tisch-spielleitung {
  display: inline-block;
  margin-right: 1em;
}

.tisch-teilnehmer {
  display: flex;
  flex-direction: column;
  gap: 0.15em;
  border: 2px solid var(--rand);
  border-radius: 0.4em;
  background: var(--flaeche);
  padding: 0.4em 0.6em;
}

.tisch-teilnehmer .tisch-kopf {
  display: flex;
  align-items: center;
  gap: 0.4em;
}

.tisch-teilnehmer .kachel-icon .icon {
  width: 1.4em;
  height: 1.4em;
}

.tisch-teilnehmer .kachel-icon .bild {
  width: 2em;
  height: 2em;
}

.tisch-teilnehmer .wer {
  font-size: 1.1em;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.tisch-teilnehmer .tisch-marken,
.tisch-teilnehmer .zustaende {
  margin: 0;
  font-size: 0.7em;
  font-weight: 600;
}

.tisch-teilnehmer .zustand-zeile {
  font-size: 0.7em;
  font-weight: 600;
}

/* P4-O-a: the two sums of the combat of the row ("Erlitten n Ausgeteilt n"): the one place of the order where numbers stand. The same small size as the marks. */
.tisch-teilnehmer .tisch-summen {
  margin: 0;
  font-size: 0.7em;
  font-weight: 600;
}

.tisch-teilnehmer .zeichen {
  display: inline-block;
  min-width: 1.1em;
}

.tisch-inhalt .balken {
  max-width: none;
  height: 0.7em;
  border-width: 2px;
}

.tisch-teilnehmer.tisch-am-zug {
  border-width: 0.25em;
  border-color: var(--betont);
}

.tisch-teilnehmer.tisch-besiegt {
  border-style: dashed;
}

.tisch-teilnehmer.tisch-abwesend {
  border-style: dotted;
}

/* Dimmed, but never the word that says why: an opacity on the entry or the tile itself takes the word "besiegt" or "abwesend" below a contrast of
   4.5 to 1 (Pruefer P4-O: 2.4 to 1 for "abwesend" in the light scheme). Every part beside the word is dimmed instead; 0.7 keeps the class line of a
   tile (0.9 of its own) at 4.7 to 1. */
.tisch-teilnehmer.tisch-besiegt > :not(.tisch-marken),
.tisch-teilnehmer.tisch-abwesend > :not(.tisch-marken),
.kachel.abwesend > :not(.abwesend-marke) {
  opacity: 0.7;
}

.kachel .abwesend-marke {
  font-size: 0.7em;
}

/* A quarter turn of the content only: the bar above stays upright and tappable. The box is turned
   in size (width and height change places) and then rotated about its top left corner; `translateY(-100%)`
   puts it back in view. The container units follow the page container; the fixed sizes before them
   are for a browser without container units. */
.drehen-90 .tisch-buehne {
  position: relative;
  height: 100vh;
  height: 100cqh;
  overflow: hidden;
}

.drehen-90 .tisch-inhalt {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vh;
  width: 100cqh;
  height: 100vw;
  height: 100cqw;
  overflow: hidden;
  transform-origin: top left;
  transform: rotate(90deg) translateY(-100%);
}

/* K-P3-K (P3-12, KP3-29): a QR code is black on its own white square (the picture draws both): a scanner reads contrast, not the
   theme, so no colour is set here. The size follows the box it stands in; the table screen sizes it in `em` of its content. */
.qr {
  display: block;
  width: 12rem;
  max-width: 100%;
  height: auto;
}

.qr-feld {
  margin: 0.5rem 0;
}

.tisch-qr {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  margin-top: 1em;
}

.tisch-qr .qr {
  width: 7em;
}

.tisch-qr-text {
  font-size: 0.4em;
  max-width: 14em;
  text-align: right;
  margin: 0.25em 0 0;
}

/* P3-12: the coupling code and the short address are written large; a QR code stands beside them. */
.code-gross {
  font-family: ui-monospace, monospace;
  font-size: 2rem;
  font-size: clamp(1.75rem, 6cqi, 4rem);
  font-weight: 700;
  letter-spacing: 0.08em;
  word-break: break-all;
  margin: 0.25rem 0;
}

/* V3-48 (task 44): the view of the inventory. The three groups differ by the line at the left edge
   (solid, dashed, dotted) as well as by colour; every number stands in words next to it. */
.inventar-ansicht {
  margin: 0.5rem 0;
}

.inventar-charakter {
  margin: 0.5rem 0 1rem;
}

.inventar-charakter .geld,
.inventar-charakter .last {
  margin: 0.25rem 0;
  font-weight: 700;
}

.gruppe {
  border: 1px solid var(--rand);
  border-radius: 0.5rem;
  padding: 0.25rem 0.75rem 0.5rem;
  background: var(--flaeche);
  margin: 0.5rem 0;
}

.gruppe > h4 {
  margin: 0.5rem 0 0.25rem;
}

.gruppe-eingestimmt {
  border-left: 5px solid var(--betont);
}

.gruppe-ausgeruestet {
  border-left: 5px dashed var(--geaendert);
}

.gruppe-verstaut {
  border-left: 5px dotted var(--rand);
}

.gegenstaende {
  list-style: none;
  padding: 0;
  margin: 0;
}

.gegenstand {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.75rem;
  padding: 0.25rem 0;
  border-top: 1px solid var(--rand);
}

.gegenstand:first-child {
  border-top: 0;
}

.gegenstand .was {
  font-weight: 700;
}

.gegenstand .menge,
.gegenstand .gewicht,
.gegenstand .wert {
  font-size: 0.875rem;
}

.buendel {
  font-size: 0.875rem;
  border: 1px solid var(--rand);
  border-radius: 0.25rem;
  padding: 0 0.375rem;
}

/* K-P3-I (P3-59 C): the counter „verbraucht n von 20" of a bundle of ammunition; its two buttons are 44 pixels each. */
.verbraucht {
  font-size: 0.875rem;
}

.verbraucht-knopf {
  min-width: 44px;
  min-height: 44px;
}

/* The game time that is left of a timer — of an item, a condition or a spell; the word „noch" stands in
   the text, so the colour only supports it. */
.restdauer {
  font-size: 0.875rem;
  color: var(--geaendert);
}

.zauber-timer {
  font-size: 0.875rem;
  border-left: 3px solid var(--betont);
  padding-left: 0.375rem;
  color: var(--text);
}

/* Plan 3, task 51 (H-26, P3-13): the pattern page for the visual check, `muster/muster.html`. These
   classes stand only there: no view of the console writes one of them (a test reads `src/` for it).
   Each view is shown in four frames of fixed size, 375 and 1024 pixels wide, light and dark. A frame
   needs a fixed height and `overflow: auto`, because the navigation is `position: sticky`: it sticks
   to the bottom edge of the frame the way it sticks to the bottom edge of a phone. The frame is a
   container of both sizes, so `cqh` of the table screen means the height of the frame, like the
   height of the window on a real device. */
.muster-kopf {
  max-width: 60rem;
  padding: var(--abstand);
}

.muster-checkliste li {
  margin: 0.5rem 0;
}

.muster-ansicht {
  padding: var(--abstand);
  border-top: 2px solid var(--rand);
}

.muster-titel {
  margin: 0 0 0.25rem;
}

.muster-hinweis {
  margin: 0 0 var(--abstand);
}

.muster-zeile {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--abstand);
  margin: 0 0 var(--abstand);
}

.muster-figur {
  flex: none;
  margin: 0;
}

.muster-figur figcaption {
  margin-bottom: 0.25rem;
  font-size: 0.875rem;
}

.muster-375,
.muster-1024 {
  box-sizing: border-box;
  position: relative;
  padding: var(--abstand);
  outline: 2px solid var(--rand);
  background: var(--grund);
  color: var(--text);
}

.muster-375 {
  width: 375px;
  height: 667px;
  overflow: auto;
}

.muster-1024 {
  width: 1024px;
  height: 768px;
  overflow: auto;
}

.app-rahmen.muster-375,
.app-rahmen.muster-1024 {
  container-type: size;
}

/* The end of a phone screen of 667 pixels: it stands at the height of the frame inside the scrolled
   content, so everything above the line is visible without scrolling. */
.muster-bildschirmende {
  position: absolute;
  top: 667px;
  left: 0;
  right: 0;
  border-top: 2px dashed var(--warnung);
  color: var(--warnung);
  font-size: 0.75rem;
  text-align: right;
  pointer-events: none;
}

/* K-P3-J (P3-11): the own picture of a character, drawn where its icon is drawn. A plain image of the same origin (content policy:
   `img-src 'self'`), cut to a square so a wide or a tall picture fills the same place as the icon; the sizes are set here and never
   in the markup. No colour number. */
.bild {
  width: 2rem;
  height: 2rem;
  object-fit: cover;
  border-radius: 0.25rem;
  vertical-align: middle;
  flex: none;
}

.bogenkopf .name .bild {
  width: 3rem;
  height: 3rem;
}

.karte-kopf .bild {
  width: 2.5rem;
  height: 2.5rem;
}

.kachel .kachel-icon .bild {
  width: 3.5em;
  height: 3.5em;
}

.bild-bereich {
  margin: 0.75rem 0;
}

/* Plan 4, P4-M (E-107): the bar of the hit points - twenty-one fixed classes of five percent each, no width in the markup (the content policy forbids a style attribute)
   and no number anywhere. The table (P4-O) draws its bars with the same classes. Colours only through the variables. */
.balken {
  display: block;
  width: 100%;
  max-width: 12rem;
  height: 0.75rem;
  margin: 0.25rem 0;
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-radius: 0.4rem;
  overflow: hidden;
}

.balken-fuell {
  display: block;
  height: 100%;
  background: var(--ruhig);
}

.balken-0 { width: 0; }
.balken-1 { width: 5%; }
.balken-2 { width: 10%; }
.balken-3 { width: 15%; }
.balken-4 { width: 20%; }
.balken-5 { width: 25%; }
.balken-6 { width: 30%; }
.balken-7 { width: 35%; }
.balken-8 { width: 40%; }
.balken-9 { width: 45%; }
.balken-10 { width: 50%; }
.balken-11 { width: 55%; }
.balken-12 { width: 60%; }
.balken-13 { width: 65%; }
.balken-14 { width: 70%; }
.balken-15 { width: 75%; }
.balken-16 { width: 80%; }
.balken-17 { width: 85%; }
.balken-18 { width: 90%; }
.balken-19 { width: 95%; }
.balken-20 { width: 100%; }

/* Plan 4, P4-M: the tab "Kampf" of the game master - the order of the participants, the one at the turn, the creatures with their markers and open values, the panel of
   one participant, the encounters and the requests. Long names wrap instead of widening the page; every button keeps its tap target (the rule for buttons above). */
.reihenfolge,
.begegnungen,
.aufforderungen,
.zeilen,
.treffer,
.betroffene-liste,
.zustandsliste,
.zaehler,
.ep-kreaturen,
.ep-anteile,
.haken-liste,
.hilfe {
  list-style: none;
  padding: 0;
  margin: 0.5rem 0;
}

.teilnehmer,
.begegnung,
.aufforderung {
  border: 1px solid var(--rand);
  border-radius: 0.5rem;
  padding: 0.5rem;
  margin: 0.5rem 0;
  background: var(--grund);
}

.teilnehmer.am-zug {
  border: 2px solid var(--betont);
  background: var(--flaeche);
}

.teilnehmer.besiegt {
  opacity: 0.6;
}

.teilnehmer.verzoegert {
  border-style: dashed;
}

.teilnehmer .kopf,
.teilnehmer .aktionen,
.steuerung,
.marker {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.teilnehmer .wer,
.begegnung h3,
.treffer-zeile .wer {
  overflow-wrap: anywhere;
  font-weight: 600;
}

.platz {
  min-width: 1.5rem;
  text-align: center;
  font-weight: 700;
}

.am-zug-marke {
  color: var(--betont);
  font-weight: 700;
}

.besiegt-marke {
  color: var(--warnung);
}

.offen-marke {
  color: var(--warnung);
  font-weight: 700;
  outline: 2px solid var(--warnung);
  outline-offset: 1px;
}

.kreaturenpanel {
  border: 2px solid var(--betont);
  border-radius: 0.5rem;
  padding: 0.75rem;
  margin: 1rem 0;
}

.werteblock p {
  margin: 0.25rem 0;
  overflow-wrap: anywhere;
}

.betroffene {
  border: 1px solid var(--rand);
  border-radius: 0.5rem;
  margin: 0.5rem 0;
}

.frage {
  font-weight: 600;
}

.treffer-zeile,
.zeile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 0.25rem 0;
}

/* The long forms of the battle page hold headings, lists and many fields: they stack instead of running in a row like the small ones. */
form[data-form="begegnung-speichern"],
form[data-form="kampf-aufforderung"],
form[data-form="kampf-ep-bestaetigen"] {
  display: block;
}

form[data-form="begegnung-speichern"] > label,
form[data-form="kampf-aufforderung"] > label,
form[data-form="kampf-ep-bestaetigen"] > label {
  margin: 0.5rem 0;
}

/* Plan 4, P4-N: the battle as a player reads it - the panel in the frame of the sheet, the own turn with the four markers, the hint to roll a saving throw, the area of effect,
   the damage after a hit - and the sheet of an absent character (dimmed, with the word). The bar stands in the classes of the game master's page (`.balken`, `.balken-n`):
   no width in the markup and no number anywhere. Colours only through the variables; every button keeps its tap target (the rule for buttons above). */
.kampf-spieler {
  border: 2px solid var(--betont);
  border-radius: 0.5rem;
  padding: 0.75rem;
  margin: 1rem 0;
}

.kampf-spieler h2,
.kampf-spieler h3 {
  margin: 0.5rem 0;
}

.du-am-zug {
  color: var(--betont);
  font-weight: 700;
}

.eigener-zug,
.initiative-faellig,
.rettungswuerfe,
.wirkungsbereich,
.eigene-aufforderungen,
.treffer-schaden {
  margin: 0.75rem 0;
}

.eigener-zug .marker form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.sg {
  font-weight: 700;
}

/* A target of the area of effect: the box and the name in one row (the plain `label` stacks its children). */
.wirkungsbereich .haken {
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
  margin: 0.25rem 0;
}

/* The long forms of the player side stack, like the long forms of the game master's battle page. */
form[data-form="kampfspiel-aufforderung"],
form[data-form="kampfspiel-schaden"],
form[data-form="kampfspiel-rettungswurf"],
form[data-form="kampfspiel-initiative"] {
  display: block;
}

form[data-form="kampfspiel-aufforderung"] > label,
form[data-form="kampfspiel-schaden"] > label,
form[data-form="kampfspiel-rettungswurf"] > label,
form[data-form="kampfspiel-initiative"] > label {
  display: block;
  margin: 0.5rem 0;
}

/* An absent character (E-105, O-46): the row, the card and the sheet are dimmed, and the word says why. */
.teilnehmer.abwesend,
.karte.abwesend {
  opacity: 0.6;
}

.abwesend-marke {
  color: var(--ruhig);
  font-weight: 700;
}

.abwesend-hinweis {
  font-weight: 600;
}

/* Plan 5, P5-P: with more than six tabs the bar wraps into rows instead of shrinking each word to a few letters. Plan 5, P5-Q (P5-P-g follow-up "Kampa-gne"): three tabs to a row so that the
   longest words ("Einstellungen", "Vorbereitung") stand whole, and no automatic hyphenation - the browser cut "Kampagne" at a place of its own. A word that still does not fit breaks as a
   last resort. */
.ansichten-viele {
  flex-wrap: wrap;
}

.ansichten-viele .tat {
  flex: 1 1 30%;
}

.ansichten-viele button {
  hyphens: manual;
  overflow-wrap: break-word;
}

/* Plan 5, P5-P: the lists of the loot and of the random tables are boxes like the encounters; the long forms stack. */
.beute,
.beute-angebote,
.zufallstabellen {
  list-style: none;
  padding: 0;
  margin: 0.5rem 0;
}

.beute-eintrag,
.beute-angebot,
.zufallstabelle,
.zufallswurf {
  border: 1px solid var(--rand);
  border-radius: 0.5rem;
  padding: 0.5rem;
  margin: 0.5rem 0;
  background: var(--grund);
}

.zufallswurf {
  border: 2px solid var(--betont);
}

.beute-eintrag .wer,
.beute-angebot .wer,
.zufallstabelle h3 {
  overflow-wrap: anywhere;
  font-weight: 600;
}

.gewicht {
  font-weight: 700;
}

form[data-form="zufall-speichern"],
form[data-form="zufall-zeile"],
form[data-form="beute-geld"],
form[data-form="beute-eigenes"],
form[data-form="beute-suche"] {
  display: block;
}

form[data-form="zufall-speichern"] > label,
form[data-form="zufall-zeile"] > label,
form[data-form="beute-geld"] > label,
form[data-form="beute-eigenes"] > label,
form[data-form="beute-suche"] > label {
  display: block;
  margin: 0.5rem 0;
}

/* Plan 5, P5-P: the tabs of the tools of the game master. The areas of a tab are a row of buttons that wraps (not fixed to the bottom like the tabs), the lists of a tool are
   plain lists with a box for each record, and the forms with many fields stack. Long words break instead of widening the page; colours only through the variables. */
.bereiche {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin: 0.5rem 0;
}

.bereiche .tat {
  flex: 1 1 7rem;
  min-width: 0;
  margin: 0;
}

.bereiche button {
  width: 100%;
  min-width: 0;
  hyphens: auto;
  overflow-wrap: anywhere;
}

.bereiche button[aria-current="page"] {
  background: var(--betont);
  color: var(--grund);
  font-weight: 600;
}

.hausregeln,
.weitere-einstellungen {
  list-style: none;
  padding: 0;
  margin: 0.5rem 0;
}

.hausregel {
  border: 1px solid var(--rand);
  border-radius: 0.5rem;
  padding: 0.5rem;
  margin: 0.5rem 0;
  background: var(--grund);
}

.hausregel h4,
.hausregel .regeltext {
  overflow-wrap: anywhere;
}

.hausregel h4 {
  display: inline;
  margin: 0;
}

form[data-form="haus-schalter"],
form[data-form="haus-neu"],
form[data-form="haus-aendern"] {
  display: block;
}

form[data-form="haus-schalter"] > label,
form[data-form="haus-neu"] > label,
form[data-form="haus-aendern"] > label {
  display: block;
  margin: 0.5rem 0;
}

/* Plan 5, P5-P: the small print under a heading of a tool, the frame of an area, the choice of persons, and the lists of the tools - one box for each record. */
.hinweis-klein {
  font-size: 0.875rem;
  margin: 0.25rem 0;
  overflow-wrap: anywhere;
}

.werkzeuge {
  margin: 0.5rem 0;
}

/* Pruefer P5-P: a choice with a long word (the house rules) stays inside a narrow screen instead of widening the page. */
.werkzeuge select {
  max-width: 100%;
}

.personen {
  border: 1px solid var(--rand);
  border-radius: 0.5rem;
  padding: 0.5rem;
  margin: 0.5rem 0;
}

.personen .haken {
  margin: 0.25rem 0;
}

.auftraege,
.briefe,
.laeden,
.angebote,
.messwerkzeuge,
.notizen,
.nscs,
.kapitelliste,
.szenen,
.elemente {
  list-style: none;
  padding: 0;
  margin: 0.5rem 0;
}

.auftrag,
.brief,
.laden,
.messwerkzeug,
.notiz,
.nsc,
.kapitel,
.szene {
  border: 1px solid var(--rand);
  border-radius: 0.5rem;
  padding: 0.5rem;
  margin: 0.5rem 0;
  background: var(--grund);
}

.auftrag h3,
.brief h3,
.laden h3,
.messwerkzeug h3,
.notiz h3,
.nsc h3,
.kapitel h3,
.szene h4,
.element .wer {
  display: inline;
  margin: 0;
  overflow-wrap: anywhere;
}

.brieftext {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* An offer of a shop: the name, the price and the stock in a row that wraps; the old price beside the new one stays readable. */
.angebot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 0.25rem 0;
}

.preis {
  font-weight: 700;
}

/* Plan 5, P5-Q: the price before the latest change of the game master stands beside the new one, struck through and in the colour of a warning - never only in a colour (the word "vorher" stands in it). */
.preis-alt {
  color: var(--warnung);
  text-decoration: line-through;
  font-size: 0.875rem;
}

.vorrat {
  font-size: 0.875rem;
}

/* A measuring tool: the bar is a native element sized by the page, never by a number in the markup. */
.messbalken {
  display: block;
  width: 100%;
  max-width: 24rem;
  height: 1rem;
}

/* Plan 5, P5-Q: the details of an own item under its row, and the text of its curse - a framed block, never only a colour. */
.gegenstand-details,
.fluch-text {
  flex-basis: 100%;
  border-left: 3px solid var(--rand);
  padding: 0.25rem 0.5rem;
  margin: 0.25rem 0;
  overflow-wrap: anywhere;
}

.fluch-text {
  border-left-color: var(--warnung);
}

/* Plan 5, P5-Q: on the table screen the tools are read from three metres - bigger, and the bar as wide as the content. */
.tisch-inhalt .messwerkzeug {
  font-size: 1.25em;
}

.tisch-inhalt .messbalken {
  max-width: 100%;
  height: 1.5em;
}

.messwerkzeug .schritte {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.element {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 0.25rem 0;
  list-style: none;
}

.szene {
  margin-left: 0.5rem;
}

/* Own items and own creatures: a box for each record, the editor as a framed section, the blocks and abilities as numbered lists, the groups of a long form as fieldsets. */
.eigeneitems,
.eigenekreaturen,
.bausteine,
.faehigkeiten {
  padding-left: 1.5rem;
  margin: 0.5rem 0;
}

.eigeneitems,
.eigenekreaturen {
  list-style: none;
  padding-left: 0;
}

.eigenitem,
.eigenekreatur {
  border: 1px solid var(--rand);
  border-radius: 0.5rem;
  padding: 0.5rem;
  margin: 0.5rem 0;
  background: var(--grund);
}

.eigenitem h3,
.eigenekreatur h3 {
  display: inline;
  margin: 0;
  overflow-wrap: anywhere;
}

.item-editor,
.kreatur-editor {
  border: 2px solid var(--betont);
  border-radius: 0.5rem;
  padding: 0.75rem;
  margin: 0.75rem 0;
}

.bausteine li,
.faehigkeiten li {
  margin: 0.25rem 0;
  overflow-wrap: anywhere;
}

fieldset.fluch,
fieldset.kreatur {
  border: 1px solid var(--rand);
  border-radius: 0.5rem;
  margin: 0.5rem 0;
}

.marke.fluch {
  color: var(--warnung);
  font-weight: 700;
}

form[data-form="item-speichern"],
form[data-form="item-baustein-neu"],
form[data-form="kreatur-speichern"],
form[data-form="kreatur-faehigkeit-neu"] {
  display: block;
}

form[data-form="item-speichern"] > label,
form[data-form="item-baustein-neu"] > label,
form[data-form="kreatur-speichern"] label,
form[data-form="kreatur-faehigkeit-neu"] > label {
  display: block;
  margin: 0.5rem 0;
}

.nsc-bild {
  width: 3rem;
  height: 3rem;
  object-fit: cover;
  border-radius: 0.25rem;
  vertical-align: middle;
}

form[data-form="notiz-neu"],
form[data-form="notiz-speichern"],
form[data-form="gespraech-neu"],
form[data-form="gespraech-speichern"],
form[data-form="nsc-neu"],
form[data-form="nsc-speichern"],
form[data-form="messwerkzeug-neu"],
form[data-form="messwerkzeug-aendern"],
form[data-form="brief-senden"],
form[data-form="auftrag-neu"],
form[data-form="auftrag-aendern"] {
  display: block;
}

form[data-form="notiz-neu"] > label,
form[data-form="notiz-speichern"] > label,
form[data-form="gespraech-neu"] > label,
form[data-form="gespraech-speichern"] > label,
form[data-form="nsc-neu"] > label,
form[data-form="nsc-speichern"] > label,
form[data-form="messwerkzeug-neu"] > label,
form[data-form="messwerkzeug-aendern"] > label,
form[data-form="brief-senden"] > label,
form[data-form="auftrag-neu"] > label,
form[data-form="auftrag-aendern"] > label {
  display: block;
  margin: 0.5rem 0;
}

/* P5-P (P5-K, P5-B, P5-N): the states of the campaign, the shelf of the rounds and the lookup of the rules. */
.staende,
.regal,
.regeltreffer-liste {
  list-style: none;
  padding: 0;
  margin: 0.5rem 0;
}

.stand,
.regalrunde,
.regeltreffer {
  border: 1px solid var(--rand);
  border-radius: 0.5rem;
  padding: 0.5rem;
  margin: 0.5rem 0;
  background: var(--grund);
}

.stand h3,
.regalrunde h4,
.regeltreffer h3 {
  margin: 0 0 0.25rem;
  overflow-wrap: anywhere;
}

.regeltext-absaetze {
  max-width: 70ch;
  overflow-wrap: anywhere;
}

/* Plan 5, P5-Q: the curse of the backstory in the book - a box for each curse, the editor with its small forms for the blocks, the mark at a value of the sheet. */
.fluch-buch {
  margin: 0.75rem 0;
}

.fluch-liste {
  list-style: none;
  padding: 0;
  margin: 0.5rem 0;
}

.fluch-eintrag,
.fluch-editor {
  border: 1px solid var(--rand);
  border-radius: 0.5rem;
  padding: 0.5rem;
  margin: 0.5rem 0;
  background: var(--grund);
  overflow-wrap: anywhere;
}

.fluch-eintrag h3,
.fluch-editor h3 {
  margin: 0 0 0.25rem;
}

fieldset.fluch-formular {
  border: 1px solid var(--rand);
  border-radius: 0.5rem;
  margin: 0.5rem 0;
}

.fluch-marke {
  color: var(--warnung);
  font-weight: 700;
}

form[data-form="fluch-formular"],
form[data-form="fluch-bearbeiten"],
form[data-form="fluch-neu"] {
  display: block;
  margin: 0.25rem 0;
}

/* Plan 6, P6-1G: the tab "Karten" of the game master. No colour number of its own (only the variables above), no inline style: the drawing of a map is classes of this sheet. A stroke
   keeps its width at every zoom (`vector-effect`), so a wall is as thin at "ganze Karte" as it is close up. */
.karten h2,
.karten h3 {
  margin: 0.5rem 0;
}

.karten-kopf {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.5rem 0;
}

/* The flow is one form with fieldsets, a toggle, a field and a button: they stand one under the other, not side by side. */
.karten form[data-form="karte-ablauf"] {
  display: block;
}

.karten form[data-form="karte-ablauf"] > label {
  max-width: 24rem;
}

.kartenliste,
.karten-bereiche {
  list-style: none;
  padding: 0;
  margin: 0.5rem 0;
}

.karte-zeile {
  border: 1px solid var(--rand);
  border-radius: 0.5rem;
  padding: 0.5rem;
  margin: 0.5rem 0;
  background: var(--grund);
  overflow-wrap: anywhere;
}

.karte-zeile h3 {
  margin: 0 0 0.25rem;
}

.karten-bereiche li {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  border-bottom: 1px solid var(--rand);
  padding: 0.25rem 0;
}

.karten-bereiche .tat {
  margin: 0;
}

.karten-gewaehlt {
  outline: 2px solid var(--betont);
  outline-offset: -2px;
}

.karten-name {
  flex: 1 1 10rem;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.karten-marke {
  font-size: 0.875rem;
  color: var(--text);
  opacity: 0.75;
}

.karten-zustand {
  font-weight: 600;
}

.karten-seed {
  font-family: ui-monospace, monospace;
  overflow-wrap: anywhere;
}

.karten-typen {
  border: 1px solid var(--rand);
  border-radius: 0.5rem;
  margin: 0.5rem 0;
}

.karten-typ {
  display: inline-block;
  border: 1px solid var(--rand);
  border-radius: 1rem;
  padding: 0.15rem 0.75rem;
  margin: 0.15rem;
}

/* P6-4A: the kinds that are built are buttons of the form (they pick the kind that is rolled). */
button.karten-typ {
  font: inherit;
  cursor: pointer;
}

.karten-typ[aria-current="true"] {
  background: var(--betont);
  color: var(--grund);
}

.karten-typ-aus {
  opacity: 0.55;
}

.karten-schnellwahl {
  border: 1px solid var(--rand);
  border-radius: 0.5rem;
  margin: 0.5rem 0;
}

.karten-wahl {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  margin: 0.25rem 0;
}

.karten-wahl-name {
  min-width: 5rem;
  font-weight: 600;
}

.karten-regler {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: 0.5rem;
  margin: 0.5rem 0;
}

.karten-regler p {
  grid-column: 1 / -1;
  margin: 0;
}

/* The default button of the flow form: it comes first in the form, so a press of Enter in a field rolls and does not pick a size; it is not shown and not reached by Tab. */
.karten-standard {
  position: absolute;
  width: 1px;
  height: 1px;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  padding: 0;
  border: 0;
}

.karten-vorschau,
.karten-blatt,
.karten-werkzeug {
  border: 1px solid var(--rand);
  border-radius: 0.5rem;
  padding: 0.5rem;
  margin: 0.5rem 0;
  background: var(--grund);
}

/* P6-5G: the link of an element to another map (the panel of the game master) and the list of the links a player reads under the map */
.karten-verweis,
.karten-verweise {
  margin: 0.75rem 0;
}

.karten-verweis {
  border-top: 1px solid var(--rand);
  padding-top: 0.5rem;
}

.karten-ansicht .tat {
  gap: 0.25rem;
}

.karten-zoom-stand {
  align-self: center;
  font-size: 0.875rem;
  min-width: 6rem;
}

/* P6-4C: the buttons of the floors of a dwelling, beside the buttons of the section */
.karten-stockwerke {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  align-items: center;
  margin-left: 0.5rem;
}

.karten-leiste {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin: 0.5rem 0;
}

.karten-leiste .tat {
  flex: 1 1 auto;
  margin: 0;
}

.karten-leiste button {
  width: 100%;
}

.karten-leiste button[aria-current="page"] {
  background: var(--betont);
  color: var(--grund);
}

/* The drawing. (The class is `k-svg`: `.karte` is the card of a character on the sheet.) */
.k-svg {
  display: block;
  width: 100%;
  height: auto;
  max-height: 70vh;
  border: 1px solid var(--rand);
  border-radius: 0.5rem;
  background: var(--flaeche);
}

/* The whole map of the game master and the view of the group are told apart by the frame: the view of the group has the colour of "ruhig". */
.k-sl {
  border-color: var(--rand);
}

.k-sp {
  border-color: var(--ruhig);
}

.k-grund {
  fill: var(--flaeche);
}

.k-el-room,
.k-el-corridor {
  fill: var(--grund);
  stroke: none;
}

.k-el-building {
  fill: var(--rand);
  stroke: var(--text);
  stroke-width: 1px;
  vector-effect: non-scaling-stroke;
}

.k-el-street,
.k-el-road,
.k-el-river,
.k-el-coast,
.k-el-wall {
  fill: none;
  stroke: var(--text);
  stroke-width: 2px;
  vector-effect: non-scaling-stroke;
}

.k-el-river,
.k-el-coast {
  stroke: var(--geaendert);
}

.k-el-region {
  fill: var(--rand);
  stroke: var(--text);
  stroke-width: 1px;
  stroke-dasharray: 6 4;
  vector-effect: non-scaling-stroke;
}

/* P6-4G: the border of a realm of a world is an open line (a closed ring of corners), never a filled shape */
.k-el-realm {
  fill: none;
  stroke: var(--betont);
  stroke-width: 2px;
  stroke-dasharray: 8 3;
  vector-effect: non-scaling-stroke;
}

/* P6-4G: the world - the regions lie below everything, tinted by their landscape (the variables of the sheet, five different looks), their names and the names of the places lie above and take no finger */
.k-regionen {
  stroke-linejoin: round;
}

.k-el-area {
  fill: var(--rand);
  stroke: var(--text);
  stroke-width: 1px;
  stroke-opacity: 0.35;
  vector-effect: non-scaling-stroke;
}

.k-landschaft-plains {
  fill: var(--ruhig);
  fill-opacity: 0.12;
}

.k-landschaft-forest {
  fill: var(--ruhig);
  fill-opacity: 0.42;
}

.k-landschaft-hills {
  fill: var(--geaendert);
  fill-opacity: 0.2;
}

.k-landschaft-mountains {
  fill: var(--text);
  fill-opacity: 0.32;
}

.k-landschaft-desert {
  fill: var(--warnung);
  fill-opacity: 0.2;
}

.k-el-area-name {
  fill: var(--text);
  fill-opacity: 0.55;
  font-weight: 600;
  pointer-events: none;
}

.k-el-settlement-name {
  fill: var(--text);
  pointer-events: none;
}

.k-massstab {
  margin: 0.25rem 0 0;
}

.k-el-terrain {
  fill: var(--rand);
  stroke: none;
}

.k-gelaende-difficult {
  fill: var(--text);
  fill-opacity: 0.12;
}

.k-gelaende-water {
  fill: var(--geaendert);
  fill-opacity: 0.35;
}

.k-gelaende-pit {
  fill: var(--text);
  fill-opacity: 0.45;
}

.k-gelaende-hazard {
  fill: var(--warnung);
  fill-opacity: 0.3;
}

.k-gelaende-obscuredLight,
.k-gelaende-obscuredHeavy {
  fill: var(--text);
  fill-opacity: 0.2;
}

.k-gelaende-sightBlocking {
  fill: var(--text);
  fill-opacity: 0.6;
}

/* P6-4C: the stairs of a dwelling (a mark on the floor: it blocks nothing and costs nothing) */
.k-gelaende-stairs {
  fill: var(--text);
  fill-opacity: 0.18;
  stroke: var(--text);
  stroke-width: 1px;
  stroke-dasharray: 2 2;
  vector-effect: non-scaling-stroke;
}

.k-el-room.k-aufgedeckt,
.k-el-corridor.k-aufgedeckt,
.k-el-building.k-aufgedeckt {
  fill: var(--ruhig);
  fill-opacity: 0.28;
}

.k-aufgedeckt {
  opacity: 1;
}

.k-verdeckt {
  fill-opacity: 0.7;
}

.k-geheim {
  stroke: var(--geaendert);
  stroke-width: 2px;
  stroke-dasharray: 4 3;
  vector-effect: non-scaling-stroke;
}

.k-nur-sl {
  opacity: 0.6;
}

.k-wand {
  fill: none;
  stroke: var(--text);
  stroke-width: 2px;
  stroke-linecap: square;
  vector-effect: non-scaling-stroke;
}

.k-el-door,
.k-el-secretDoor,
.k-el-window {
  fill: none;
  stroke: var(--betont);
  stroke-width: 5px;
  stroke-linecap: butt;
  vector-effect: non-scaling-stroke;
}

.k-el {
  stroke-linejoin: round;
}

.k-tuer-open {
  stroke-dasharray: 3 3;
}

.k-tuer-closed {
  stroke-dasharray: none;
}

.k-tuer-locked {
  stroke: var(--warnung);
}

.k-el-secretDoor {
  stroke: var(--geaendert);
  stroke-dasharray: 5 3;
}

.k-el-window {
  stroke: var(--text);
  stroke-width: 3px;
  stroke-dasharray: 1 2;
}

.k-el-trap {
  fill: var(--warnung);
  stroke: var(--text);
  stroke-width: 1px;
  vector-effect: non-scaling-stroke;
}

.k-el-light {
  fill: var(--betont);
  fill-opacity: 0.08;
  stroke: none;
}

.k-licht-hell {
  fill-opacity: 0.2;
}

.k-licht-daemmrig {
  fill-opacity: 0.1;
}

.k-licht-punkt {
  fill-opacity: 1;
  stroke: var(--text);
  stroke-width: 1px;
  vector-effect: non-scaling-stroke;
}

.k-aus {
  opacity: 0.35;
}

.k-el-settlement,
.k-el-link {
  fill: var(--betont);
  stroke: var(--text);
  stroke-width: 1px;
  vector-effect: non-scaling-stroke;
}

.k-el-label {
  fill: var(--text);
  stroke: none;
  pointer-events: none;
}

.k-auswahl {
  fill: none;
  stroke: var(--warnung);
  stroke-width: 3px;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
}

/* P6-2A: the wall editor. The places over the drawing take the touch (`data-karte-editor`); they are clear until the pointer is over them. The first corner of a rectangle and the painted fields are marked. */
.karten-editor-flaeche .k-svg {
  cursor: crosshair;
}

.k-treffer,
.k-treffer-feld {
  fill: transparent;
  stroke: none;
  cursor: pointer;
}

.k-treffer:hover,
.k-treffer-feld:hover {
  fill: var(--warnung);
  fill-opacity: 0.35;
}

.k-editor-start,
.k-editor-pinsel {
  fill: var(--warnung);
  fill-opacity: 0.4;
  stroke: var(--warnung);
  stroke-width: 2px;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
}

.karten-editor-eingabe {
  margin-top: 1rem;
}

/* P6-3B: what the structure editor plans, over the map: a new room, a new passage, cells taken on, cells given up, a trap, a label, an exit. Colours are the variables of the sheet. */
.k-plan-raum,
.k-plan-gang,
.k-plan-zu,
.k-plan-weg,
.k-plan-ausgang,
.k-plan-beschriftung {
  fill-opacity: 0.35;
  stroke-width: 2px;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
}

.k-plan-raum {
  fill: var(--betont);
  stroke: var(--betont);
}

.k-plan-gang {
  fill: var(--geaendert);
  stroke: var(--geaendert);
}

.k-plan-zu {
  fill: var(--ruhig);
  stroke: var(--ruhig);
}

.k-plan-weg {
  fill: var(--warnung);
  stroke: var(--warnung);
}

.k-plan-ausgang {
  fill: var(--text);
  stroke: var(--text);
}

.k-plan-beschriftung {
  fill: var(--rand);
  stroke: var(--text);
}

.k-plan-falle {
  fill: var(--warnung);
  stroke: var(--text);
  stroke-width: 2px;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
}

/* Plan 6, P6-1H: the readers of a map. The surface takes the fingers (`touch-action: none`: one finger moves the map, not the page; the page scrolls above and below it) and the keys (a focus ring when it
   has the focus). The map on the table screen is large and has a strong frame; it has no control at all. No colour number of its own, no inline style. */
.karten-flaeche {
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  border-radius: 0.5rem;
}

.karten-flaeche:focus-visible {
  outline: 3px solid var(--betont);
  outline-offset: 2px;
}

.karten-leser .abwesend-hinweis {
  margin: 0.5rem 0;
}

.tisch-karte {
  margin: 0.5em 0 1em;
}

.tisch-karte h2 {
  margin: 0 0 0.25em;
}

/* Nachzug N1 (A21): as soon as a map stands on the table the section carries this class; the picture is the height of the screen minus the head of the page (16 rem: the title, the bar and the heading of the map), so the whole map
   is on a television and not under its edge. */
.tisch-karte .k-svg {
  max-height: calc(100vh - 16rem);
  border-width: 3px;
  border-color: var(--text);
}

.tisch-karte .k-wand {
  stroke-width: 4px;
}

/* Plan 6, P6-3D: the area "Bibliothek" of the tab "Karten". A page of the catalogue is a list of cards, a preview picture beside the text; at 375 pixels the picture stands over the text. The picture has its
   size in the markup (`width`, `height`) and is shrunk by the sheet, so the page does not jump while the previews come in. No colour number of its own, no inline style. */
.bib-karten {
  list-style: none;
  padding: 0;
  margin: 0.5rem 0;
  display: grid;
  gap: 0.5rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
}

.bib-karte {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  border: 1px solid var(--rand);
  border-radius: 0.5rem;
  padding: 0.5rem;
  background: var(--grund);
  overflow-wrap: anywhere;
}

.bib-gewaehlt {
  outline: 3px solid var(--betont);
  outline-offset: -3px;
}

.bib-vorschau {
  width: 8rem;
  height: 8rem;
  max-width: 100%;
  object-fit: contain;
  border: 1px solid var(--rand);
  border-radius: 0.25rem;
  background: var(--flaeche);
}

.bib-text {
  flex: 1 1 10rem;
  min-width: 0;
}

.bib-text h3 {
  margin: 0 0 0.25rem;
  font-size: 1rem;
}

.bib-seiten {
  align-items: center;
}

.bib-wahl {
  margin-top: 1rem;
}

/* The page `/b` (the administration of the map libraries at the machine itself): one column, the fields as wide as the column. */
.bib-admin {
  max-width: 40rem;
  margin: 0 auto;
  padding: 1rem;
}

.bib-admin input:not([type="checkbox"]) {
  width: 100%;
  box-sizing: border-box;
}

/* P6-3E: the wizard. Every line of its state has its place from the start (a fixed least height), so the panel does not jump while the numbers change. */
.bib-assistent {
  margin-top: 2rem;
  border-top: 1px solid var(--rand);
  padding-top: 1rem;
}

.bib-fortschritt {
  display: block;
  width: 100%;
  height: 1rem;
  margin: 0.75rem 0 0.25rem;
}

.bib-status {
  min-height: 3em;
  margin: 0.25rem 0;
  font-variant-numeric: tabular-nums;
}

.bib-zeile,
.bib-meldung {
  min-height: 3em;
  margin: 0.25rem 0;
}

.bib-meldung-fehler {
  border-left: 3px solid var(--warnung);
  padding-left: 0.5rem;
  color: var(--warnung);
}

/* E-127: the question before a finished library is made anew. */
.bib-rueckfrage {
  margin: 0.75rem 0;
  border: 2px solid var(--warnung);
  border-radius: 0.5rem;
  padding: 0.75rem;
}

.bib-rueckfrage[hidden] {
  display: none;
}

/* The box and its words in one row (the plain `label` stacks its children). */
.bib-admin .haken {
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
  margin: 0.25rem 0;
}

/* P6-3A: a map on a template. The picture lies under the drawing; a room or a passage is not filled (it would hide the picture), its place shows through. */
.k-vorlage .k-el-room,
.k-vorlage .k-el-corridor {
  fill: none;
}

.k-vorlage-bild {
  pointer-events: none;
}

/* P6-3C: the style break. What the completion built outside the picture of the template lies on a ground of its own (hatched edge, tinted), so the game master sees where the picture ends. */
.k-stilbruch {
  fill: var(--rand);
  fill-opacity: 0.22;
  stroke: var(--rand);
  stroke-width: 0.06;
  stroke-dasharray: 0.3 0.2;
  pointer-events: none;
}

/* The calibration: the picture of the template with the grid laid over it (lines only, the picture stays visible). */
.vorlage-raster {
  display: block;
  width: 100%;
  height: auto;
  max-height: 70vh;
  border: 1px solid var(--rand);
  border-radius: 0.5rem;
  background: var(--flaeche);
}

.vorlage-raster-linie {
  fill: none;
  stroke: var(--betont);
  stroke-width: 1px;
  vector-effect: non-scaling-stroke;
}

.vorlage-zeile {
  border-bottom: 1px solid var(--rand);
  padding: 0.5rem 0;
}

.vorlage-zahlen {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* Plan 6, P6-2I: the layers over the floor of a map (`figures.ts`) - what the group sees now and remembers, the areas, the rings, the figures and the target. The groups take no touch: a tap goes to the surface
   under them (`data-karte`), where the gesture machine reads it. Colours are the variables of the sheet only; no colour number of its own, no inline style. */
.k-sicht-ebene,
.k-bereiche,
.k-ringe,
.k-figuren,
.k-ziel-ebene {
  pointer-events: none;
}

.k-sicht,
.k-figur {
  pointer-events: none;
}

.k-sicht-erkundet {
  fill: var(--flaeche);
  fill-opacity: 0.7;
  stroke: none;
}

.k-sicht-dunkel {
  fill: var(--text);
  fill-opacity: 0.35;
  stroke: none;
}

.k-sicht-daemmer {
  fill: var(--text);
  fill-opacity: 0.15;
  stroke: none;
}

.k-bereich {
  fill: var(--betont);
  fill-opacity: 0.25;
  stroke: var(--betont);
  stroke-width: 1px;
  vector-effect: non-scaling-stroke;
}

.k-bereich-sl {
  stroke-dasharray: 4 3;
}

.k-bereich-sl.k-gezeigt {
  stroke-dasharray: none;
  fill: var(--warnung);
}

.k-bereich.k-gewaehlt {
  stroke: var(--warnung);
  stroke-width: 3px;
}

.k-bereich-cone,
.k-bereich-cube,
.k-bereich-cylinder,
.k-bereich-emanation,
.k-bereich-line,
.k-bereich-sphere {
  fill-opacity: 0.25;
}

.k-ring {
  stroke: none;
}

.k-ring-bewegung {
  fill: var(--betont);
  fill-opacity: 0.18;
}

.k-ring-walk,
.k-ring-fly,
.k-ring-swim,
.k-ring-climb,
.k-ring-burrow {
  stroke: var(--betont);
  stroke-width: 1px;
  vector-effect: non-scaling-stroke;
}

.k-ring-nahkampf {
  fill: var(--warnung);
  fill-opacity: 0.22;
}

.k-ring-fern {
  fill: var(--ruhig);
  fill-opacity: 0.15;
}

.k-ring-lang {
  fill: var(--ruhig);
  fill-opacity: 0.08;
}

.k-ring-zauber {
  fill: var(--betont);
  fill-opacity: 0.1;
}

.k-unbelegt {
  stroke: var(--text);
  stroke-width: 1px;
  stroke-dasharray: 3 3;
  vector-effect: non-scaling-stroke;
}

.k-ziel {
  fill: none;
  stroke: var(--warnung);
  stroke-width: 3px;
  vector-effect: non-scaling-stroke;
}

.k-figur-kreis {
  fill: var(--betont);
  stroke: var(--text);
  stroke-width: 1px;
  vector-effect: non-scaling-stroke;
}

.k-figur-character .k-figur-kreis {
  fill: var(--betont);
}

.k-figur-creature .k-figur-kreis {
  fill: var(--warnung);
}

.k-figur-npc .k-figur-kreis {
  fill: var(--ruhig);
}

.k-figur-marker .k-figur-kreis {
  fill: var(--flaeche);
}

.k-figur-zeichen {
  fill: var(--grund);
  font-weight: 700;
  pointer-events: none;
}

.k-figur-marker .k-figur-zeichen {
  fill: var(--text);
}

.k-eigene .k-figur-kreis {
  stroke-width: 3px;
}

.k-abwesend {
  opacity: 0.4;
}

.k-verborgen .k-figur-kreis {
  fill-opacity: 0.5;
  stroke-dasharray: 4 2;
}

.k-gewaehlt .k-figur-kreis {
  stroke: var(--warnung);
  stroke-width: 3px;
}

.k-am-zug .k-figur-kreis {
  stroke: var(--warnung);
}

.k-am-zug-ring {
  fill: none;
  stroke: var(--warnung);
  stroke-width: 3px;
  vector-effect: non-scaling-stroke;
}

.karten-spiel {
  margin: 0.5rem 0;
}

.karten-ziel-text {
  margin: 0.25rem 0;
  font-weight: 600;
}

.karten-geruestet {
  border-left: 4px solid var(--betont);
}

.karten-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  border-left: 4px solid var(--warnung);
}

/* Plan 6, P6-5D (design 6.6, O-19, E-126): the six effects of the television - moving water, flickering light, fire, fog, rain and cloud shadows - as classes with CSS keyframes. The drawing (`render.ts`, `animation.ts`)
   only carries a class; nothing runs by script, and only the table screen is ever given the classes. Only opacity and transform move (cheap for the browser); every cycle takes at least a second, the flicker never
   drops under half of the light, so nothing strobes; colours are the variables of the sheet, no colour number of its own, no inline style. `will-change` is on the groups only. The block of `prefers-reduced-motion`
   at the end switches every class off (a test holds the classes of the code, of this block and of that block equal). */
@keyframes k-anim-wasser {
  0%,
  100% {
    opacity: 0.7;
  }
  50% {
    opacity: 1;
  }
}

@keyframes k-anim-feuer {
  0%,
  100% {
    opacity: 0.75;
  }
  25% {
    opacity: 1;
  }
  50% {
    opacity: 0.8;
  }
  75% {
    opacity: 0.95;
  }
}

@keyframes k-anim-flackern {
  0%,
  100% {
    opacity: 1;
  }
  12% {
    opacity: 0.7;
  }
  30% {
    opacity: 0.95;
  }
  46% {
    opacity: 0.55;
  }
  70% {
    opacity: 1;
  }
  85% {
    opacity: 0.8;
  }
}

@keyframes k-anim-nebel {
  0%,
  100% {
    transform: translateX(-12%);
  }
  50% {
    transform: translateX(12%);
  }
}

@keyframes k-anim-wolken {
  0%,
  100% {
    transform: translateX(-35%);
  }
  50% {
    transform: translateX(35%);
  }
}

@keyframes k-anim-regen {
  0% {
    transform: translateY(0);
    opacity: 0;
  }
  15% {
    opacity: 0.7;
  }
  100% {
    transform: translateY(900%);
    opacity: 0;
  }
}

.k-anim-wasser,
.k-anim-gruppe-wasser {
  animation: k-anim-wasser 3.2s ease-in-out infinite;
}

.k-anim-feuer,
.k-anim-gruppe-feuer {
  animation: k-anim-feuer 1.6s ease-in-out infinite;
}

.k-anim-flackern {
  animation: k-anim-flackern 2.4s ease-in-out infinite;
}

/* The group that holds all the pieces of water (or fire) of a large map: the one animated thing, held as its own layer. */
.k-anim-gruppe {
  will-change: opacity;
}

/* The layer of the three overlays lies over the drawing and takes no touch. */
.k-anim-ebene {
  pointer-events: none;
}

.k-anim-nebel {
  fill: var(--grund);
  fill-opacity: 0.4;
  stroke: none;
  transform-box: fill-box;
  transform-origin: center;
  animation: k-anim-nebel 24s ease-in-out infinite;
}

.k-anim-wolken {
  fill: var(--text);
  fill-opacity: 0.14;
  stroke: none;
  transform-box: fill-box;
  transform-origin: center;
  animation: k-anim-wolken 48s ease-in-out infinite;
}

.k-anim-regen {
  fill: none;
  stroke: var(--geaendert);
  stroke-width: 1.5px;
  vector-effect: non-scaling-stroke;
  opacity: 0;
  transform-box: fill-box;
  animation: k-anim-regen 1.4s linear infinite;
}

.k-anim-regen:nth-child(4n + 2) {
  animation-delay: -0.35s;
}

.k-anim-regen:nth-child(4n + 3) {
  animation-delay: -0.7s;
}

.k-anim-regen:nth-child(4n) {
  animation-delay: -1.05s;
}

/* The preview of the effects in the panel "Einstellungen" of the game master: the view of the group, drawn with the stored effects. */
.karten-animation-vorschau {
  margin: 0.5rem 0;
}

@media (prefers-reduced-motion: reduce) {
  .k-anim-wasser,
  .k-anim-gruppe-wasser,
  .k-anim-feuer,
  .k-anim-gruppe-feuer,
  .k-anim-flackern,
  .k-anim-nebel,
  .k-anim-wolken,
  .k-anim-regen {
    animation: none !important;
  }

  .k-anim-gruppe {
    will-change: auto;
  }

  .k-anim-ebene {
    display: none;
  }
}