/* Design Tokens. Farben werden für hell UND dunkel hier definiert, nie nur
   innerhalb des prefers-color-scheme-Blocks, damit kein Token ohne Hell-Wert
   bleibt. */
:root {
  --color-bg: #ffffff;
  --color-fg: #1a1a1a;
  --color-muted: #55606b;
  --color-accent: #2f6f4f;
  --color-border: #d8dde1;

  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.5rem;

  --font-size-base: 1rem;
  --font-size-lg: 1.25rem;
  --font-size-xl: 2rem;

  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --max-width: 60rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #14181b;
    --color-fg: #f2f4f5;
    --color-muted: #a9b3ba;
    --color-accent: #6fcf97;
    --color-border: #2c3338;
  }
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--font-size-base);
  background: var(--color-bg);
  color: var(--color-fg);
  line-height: 1.5;
}

header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--color-border);
}

header nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  min-width: 0;
  max-width: 100%;
}

header a {
  color: var(--color-fg);
  font-weight: 700;
  text-decoration: none;
  font-size: var(--font-size-lg);
}

/* Die Wortmarke ist die Identitaet der Seite, die nav-Links sind Navigation --
   ohne diese Regel erben sie dieselbe grosse, fette Auszeichnung wie die
   Wortmarke und beanspruchen dadurch genauso viel Platz, was den Kopfbereich
   unnoetig frueh umbrechen liess. Farbe bleibt unveraendert (var(--color-fg)),
   nur Groesse und Schriftstaerke sinken auf Fliesstext-Niveau. */
header nav a {
  font-size: var(--font-size-base);
  font-weight: 500;
}

/* Unter ca. 532px passen Wortmarke, beide Links und Umschalter nicht mehr in
   eine Zeile (gemessen: 24 Padding + 96 Wortmarke + 16 Abstand + 260 nav +
   16 Abstand + 96 Umschalter + 24 Padding = 532px). Ohne Eingriff wuerde der
   Kopfbereich dann dreizeilig, weil weder Wortmarke+nav noch nav+Umschalter
   in eine Restzeile passen -- nur Wortmarke+Umschalter zusammen (218px) tun
   das. Deshalb wandert der Umschalter unter dieser Breite rein visuell vor
   die Navigation, die dann allein auf die naechste Zeile faellt. Die
   DOM-Reihenfolge (und damit Tab-Reihenfolge: Wortmarke, Links, Umschalter)
   aendert sich dabei nicht, nur "order" greift.
   Die Grenze von 520px haengt an der Laenge der heutigen Linkbeschriftungen
   (Deutsch ist derzeit die laengere der beiden Sprachen). Kommt eine Sprache
   mit deutlich laengeren Woertern dazu, ist sie neu zu vermessen. */
@media (max-width: 520px) {
  header > select {
    order: 1;
  }

  header nav {
    order: 2;
  }
}

header > select {
  font: inherit;
  color: var(--color-fg);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 0.25rem;
  padding: var(--space-1);
}

header a:focus-visible,
header select:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.header-character {
  display: inline-flex;
  min-width: 0;
}
.header-character[hidden] { display: none; }

.header-character__select {
  max-width: min(15rem, 100%);
  min-width: 0;
  font: inherit;
  color: var(--color-fg);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 0.25rem;
  padding: var(--space-1);
}

.header-character__select:disabled { opacity: 0.7; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

main a {
  color: var(--color-accent);
}

main a:visited {
  color: var(--color-accent);
}

main a:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

main {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--space-3);
}

.hero {
  text-align: center;
  padding: var(--space-4) 0;
}

.hero h1 {
  font-size: var(--font-size-xl);
  margin: 0 0 var(--space-2);
}

.hero p {
  color: var(--color-muted);
  margin: 0;
}

.pillars {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  padding: var(--space-3) 0;
}

@media (min-width: 48rem) {
  .pillars {
    grid-template-columns: repeat(3, 1fr);
  }
}

.pillars article {
  border: 1px solid var(--color-border);
  border-radius: 0.5rem;
  padding: var(--space-3);
}

