/* Die Schale aller Seiten **außerhalb** des Spiels: Titelbild, FAQ, Blick ins Spiel,
 * Warenkatalog, Neuigkeiten, Impressum, Datenschutz.
 *
 * Vorher waren es drei Layouts: Das Titelbild hatte Szene, Zierrahmen und eine Fußzeile in
 * Versalien, die Inhaltsseiten eine Kopfleiste auf flachem Pergament, und Impressum und
 * Datenschutz gar nichts von beidem – nur ein Blatt mit einem Zurück-Link und einem eigenen
 * `<style>`-Block. Man war sichtbar auf drei verschiedenen Seiten.
 *
 * Jetzt teilen sich alle denselben Rahmen, dieselbe Kopfleiste, denselben Fuß und dasselbe
 * Menü. Verschieden bleibt nur der Grund darunter: Das Titelbild behält seine Szene als
 * Bühne, die Textseiten bleiben auf ruhigem Pergament – lange Texte lesen sich darauf besser,
 * und es spart 500 kB Bilder auf jedem Seitenaufruf.
 *
 * **Diese Datei ist die einzige Quelle für die Schale.** Sie wird von beiden Welten geladen:
 * von den Blade-Seiten über `<link>` und vom Spiel über `index.html`. Das Markup muss es
 * zwangsläufig zweimal geben – die eine Seite kommt aus TypeScript, die andere aus PHP –,
 * aber die Gestalt steht nur hier. `tests/visual/aussen.spec.ts` vergleicht beide Fassungen
 * miteinander, damit sie nicht auseinanderlaufen.
 *
 * Alle Klassen der Schale tragen `as-` (außen). So kann die Datei gefahrlos neben den
 * Stilvorlagen des Spiels liegen, ohne dass sich Namen wie `kopf` oder `fuss` in die Quere
 * kommen.
 *
 * Sie liegt in `public/` und **nicht** in `src/styles/`: Von dort kopiert Vite sie unverändert
 * nach `server/public/`, wo Laravel sie für die Blade-Seiten ausliefert. Läge sie im Build,
 * gäbe es sie nur eingebettet im Spiel – und die Textseiten hätten keine.
 */

:root {
  --as-parchment: #ecd5b2; --as-sheet: #eed8b7; --as-line: #c9ad82;
  --as-border: #8a6b45; --as-ink: #2b1d13; --as-brown: #6b4e2e;
  --as-gold: #b08a3e; --as-gruen: #5b6f3a;
  --as-breite: 68rem;
  /* Wie weit der Zierrahmen vom Bildschirmrand einrueckt – und damit auch der Inhalt. */
  --as-rand: 10px;
}

/* ---- Grundgerüst ---------------------------------------------------------------------- */

/* Der Zierrahmen. Er stand bisher nur um das Titelbild (`.screen-start::before`) und ist das
   auffälligste gemeinsame Merkmal, das die Seiten haben können: eine Buchseite, in der alles
   liegt. Fest am Sichtfenster, damit er beim Scrollen stehen bleibt. */
.as-rahmen {
  /*
   * `absolute`, nicht `fixed`.
   *
   * Gefragt: „Warum scrollt der Border mit?" – er tat das Gegenteil, und genau das war das
   * Problem. Ein fester Rahmen haengt am Layout-Viewport; auf iOS waechst und schrumpft das
   * beim Scrollen, weil die Adressleiste ein- und ausfaehrt. Der Rahmen sprang dabei mit,
   * waehrend der Inhalt gleichmaessig lief – es sah aus, als rutsche er quer durchs Bild.
   *
   * Am Dokument festgemacht umschliesst er stattdessen die ganze Seite wie ein Blatt: oben
   * und unten ein Abschluss, dazwischen zwei Kanten, die ruhig mitlaufen. Auf dem Titelbild,
   * das nicht scrollt, ist beides dasselbe.
   */
  position: absolute; inset: var(--as-rand); z-index: 50; pointer-events: none;
  border: 2px solid rgb(103 62 32 / 80%); border-radius: 12px;
  box-shadow: inset 0 0 0 4px rgb(238 214 169 / 45%), inset 0 0 45px rgb(67 35 13 / 34%);
}
/* Die Seite rueckt um denselben Betrag ein, um den der Rahmen innen liegt. Ohne das schnitt
   die Linie quer durch die Kopfleiste: Sie liegt fest ueber allem, der Inhalt lief bis an den
   Bildschirmrand, und "Jetzt spielen" stand halb hinter dem Rahmen. Jetzt endet der Inhalt
   genau dort, wo die Linie beginnt. */
