/* Tabellen, Reiter, Zeitstrahl, Warenliste.
   Laedt zusaetzlich zu dog.css; alle Farben und Radien kommen von dort.

   Durchgehend logische Eigenschaften (inline-start statt left): Arabisch
   spiegelt damit vollstaendig, ohne zweites Stylesheet. Wer hier ein
   `left` einsetzt, bricht genau eine Sprache — und merkt es nicht.        */

/* --------------------------------------------------------------- Tafel */
.tafel {
  margin-block-start: 22px;
  border: 1px solid var(--edge);
  border-radius: var(--r);
  background: var(--card);
  overflow: hidden;
}

/* Reiter ohne JS: der Radioknopf traegt den Zustand, ~ waehlt die Tafel.
   Der Knopf ist optisch weg, aber bedienbar — .vh nimmt ihn aus dem Fluss,
   nicht aus der Reihenfolge.                                             */
.tafel__tabs {
  display: flex;
  gap: 2px;
  padding: 6px 6px 0;
  border-block-end: 1px solid var(--edge);
  background: var(--bar);
  overflow-x: auto;
  scrollbar-width: none;
}
.tafel__tabs::-webkit-scrollbar { display: none }
.tafel__tab {
  flex: 0 0 auto;
  padding: 9px 16px 10px;
  border-radius: 7px 7px 0 0;
  color: var(--fg-mut);
  font: 600 12.5px/1 var(--t);
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
  border-block-end: 2px solid transparent;
  transition: color .16s, background .16s, border-color .16s;
}
.tafel__tab:hover { color: var(--fg-body); background: var(--card-act) }

/* Ein Panel je Achse. Ohne :checked liegt keins offen — deshalb traegt der
   erste Radioknopf im Markup `checked`.                                  */
.tafel__panel { display: none }
.tafel__panel--solo { display: block }

/* Zuordnung ueber die laufende NUMMER des Reiters.

   Zwei Anlaeufe waren vorher falsch: nth-of-type zaehlt Elemente eines
   TYPS (Reiterleiste und Tafeln sind alle divs — die erste "Tafel" war
   also die Reiterleiste), und feste Achsennamen im Stylesheet lassen jede
   neue Wertung unsichtbar bleiben, bis jemand daran denkt, hier eine Regel
   nachzutragen. Mit Nummern gilt die Regel fuer jede Achse, die es je
   geben wird — sechs Plaetze reichen: drei Saisonwertungen (Monster,
   Fische, Spieler) und drei Dauerwertungen (Stufe, Spielzeit, Reichtum). */
#a-1:checked ~ .tafel__panel[data-n="1"]{display:block}
#a-2:checked ~ .tafel__panel[data-n="2"]{display:block}
#a-3:checked ~ .tafel__panel[data-n="3"]{display:block}
#a-4:checked ~ .tafel__panel[data-n="4"]{display:block}
#a-5:checked ~ .tafel__panel[data-n="5"]{display:block}
#a-6:checked ~ .tafel__panel[data-n="6"]{display:block}

#a-1:checked ~ .tafel__tabs .tafel__tab:nth-child(1),
#a-2:checked ~ .tafel__tabs .tafel__tab:nth-child(2),
#a-3:checked ~ .tafel__tabs .tafel__tab:nth-child(3),
#a-4:checked ~ .tafel__tabs .tafel__tab:nth-child(4),
#a-5:checked ~ .tafel__tabs .tafel__tab:nth-child(5),
#a-6:checked ~ .tafel__tabs .tafel__tab:nth-child(6) {
  color: var(--gold-hi);
  background: var(--card);
  border-block-end-color: var(--gold);
}

#a-1:focus-visible ~ .tafel__tabs .tafel__tab:nth-child(1),
#a-2:focus-visible ~ .tafel__tabs .tafel__tab:nth-child(2),
#a-3:focus-visible ~ .tafel__tabs .tafel__tab:nth-child(3),
#a-4:focus-visible ~ .tafel__tabs .tafel__tab:nth-child(4),
#a-5:focus-visible ~ .tafel__tabs .tafel__tab:nth-child(5),
#a-6:focus-visible ~ .tafel__tabs .tafel__tab:nth-child(6) {
  outline: 2px solid var(--gold);
  outline-offset: -2px;
}