.pillars h2 {
  font-size: var(--font-size-base);
  margin: 0 0 var(--space-1);
}

.pillars p {
  color: var(--color-muted);
  margin: 0;
}

.status {
  border-top: 1px solid var(--color-border);
  padding: var(--space-3) 0;
  color: var(--color-muted);
  text-align: center;
}

.notfound {
  text-align: center;
  padding: var(--space-4) 0;
}

footer {
  border-top: 1px solid var(--color-border);
  padding: var(--space-2) var(--space-3);
  color: var(--color-muted);
  text-align: center;
}

/* Formular- und Tabellenelemente.
   Ohne eigene Regeln fallen diese Elemente auf die Browser-Vorgaben zurueck: ein weisses
   Eingabefeld mit schwarzem Text mitten im dunklen Thema, und ein <label>, das als
   Inline-Element neben dem Feld steht statt darueber. Beides war beim ersten Aufruf der
   Splitter-Seite sichtbar. Farben kommen ausschliesslich aus den Tokens oben, damit hell und
   dunkel gemeinsam stimmen. */

label {
  display: block;
  margin-bottom: var(--space-1);
  color: var(--color-fg);
}

textarea,
input,
select,
button {
  font-family: inherit;
  font-size: var(--font-size-base);
}

textarea,
input[type="text"],
input[type="password"] {
  display: block;
  width: 100%;
  padding: var(--space-1);
  color: var(--color-fg);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 4px;
}

textarea {
  /* Der Party-Hunt-Export ist spaltenorientiert; dicktengleiche Schrift haelt ihn lesbar. */
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  resize: vertical;
}

button {
  padding: var(--space-1) var(--space-3);
  color: var(--color-bg);
  background: var(--color-accent);
  border: 1px solid var(--color-accent);
  border-radius: 4px;
  cursor: pointer;
}

button:not(:disabled):hover {
  opacity: 0.9;
}

/* Ein deaktivierter Knopf (z. B. "Continue" vor gesetzter Checkbox) muss sich sichtbar von
   einem aktiven unterscheiden - ohne eigene Regel faellt er sonst auf dieselbe volle
   Deckkraft und denselben Mauszeiger wie ein normaler Knopf zurueck. */
button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

textarea:focus-visible,
input:focus-visible,
button:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* Checkbox-Farbe folgt denselben Tokens wie alles andere, statt der Browser-Vorgabe zu
   ueberlassen (die im dunklen Thema oft schlecht sichtbar ist). */
input[type="checkbox"] {
  accent-color: var(--color-accent);
}

table {
  width: 100%;
  margin: var(--space-2) 0;
  border-collapse: collapse;
}

th,
td {
  padding: var(--space-1);
  text-align: left;
  border-bottom: 1px solid var(--color-border);
}

/* Geldbetraege rechtsbuendig und mit gleich breiten Ziffern, damit Stellenwerte
   untereinander stehen und sich Betraege vergleichen lassen. */
th:not(:first-child),
td:not(:first-child) {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* <code> traegt hier den Tibia-Bank-Befehl je Transfer. Ohne eigene Regel faellt er auf die
   Browser-Vorgabe zurueck -- dasselbe Problem, das textarea und table schon hatten. */
code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  background: var(--color-border);
  color: var(--color-fg);
  padding: 0.125rem 0.375rem;
  border-radius: 4px;
}

.loot-splitter__command-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin: var(--space-1) 0 var(--space-2);
}

/* Erster accountgebundener Hunt-Ledger-Slice. Die Tabellen sind absichtlich jeweils in
   ihrem eigenen Scroll-Container: World, Namen, Betrag und zwei Attestationsaktionen bleiben
   auf kleinen Displays vollstaendig erreichbar, ohne dass die ganze Seite horizontal laeuft. */
.loot-ledger__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin-top: var(--space-2);
}

.loot-ledger__preview,
.loot-ledger__history {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
}