/* `relative`, damit der Rahmen darunter die **Dokumenthoehe** bekommt und nicht die des
   Fensters – sonst endete er bei einer langen Seite nach dem ersten Bildschirm. */
body.as-seite { position: relative; padding: var(--as-rand); }
@media (max-width: 620px) {
  .as-rahmen { border-radius: 8px; box-shadow: inset 0 0 0 3px rgb(238 214 169 / 40%), inset 0 0 28px rgb(67 35 13 / 30%); }
}

/* Nur die Textseiten: Grund, Schrift und ein Fuß, der auch bei kurzem Inhalt unten sitzt. */
body.as-seite {
  margin: 0; min-height: 100dvh; display: flex; flex-direction: column;
  background: var(--as-parchment) url('/assets/textures/parchment.jpg') repeat;
  color: var(--as-ink);
  font-family: 'Lora', Georgia, 'Times New Roman', serif;
  font-size: 17px; line-height: 1.65;
}
body.as-seite * { box-sizing: border-box; }
body.as-seite main { flex: 1; }

/* Die Strichzeichen der Schale (`glyph.close` im Menü). Dieselbe Regel wie im Spiel
   (src/styles/base.css) – die Textseiten laden dessen Stilvorlagen nicht, und ohne sie nähme
   ein SVG ohne Maße seine Vorgabe von 300x150 an. */
body.as-seite .glyph { display: inline-block; width: 1em; height: 1em; vertical-align: -.15em; }

/* ---- Kopfleiste ----------------------------------------------------------------------- */

/* Dieselbe Leiste auf jeder Seite. Auf dem Titelbild liegt sie über der Szene und ist
   deshalb durchscheinend dunkel statt hell – der Inhalt bleibt derselbe. */
/*
 * Kopf und Fuß bringen ihre **eigene** Schriftgröße mit.
 *
 * Das war der größte der gemessenen Unterschiede und die Wurzel der meisten anderen: Im Spiel
 * erbte die Schale 15 px (`--fs-body`), auf den Textseiten 17 px. Daraus folgten
 * verschiedene Höhen in Kopfleiste (31 gegen 36 px) und Fuß (19 gegen 22 px) – Zahlen, die
 * niemand absichtlich gesetzt hat. Eine Schale, die überall gleich aussehen soll, darf ihre
 * Maße nicht vom Umfeld erben.
 */
.as-kopf, .as-fuss { font-size: 15px; line-height: 1.4; }
/*
 * Die Leiste bringt ihren **eigenen** Grund mit – Pergament, nicht Durchsicht.
 *
 * Bis 0.15 war sie über der Szene dunkel und auf den Textseiten hell. Gemeldet: „Solange die
 * Kopfzeilen unterschiedlich sind, sind wir nicht fertig. So wie es auf der FAQ-Seite ist,
 * soll es auch auf der Startseite sein." Durchscheinend allein genügt dafür nicht: Über dem
 * Bild käme die Szene durch und die Leiste sähe wieder anders aus. Mit der Textur darunter
 * ist sie überall dieselbe, ganz gleich, was dahinter liegt.
 */
.as-kopf {
  border-bottom: 1px solid var(--as-border);
  background: linear-gradient(rgb(234 208 169 / 78%), rgb(234 208 169 / 52%)),
    var(--as-parchment) url('/assets/textures/parchment.jpg') repeat;
  color: var(--as-ink);
  box-shadow: 0 1px 0 rgb(255 248 232 / 50%) inset;
}
.as-kopf-innen {
  display: flex; align-items: center; gap: 12px 26px;
  max-width: var(--as-breite); margin: 0 auto;
  padding: 10px max(20px, env(safe-area-inset-right)) 10px max(20px, env(safe-area-inset-left));
}
.as-marke { display: inline-flex; align-items: center; gap: 11px; color: inherit; text-decoration: none; }
.as-marke img { display: block; height: 42px; width: auto; }
.as-marke-name { font-family: 'Cinzel', Georgia, serif; font-size: 18px; line-height: 1.15; }
/* Der Untertitel ist das Erste, was weicht: Er erklaert die Marke, aber die Wege sind
   wichtiger. Unter 1200 px waere er der Grund, dass die Navigation umbricht. */