/* Sieger der abgelaufenen Saison — vier Namen, keine Tabelle. */
.sieger{margin-block-start:34px}
.sieger__l{display:grid;gap:10px;margin-block-start:14px;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.sieger__i{padding:13px 16px;border:1px solid var(--edge);
  border-radius:var(--r);background:var(--card)}
.sieger__i .k{display:block;color:var(--fg-faint);font-size:11.5px;
  letter-spacing:.08em;text-transform:uppercase}
.sieger__i .n{display:block;margin-block-start:4px;color:var(--gold-hi);
  font:600 17px/1.2 var(--d)}

/* -------------------------------------------------------------- Tabelle */
.tafel__t {
  inline-size: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.tafel__t th {
  padding: 11px 14px;
  color: var(--fg-faint);
  font: 600 11px/1 var(--t);
  letter-spacing: .09em;
  text-transform: uppercase;
  text-align: start;
  border-block-end: 1px solid var(--edge);
  white-space: nowrap;
}
.tafel__t td {
  padding: 11px 14px;
  color: var(--fg-body);
  border-block-end: 1px solid color-mix(in srgb, var(--edge) 55%, transparent);
}
.tafel__t tbody tr:last-child td { border-block-end: 0 }
.tafel__t tbody tr:hover td { background: var(--card-act) }

.tafel__t .c-rank { inline-size: 62px; color: var(--fg-faint) }
.tafel__t .c-val  { text-align: end; white-space: nowrap }
.tafel__t .c-job,
.tafel__t .c-guild { color: var(--fg-mut) }
.tafel__t .nm { color: var(--fg); font-weight: 600 }

/* Der Name fuehrt zum Charakterbogen. Er sieht trotzdem aus wie ein Name
   und nicht wie ein Verweis: bei 25 Zeilen in sechs Reitern waeren das
   hundertfuenfzig goldene Unterstreichungen, und die Tafel liest sich dann
   als Linkliste statt als Rangliste. Die Unterstreichung kommt beim
   Ueberfahren — dort, wo man sie braucht.

   Die Tastaturmarkierung bleibt IMMER sichtbar. Wer mit der Tabulatortaste
   durch die Tafel geht, braucht sie staerker als jeder andere: ohne sie
   springt der Blick durch 150 gleich aussehende Zellen. */
a.nm { text-decoration: none; color: var(--fg) }
a.nm:hover { color: var(--gold-hi);
             text-decoration: underline; text-underline-offset: 2px }
a.nm:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px;
                     border-radius: 2px }

/* Die ersten drei bekommen eine Kante, keinen Farbklecks: ein goldener
   Balken an der Innenkante liest sich als Rang, eine goldene Zeile als
   Fehler.                                                                */
.top td:first-child {
  position: relative;
  color: var(--fg);
  font-weight: 700;
}
.top td:first-child::before {
  content: "";
  position: absolute;
  inset-block: 6px;
  inset-inline-start: 0;
  inline-size: 3px;
  border-radius: 0 2px 2px 0;
  background: var(--gold-deep);
}
.top--1 td:first-child::before { background: var(--gold) }
.top--2 td:first-child::before { background: var(--gold-dim) }

.tag {
  display: inline-block;
  margin-inline-start: 7px;
  padding: 2px 7px 3px;
  border-radius: 999px;
  font: 600 10.5px/1 var(--t);
  letter-spacing: .05em;
  text-transform: uppercase;
  vertical-align: 1px;
}
.tag--gm {
  color: var(--gold-hi);
  background: color-mix(in srgb, var(--gold) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--gold) 30%, transparent);
}

.leer {
  padding: 34px 18px;
  color: var(--fg-mut);
  text-align: center;
}

/* ------------------------------------------------------------ Zeitstrahl */
.zeit {
  position: relative;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
  /* Der Strahl darf so breit sein wie die Seite, der Text nicht: ueber
     etwa 65 Zeichen verliert das Auge beim Zeilenwechsel die Spur.      */
  max-inline-size: 78ch;
}
/* Die Linie ist eine Kante, kein Bild: sie steht auch dann, wenn weder
   SVG noch Webfont geladen werden — bei Tor-Safest der Normalfall.       */
.zeit::before {
  content: "";
  position: absolute;
  inset-block: 10px;
  inset-inline-start: 7px;
  inline-size: 1px;
  background: linear-gradient(var(--edge), var(--edge-lit), transparent);
}
.zeit__i {
  position: relative;
  padding-inline-start: 30px;
  padding-block-end: 26px;
}
.zeit__i::before {
  content: "";
  position: absolute;
  inset-block-start: 7px;
  inset-inline-start: 3px;
  inline-size: 9px;
  block-size: 9px;
  border-radius: 999px;
  background: var(--gold-deep);
  box-shadow: 0 0 0 3px var(--page);
}
.zeit__i:first-child::before { background: var(--gold) }
.zeit__d {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-block-end: 5px;
}
.zeit__d time {
  color: var(--fg-faint);
  font: 600 12px/1 var(--t);
  letter-spacing: .05em;
  font-variant-numeric: tabular-nums;
}
.zeit__d .tag {
  margin-inline-start: 0;
  color: var(--fg-mut);
  background: var(--bar);
  border: 1px solid var(--edge);
}
.zeit__c h2 {
  margin: 0 0 6px;
  font-size: 19px;
  line-height: 1.25;
}
.zeit__c p {
  margin: 0;
  max-inline-size: 64ch;
  color: var(--fg-body);
  line-height: 1.6;
}
.zeit__l {
  margin: 9px 0 0;
  padding-inline-start: 18px;
  color: var(--fg-mut);
  font-size: 14px;
  line-height: 1.65;
}
.zeit__l li { margin-block-end: 3px }