/* Befund 2 (Tobi, gemeldet ueber Rueckmeldung): eine Erfolgsmeldung, die weit oben auf der
   Seite ohne eigene Hervorhebung steht, geht neben Button-Klick und aktualisierter Liste weiter
   unten unter. Diese Meldung sitzt deshalb direkt ueber der Ledger-Liste und hebt sich wie
   .account__delete mit einem farbigen Rahmen ab -- hier in --color-accent statt --color-fg,
   weil sie eine positive Rueckmeldung ist, keine gefaehrliche Aktion. */
.loot-ledger__list-status {
  margin: 0 0 var(--space-2);
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--color-accent);
  border-radius: 4px;
  color: var(--color-accent);
  font-weight: 600;
}

.loot-ledger__context {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: var(--space-2);
}

.loot-ledger__context div {
  min-width: 0;
}

.loot-ledger__context dt {
  color: var(--color-muted);
}

.loot-ledger__context dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.loot-ledger__table-wrap {
  overflow-x: auto;
}

.loot-ledger__preview-table td:nth-child(1),
.loot-ledger__preview-table th:nth-child(1),
.loot-ledger__preview-table td:nth-child(2),
.loot-ledger__preview-table th:nth-child(2) {
  text-align: left;
  font-variant-numeric: normal;
}

.loot-ledger__preview-table td:nth-child(3),
.loot-ledger__preview-table th:nth-child(3),
.loot-ledger__history-table td:nth-child(4),
.loot-ledger__history-table th:nth-child(4) {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.loot-ledger__history-table td:nth-child(1),
.loot-ledger__history-table th:nth-child(1),
.loot-ledger__history-table td:nth-child(2),
.loot-ledger__history-table th:nth-child(2),
.loot-ledger__history-table td:nth-child(3),
.loot-ledger__history-table th:nth-child(3),
.loot-ledger__history-table td:nth-child(5),
.loot-ledger__history-table th:nth-child(5) {
  text-align: left;
  font-variant-numeric: normal;
}

.loot-ledger__attestation-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}

.loot-ledger__totals {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.loot-ledger__totals p {
  margin: 0;
}

.loot-ledger__group {
  margin-top: var(--space-3);
}

/* Auszahlungen (Konzept 04 §8.7): eine Zeile je Gegen-Character, entweder mit Bankbefehl und
   zwei Aktionen (Zahlt der aktive Character) oder nur einer Anzeige (bekommt Geld). */
.loot-ledger__payouts {
  margin: var(--space-2) 0 var(--space-3);
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-border);
}

.loot-ledger__payouts ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.loot-ledger__payout {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-2);
}

.loot-ledger__payout code {
  font-variant-numeric: tabular-nums;
}

/* Guest-Uebernahme (Konzept 04 §8.5, Entscheidungen 2026-09-18): dieselbe Form wie
   .loot-ledger__payouts - eine Zeile je Eintrag, ein Knopf oder eine Statusanzeige. */
.loot-ledger__guest-claims {
  margin: var(--space-2) 0 var(--space-3);
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-border);
}

.loot-ledger__guest-claims ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.loot-ledger__guest-claims li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-2);
}

.loot-ledger__guest-claim-status {
  font-style: italic;
}

/* Zurueckhaltender Zweitknopf, ueberall dort wo eine Aktion neben einer gefuellten
   Hauptaktion steht (z.B. "Kopieren" neben "Berechnen" oder "Bestaetigen"): nur
   umrandet statt gefuellt, damit die Hauptaktion optisch fuehrend bleibt. Farben
   kommen aus denselben Tokens wie der Haupt-Button, nur Fuellung und Rahmen sind
   vertauscht. */
.button-secondary {
  background: var(--color-bg);
  color: var(--color-accent);
  border: 1px solid var(--color-accent);
}

.button-secondary:hover {
  background: var(--color-border);
  opacity: 1;
}

/* Verifikationsseite (Konzept 01, Abschnitt 3). Der Token ist der wichtigste
   Text auf der Seite -- der User muss ihn abtippen oder kopieren koennen,
   deshalb gross, einzeilig und mit gleich breiten Zeichen. */
.verify__preview-note {
  color: var(--color-muted);
}

.verify__token {
  display: block;
  width: 100%;
  margin: var(--space-2) 0;
  padding: var(--space-2);
  font-size: var(--font-size-xl);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.05em;
  text-align: center;
  white-space: nowrap;
  overflow-x: auto;
  background: var(--color-border);
  color: var(--color-fg);
  border-radius: 4px;
}