.as-marke-name small { display: none; }
@media (min-width: 1200px) {
  .as-marke-name small {
    display: block; font-family: 'Lora', Georgia, serif; font-size: 12.5px;
    letter-spacing: .02em; opacity: .78; margin-top: 2px; white-space: nowrap; font-weight: 400;
  }
}

/* `nowrap`: Die Navigation ist die eine Reihe, die nicht umbrechen darf. Mit dem
   Sprachschalter daneben wurde die Leiste sonst 96 statt 63 px hoch – gemessen, nachdem er
   dazukam. Schrumpfen soll die Marke, nicht die Wege. */
.as-nav { display: flex; flex-wrap: nowrap; white-space: nowrap; gap: 4px 20px; margin-left: auto; font-size: 15.5px; }
.as-nav a { color: inherit; opacity: .8; text-decoration: none; padding: 4px 0; border-bottom: 2px solid transparent; }
.as-nav a:hover { opacity: 1; border-bottom-color: var(--as-line); }
.as-nav a[aria-current="page"] { opacity: 1; font-weight: 600; border-bottom-color: var(--as-gold); }
/* Impressum und Datenschutz stehen am Rechner im Fuß, nicht in der Kopfnavigation – dort
   wären es sechs Einträge, und die Zeile bräche um. Im Menü auf dem Handy sind sie dabei,
   denn dort gibt es keinen Fuß mit drei Spalten. */
.as-nav-recht { display: none; }

/* Der Sprachschalter. Auf einer Textseite ist er ein Verweis (die zweite Fassung hat eine
   eigene Adresse), im Spiel ein Knopf (dort wechselt der Zustand der App) – dieselbe Regel
   für beide.

   `font: inherit` steht deshalb **hier** und nicht in start.css: Ein `<button>` nimmt sonst
   die Schrift des Systems. Stand es dort, gewann mal die eine, mal die andere Datei – gemessen
   war der Schalter auf dem Handy im Spiel 80 px breit und auf der Textseite 75, weil start.css
   mit 14 px gegen die 13 px der schmalen Leiste hier stand. */
.as-werkzeuge { display: flex; align-items: center; gap: 8px; }
.as-wz {
  display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 12px;
  font: inherit; font-size: 14px; color: var(--as-brown); text-decoration: none;
  background: rgb(244 229 197 / 78%);
  border: 1px solid rgb(90 53 25 / 55%); border-radius: 8px;
  box-shadow: inset 0 1px rgb(255 255 255 / 55%), 0 4px 12px rgb(35 18 8 / 16%);
  cursor: pointer;
}
.as-wz .wz-an { color: var(--as-ink); font-weight: 600; }
.as-wz .wz-strich { opacity: .5; }

/* Feste Hoehe statt Polster: Mit `padding` war der Knopf 46 px hoch und damit hoeher als das
   Wappen (42) – die Kopfleiste der Textseiten war dadurch 3 px hoeher als die des Titelbilds,
   wo es den Knopf nicht gibt. Gemessen, nicht geschaetzt: `aussen.spec.ts` vergleicht beide. */
