/* Dunkle Grundflaeche, damit die Artworks tragen. Manafarben sind die
   klassischen Kartenrueckenfarben. */

:root {
  --grund: #14100e;
  --grund-2: #1d1815;
  --grund-3: #272020;
  --linie: #3a302c;
  --linie-hell: #514440;
  /* Der Rahmen eines Eingabefelds ist das, woran man es als Eingabefeld
     erkennt - WCAG 1.4.11 verlangt dafuer 3:1. --linie-hell kam gegen den
     Feldgrund auf 1,71:1. Fuer die rein schmueckenden Kanten von Karten und
     Tafeln bleibt es; Bedienelemente bekommen diesen Ton (3,30:1). */
  --linie-feld: #806e66;
  --schrift: #ece3d8;
  --schrift-leise: #9d8f83;
  --gold: #c8a45c;
  --gold-hell: #e5c688;
  --gut: #7bc08a;
  --warn: #e0b055;
  --schlecht: #e07a6a;

  --m-w: #fffbd5;
  --m-u: #aae0fa;
  --m-b: #a9a19c;
  --m-r: #f9aa8f;
  --m-g: #9bd3ae;
  --m-c: #cdc5c2;

  --radius: 8px;
  --schatten: 0 2px 14px rgba(0, 0, 0, .55);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--grund);
  color: var(--schrift);
  font: 15px/1.5 "Segoe UI", system-ui, -apple-system, sans-serif;
}

body.kein-scroll { overflow: hidden; }

h1, h2, h3, h4 {
  margin: 0 0 .4em;
  font-weight: 600;
  letter-spacing: .01em;
}
h1 { font-size: 1.25rem; }
h2 { font-size: 1.15rem; }
h3 { font-size: 1.02rem; }
h4 { font-size: .92rem; color: var(--schrift-leise); text-transform: uppercase; letter-spacing: .07em; }

p { margin: 0 0 .6em; }
code { font-family: "Cascadia Mono", Consolas, monospace; font-size: .86em; background: var(--grund-3); padding: .1em .35em; border-radius: 4px; }

.leise { color: var(--schrift-leise); font-size: .88rem; }
.gut { color: var(--gut); }
.schlecht { color: var(--schlecht); }
.warn { color: var(--warn); }
.dehnung { flex: 1 1 auto; }
.r { text-align: right; }
.trenner { color: var(--linie-hell); }

/* ------------------------------------------------------------- Kopfbereich */

.kopf {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 1.2rem;
  padding: .55rem 1.1rem;
  background: linear-gradient(180deg, #241d19, #1a1512);
  border-bottom: 1px solid var(--linie);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .4);
  flex-wrap: wrap;
}

.marke {
  display: flex;
  align-items: baseline;
  gap: .5rem;
  /* Die Marke ist die h1 der Seite; aussehen soll sie wie vorher. */
  margin: 0;
  font-size: inherit;
  font-weight: 400;
}
.marke-name {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.15rem;
  color: var(--gold-hell);
  letter-spacing: .02em;
}
.marke-zusatz { font-size: .78rem; color: var(--schrift-leise); }

/* Bei 200 % Textgroesse (WCAG 1.4.4) lief die Reihe waagerecht aus dem Bild
   und schob die Seite mit. Umbrechen kostet eine Zeile Hoehe und erspart das
   seitliche Scrollen. */
nav#nav { display: flex; gap: .25rem; flex-wrap: wrap; }

.reiter {
  background: transparent;
  border: 1px solid transparent;
  color: var(--schrift-leise);
  padding: .4rem .9rem;
  border-radius: var(--radius);
  cursor: pointer;
  font-size: .94rem;
  font-family: inherit;
}
.reiter:hover { color: var(--schrift); background: var(--grund-3); }
.reiter.an {
  color: #1a1512;
  background: linear-gradient(180deg, var(--gold-hell), var(--gold));
  border-color: var(--gold);
  font-weight: 600;
}

#status {
  display: flex;
  gap: 1rem;
  font-size: .82rem;
  color: var(--schrift-leise);
}
#status strong { color: var(--schrift); }
.warnzahl { color: var(--warn); }
.warnzahl strong { color: var(--warn); }

main {
  max-width: 1720px;
  margin: 0 auto;
  padding: 1.1rem;
}

/* ---------------------------------------------------------------- Bausteine */