/* Modifikator fuer den Recovery Token: der ist mit 39 Zeichen (32 Base32-Zeichen in Gruppen
   zu 4, durch Bindestriche getrennt) deutlich laenger als der kurze Verification Token, fuer
   den .verify__token urspruenglich gebaut wurde. Einzeilig mit horizontalem Scrollbalken
   (nowrap/overflow-x: auto) verschwindet er dabei schon bei mittleren Breiten aus dem
   sichtbaren Bereich; hier bricht er stattdessen an den Bindestrichen um. */
.verify__token--wrap {
  white-space: normal;
  overflow-x: visible;
}

/* Tabular-nums allein wuerde nicht reichen: ohne sie springt die Breite der
   mm:ss-Anzeige bei jedem Tick, weil Ziffern sonst unterschiedlich breit
   sind. */
.verify__countdown {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

.verify__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin: var(--space-2) 0;
}

/* Pflicht-Checkbox vor dem Recovery Token: Checkbox und Text als flex-Zeile statt des
   normalen block-label, das ein <input> einfach vor den Text stellt -- ohne diese Regel
   rutscht die Checkbox bei einem laengeren Text (v.a. Deutsch) aus der ersten Zeile heraus
   und wirkt vom Text abgetrennt statt sichtbar dazuzugehoeren. align-items: flex-start haelt
   die Checkbox oben buendig mit der ersten Textzeile, auch wenn der Text bei 375px auf
   mehrere Zeilen umbricht. */
.verify__consent {
  display: flex;
  align-items: flex-start;
  gap: var(--space-1);
  margin: var(--space-2) 0;
}

.verify__consent input[type="checkbox"] {
  margin-top: 0.2em;
  flex-shrink: 0;
}

/* Account-Seite (Etappe 2): "Other sessions" ist die folgenreichere der beiden Aktionen (sie
   betrifft fremde Sitzungen, nicht nur die eigene) und bekommt deshalb einen sichtbaren
   Abstand zum Log-out-Knopf darueber, statt wie ein direkter Nachbar derselben Ebene zu
   wirken. */
.account__other-sessions {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
}

/* Account loeschen (Auftrag 2026-09-13): die einzige endgueltige Aktion auf dieser Seite soll
   sich sichtbar von den anderen, reversiblen Aktionen abheben. Die Design Tokens kennen keine
   eigene Warn- oder Fehlerfarbe (nur --color-accent, --color-muted, --color-border,
   --color-fg) -- offen fuer spaeter, falls weitere gefaehrliche Aktionen dazukommen. Bis dahin
   grenzt ein kompletter, doppelt so dicker Rahmen in --color-fg (statt des sonst ueblichen 1px
   --color-border) den Abschnitt deutlich ab. */
.account__delete {
  margin-top: var(--space-3);
  padding: var(--space-3);
  border: 2px solid var(--color-fg);
  border-radius: 4px;
}

/* Adminbereich, Accounts-Tabelle (Auftrag 2026-09-13, Etappe 2). Eigener scrollbarer
   Container: die Tabelle hat mit Nr., Username, Datum, zwei Haken-Spalten und einem
   Save-Knopf pro Zeile mehr Spalten als schmale Breiten erlauben; overflow-x: auto haelt den
   Rest der Seite dabei unangetastet, statt die ganze Seite horizontal scrollen zu lassen. */
.admin__table-wrap {
  overflow-x: auto;
}

/* Anders als die Transfer-Tabelle des Loot Splitters enthaelt diese Tabelle keine
   Geldbetraege. Ohne diese Regel wuerden Username, Registered-Datum, die beiden
   Haken-Spalten und die Save-Spalte durch th:not(:first-child)/td:not(:first-child) weiter
   oben faelschlich rechtsbuendig und mit tabular-nums gesetzt. */
.admin__table-wrap td:not(:first-child),
.admin__table-wrap th:not(:first-child) {
  text-align: left;
  font-variant-numeric: normal;
}