.as-spielen {
  flex: none; display: inline-flex; align-items: center; height: 40px; padding: 0 20px; border-radius: 4px;
  border: 1px solid var(--as-border); background: var(--as-gruen);
  color: #f3e6cd; text-decoration: none;
  font-family: 'Cinzel', Georgia, serif; font-size: 15px; letter-spacing: .02em;
  box-shadow: 0 1px 0 rgb(255 248 232 / 28%) inset;
}
.as-spielen:hover { background: #6a8145; }

/* Auf der Buehne liegt der Rahmen auf deren Kante, nicht noch einmal eingerueckt: Die Buehne
   selbst ist bereits um `--as-rand` eingerueckt (start.css). */
.screen-start .as-rahmen { inset: 0; }
/*
 * `position: relative` **ohne** `z-index`. Die Szene liegt mit negativem z-index dahinter,
 * mehr braucht es nicht – und ein z-index hier wäre schädlich: Er macht die Kopfleiste zu
 * einem eigenen Stapelkontext, und das Menüblatt darin (z-index 61) könnte dann nie über
 * etwas außerhalb steigen. Gemeldet mit Bild: Die Fußzeile lag über dem offenen Menü, weil
 * sie denselben z-index trug und später im Dokument steht.
 *
 * Mehr ist der Bühne nicht mehr eigen: Farbe, Grund und Schrift der Leiste stehen oben und
 * gelten hier genauso.
 */
.screen-start .as-kopf { position: relative; }

/* ---- Das Blatt der Textseiten --------------------------------------------------------- */

.as-blatt {
  max-width: 50rem; margin: 26px auto 0; padding: 32px 34px 34px;
  background: var(--as-sheet); border: 1px solid var(--as-border);
  border-radius: 3px; box-shadow: 0 2px 14px rgb(43 29 19 / 18%);
}
.as-blatt h1, .as-blatt h2, .as-blatt h3 { font-family: 'Cinzel', Georgia, serif; font-weight: 700; letter-spacing: .02em; }
.as-blatt h1 { font-size: 31px; margin: 0 0 6px; line-height: 1.2; }
.as-blatt h2 { font-size: 21px; margin: 36px 0 10px; padding-bottom: 5px; border-bottom: 1px solid var(--as-line); }
.as-blatt h3 { font-size: 17px; margin: 24px 0 4px; }
.as-blatt .unterzeile { margin: 0 0 24px; color: var(--as-brown); font-size: 18px; }
.as-blatt p, .as-blatt ul, .as-blatt ol, .as-blatt dl { margin: 10px 0; }
.as-blatt ul, .as-blatt ol { padding-left: 22px; }
.as-blatt li { margin: 5px 0; }
.as-blatt a { color: var(--as-brown); }
.as-blatt address { font-style: normal; }
.as-blatt code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .92em; background: rgb(255 248 232 / 60%); padding: 1px 4px; border-radius: 3px; }
.as-blatt .stand { color: var(--as-brown); font-size: 15px; margin: 0 0 26px; }

/* FAQ: jede Frage eine Überschrift – sie ist der Text, nach dem gesucht wird. */
.frage { margin: 26px 0 0; }
.frage h3 { margin: 0 0 2px; }
.frage p { margin: 4px 0; }

/* Bildstrecke */
.as-blatt figure { margin: 22px 0; }
.as-blatt figure img { display: block; width: 100%; height: auto; border: 1px solid var(--as-border); border-radius: 3px; box-shadow: 0 2px 10px rgb(43 29 19 / 16%); }
.as-blatt figcaption { margin-top: 7px; font-size: 15px; color: var(--as-brown); }

/* Warenkatalog */
.katalog { margin: 18px 0 0; }
.katalog-gruppe { margin: 28px 0 0; }
.waren-tabelle { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: 15.5px; }
.waren-tabelle th, .waren-tabelle td { text-align: left; vertical-align: top; padding: 7px 10px 7px 0; border-bottom: 1px solid var(--as-line); }
.waren-tabelle th { font-family: 'Cinzel', Georgia, serif; font-size: 13.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--as-brown); }
.waren-tabelle .ware { font-weight: 600; width: 40%; }
/* Die Beschreibung unter dem Namen, nicht in einer eigenen Zeile: So bleibt die Tabelle eine
   Tabelle und liest sich trotzdem wie ein Nachschlagewerk. */
.waren-tabelle .ware small { display: block; font-weight: 400; font-size: 14.5px; line-height: 1.45; color: var(--as-brown); margin-top: 2px; }
.waren-tabelle .betrieb { white-space: nowrap; }
.waren-tabelle .braucht { color: var(--as-brown); }
.waren-tabelle .rohstoff { color: var(--as-gruen); }

/* Die Zeichnungen des Spiels, hier wie dort dieselben Dateien.
   `icon()` schreibt die Höhe **inline** – eine Regel dafür käme nicht dagegen an. Hier steht
   deshalb nur, was daneben passiert: die Breite folgt dem Seitenverhältnis, und der Name
   steht auf gleicher Höhe. Die Beschreibung rückt so weit ein wie das Symbol breit ist. */
.waren-tabelle .icon { display: inline-block; width: auto; flex: none; vertical-align: middle; }
.waren-tabelle .glyph-icon { display: inline-grid; place-items: center; color: var(--as-brown); }
.waren-tabelle .glyph-icon .glyph { width: 100%; height: 100%; }
.ware-kopf { display: flex; align-items: center; gap: 9px; }
.waren-tabelle .ware small { margin-left: 43px; }
.mit-symbol { display: inline-flex; align-items: center; gap: 6px; vertical-align: middle; }