.btn, .btn-klein, .btn-mini {
  font-family: inherit;
  background: var(--grund-3);
  border: 1px solid var(--linie-hell);
  color: var(--schrift);
  border-radius: var(--radius);
  cursor: pointer;
  transition: background .12s, border-color .12s;
}
.btn { padding: .45rem .9rem; font-size: .92rem; }
.btn-klein { padding: .28rem .62rem; font-size: .82rem; }
.btn-mini { padding: .18rem .42rem; font-size: .8rem; line-height: 1; }
/* WCAG 2.5.8: kein Ziel unter 24 × 24 px. Die Mini-Knoepfe waren 19 px hoch. */
.btn-mini { min-width: 24px; min-height: 24px; }
.btn:hover, .btn-klein:hover, .btn-mini:hover {
  background: #342a26; border-color: var(--gold);
}
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn-haupt {
  background: linear-gradient(180deg, var(--gold-hell), var(--gold));
  color: #1a1512; border-color: var(--gold); font-weight: 600;
}
.btn-haupt:hover { background: var(--gold-hell); }
.btn-warn { border-color: #6b3a34; color: var(--schlecht); }
.btn-warn:hover { background: #33211e; border-color: var(--schlecht); }
.btn-klein.an, .umschalter .an {
  background: var(--gold); color: #1a1512; border-color: var(--gold); font-weight: 600;
}
.umschalter { display: inline-flex; gap: .2rem; }

.link {
  background: none; border: none; color: var(--gold-hell); cursor: pointer;
  font: inherit; padding: 0; text-align: left;
}
.link:hover { text-decoration: underline; }

.feld, .feld-klein, .feld-mini {
  font-family: inherit;
  background: var(--grund-3);
  border: 1px solid var(--linie-feld);
  color: var(--schrift);
  border-radius: var(--radius);
  padding: .4rem .55rem;
  font-size: .9rem;
}
.feld-klein { max-width: 9.5rem; }
.feld-mini { padding: .2rem .3rem; font-size: .78rem; max-width: 7.5rem; }
.feld:focus, .feld-mini:focus { outline: 2px solid var(--gold); outline-offset: 1px; }
.feld-suche { flex: 1 1 22rem; min-width: 14rem; }

.chip {
  display: inline-block;
  background: var(--grund-3);
  border: 1px solid var(--linie);
  color: var(--schrift-leise);
  border-radius: 999px;
  padding: .18rem .6rem;
  font-size: .8rem;
  cursor: pointer;
  font-family: inherit;
}
.chip:hover { color: var(--schrift); border-color: var(--gold); }

.plakette {
  display: inline-block;
  border-radius: 999px;
  padding: .12rem .55rem;
  font-size: .76rem;
  font-weight: 600;
  border: 1px solid;
}
.plakette.gut { color: var(--gut); border-color: #2f5b3a; background: #1a2b20; }
.plakette.schlecht { color: var(--schlecht); border-color: #6b3a34; background: #2c1c19; }
.plakette.warn { color: var(--warn); border-color: #6a5326; background: #2a2317; }
.mini-plakette { margin-left: .4rem; font-size: .68rem; }

.schalter {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .86rem; color: var(--schrift-leise); cursor: pointer;
}
.schalter input { accent-color: var(--gold); }

.karte {
  background: var(--grund-2);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  padding: 1rem 1.1rem;
  margin-bottom: 1rem;
}

.knopfreihe { display: flex; gap: .55rem; align-items: center; flex-wrap: wrap; margin-top: .8rem; }
.seitenkopf { display: flex; align-items: center; gap: .7rem; margin: 1.2rem 0 .6rem; flex-wrap: wrap; }
.gruppenkopf { margin: 1.1rem 0 .3rem; }

.leerzustand {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--schrift-leise);
  border: 1px dashed var(--linie-hell);
  border-radius: var(--radius);
}
.leerzustand h2 { color: var(--schrift); }
.fehlerzustand { border-color: #6b3a34; color: var(--schlecht); }
.spur { font-size: .72rem; text-align: left; overflow: auto; color: var(--schrift-leise); }

.mehr { display: flex; justify-content: center; gap: .6rem; margin: 1.4rem 0; }

/* -------------------------------------------------------------- Manasymbole */

.mana { display: inline-flex; gap: .12rem; align-items: center; vertical-align: middle; }
.sym {
  display: inline-grid;
  place-items: center;
  /* Feste Groesse in rem, nicht in em: sonst schrumpft die Scheibe mit, sobald
     eine Sorte kleinere Schrift braucht - der Hybridkreis schnitt dadurch
     seinen eigenen Text ab. */
  width: 1.05rem; height: 1.05rem;
  border-radius: 50%;
  font-size: .84rem;
  font-style: normal;
  font-weight: 700;
  color: #2b1c14;
  box-shadow: inset 0 -1px 1px rgba(0, 0, 0, .32);
  line-height: 1;
}

/* Die gezeichneten Symbole sitzen im Kreis, nicht auf ihm: 74 % lassen den
   Rand als Scheibe stehen, so wie es auf der Karte auch aussieht. */
.glyphe { width: 74%; height: 74%; display: block; }
.pip .glyphe { width: 78%; height: 78%; }
.sym-w { background: var(--m-w); }
.sym-u { background: var(--m-u); }
.sym-b { background: var(--m-b); }
.sym-r { background: var(--m-r); }
.sym-g { background: var(--m-g); }
.sym-c, .sym-gen { background: var(--m-c); }
/* Hybrid und Phyrexianisch behalten den Text: zwei Symbole in einer Scheibe
   von 16 Pixeln sind Matsch, "G/W" ist lesbar. Geteilt wird aber diagonal,
   so wie das Spiel es druckt - vorher lief die Kante senkrecht. */
.sym.hybrid { font-size: .62rem; letter-spacing: -.03em; }
.h-w { background: var(--m-w); } .h-u { background: var(--m-u); } .h-b { background: var(--m-b); }
.h-r { background: var(--m-r); } .h-g { background: var(--m-g); } .h-gen { background: var(--m-c); }
.h2-w { background-image: linear-gradient(135deg, transparent 0 50%, var(--m-w) 50% 100%); }
.h2-u { background-image: linear-gradient(135deg, transparent 0 50%, var(--m-u) 50% 100%); }
.h2-b { background-image: linear-gradient(135deg, transparent 0 50%, var(--m-b) 50% 100%); }
.h2-r { background-image: linear-gradient(135deg, transparent 0 50%, var(--m-r) 50% 100%); }
.h2-g { background-image: linear-gradient(135deg, transparent 0 50%, var(--m-g) 50% 100%); }
.h2-gen { background-image: linear-gradient(135deg, transparent 0 50%, var(--m-c) 50% 100%); }

.ci { display: inline-flex; gap: .12rem; vertical-align: middle; }
/* Groesser als der frueher hier stehende blosse Farbpunkt (.72rem): darunter
   ist die Silhouette nicht mehr zu erkennen, und dann traegt wieder allein
   die Farbe die Aussage. */
.pip {
  display: inline-grid; place-items: center;
  width: .98rem; height: .98rem; border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, .35);
  color: #2b1c14;
}
.bg-w { background: var(--m-w); } .bg-u { background: var(--m-u); } .bg-b { background: var(--m-b); }
.bg-r { background: var(--m-r); } .bg-g { background: var(--m-g); }

/* ------------------------------------------------------------- Filterleiste */

.filterleiste {
  background: var(--grund-2);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  padding: .7rem .85rem;
  margin-bottom: .9rem;
}
.filterzeile {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
}
.filterzeile + .filterzeile { margin-top: .55rem; }
.filter-label { font-size: .8rem; color: var(--schrift-leise); text-transform: uppercase; letter-spacing: .06em; }

/* Auf dem Telefon klappt alles ausser dem Suchfeld weg. Am Schreibtisch gibt
   es nichts zu klappen: der Behaelter reicht seine Kinder durch und die
   Leiste sieht aus wie zuvor. */
span.f-mehr { display: contents; }
.f-auf { display: none; }

.farbwahl { display: inline-flex; gap: .2rem; }
.farbknopf {
  display: inline-grid; place-items: center;
  /* 2,15rem statt 1,85rem: bei knapp 28 px blieb von einer Sonne oder einem
     Totenkopf nur ein Fleck uebrig. Das ist die Groesse, ab der die
     Silhouetten auseinanderzuhalten sind. */
  width: 2.15rem; height: 2.15rem; border-radius: 50%;
  border: 2px solid var(--linie-hell);
  font: 700 .78rem/1 inherit;
  color: #2b1c14; cursor: pointer;
  /* Kein opacity fuer den Aus-Zustand: das blendet die dunkle Silhouette in
     den dunklen Untergrund und uebrig bleibt ein blosser Farbpunkt - genau
     das, was die Symbole abloesen sollten. Ein Filter daempft Scheibe und
     Zeichen gemeinsam, das Verhaeltnis zwischen beiden bleibt erhalten. */
  filter: saturate(.35) brightness(.82);
  transition: filter .12s, border-color .12s, transform .1s;
}
/* Feste Groesse statt Prozent. Im Rasterfeld des Knopfes loeste der Browser
   die Breitenangabe gegen eine andere Bezugsgroesse auf als die Hoehe: die
   SVG wurde 8,5 x 15,7 px, und weil sie ihr Seitenverhaeltnis wahrt, zeichnete
   sie sich in der kleineren Achse - 8 px Sonne auf 28 px Scheibe. Genau das
   sah aus wie ein blosser Farbpunkt ohne Symbol. */
.farbknopf .glyphe { width: 1.5rem; height: 1.5rem; }
.farbknopf:hover { filter: saturate(.75) brightness(.92); }
.farbknopf.an { filter: none; border-color: var(--gold-hell); transform: scale(1.06); }

/* Der englische Name unter dem deutschen. Klein und leise: er ist Beleg, nicht
   Titel - gebraucht wird er fuer Regelfundstellen und fremde Kartenlisten. */
.detail-originalname {
  margin: -.35rem 0 .5rem;
  font-size: .82rem;
  color: var(--schrift-leise);
  font-style: italic;
}

.zaehlleiste {
  display: flex; gap: 1.4rem; flex-wrap: wrap; align-items: center;
  padding: .35rem .2rem .75rem;
  font-size: .86rem; color: var(--schrift-leise);
}
.zaehlleiste strong { color: var(--schrift); }
/* Der Preisstand steht direkt vor seinem Knopf, nicht im Zahlenblock links. */
.zaehlleiste .dehnung { min-width: 1rem; }
.ablage-tipp { margin: -.4rem .2rem .7rem; font-size: .8rem; }
kbd {
  font: inherit; font-size: .92em;
  padding: 0 .3rem; border: 1px solid var(--linie-hell); border-bottom-width: 2px;
  border-radius: 3px; background: var(--grund-3); color: var(--schrift);
}
/* Auf dem Telefon gibt es weder Ziehen noch F10 - dort hilft der Satz nicht. */
@media (hover: none) { .ablage-tipp { display: none; } }
.zaehlleiste > .leise + button { margin-left: -1rem; }

/* ------------------------------------------------------------ Kartenkacheln */

.gitter {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(216px, 1fr));
  gap: .85rem;
}

.kachel {
  background: var(--grund-2);
  border: 1px solid var(--linie);
  border-radius: 10px;
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: border-color .12s, transform .12s, box-shadow .12s;
}
.kachel.klickbar { cursor: pointer; }
.kachel:hover { border-color: var(--linie-hell); transform: translateY(-2px); box-shadow: var(--schatten); }
.kachel.ist-markiert { border-color: var(--gold); }
.kachel.ist-gespielt { box-shadow: inset 0 0 0 1px rgba(200, 164, 92, .35); }

.kachel-bild { position: relative; aspect-ratio: 488 / 680; background: #0d0a09; }
.kachel-bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kein-bild {
  width: 100%; height: 100%;
  display: grid; place-items: center; text-align: center;
  padding: .8rem; font-size: .82rem; color: var(--schrift-leise);
}

.badge {
  position: absolute; top: .4rem; right: .4rem;
  background: rgba(15, 11, 9, .88);
  border: 1px solid var(--gold);
  color: var(--gold-hell);
  border-radius: 999px;
  padding: .1rem .5rem;
  font-size: .8rem; font-weight: 700;
}

.deckmarke {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; align-items: center; gap: .35rem;
  background: linear-gradient(180deg, rgba(15, 11, 9, 0), rgba(15, 11, 9, .93) 42%);
  padding: 1.1rem .5rem .4rem;
  font-size: .78rem; color: var(--gold-hell);
}
.deckmarke-punkt {
  width: .5rem; height: .5rem; border-radius: 50%;
  background: var(--gold); flex: 0 0 auto;
  box-shadow: 0 0 6px var(--gold);
}
.deckmarke span:nth-child(2) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.deckmarke.konflikt { color: var(--schlecht); }
.deckmarke.konflikt .deckmarke-punkt { background: var(--schlecht); box-shadow: 0 0 6px var(--schlecht); }
.deckmarke-warn { margin-left: auto; font-weight: 700; flex: 0 0 auto; }

.kachel-kopf {
  display: flex; align-items: center; gap: .35rem;
  padding: .45rem .55rem .1rem;
}
.kachel-name {
  font-size: .87rem; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.kachel-kopf .mana { margin-left: auto; flex: 0 0 auto; }
.kachel-zeile {
  display: flex; gap: .4rem; align-items: baseline;
  padding: 0 .55rem .45rem;
  font-size: .76rem; color: var(--schrift-leise);
}
.kachel-typ { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kachel-set { margin-left: auto; font-weight: 600; letter-spacing: .04em; }
.kachel-fuss {
  display: flex; gap: .3rem; align-items: center; flex-wrap: wrap;
  padding: .4rem .5rem .5rem;
  border-top: 1px solid var(--linie);
  background: rgba(0, 0, 0, .18);
}

/* ------------------------------------------------------------ Mengensteller */

.steller { display: inline-flex; align-items: center; gap: .12rem; }
.steller-label { font-size: .7rem; color: var(--schrift-leise); margin-right: .12rem; }
.steller-btn {
  /* 24 px statt 21: kleiner laesst WCAG 2.5.8 kein Ziel zu. */
  width: 24px; height: 24px;
  background: var(--grund-3); border: 1px solid var(--linie-hell);
  color: var(--schrift); border-radius: 4px; cursor: pointer;
  font: 700 .9rem/1 inherit; padding: 0;
}
.steller-btn:hover { border-color: var(--gold); background: #342a26; }
.steller-feld {
  width: 2.4rem; text-align: center;
  background: var(--grund-3); border: 1px solid var(--linie-hell);
  color: var(--schrift); border-radius: 4px; padding: .15rem .1rem;
  font: inherit; font-size: .82rem;
  -moz-appearance: textfield;
}
.steller-feld::-webkit-outer-spin-button,
.steller-feld::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ----------------------------------------------------------------- Tabellen */

.tabellenrahmen {
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  overflow-x: auto;
  background: var(--grund-2);
}
.tabelle { width: 100%; border-collapse: collapse; font-size: .88rem; }
.tabelle th {
  text-align: left; padding: .5rem .6rem;
  font-size: .74rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--schrift-leise);
  border-bottom: 1px solid var(--linie);
  background: var(--grund-3);
  position: sticky; top: 0; z-index: 1;
}
.tabelle td { padding: .35rem .6rem; border-bottom: 1px solid rgba(58, 48, 44, .55); vertical-align: middle; }
.tabelle tr:hover td { background: rgba(255, 255, 255, .025); }
.tabelle .schmal { width: 3rem; white-space: nowrap; }
.tabelle .mini { width: 2.6rem; }
.miniatur {
  width: 2.2rem; border-radius: 3px; display: block; cursor: pointer;
  transition: transform .1s;
}
.miniatur:hover { transform: scale(1.4); position: relative; z-index: 3; }
.zeile-konflikt td { background: rgba(224, 122, 106, .07); }
.zeile-fehler td { background: rgba(224, 122, 106, .12); }

/* -------------------------------------------------------------------- Decks */

.deckgitter {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: .9rem;
}
.deckkarte {
  background: var(--grund-2);
  border: 1px solid var(--linie);
  border-radius: 10px;
  overflow: hidden;
  transition: border-color .12s, transform .12s;
}
.deckkarte:hover { border-color: var(--gold); transform: translateY(-2px); }
.deckkarte-art { width: 100%; height: 118px; object-fit: cover; display: block; }
.deckkarte-art.leer {
  display: grid; place-items: center;
  background: var(--grund-3); color: var(--schrift-leise); font-size: .84rem;
}
.deckkarte-bild { margin: 0; position: relative; }
.deckkarte-illu {
  padding: .2rem .55rem .25rem;
  font-size: .68rem;
  letter-spacing: .01em;
  color: var(--schrift-leise);
  background: var(--grund-3);
  border-bottom: 1px solid var(--linie);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.deckkarte-inhalt { padding: .7rem .8rem .8rem; }
.deckkarte-name { margin-bottom: .15rem; }
.deckkarte-cmd { font-size: .84rem; color: var(--gold-hell); margin-bottom: .5rem; }
.deckkarte-zeile { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.deckkarte-aktionen { margin-top: .6rem; }

.deckkopf {
  position: relative;
  border: 1px solid var(--linie);
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 1.2rem;
  background: var(--grund-2);
}
.deckkopf-art { position: absolute; inset: 0; }
.deckkopf-art img { width: 100%; height: 100%; object-fit: cover; opacity: .28; }
.deckkopf-inhalt {
  position: relative;
  padding: .9rem 1.1rem 1rem;
  background: linear-gradient(90deg, rgba(20, 16, 14, .93), rgba(20, 16, 14, .62));
}
.deckkopf-zeile { display: flex; align-items: center; gap: .6rem; margin-bottom: .5rem; }
.deckname {
  background: transparent; border: none; border-bottom: 1px dashed transparent;
  color: var(--gold-hell);
  font: 600 1.5rem/1.2 Georgia, "Times New Roman", serif;
  width: 100%; padding: .1rem 0;
}
.deckname:hover { border-bottom-color: var(--linie-hell); }
/* Der Fokusring bleibt (er kam vorher weg); die Unterkante faerbt sich
   zusaetzlich. */
.deckname:focus { border-bottom-color: var(--gold); }
.deckkopf-meta {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  margin-top: .4rem; font-size: .88rem; color: var(--schrift-leise);
}
/* Die Illustration im Hintergrund braucht ihren Namen wie jede andere. */
.deckkopf-illu {
  margin: .5rem 0 0; font-size: .7rem; color: var(--schrift-leise); text-align: right;
}

.kommandeurbereich { margin-bottom: 1.3rem; }
.cmd-reihe { display: flex; gap: 1rem; flex-wrap: wrap; }
.cmd-platz {
  display: flex; gap: .8rem;
  background: var(--grund-2); border: 1px solid var(--linie);
  border-radius: 10px; padding: .7rem; flex: 1 1 340px; max-width: 520px;
}
.cmd-bild { width: 118px; border-radius: 6px; cursor: pointer; align-self: flex-start; }
.cmd-text { display: flex; flex-direction: column; gap: .3rem; align-items: flex-start; }
.cmd-leer { flex-direction: column; border-style: dashed; }
.cmd-suche { width: 100%; }
.cmd-suche .feld { width: 100%; }
.cmd-treffer { display: flex; flex-direction: column; gap: .25rem; margin-top: .5rem; max-height: 320px; overflow-y: auto; }
.cmd-vorschlag {
  display: flex; align-items: center; gap: .6rem; text-align: left;
  background: var(--grund-3); border: 1px solid var(--linie);
  color: var(--schrift); border-radius: 6px; padding: .3rem .5rem;
  cursor: pointer; font: inherit; font-size: .84rem;
}
.cmd-vorschlag:hover { border-color: var(--gold); }
.cmd-vorschlag img { width: 2.4rem; border-radius: 3px; }
.cmd-vorschlag .ci { margin-left: auto; }

/* ------------------------------------------------------------ Regelbefunde */

.befunde { margin-bottom: 1.4rem; }

/* Die Regelpruefung sitzt in <details>. Der Pfeil des Browsers wird ersetzt,
   damit der Kopf dieselbe Zeile bleibt wie die uebrigen Abschnittskoepfe. */
.befund-kopf {
  display: flex; align-items: center; gap: .7rem; flex-wrap: wrap;
  margin: 1.2rem 0 .6rem;
  cursor: pointer; list-style: none;
}
.befund-kopf::-webkit-details-marker { display: none; }
.befund-kopf h3 { margin: 0; }
.befund-kopf:hover h3 { color: var(--gold-hell); }
.befund-pfeil {
  color: var(--schrift-leise); font-size: .9rem;
  transition: transform .14s;
}
.befunde[open] .befund-pfeil { transform: rotate(180deg); }
.befunde[open] .befund-kopf { margin-bottom: .5rem; }
.befundliste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .35rem; }
.befund {
  display: flex; gap: .65rem; align-items: flex-start;
  background: var(--grund-2);
  border: 1px solid var(--linie);
  border-left-width: 3px;
  border-radius: 6px;
  padding: .5rem .7rem;
}
.befund.b-ok { border-left-color: var(--gut); }
.befund.b-warnung { border-left-color: var(--warn); }
.befund.b-fehler { border-left-color: var(--schlecht); background: #241a18; }
.befund-marke {
  display: inline-grid; place-items: center;
  width: 1.3rem; height: 1.3rem; border-radius: 50%;
  font-size: .8rem; font-weight: 700; flex: 0 0 auto;
}
.b-ok .befund-marke { background: #1a2b20; color: var(--gut); }
.b-warnung .befund-marke { background: #2a2317; color: var(--warn); }
.b-fehler .befund-marke { background: #2c1c19; color: var(--schlecht); }
.befund-text { min-width: 0; }
.befund-text p { margin: .15rem 0 0; font-size: .86rem; color: var(--schrift-leise); }
.befund-karten { display: flex; gap: .25rem; flex-wrap: wrap; margin-top: .45rem; }

/* Stand der Verbotenenliste unter der Regelpruefung: eine Fussnote, kein Befund. */
.bannstand {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
  margin-top: .7rem;
  padding-top: .6rem;
  border-top: 1px solid var(--linie);
}

/* -------------------------------------------------------------- Statistiken */

.statistik { margin-bottom: 1.2rem; }
.statistik-gitter {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.stat-block {
  background: var(--grund-2); border: 1px solid var(--linie);
  border-radius: var(--radius); padding: .8rem .9rem;
}

.kurve { display: flex; align-items: flex-end; gap: .3rem; height: 132px; }
.kurve-spalte { flex: 1; display: flex; flex-direction: column; align-items: center; height: 100%; }
.kurve-zahl { font-size: .7rem; color: var(--schrift-leise); height: 1rem; }
.kurve-balken {
  width: 100%; min-height: 2px;
  background: linear-gradient(180deg, var(--gold-hell), #8a6f34);
  border-radius: 3px 3px 0 0;
  margin-top: auto;
}
.kurve-marke { font-size: .72rem; color: var(--schrift-leise); margin-top: .2rem; }

.pips { display: flex; flex-direction: column; gap: .35rem; }
.pip-zeile { display: flex; align-items: center; gap: .5rem; }
.pip-balken { flex: 1; height: .62rem; background: var(--grund-3); border-radius: 999px; overflow: hidden; }
.pip-fuellung { height: 100%; border-radius: 999px; }
.pip-zahl { font-size: .8rem; color: var(--schrift-leise); min-width: 1.8rem; text-align: right; }

.typen { display: flex; flex-direction: column; gap: .2rem; font-size: .88rem; }
.typ-zeile { display: flex; justify-content: space-between; border-bottom: 1px solid rgba(58, 48, 44, .5); padding: .15rem 0; }

/* ---------------------------------------------------------------- Overlay */

.overlay {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(8, 6, 5, .84);
  backdrop-filter: blur(3px);
  display: grid; place-items: center;
  padding: 1.2rem;
  overflow-y: auto;
}
.overlay-zu {
  position: fixed; top: .7rem; right: 1rem; z-index: 92;
  width: 2.3rem; height: 2.3rem; border-radius: 50%;
  background: var(--grund-3); border: 1px solid var(--linie-hell);
  color: var(--schrift); font-size: 1.3rem; cursor: pointer; line-height: 1;
}
.overlay-zu:hover { border-color: var(--gold); }
.detail {
  background: var(--grund-2);
  border: 1px solid var(--linie-hell);
  border-radius: 12px;
  box-shadow: var(--schatten);
  max-width: 940px; width: 100%;
}
.detail-inner { display: grid; grid-template-columns: 320px 1fr; gap: 1.2rem; padding: 1.2rem; }
/* Grid-Kinder haben von Haus aus min-width: auto und wachsen damit ueber ihre
   Spur hinaus. Die rechte Spalte traegt die Datentabelle mit ihren festen
   Beschriftungsbreiten; ohne diese Zeile schiebt sie die Tafel im Bereich
   zwischen Umbruchpunkt (720px) und Hoechstbreite (940px) aus dem Fenster,
   und der abgeschnittene Teil ist nicht einmal scrollbar erreichbar. */
.detail-inner > * { min-width: 0; }
.detail-inner.einspaltig { grid-template-columns: 1fr; }
.detail-bild { position: relative; }
.detail-bild img { width: 100%; border-radius: 10px; display: block; }
.dreh {
  position: absolute; bottom: .6rem; left: 50%; transform: translateX(-50%);
  background: rgba(15, 11, 9, .9); border: 1px solid var(--gold);
  color: var(--gold-hell); border-radius: 999px; padding: .25rem .7rem;
  cursor: pointer; font: inherit; font-size: .8rem;
}
.detail-name { font-family: Georgia, serif; color: var(--gold-hell); }
.detail-kosten { margin-bottom: .3rem; }
.detail-typ { color: var(--schrift-leise); font-size: .9rem; margin-bottom: .6rem; }
.detail-regeltext {
  background: var(--grund-3); border: 1px solid var(--linie);
  border-radius: 6px; padding: .6rem .75rem; margin-bottom: .8rem;
  font-size: .89rem;
}
.detail-regeltext .regel { margin: 0 0 .45rem; }
.detail-regeltext .regel:last-child { margin-bottom: 0; }
.detail-regeltext .pt { text-align: right; font-weight: 700; margin: .3rem 0 0; }
.seiten-name { margin: .5rem 0 .1rem; color: var(--gold-hell); text-transform: none; letter-spacing: 0; font-size: .92rem; }
.seiten-typ { font-size: .82rem; color: var(--schrift-leise); margin: 0 0 .3rem; }

.detail-daten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: .1rem .8rem; margin: 0 0 .8rem;
}
.paar { display: flex; gap: .5rem; font-size: .86rem; padding: .18rem 0; border-bottom: 1px solid rgba(58, 48, 44, .45); }
.paar dt { color: var(--schrift-leise); min-width: 9rem; margin: 0; }
.paar dd { margin: 0; }
.detail-aktionen { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: .7rem; }
.detail-link { color: var(--gold-hell); font-size: .86rem; }

.textblock {
  width: 100%; min-height: 340px;
  background: var(--grund-3); border: 1px solid var(--linie-hell);
  color: var(--schrift); border-radius: 6px; padding: .6rem;
  font-family: "Cascadia Mono", Consolas, monospace; font-size: .82rem;
}

/* ----------------------------------------------------------------- Import */

/* Deckimport: das Eingabefeld ist kuerzer als der Textblock der Detailansicht -
   eine Deckliste liest man beim Einfuegen nicht, man prueft die Vorschau. */
.textblock-klein { min-height: 170px; }
/* Das Dateifeld selbst bleibt verborgen - bedient wird es ueber sein Label. */
#deckimport input[type=file] { display: none; }
#sicherung input[type=file] { display: none; }
.dimport-vorschau { margin: .8rem 0; }
.dimport-vorschau .detail-daten { margin: 0 0 .6rem; }
.dimport-felder {
  display: flex; flex-wrap: wrap; align-items: center; gap: .9rem;
  margin: .8rem 0 .6rem;
}
.dimport-felder .feld { flex: 0 1 18rem; }
.dimport-bericht h4 { margin: 1rem 0 .3rem; font-size: .92rem; }

.sicherung-vorschau { margin: .9rem 0 0; }
.sicherung-vorschau h4 { margin: 0 0 .4rem; font-size: .92rem; }
.sicherung-vorschau .detail-daten { margin: 0 0 .6rem; }

.ablage {
  border: 2px dashed var(--linie-hell);
  border-radius: var(--radius);
  padding: 1.6rem;
  text-align: center;
  margin-top: .8rem;
}
.ablage.bereit { border-color: var(--gold); background: rgba(200, 164, 92, .07); }
.ablage input[type=file] { display: none; }

.zuordnung {
  display: grid; gap: .5rem;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  margin: .8rem 0;
}
.zuordnung-zeile {
  display: flex; flex-direction: column; gap: .25rem;
  background: var(--grund-3); border: 1px solid var(--linie);
  border-radius: 6px; padding: .5rem .6rem;
}
.zuordnung-zeile.fehlt { border-color: var(--schlecht); }
.zuordnung-zeile label { display: flex; flex-direction: column; gap: .1rem; font-size: .88rem; }
.pflicht { color: var(--schlecht); font-size: .74rem; }
.hilfe { font-size: .76rem; }

.hinweis {
  border-radius: 6px; padding: .55rem .75rem; font-size: .88rem;
  border: 1px solid; margin: .7rem 0;
}
.hinweis-gut { border-color: #2f5b3a; background: #1a2b20; color: #cfe6d6; }
.hinweis-warn { border-color: #6b3a34; background: #2c1c19; color: #eccfc9; }

.fehlerliste { font-size: .82rem; color: var(--schrift-leise); max-height: 300px; overflow-y: auto; padding-left: 1.2rem; }
.fehlerliste li { margin-bottom: .15rem; }

.syntaxhilfe { text-align: left; display: inline-block; font-size: .88rem; }

/* --------------------------------------------------------------- Meldungen */

.meldungen {
  position: fixed; bottom: 1rem; right: 1rem; z-index: 95;
  display: flex; flex-direction: column; gap: .4rem; align-items: flex-end;
}
.meldung {
  background: var(--grund-3);
  border: 1px solid var(--linie-hell);
  border-left: 3px solid var(--gold);
  border-radius: 6px;
  padding: .5rem .8rem;
  font-size: .88rem;
  box-shadow: var(--schatten);
  max-width: 26rem;
  transition: opacity .35s, transform .35s;
}
.meldung.m-gut { border-left-color: var(--gut); }
.meldung.m-warn { border-left-color: var(--warn); }
.meldung.m-schlecht { border-left-color: var(--schlecht); }
.meldung.weg { opacity: 0; transform: translateX(1rem); }

/* ------------------------------------------------------------- Deckablage */

/* Faehrt von rechts ein, sobald eine Karte gezogen wird. Fixiert, damit sie
   auch beim Ziehen aus einer langen Tabelle erreichbar bleibt. */
#deckablage {
  position: fixed; top: 50%; right: 0; z-index: 94;
  transform: translate(105%, -50%);
  width: 15.5rem; max-height: 78vh; overflow-y: auto;
  background: var(--grund-2);
  border: 1px solid var(--gold); border-right: none;
  border-radius: var(--radius) 0 0 var(--radius);
  box-shadow: var(--schatten);
  padding: .7rem;
  transition: transform .16s ease-out;
  pointer-events: none;
}
#deckablage.offen { transform: translate(0, -50%); pointer-events: auto; }

.ablage-kopf {
  font-size: .74rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--schrift-leise); margin-bottom: .15rem;
}
.ablage-karte {
  font-weight: 600; font-size: .92rem; line-height: 1.25;
  margin-bottom: .6rem; padding-bottom: .5rem;
  border-bottom: 1px solid var(--linie);
}
.ablage-liste { display: flex; flex-direction: column; gap: .3rem; }
.ablage-zeile { display: flex; gap: .3rem; }
.ablage-ziel {
  flex: 1; display: flex; align-items: center; justify-content: space-between;
  gap: .4rem; min-width: 0;
  padding: .45rem .55rem;
  border: 1px dashed var(--linie-hell); border-radius: var(--radius);
  background: var(--grund-3);
  font-family: inherit; font-size: .86rem; line-height: inherit;
  color: inherit; text-align: left; cursor: pointer;
  transition: border-color .1s, background .1s;
}
/* Knoepfe, damit die Tafel auch ohne Maus bedienbar ist (Umschalt+F10). */
.ablage-ziel:hover { border-color: var(--gold); }
.ablage-ziel.bereit {
  border-style: solid; border-color: var(--gold-hell);
  background: rgba(200, 164, 92, .22);
}
/* Kinder eines Abwurfziels loesen beim Ueberfahren dragleave aus - die
   Umrandung flackerte dadurch. Ohne Zeigerereignisse bleibt sie ruhig. */
.ablage-ziel > * { pointer-events: none; }
.ablage-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ablage-lage { font-size: .74rem; color: var(--schrift-leise); flex: 0 0 auto; }
.ablage-cmd {
  flex: 0 0 auto; justify-content: center;
  width: 2.1rem; padding: .45rem 0;
  color: var(--schrift-leise);
}
.ablage-cmd.an { color: var(--gold-hell); border-color: var(--gold); }
.ablage-neu { color: var(--schrift-leise); justify-content: center; }
.ablage-leer { font-size: .82rem; color: var(--schrift-leise); }

/* ============================================================ Handy ========

   Unter 720 px steht die Seite auf einem Telefon in Hochkant. Das ist keine
   verkleinerte Fassung des Schreibtischs, sondern drei Umbauten:

   1. Die Reiter wandern an den unteren Rand. Oben sind sie mit dem Daumen
      nicht zu erreichen, und sie kosten dort Hoehe, die den Karten fehlt.
   2. Die Filterleiste klappt zu. Aufgeklappt fuellt sie den ganzen Schirm,
      und man sieht keine einzige Karte mehr.
   3. Alles Antippbare wird groesser. Ein Knopf von 22 px trifft man mit der
      Maus, mit dem Finger nicht.

   Was hier NICHT steht: eine eigene Handy-Ansicht. Es gibt eine Seite, und
   sie sieht auf beiden Geraeten anders aus - keine zweite, die man mitpflegen
   muss und die dann auseinanderlaeuft. */

/* ------------------------------------------------------- Stapel einer Auflage

   Die Tafel ist eine Liste, keine Tabelle: die Zeilen sind unterschiedlich
   lang, und auf dem Handy sollen sie umbrechen duerfen statt zu scrollen. */

.stapeltafel {
  background: var(--grund-2);
  border: 1px solid var(--linie-hell);
  border-radius: 12px;
  box-shadow: var(--schatten);
  max-width: 860px; width: 100%;
  padding: 1.1rem;
}
.stapel-kopf { display: flex; gap: .9rem; align-items: flex-start; }
.stapel-bild { width: 86px; border-radius: 6px; flex: 0 0 auto; }
.stapel-name { font-family: Georgia, serif; color: var(--gold-hell); margin: 0 0 .1rem; }
.stapel-kopf p { margin: .1rem 0; }
.stapel-summe { font-size: .92rem; }
.stapel-hinweis {
  color: var(--schrift-leise); font-size: .84rem;
  border-top: 1px solid var(--linie); padding-top: .7rem; margin: .9rem 0 .6rem;
}
.stapelliste { display: flex; flex-direction: column; gap: .4rem; }
.stapelzeile {
  display: flex; flex-wrap: wrap; align-items: center; gap: .4rem;
  background: var(--grund-3);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  padding: .45rem .55rem;
}
.stapelzeile.hervor { border-color: var(--gold); }
.stapelzeile.neu { background: transparent; border-style: dashed; }
.sz-ordner { min-width: 7rem; }
.sz-notiz { min-width: 6rem; flex: 1 1 6rem; max-width: none; }
.sz-wert { margin-left: auto; white-space: nowrap; font-variant-numeric: tabular-nums; }
.sp-aktionen { display: flex; gap: .3rem; align-items: center; }

@media (max-width: 720px) {
  .stapeltafel { padding: .8rem; }
  .stapel-bild { width: 64px; }
  .stapelzeile { gap: .3rem; }
  .sz-notiz, .sz-ordner { flex: 1 1 100%; max-width: none; }
  .sz-wert { margin-left: 0; }


  /* --- Kopf: nur noch Name und Zahlen, die Reiter sind unten --- */
  .kopf { gap: .3rem .7rem; padding: .4rem .7rem; }
  .marke-zusatz { display: none; }
  .marke-name { font-size: 1.05rem; }

  /* Die Statuszahlen brechen nicht um, sie lassen sich schieben: "3520
     Auflagen" auf zwei Zeilen zu zerlegen macht aus einer Zahl zwei. */
  #status {
    width: 100%;
    gap: .8rem;
    font-size: .78rem;
    white-space: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }
  #status::-webkit-scrollbar { display: none; }
  #status > span { flex: 0 0 auto; }

  nav#nav {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 60;
    gap: .2rem;
    padding: .3rem .3rem calc(.3rem + env(safe-area-inset-bottom, 0px));
    background: linear-gradient(0deg, #191411, #241d19);
    border-top: 1px solid var(--linie);
    box-shadow: 0 -2px 12px rgba(0, 0, 0, .45);
  }
  nav#nav .reiter { flex: 1 1 0; padding: .6rem .2rem; font-size: .86rem; }
  /* Platz fuer die Leiste, damit der letzte Eintrag nicht darunter liegt. */
  body { padding-bottom: calc(3.4rem + env(safe-area-inset-bottom, 0px)); }

  main { padding: .65rem .6rem 1rem; }

  /* --- Filterleiste --- */
  .filterleiste { padding: .55rem .6rem; }
  .filterzeile { gap: .4rem; }
  .f-auf { display: inline-block; }
  .filterleiste:not(.offen) .f-mehr { display: none; }
  .feld-suche { flex: 1 1 8rem; min-width: 0; }
  .farbknopf { width: 2.4rem; height: 2.4rem; }

  .zaehlleiste { gap: .35rem .9rem; font-size: .8rem; padding: .3rem .1rem .6rem; }
  .zaehlleiste .dehnung { display: none; }
  .zaehlleiste > .leise + button { margin-left: 0; }

  /* --- Kacheln: zwei nebeneinander --- */
  /* Eine Kachel je Zeile waere ein Bilderbuch, kein Bestandsverzeichnis. */
  .gitter { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
  .kachel-kopf { padding: .35rem .4rem .05rem; gap: .2rem; }
  .kachel-name { font-size: .8rem; }
  /* Die Manakosten stehen auf dem Bild darueber - hier nehmen sie dem Namen
     die halbe Breite weg. */
  .kachel-kopf .mana { display: none; }
  .kachel-zeile { padding: 0 .4rem .35rem; font-size: .7rem; }
  .kachel-fuss { padding: .35rem .35rem .4rem; gap: .25rem .4rem; }
  /* Das Deckmenue faellt aus der Kachel heraus: als Auswahlfeld mit Fingermass
     braucht es eine eigene Zeile und macht den Fuss hoeher als das Bild. Der
     Weg ins Deck laeuft auf dem Telefon ueber die Detailtafel (ein Tipp auf die
     Kachel) - oder ueber die Liste, wo das Feld stehen bleibt. */
  .kachel-fuss .feld-mini { display: none; }
  .deckmarke { font-size: .72rem; padding: .9rem .4rem .3rem; }

  .deckgitter { grid-template-columns: 1fr; }

  /* --- Fingergroessen --- */
  .steller-btn { width: 1.9rem; height: 1.9rem; font-size: 1.02rem; }
  .steller-feld { width: 2.3rem; padding: .28rem .1rem; }
  .steller-label { min-width: 1.6rem; }
  .btn { padding: .55rem 1rem; }
  .btn-klein { padding: .45rem .8rem; font-size: .86rem; }
  .btn-mini { padding: .4rem .6rem; font-size: .9rem; }
  .chip { padding: .35rem .75rem; }

  /* iOS zoomt beim Antippen in jedes Feld hinein, dessen Schrift kleiner als
     16 px ist, und die Seite bleibt danach verschoben stehen. Das ist keine
     Geschmacksfrage, sondern der Grund fuer genau diese Zahl. */
  .feld, .feld-klein, .feld-mini, .steller-feld, .textblock,
  input, select, textarea { font-size: 16px; }
  .feld-klein { max-width: none; }
  .feld-mini { max-width: 9rem; padding: .35rem .4rem; }
  /* Ein Ankreuzfeld ist 13 px gross, seine Zeile 19 px hoch. Beides trifft der
     Zeiger, der Daumen nicht. Die ganze Beschriftung wird zur Tippflaeche. */
  .schalter { min-height: 2.4rem; }
  .schalter input[type="checkbox"] { width: 1.15rem; height: 1.15rem; }

  /* --- Tabellen: schieben statt quetschen --- */
  /* Bei elf Spalten auf 390 px bricht jede Zelle dreizeilig um. Was auch auf
     dem Bild oder in der Detailtafel steht, faellt weg; der Rest bekommt
     seine Breite und die Tabelle wird waagerecht geschoben. */
  .sp-typ, .sp-preis, .sp-gespielt { display: none; }
  .tabelle { min-width: 30rem; }
  .tabelle th, .tabelle td { padding: .4rem .45rem; }
  .miniatur { width: 2.6rem; }
  /* Der Kartenname ist der Weg in die Detailtafel. Als nackter Text war er
     20 px hoch - mit der Maus trifft man das, mit dem Daumen nicht. Die
     Polsterung laesst ihn die Zeilenhoehe fuellen, ohne die Zeile zu dehnen. */
  .tabelle .link { padding: .35rem 0; }
  .tabelle .btn-mini { min-width: 2.3rem; min-height: 2.1rem; }
  /* Beim waagerechten Schieben bleibt der Name stehen - sonst sieht man bei
     "St." und "Wert" nicht mehr, zu welcher Karte die Zahlen gehoeren. */
  .tabelle .sp-name {
    position: sticky; left: 0; z-index: 1;
    background: var(--grund-2);
    box-shadow: 1px 0 0 var(--linie);
  }
  .tabelle th.sp-name { z-index: 2; background: var(--grund-3); }
  /* Die Tönung der Warnzeilen soll auch unter dem stehenden Namen bleiben. */
  .zeile-konflikt .sp-name { background: linear-gradient(rgba(224, 122, 106, .07), rgba(224, 122, 106, .07)), var(--grund-2); }
  .zeile-fehler .sp-name { background: linear-gradient(rgba(224, 122, 106, .12), rgba(224, 122, 106, .12)), var(--grund-2); }

  /* --- Deck --- */
  .deckkopf-inhalt { padding: .7rem .75rem .8rem; }
  .deckname { font-size: 1.3rem; padding: .3rem 0; }
  .cmd-reihe { gap: .6rem; }
  .cmd-platz { flex: 1 1 100%; padding: .55rem; gap: .6rem; }
  .cmd-bild { width: 92px; }
  .kurve { height: 108px; gap: .15rem; }
  .kurve-zahl, .kurve-marke { font-size: .62rem; }

  /* --- Detailtafel --- */
  /* place-items:center schiebt eine hohe Tafel oben aus dem Bild heraus, und
     dorthin kommt man nicht zurueck. Am oberen Rand ausgerichtet bleibt sie
     vollstaendig scrollbar. */
  .overlay { padding: .5rem; align-items: start; }
  .overlay-zu { top: .45rem; right: .5rem; width: 2.6rem; height: 2.6rem; }
  .detail-inner { grid-template-columns: 1fr; gap: .8rem; padding: .8rem; }
  .detail-bild img { max-width: 20rem; margin: 0 auto; }
  .detail-daten { grid-template-columns: 1fr; }
  .paar dt { min-width: 7.5rem; }
  .textblock { min-height: 220px; }

  /* Meldungen ueber der Reiterleiste, nicht dahinter. */
  .meldungen {
    left: .5rem; right: .5rem;
    bottom: calc(4rem + env(safe-area-inset-bottom, 0px));
    align-items: stretch;
  }
  .meldung { max-width: none; }

  .leerzustand { padding: 2rem .8rem; }
  .zuordnung { grid-template-columns: 1fr; }
  .ablage { padding: 1.1rem .7rem; }
}

/* Ohne Zeigergeraet bleibt der Hover-Zustand nach dem Antippen kleben - die
   angetippte Kachel stuende dann dauerhaft angehoben und hell umrandet da,
   als waere sie ausgewaehlt. */
@media (hover: none) {
  .kachel:hover { transform: none; box-shadow: none; border-color: var(--linie); }
  .kachel.ist-markiert:hover { border-color: var(--gold); }
  .deckkarte:hover { transform: none; border-color: var(--linie); }
  .miniatur:hover { transform: none; }
  .farbknopf:hover { filter: saturate(.35) brightness(.82); }
  .farbknopf.an:hover { filter: none; }
}

/* ------------------------------------------------------------- Anmeldeseite */

.anmeldeseite { display: flex; min-height: 100vh; }

.anmeldung {
  margin: auto;
  width: min(26rem, 100% - 2rem);
  padding: 2rem 0;
}

.anmelde-marke {
  font-size: inherit;
  font-weight: 400;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: .5rem;
  margin-bottom: 1rem;
}
.anmelde-marke .marke-name { font-size: 1.5rem; }

.anmelde-tafel { padding: 1.2rem 1.3rem; margin: 0; }

.anmelde-reiter {
  display: flex;
  gap: .25rem;
  margin: -.3rem 0 1rem;
  border-bottom: 1px solid var(--linie);
  padding-bottom: .6rem;
}

.anmelde-form { display: flex; flex-direction: column; gap: .8rem; }
.anmelde-feld { display: flex; flex-direction: column; gap: .25rem; }
.anmelde-feld .feld { width: 100%; }
.anmelde-knopf { margin-top: .2rem; }
/* Platz bleibt reserviert, damit die Tafel beim Fehler nicht springt. */
.anmelde-meldung { margin: 0; min-height: 1.3em; font-size: .86rem; }

.sicherung-vorher { display: flex; align-items: center; gap: .45rem; margin: .8rem 0; }
.sicherung-vorher input { width: 1.1rem; height: 1.1rem; accent-color: var(--gold); }

/* --------------------------------------------------------------- Kontoecke */

.konto {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .82rem;
  color: var(--schrift-leise);
}
.konto-name { color: var(--schrift); }

@media (max-width: 760px) {
  .konto-name { max-width: 7rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* ----------------------------------------------------------- Geteilte Decks */

/* Der Name eines fremden Decks ist Text, kein Eingabefeld - die Ansicht soll
   schon optisch nicht so aussehen, als liesse sich hier etwas aendern. */
.deckname-fest {
  color: var(--gold-hell);
  font: 600 1.5rem/1.2 Georgia, "Times New Roman", serif;
  margin: .1rem 0 0;
}
.plakette.geteilt { color: var(--gold-hell); border-color: #5c4a26; background: #2a2317; }
.besitzer { color: var(--gold-hell); }
.fehlliste { margin: .6rem .9rem .9rem; }
.befund-fuss { margin: .2rem .9rem .9rem; }

@media (max-width: 760px) {
  .deckname-fest { font-size: 1.3rem; }
}


/* --------------------------------------------- Fokus und Meldungen (Probe T)

   Ein sichtbarer Fokusring ist WCAG 2.4.7, Stufe AA. Vorher gab es ihn nur auf
   Eingabefeldern; alles andere verliess sich auf die Voreinstellung des
   Browsers, die auf dunklem Grund kaum zu sehen ist - und .deckname schaltete
   ihn ganz ab. :focus-visible statt :focus: der Ring erscheint beim Tasten,
   nicht bei jedem Mausklick. */
:focus-visible {
  outline: 2px solid var(--gold-hell);
  outline-offset: 2px;
}

/* Der Kartenname in einer Kachel und der Deckname auf einer Deckkachel sind
   jetzt Knoepfe - sie sollen aber weiter wie Text aussehen. */
.kachel-name-knopf {
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  max-width: 100%;
}
.kachel-name-knopf:hover { color: var(--gold-hell); }

/* Meldungen: Text und Schliesskreuz nebeneinander. Fehler bleiben stehen, bis
   das Kreuz gedrueckt wird. */
.meldung { display: flex; align-items: flex-start; gap: .6rem; }
.meldung-text { flex: 1 1 auto; }
.meldung-zu {
  background: none;
  border: 0;
  color: inherit;
  opacity: .65;
  font-size: 1.05rem;
  line-height: 1.2;
  padding: 0 .1rem;
  cursor: pointer;
  flex: 0 0 auto;
}
.meldung-zu:hover { opacity: 1; }
.meldung-zu { min-width: 24px; min-height: 24px; }

/* ------------------------------------------------------- Fußzeile und Recht */

.fusszeile {
  max-width: 1720px;
  margin: 2rem auto 0;
  padding: 1rem 1.1rem 1.6rem;
  border-top: 1px solid var(--linie);
  color: var(--schrift-leise);
  font-size: .78rem;
  line-height: 1.5;
}
.fuss-hinweis { margin: 0 0 .5rem; max-width: 62rem; }
.fuss-links { margin: 0; display: flex; gap: .5rem; align-items: baseline; }
.fuss-links a {
  color: var(--gold-hell); text-decoration: none;
  /* Auf 24 px Hoehe gepolstert (WCAG 2.5.8), ohne die Zeile zu verschieben. */
  display: inline-block; padding: .3rem .15rem; margin: -.3rem -.15rem;
}
.fuss-links a:hover { text-decoration: underline; }
.fuss-links span { color: var(--linie-hell); }

.anmeldeseite { flex-direction: column; }
.anmeldeseite .fusszeile {
  width: min(52rem, 100% - 2rem);
  margin: 0 auto;
  text-align: center;
}
.anmeldeseite .fuss-links { justify-content: center; }

.kopf-link { white-space: nowrap; }

.recht { max-width: 58rem; }
.recht h2 { margin: 0 0 .35rem; }
.recht h3 {
  margin: 1.4rem 0 .4rem;
  color: var(--gold-hell);
  font-size: .95rem;
  letter-spacing: .01em;
}
.recht h3:first-of-type { margin-top: 1rem; }
.recht p { margin: 0 0 .7rem; line-height: 1.6; }
.recht ul { margin: 0 0 .7rem; padding-left: 1.1rem; line-height: 1.6; }
.recht li { margin-bottom: .35rem; }
.recht code {
  background: var(--grund-3);
  border: 1px solid var(--linie);
  border-radius: 4px;
  padding: .05rem .3rem;
  font-size: .86em;
}

.entwurf { border-left: 3px solid var(--gold); }

.platzhalter {
  display: inline-block;
  border: 1px dashed var(--linie-feld);
  border-radius: 4px;
  padding: .05rem .4rem;
  color: var(--schrift-leise);
  background: rgba(200, 164, 92, .06);
}
.anschrift { line-height: 2; }

.pflichthinweis {
  background: var(--grund-3);
  border: 1px solid var(--linie-hell);
  border-radius: var(--radius);
  padding: .8rem 1rem;
  font-style: italic;
}

.tabelle-recht td { vertical-align: top; line-height: 1.5; }
.tabelle-recht th:first-child, .tabelle-recht td:first-child { width: 34%; }

@media (max-width: 720px) {
  .tabelle-recht { min-width: 26rem; }
  .fusszeile { margin-top: 1.4rem; }
}