/* ------------------------------------------------------------------ Shop */
.shop-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
}
.konto {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 11px 16px;
  border: 1px solid var(--edge);
  border-radius: var(--r);
  background: var(--sunk);
}
.konto .k { color: var(--fg-faint); font-size: 12px; text-transform: uppercase;
            letter-spacing: .08em }
.konto .v { color: var(--gold-hi); font: 700 22px/1 var(--t);
            font-variant-numeric: tabular-nums }
.konto .e { color: var(--fg-mut); font-size: 12.5px }

.kauf {
  display: grid;
  gap: 22px;
  margin-block-start: 26px;
}

/* Das Voucher-Feld traegt jetzt die ganze Spalte, nicht mehr die halbe:
   `.panel` deckelt auf 460px, das gilt hier nicht. Feld und Knopf stehen
   in einer Reihe, darunter der Hinweis.                              */
.voucher { display: grid; gap: 14px; margin: 0; max-inline-size: none }
.voucher .field { margin-block-end: 0 }
.voucher .field input { font-family: var(--n, ui-monospace, monospace) }
.voucher__reihe { display: grid; gap: 12px; align-items: start;
  grid-template-columns: minmax(0, 1fr) auto }
.voucher__reihe .btn { block-size: 46px; white-space: nowrap }
@media (max-width: 600px) { .voucher__reihe { grid-template-columns: 1fr } }

/* Pakete als Reihe ganz unten. Die Trennlinien macht `gap: 1px` auf
   dunklem Grund - so sitzen sie richtig, egal wie viele Pakete im
   Katalog stehen und in wie viele Zeilen sie umbrechen.              */
.pakete { display: grid; gap: 12px }
.pakete h2 { margin: 0; font: 700 19px/1.3 var(--t); color: var(--gold-hi) }
.pakete h2::after { content: none }
.packs--reihe { max-inline-size: none; gap: 1px; background: var(--edge);
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)) }
.packs--reihe .pack { position: relative; display: grid; gap: 6px;
  justify-items: center; text-align: center; align-content: start;
  padding: 26px 14px 18px; border-block-end: 0 }
.packs--reihe .pack .c { min-inline-size: 0; font-size: 19px }
.packs--reihe .pack .p { margin-inline-start: 0 }
.packs--reihe .tag { position: absolute;
  inset-block-start: 9px; inset-inline-end: 9px }

.ware { display: grid; gap: 10px }
.ware__i {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 16px;
  padding: 12px 16px;
  border: 1px solid var(--edge);
  border-radius: var(--r);
  background: var(--card);
}
.ware__i:hover { background: var(--card-act); border-color: var(--edge-lit) }
.ware__i--aus { opacity: .55 }
.ware__ic {
  display: grid;
  place-items: center;
  inline-size: 56px;
  block-size: 56px;
  border: 1px solid var(--edge);
  border-radius: 8px;
  background: var(--sunk);
}
.ware__ic img { inline-size: auto; block-size: auto; max-inline-size: 44px;
                max-block-size: 44px }
.ware__t h3 { margin: 0 0 3px; font-size: 15.5px; color: var(--fg) }
.ware__t p  { margin: 0; color: var(--fg-mut); font-size: 13.5px }
.ware__p { text-align: end; white-space: nowrap }
.ware__p .num { color: var(--gold-hi); font: 700 17px/1 var(--t);
                font-variant-numeric: tabular-nums }
.ware__p .e   { display: block; margin-block-start: 3px; color: var(--fg-faint);
                font-size: 11.5px; text-transform: uppercase;
                letter-spacing: .07em }
.ware__b { display: flex; align-items: center; gap: 8px }
.ware__b select {
  padding: 8px 10px;
  border: 1px solid var(--edge);
  border-radius: 7px;
  background: var(--sunk);
  color: var(--fg-body);
  font: inherit;
  font-size: 13px;
}