/* Neuigkeiten */
.fassung { margin: 30px 0 0; }
.fassung h2 { margin-bottom: 4px; }
.fassung .datum { color: var(--as-brown); font-size: 15px; margin: 0 0 8px; }

.zurueck-unten { margin: 34px 0 0; padding-top: 16px; border-top: 1px solid var(--as-line); }
.zurueck-unten a { text-decoration: none; }

/* ---- Fuß ------------------------------------------------------------------------------ */

/* Eine Zeile, überall dieselbe. Sie stand bis 0.12.0 auf den Textseiten als drei Spalten mit
   Überschriften und auf dem Titelbild als schmale Zeile – gemeldet als „auch der Footer ist
   da anders". Auf der Bühne des Titelbilds ist für drei Spalten kein Platz, also gilt die
   Zeile für alle. Verloren geht nichts, was zählt: Dieselben Verweise stehen auf jeder Seite
   auch in der Kopfleiste, und daraus baut Google die Sitelinks. */
/* Wie die Kopfleiste: eigener Grund, damit die Zeile über der Szene dieselbe ist wie auf
   Pergament. */
.as-fuss {
  border-top: 1px solid var(--as-border);
  background: linear-gradient(rgb(201 173 130 / 24%), rgb(201 173 130 / 40%)),
    var(--as-parchment) url('/assets/textures/parchment.jpg') repeat;
  color: var(--as-brown);
}
.as-fuss-zeile {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 10px;
  max-width: var(--as-breite); margin: 0 auto;
  padding: 12px max(20px, env(safe-area-inset-right)) calc(12px + env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));
  font-size: 11.5px; text-transform: uppercase; letter-spacing: .11em;
}
.as-fuss a { color: inherit; text-decoration: none; opacity: .85; border-bottom: 1px solid transparent; }
.as-fuss a:hover { opacity: 1; border-bottom-color: currentColor; }
.as-fuss-marke { font-weight: 600; }
.as-fuss-punkt { opacity: .55; }
/* Der letzte Punkt vor dem Ende der Zeile hat nichts mehr zu trennen. */
.as-fuss-zeile > .as-fuss-punkt:last-child { display: none; }

/* Der Bühne eigen ist nur noch zweierlei: das Stapeln (kein z-index, siehe Kopfleiste) und
   der Platz rechts für die Fassungsnummer. */
.screen-start .as-fuss { position: relative; }
.screen-start .as-fuss-zeile { padding-right: max(58px, calc(44px + env(safe-area-inset-right))); }

/* ---- Menü von der Seite (Handy) ------------------------------------------------------- */

.as-burger, .as-menue-schleier, .as-menue-zu { display: none; }
/* Das Ankreuzfeld ist nie zu sehen – nur sein Schalter. Es muss trotzdem im Baum stehen und
   bedienbar bleiben (`display: none` nähme ihm den Fokus), deshalb ein Pixel am Rand statt
   einer Ausblendung. Ohne diese Zeile stand am Rechner ein Kästchen in der Kopfleiste. */
.as-menue { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }

@media (max-width: 860px) {
  .as-burger {
    display: grid; align-content: center; gap: 5px;
    width: 44px; height: 44px; padding: 11px; flex: none;
    border: 1px solid var(--as-border); border-radius: 4px;
    background: rgb(255 248 232 / 30%); color: inherit; cursor: pointer;
  }
  .as-burger span { display: block; height: 2px; background: currentColor; border-radius: 1px; }
  .as-nav {
    display: block; position: fixed; top: 0; right: 0; bottom: 0; z-index: 61;
    width: min(78vw, 300px); margin: 0;
    padding: calc(60px + env(safe-area-inset-top)) 22px calc(22px + env(safe-area-inset-bottom));
    background: var(--as-sheet) url('/assets/textures/parchment.jpg') repeat;
    background-size: 320px auto;
    border-left: 1px solid var(--as-border); box-shadow: -6px 0 22px rgb(20 12 6 / 40%);
    transform: translateX(105%); transition: transform .28s ease;
    overflow-y: auto; color: var(--as-ink);
    /* damit das Rechtliche unten sitzt */
    display: flex; flex-direction: column;
  }
  .as-nav a {
    display: block; padding: 12px 0; opacity: 1; font-size: 17px;
    font-family: 'Cinzel', Georgia, serif; letter-spacing: .02em;
    border-bottom: 1px solid var(--as-line); border-top: 0;
  }
  .as-nav a[aria-current="page"] { border-bottom-color: var(--as-gold); }
  /* Rechtliches sitzt am Fuß des Blattes, nicht hinter der letzten Seite. */
  .as-nav .as-nav-recht { display: block; margin-top: auto; padding-top: 14px; }
  .as-nav .as-nav-recht a { font-family: 'Lora', Georgia, serif; font-size: 14.5px; color: var(--as-brown); padding: 9px 0; border-bottom: 0; }
  .as-nav .as-nav-recht a:first-child { border-top: 1px solid var(--as-line); }

  .as-menue-zu {
    display: grid; place-items: center; position: absolute;
    top: calc(12px + env(safe-area-inset-top)); right: 14px;
    width: 40px; height: 40px; font-size: 28px; line-height: 1; color: var(--as-brown); cursor: pointer;
  }
  .as-menue-schleier {
    display: block; position: fixed; inset: 0; z-index: 60; background: rgb(20 12 6 / 44%);
    opacity: 0; pointer-events: none; transition: opacity .28s ease;
  }
  .as-menue:checked ~ .as-nav, .as-nav.offen { transform: none; }
  .as-menue:checked ~ .as-menue-schleier, .as-menue-schleier.offen { opacity: 1; pointer-events: auto; }
  .as-menue:focus-visible ~ .as-burger { outline: 2px solid var(--as-gold); outline-offset: 2px; }

  .as-kopf-innen { padding: 8px 14px; gap: 10px; }
  /* Die Inhaltsseiten stehen auf dem Handy im Menue von der Seite – im Fuss bliebe sonst
     nichts von der Zeile uebrig als eine Treppe aus Woertern. */
  .as-fuss-seite { display: none; }
  .as-fuss-zeile { letter-spacing: .09em; }
  .as-spielen { height: 38px; padding: 0 15px; font-size: 14px; }
  .as-wz { height: 38px; padding: 0 10px; font-size: 13px; }
  /*
   * Unter 470 px traegt die Leiste nur noch das Wappen.
   *
   * Fuenf Dinge passen dort nicht nebeneinander: Wappen, Name, Sprachschalter, Burger und
   * der Knopf ins Spiel. Gemessen brach der Name dreizeilig um und "Jetzt spielen" lief aus
   * dem Bild. Das Wappen allein ist die Marke - es steht in jeder Groesse fuer sich, und der
   * Name steht ohnehin im Titel der Seite.
   */
  @media (max-width: 470px) {
    .as-marke-name { display: none; }
    .as-kopf-innen { gap: 8px; }
    .as-spielen { padding: 0 12px; letter-spacing: 0; }
    .as-wz { padding: 0 8px; }
  }
}

@media (max-width: 620px) {
  :root { --as-rand: 5px; }
  body.as-seite { font-size: 16.5px; }
  .as-marke-name { font-size: 16.5px; }
  .as-marke img { height: 38px; }
  .as-blatt { margin-top: 14px; padding: 22px 18px 26px; border-left: 0; border-right: 0; border-radius: 0; }
  .as-blatt h1 { font-size: 26px; }
  .waren-tabelle { font-size: 14.5px; }
  /* Aus der Tabelle werden Blöcke: Drei Spalten auf 390 px machen aus jeder Beschreibung
     eine Treppe aus Einzelwörtern. Die Beschriftungen kommen aus `data-label`. */
  .waren-tabelle, .waren-tabelle tbody, .waren-tabelle tr, .waren-tabelle td { display: block; width: auto; }
  .waren-tabelle thead { display: none; }
  .waren-tabelle tr { padding: 10px 0; border-bottom: 1px solid var(--as-line); }
  .waren-tabelle td { border: 0; padding: 0; }
  .waren-tabelle .ware { width: auto; font-size: 16px; }
  .waren-tabelle .ware small { font-size: 15px; margin-top: 1px; margin-left: 0; }
  .waren-tabelle .betrieb, .waren-tabelle .braucht { margin-top: 4px; font-size: 14.5px; white-space: normal; }
  .waren-tabelle .betrieb::before, .waren-tabelle .braucht::before {
    content: attr(data-label) ': '; color: var(--as-brown); font-size: 12.5px;
    letter-spacing: .04em; text-transform: uppercase; font-family: 'Cinzel', Georgia, serif;
  }
}