.st {
  display: inline-block;
  padding: 3px 9px 4px;
  border-radius: 999px;
  font-size: 12px;
  border: 1px solid var(--edge);
  color: var(--fg-mut);
  background: var(--bar);
}
.st--paid, .st--applied { color: #9BD2A0;
  border-color: color-mix(in srgb, #9BD2A0 32%, transparent) }
.st--pending { color: var(--gold-hi);
  border-color: color-mix(in srgb, var(--gold) 30%, transparent) }

/* ------------------------------------------------------------ Schmal */
@media (max-width: 720px) {
  /* Tabellen duerfen waagerecht scrollen — aber in ihrem eigenen
     Behaelter, damit die Seite es nicht tut.                             */
  .tafel__panel { overflow-x: auto }
  .tafel__t { min-inline-size: 520px }
  .ware__i {
    grid-template-columns: 48px minmax(0, 1fr);
    row-gap: 10px;
  }
  .ware__p, .ware__b { grid-column: 2 }
  .ware__p { text-align: start }
}

/* ---------------------------------------------------- Charakterauswahl */
/* Vier Plaetze, so viele wie im Spiel. Leere Plaetze sind gezeichnete
   Rahmen, keine Luecken — sonst steht eine einzelne Karte allein in einer
   Reihe und die Seite sieht kaputt aus statt leer. */
.waehler{display:grid;gap:14px;margin-block-start:24px;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.waehler__i{position:relative;display:flex;flex-direction:column;
  border:1px solid var(--edge);border-radius:var(--r);background:var(--card);
  overflow:hidden;text-decoration:none;
  transition:border-color .18s var(--ease),background .18s var(--ease)}
a.waehler__i:hover{border-color:var(--edge-lit);background:var(--card-act)}
.waehler__bild{position:relative;aspect-ratio:3/4;
  background:linear-gradient(180deg,#141109,#0A0907 66%)}
.waehler__bild img{position:absolute;inset:0;inline-size:100%;
  block-size:100%;object-fit:contain;object-position:50% 100%;
  filter:drop-shadow(0 12px 16px rgba(0,0,0,.6));
  transition:transform .3s var(--ease)}
a.waehler__i:hover .waehler__bild img{transform:scale(1.04)}
.waehler__t{display:grid;gap:3px;padding:13px 15px 14px}
.waehler__t .n{color:var(--fg);font:600 17px/1.2 var(--d)}
.waehler__t .s{color:var(--fg-mut);font-size:13px}
.waehler__t .g,
.waehler__t .p{color:var(--fg-faint);font-size:12px}
.waehler__go{padding:0 15px 14px;color:var(--gold);font:600 12px var(--t);
  letter-spacing:.06em;text-transform:uppercase}
a.waehler__i:hover .waehler__go{color:var(--gold-hi)}

/* Der leere Platz traegt dieselbe Hoehe wie ein belegter, damit die Reihe
   nicht ausfranst — deshalb dasselbe Seitenverhaeltnis im Bildteil. */
.waehler__i--leer{align-items:center;justify-content:center;
  min-block-size:0;border-style:dashed;background:var(--sunk)}
.waehler__i--leer::before{content:"";display:block;inline-size:1px;
  aspect-ratio:3/4.6}
.waehler__frei{position:absolute;inset:0;display:grid;place-items:center;
  color:var(--fg-faint);font:600 12.5px var(--t);letter-spacing:.08em;
  text-transform:uppercase}

/* ---------------------------------------------------------- Funktionen */
/* Gruppiert statt chronologisch. Die Karten sind bewusst schlicht: der
   Inhalt ist eine Liste von Tatsachen, und jede davon in einen eigenen
   Kasten mit Schatten zu legen macht aus einer Liste eine Verkaufsflaeche. */
.funk{margin-block-start:38px}
.funk > h2{margin-block-end:2px}
.funk__l{display:grid;gap:12px;margin-block-start:16px;
  grid-template-columns:repeat(auto-fit,minmax(290px,1fr))}
.funk__i{position:relative;padding:17px 19px 15px;
  border:1px solid var(--edge);border-radius:var(--r);background:var(--card)}
.funk__i h3{margin:0 0 7px;font-size:17px;line-height:1.25;color:var(--fg)}
.funk__i p{margin:0;color:var(--fg-body);font-size:14px;line-height:1.6}
.funk__seit{display:block;margin-block-start:11px;color:var(--fg-faint);
  font:600 11px var(--t);letter-spacing:.07em;text-transform:uppercase;
  font-variant-numeric:tabular-nums}

/* ---------------------------------------------------------------- FAQ */
/* <details>/<summary> statt Klapp-Skript: kann der Browser selbst, laeuft
   ohne JS, die Tastatur bedient es, und die Browsersuche findet auch
   zugeklappten Text. */
.faq{margin-block-start:34px}
.faq__i{border-block-end:1px solid var(--edge)}
.faq__i:first-of-type{border-block-start:1px solid var(--edge)}
.faq__i summary{display:flex;align-items:flex-start;gap:12px;
  padding:16px 2px;color:var(--fg);font:600 16px/1.4 var(--d);
  cursor:pointer;list-style:none;transition:color .16s var(--ease)}
.faq__i summary::-webkit-details-marker{display:none}
/* Das Zeichen dreht sich, statt gegen ein zweites getauscht zu werden —
   ein Bild waere hier bei Tor-Safest weg. */
.faq__i summary::before{content:"+";flex:0 0 auto;inline-size:18px;
  color:var(--gold-dim);font:400 19px/1.25 var(--t);
  transition:transform .2s var(--ease),color .16s var(--ease)}
.faq__i[open] summary::before{transform:rotate(45deg);color:var(--gold)}
.faq__i summary:hover{color:var(--gold-hi)}
.faq__i summary:focus-visible{outline:2px solid var(--gold);
  outline-offset:2px;border-radius:4px}
.faq__a{padding:0 2px 18px 30px}
.faq__a p{margin:0;max-inline-size:62ch;color:var(--fg-body);
  line-height:1.65}

/* ----------------------------------------------------------- Uebersicht */
/* Vier Absaetze, keine Kartenwand: der Text ist hier der Inhalt, und
   Karten wuerden ihn in vier gleich grosse Haeppchen zerlegen, die keiner
   zu Ende liest. Die Linie links haelt sie trotzdem zusammen. */
.sätze{margin-block-start:28px}
.satz{padding-inline-start:20px;border-inline-start:2px solid var(--edge);
  padding-block-end:24px}
.satz:last-child{padding-block-end:0}
.satz > h2{margin:0 0 9px;font-size:22px}
.satz > p{margin:0;max-inline-size:66ch;color:var(--fg-body);
  line-height:1.7}
.satz:first-child{border-inline-start-color:var(--gold-deep)}

/* ================================================================
   Saison-Reiter — drei der sechs Wertungen werden beim Saisonwechsel
   genullt, die anderen drei nie. Der Punkt ist kein Schmuck: wer den
   Unterschied nicht sieht, haelt einen Rueckstand fuer einen Verlust.
   Gemalter Punkt statt Zeichen, weil bei Tor-Safest weder SVG noch
   Webfont geladen werden.                                            */
.tafel__tab--saison::before{content:"";display:inline-block;
  inline-size:5px;block-size:5px;margin-inline-end:7px;
  vertical-align:.12em;border-radius:50%;background:var(--gold-deep)}
#a-1:checked ~ .tafel__tabs .tafel__tab:nth-child(1)::before,
#a-2:checked ~ .tafel__tabs .tafel__tab:nth-child(2)::before,
#a-3:checked ~ .tafel__tabs .tafel__tab:nth-child(3)::before,
#a-4:checked ~ .tafel__tabs .tafel__tab:nth-child(4)::before,
#a-5:checked ~ .tafel__tabs .tafel__tab:nth-child(5)::before,
#a-6:checked ~ .tafel__tabs .tafel__tab:nth-child(6)::before{
  background:var(--gold)}

/* Hinweis IM Panel, nicht unter der Tafel: er gilt fuer drei der sechs
   Achsen, und ein Satz unter der Tafel laese sich, als gaelte er fuer
   alle.                                                               */
.tafel__note{margin:12px 2px 2px;color:var(--fg-faint);
  font-size:12.5px;line-height:1.55}
.tafel__note b{color:var(--gold-dim);font-weight:700}

/* ================================================================
   ZEITLEISTE — zwei Hoehen auf einer Linie

   Ein Meilenstein ist ein neues System und bekommt einen eigenen,
   grossen Block; die normalen Patchnoten laufen dazwischen als
   kompakte Liste mit. Eine Zeitleiste, auf der jeder Eintrag gleich
   laut ist, beantwortet die einzige Frage nicht, die ein Besucher hier
   hat: was ist das Grosse, das dazugekommen ist.

   Die Linie ist ein border-inline-start am Behaelter, kein Bild — sie
   muss auch dann stehen, wenn weder SVG noch Webfont geladen werden.
   Alles logisch (inline-start statt left): die arabische Fassung dreht
   damit von allein.                                                   */
.tl{margin-block-start:30px;padding-inline-start:26px;
  border-inline-start:1px solid var(--edge)}

.tl__ms{position:relative;margin-block-end:22px;padding:22px 24px 20px;
  border:1px solid var(--edge-lit);border-radius:var(--r);
  background:var(--card);
  box-shadow:0 1px 0 rgba(255,255,255,.02) inset}
/* Der Knoten auf der Linie. -31px = 26px Einzug + halbe Punktgroesse,
   damit er mittig auf der Linie sitzt und nicht daneben.              */
.tl__ms::before{content:"";position:absolute;inset-block-start:26px;
  inset-inline-start:-31px;inline-size:11px;block-size:11px;
  border-radius:50%;background:var(--gold);
  box-shadow:0 0 0 4px var(--page)}
.tl__ms-kopf{display:flex;flex-wrap:wrap;align-items:center;gap:10px;
  margin-block-end:9px}
.tl__marke{color:var(--gold);font:700 10px var(--d);letter-spacing:.14em;
  text-transform:uppercase}
.tl__datum{color:var(--fg-faint);font:600 11.5px var(--t);
  letter-spacing:.06em;font-variant-numeric:tabular-nums}
.tl__ms > h2{margin:0 0 8px;font-size:25px;line-height:1.2;
  color:var(--fg);text-wrap:balance}
.tl__ms-text{margin:0;max-inline-size:64ch;color:var(--fg-body);
  font-size:15.5px;line-height:1.65}
.tl__l{margin:13px 0 0;padding-inline-start:17px;color:var(--fg-mut);
  font-size:13.5px;line-height:1.6}
.tl__l li{margin-block-end:3px}

/* Die kompakte Haelfte. Kein Rahmen, kein Fond: sie soll zwischen den
   Bloecken LIEGEN, nicht mit ihnen konkurrieren.                      */
.tl__patches{position:relative;margin-block-end:22px;
  padding-inline-start:2px}
.tl__patches::before{content:"";position:absolute;inset-block-start:7px;
  inset-inline-start:-29px;inline-size:7px;block-size:7px;
  border-radius:50%;background:var(--edge-in);
  box-shadow:0 0 0 4px var(--page)}
.tl__patches-kopf{display:flex;align-items:center;gap:8px;margin:0 0 10px;
  color:var(--fg-faint);font:700 10.5px var(--t);letter-spacing:.14em;
  text-transform:uppercase}
.tl__anzahl{padding:1px 7px;border:1px solid var(--edge);border-radius:99px;
  color:var(--fg-mut);font:600 10.5px var(--n);letter-spacing:0;
  font-variant-numeric:tabular-nums}
.tl__p-l{margin:0;padding:0;list-style:none}
.tl__p{display:grid;gap:3px 18px;padding:11px 2px;
  border-block-start:1px solid var(--edge);
  grid-template-columns:minmax(0,1fr)}
.tl__p:last-child{border-block-end:1px solid var(--edge)}
/* Nur noch das Datum. Die Marke steht beim Titel — sonst waechst
   diese Spalte in jeder Sprache anders, und weil jedes <li> sein
   EIGENES Raster ist, stehen die Titel dann treppenfoermig. */
.tl__p-d{color:var(--fg-faint);font:600 11.5px var(--t);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.tl__p-t{display:flex;flex-wrap:wrap;align-items:baseline;gap:5px 9px}
.tl__p-t b{color:var(--fg);font-size:14.5px;font-weight:600}
/* Eigene Klasse, KEIN Typselektor: `.tl__p-c span` (0,1,1) haette
   auch .tl__p-t erwischt und dessen display:flex (0,1,0) ueberstimmt
   — die Marke sass dann als Block ueber dem Titel und zog sich ueber
   die volle Breite. */
.tl__p-x{display:block;margin-block-start:2px;max-inline-size:70ch;
  color:var(--fg-mut);font-size:13px;line-height:1.55}

/* Ab Tablettbreite Datum und Text nebeneinander — die Datumsspalte
   bekommt eine feste Breite, damit die Titel eine Kante bilden.       */
/* Ab Tablettbreite Datum und Text nebeneinander. Feste Breite, weil
   das Datum in jeder Sprache dieselbe Laenge hat (11.-13.08.2026 ist
   der laengste Fall) — so bilden die Titel eine Kante. */
@media (min-width:640px){
  .tl__p{grid-template-columns:112px minmax(0,1fr)}
  .tl__p-d{padding-block-start:2px}
}

/* ================================================================
   GEMEINSCHAFT                                                      */

/* Kanaele. Ein Kanal ohne Adresse ist ein div, einer mit Adresse ein
   <a> — deshalb setzt die Basisregel keine Linkfarbe, beide Zustaende
   erben aus derselben Karte.                                         */
.kanal__l{display:grid;gap:12px;margin-block-start:16px;
  grid-template-columns:repeat(auto-fill,minmax(270px,1fr))}
.kanal{display:block;padding:17px 19px 15px;border:1px solid var(--edge);
  border-radius:var(--r);background:var(--card);text-decoration:none}
.kanal--link{border-color:var(--edge-lit);
  transition:border-color .16s var(--ease),background .16s var(--ease)}
.kanal--link:hover{border-color:var(--gold-deep);background:var(--card-act)}
.kanal--link:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.kanal__n{display:block;color:var(--fg);font:600 17px/1.25 var(--d)}
.kanal--link .kanal__n{color:var(--gold-hi)}
.kanal__t{display:block;margin-block-start:6px;color:var(--fg-body);
  font-size:14px;line-height:1.6}
.kanal__m{display:inline-block;margin-block-start:11px;padding:2px 8px;
  border:1px solid var(--edge-lit);border-radius:99px;color:var(--fg-faint);
  font:700 10px var(--d);letter-spacing:.12em;text-transform:uppercase}

/* Regeln. Nummeriert, weil die Reihenfolge etwas sagt: sie stehen in
   der Reihenfolge, in der sie gebrochen werden. Die Ziffer kommt aus
   dem Zaehler, nicht aus dem Markup — so stimmt sie auch, wenn eine
   Regel dazwischenkommt.                                             */
.regel__l{counter-reset:regel;margin-block-start:18px;padding:0;
  list-style:none}
.regel{position:relative;padding-block-end:20px;padding-inline-start:44px}
.regel::before{counter-increment:regel;content:counter(regel);
  position:absolute;inset-block-start:0;inset-inline-start:0;
  display:grid;place-items:center;inline-size:29px;block-size:29px;
  border:1px solid var(--edge-lit);border-radius:50%;
  color:var(--gold-dim);font:600 13px var(--n);
  font-variant-numeric:tabular-nums}
.regel h3{margin:3px 0 6px;color:var(--fg);font-size:17px;line-height:1.3}
.regel p{margin:0;max-inline-size:64ch;color:var(--fg-body);
  font-size:14px;line-height:1.65}
.regel:last-child{padding-block-end:0}

/* Takte. Kein Datum, sondern ein Rhythmus — deshalb steht vorn die
   Haeufigkeit und nicht ein Kalendertag.                              */
.takt__l{margin-block-start:16px;padding:0;list-style:none}
.takt{display:grid;gap:3px 18px;padding:13px 2px;
  border-block-start:1px solid var(--edge);
  grid-template-columns:minmax(0,1fr)}
.takt:last-child{border-block-end:1px solid var(--edge)}
.takt__w{color:var(--gold-dim);font:600 11.5px var(--t);
  letter-spacing:.06em;text-transform:uppercase}
.takt__c b{color:var(--fg);font-size:15px;font-weight:600}
.takt__c span{display:block;margin-block-start:3px;max-inline-size:66ch;
  color:var(--fg-body);font-size:13.5px;line-height:1.6}
@media (min-width:640px){
  .takt{grid-template-columns:190px minmax(0,1fr)}
  .takt__w{padding-block-start:2px}
}


/* Der Weiterknopf auf einer Mitmach-Karte. Textlink, kein Knopf: es ist
   ein Verweis, und vier Knoepfe nebeneinander schrieen um dieselbe
   Aufmerksamkeit wie der Registrieren-Knopf am Seitenende.            */
.funk__go{display:inline-block;margin-block-start:11px;color:var(--gold);
  font:600 13px var(--t);text-decoration:none;
  border-block-end:1px solid var(--gold-deep);padding-block-end:1px}
.funk__go:hover{color:var(--gold-hi);border-block-end-color:var(--gold)}
.funk__go:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* ================================================================
   BESTELLUNGEN, WAREN, FEHLERSEITEN                                */

/* Die Statusfarben heissen nach den Konstanten aus app/models.py,
   kleingeschrieben — die Vorlage baut die Klasse als `st--{status|lower}`.
   Wer dort einen Status ergaenzt, braucht hier eine Zeile, sonst bleibt
   der Chip grau. Das ist kein Fehler, nur farblos.

   Drei Farben, nicht fuenf: erledigt (gruen), wartet (gold), abgebrochen
   (gedaempft). Ein eigener Ton je Status waere eine Ampel, die nichts
   mehr unterscheidet.                                                    */
.st--credited, .st--delivered { color: #9BD2A0;
  border-color: color-mix(in srgb, #9BD2A0 32%, transparent) }
.st--awaiting_payment, .st--new { color: var(--gold-hi);
  border-color: color-mix(in srgb, var(--gold) 30%, transparent) }
.st--cancelled, .st--failed { color: var(--fg-faint);
  border-color: var(--edge) }
/* Der Statuschip in der Liste ist ein LINK auf das Detail. Die Zeile
   braucht dafuer keine eigene Spalte — und ein Chip, der sich anfassen
   laesst, wird auch angefasst.                                           */
a.st { text-decoration: none;
  transition: border-color .16s var(--ease), color .16s var(--ease) }
a.st:hover { border-color: var(--gold); color: var(--gold-hi) }
a.st:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px }

/* Wege im Shop-Kopf. Rechts neben der Ueberschrift, unter 600px darunter —
   dieselbe Stelle, an der sonst das Guthaben steht.                      */
.shop-wege { display: flex; flex-wrap: wrap; gap: 8px; align-items: center }

/* Stueckzahl am Angebot. Nur sichtbar, wenn sie groesser als eins ist:
   "x1" hinter jedem Namen ist Rauschen.                                  */
.ware__n { margin-inline-start: 6px; color: var(--fg-faint);
  font: 600 13px var(--n); font-variant-numeric: tabular-nums }

/* Leerzustand mit Ausgang. Eine Seite, die nur "nichts da" sagt, ist eine
   Sackgasse — wer hier landet, bekommt den Weg gleich mit.               */
.leerbox { display: grid; justify-items: center; gap: 16px;
  margin-block-start: 26px; padding: 44px 20px;
  border: 1px solid var(--edge); border-radius: var(--r);
  background: var(--card) }
.leerbox .leer { padding: 0; max-inline-size: 46ch }

/* --------------------------------------------------- Weg einer Bestellung
   Drei Stationen statt eines Wortes. "AWAITING_PAYMENT" sagt einem Spieler
   nichts; drei Schritte mit einem offenen sagen ihm sofort, was fehlt.

   Die Linie laeuft durch die Punkte, nicht hinter den Kaesten — deshalb
   sitzt sie als ::before am Behaelter und wird von den Punkten mit einem
   Ring in Seitenfarbe unterbrochen.                                      */
.weg { position: relative; margin: 0; padding: 0; list-style: none;
  padding-inline-start: 26px;
  border-inline-start: 1px solid var(--edge) }
.weg__s { position: relative; padding-block: 9px }
.weg__s::before { content: ""; position: absolute; inset-block-start: 14px;
  inset-inline-start: -31px; inline-size: 9px; block-size: 9px;
  border-radius: 50%; background: var(--edge-in);
  box-shadow: 0 0 0 4px var(--page) }
.weg__s--ok::before { background: var(--gold) }
.weg__t { display: block; color: var(--fg-mut); font-size: 14px }
.weg__s--ok .weg__t { color: var(--fg) }
.weg__d { display: block; margin-block-start: 2px; color: var(--fg-faint);
  font: 600 12px var(--t); font-variant-numeric: tabular-nums }

/* Fakten als Definitionsliste, nicht als Tabelle: es sind Paare, keine
   Matrix. Ein <dl> liest sich auch vor.                                  */
.fakten { display: grid; gap: 1px; margin-block-start: 24px;
  border: 1px solid var(--edge); border-radius: var(--r);
  background: var(--edge); overflow: hidden }
.fakten > div { display: flex; flex-wrap: wrap; gap: 6px 18px;
  align-items: baseline; justify-content: space-between;
  padding: 12px 16px; background: var(--card) }
.fakten dt { color: var(--fg-mut); font-size: 13px }
.fakten dd { margin: 0; color: var(--fg); font-size: 14.5px;
  font-weight: 600; text-align: end }
.fakten dd.num { font-variant-numeric: tabular-nums }

/* Die Bestellkennung ist zum Abschreiben da (Ticket, Rueckfrage) — also
   monospace, umbruchfaehig und mit Luft.                                 */
.ref { display: inline-block; padding: 3px 9px; border-radius: 6px;
  border: 1px solid var(--edge); background: var(--sunk);
  color: var(--fg-mut); font: 13px var(--n); word-break: break-all }

.note--bad { border-color: color-mix(in srgb, var(--alarm) 34%, transparent);
  color: var(--fg-body) }

/* --------------------------------------------------------- Fehlerseite
   Die 404 traegt die ganze Seite mit Navigation: wer eine falsche Adresse
   erwischt hat, will weitersuchen. (Die 500 ist eine eigene Datei ohne
   base.html — dort kann die Navigation selbst der Grund sein.)           */
.fehler { padding-block: 40px 20px; text-align: center }
.fehler h1 { margin: 0 0 12px; max-inline-size: 22ch; margin-inline: auto }
.fehler .sub { margin-inline: auto; max-inline-size: 54ch }
.fehler .cta { justify-content: center }
.wege { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px;
  margin: 0; padding: 0; list-style: none;
  padding-block-start: 22px; border-block-start: 1px solid var(--edge) }
.wege a { color: var(--fg-mut); font-size: 14px; text-decoration: none;
  border-block-end: 1px solid transparent; padding-block-end: 1px }
.wege a:hover { color: var(--gold-hi); border-block-end-color: var(--gold-deep) }
.wege a:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px }

/* Azteco-Anleitung, ueber der ganzen Spalte. Zwei Dinge muessen dafuer
   weg: `.panel` deckelt auf 460px (das ist fuer Formulare gedacht), und
   `.col h2::after` haengt jeder Ueberschrift die Zierlinie an - im
   Kasten wirkt sie wie ein Bruch. Die drei Schritte stehen nebeneinander,
   damit die Breite getragen wird und nicht als Leere danebensteht.   */
.anleitung { display: grid; gap: 18px; margin-block-start: 26px;
  max-inline-size: none; padding: 26px 30px }
.anleitung h2 { margin: 0; font: 700 19px/1.3 var(--t); color: var(--gold-hi) }
.anleitung h2::after { content: none }
.anleitung p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--fg-body) }
.anleitung__kopf { display: grid; gap: 14px 44px; align-items: start;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) }
.anleitung__wo { display: grid; gap: 9px; align-content: start }
.anleitung__t { color: var(--fg-mut); font-size: 13px }
.anleitung__shops { margin: 0; padding: 0; list-style: none;
  display: flex; flex-wrap: wrap; gap: 7px 16px }
.anleitung__shops a { color: var(--fg-mut); font-size: 13.5px; text-decoration: none;
  border-block-end: 1px solid var(--gold-deep); padding-block-end: 1px }
.anleitung__shops a:hover { color: var(--gold-hi) }
.anleitung__shops a:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px }
.anleitung__schritte { margin: 0; padding: 0; list-style: none;
  display: grid; gap: 18px 30px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding-block-start: 18px; border-block-start: 1px solid var(--edge) }
.anleitung__schritte li { display: grid; grid-template-columns: 26px minmax(0, 1fr);
  gap: 11px; align-items: start; font-size: 14.5px; line-height: 1.55;
  color: var(--fg-body) }
.anleitung__schritte .nr { inline-size: 26px; block-size: 26px; border-radius: 50%;
  display: grid; place-items: center; font-size: 13px; font-weight: 700;
  color: var(--gold-hi); background: var(--card); border: 1px solid var(--edge) }
.anleitung__warn { margin-block-start: 2px }
@media (max-width: 900px) {
  .anleitung { padding: 22px }
  .anleitung__kopf { grid-template-columns: 1fr }
  .anleitung__schritte { grid-template-columns: 1fr; gap: 12px }
}