/*
  HexaDome Legends Liga – Stylesheet

  Keine externen Schriften, keine Fremdquellen. Erbt die Schrift des Themes.
  Farben der Aristos kommen als --hex-farbe aus den Stammdaten.

  ZUR WABE, weil dort schon etwas schiefging:
  Die erste Fassung ließ die Sechsecke frei umbrechen und verschob jede zweite
  Reihe über eine nth-child-Formel, die eine feste Reihenlänge annahm. Sobald
  der Container schmaler wurde, brach die Reihe woanders um als die Formel
  dachte — die Sechsecke schoben sich ineinander und der Rand schnitt sie ab.
  Jetzt bildet die App die Reihen als eigene Elemente, und das CSS versetzt
  nur noch, was sich selbst als versetzt ausweist. Kein Raten mehr.
*/

/*
  ═══ SCHUTZWALL GEGEN DAS THEME ═══════════════════════════════════════════

  Gemessen am 11.09.2026 an der echten Installation (arachnet.de, Enfold
  7.1.1). Das Theme setzt auf JEDES Eingabefeld:

      #top input[type="number"], … {
        border: 1px solid #e1e1e1;  padding: 8px 6px;
        font: 1em "HelveticaNeue", …;  color: #777;
        margin-bottom: 20px;  width: 100%;  display: block;
      }

  Das `#top` gibt der Regel Spezifitaet 1-1-1. Eine Plugin-Regel wie
  `.hxl-stepper input` hat 0-1-1 und verliert — IMMER. Deshalb kam die
  Korrektur der Zeilenhoehe aus Version 0.7.2 nie an, und deshalb sah die
  Eingabemaske dreimal anders aus als hier gebaut.

  Am schaedlichsten sind die drei, an die man zuletzt denkt:
    · margin-bottom: 20px  — in einem zentrierten Flex-Container schiebt
      allein dieser Rand das Feld nach oben. Nicht der Text im Feld sass zu
      hoch, das ganze Feld sass zu hoch.
    · width: 100%          — jedes Zahlenfeld will die volle Breite.
    · font: 1em …          — die Kurzform setzt nebenbei line-height auf
      `normal` zurueck. Eine gesetzte Zeilenhoehe ueberlebt das nicht.

  Was hier steht, ist deshalb kein Feinschliff, sondern die Grundlage: Erst
  wenn das Theme die Finger von Rand, Breite und Anzeigeart laesst, wirken
  die Regeln weiter unten ueberhaupt.

  !important ist hier die richtige Wahl und nicht Faulheit. Der Alternativweg
  waere, jede Regel mit `#hxl-app` zu praefixen — das schlaegt Enfold (1-2-1
  gegen 1-1-1), aber schon ein Theme mit `#top #wrapper input` (2-1-1) waere
  wieder vorn. Ein Wettruesten um Selektoren gewinnt man nicht, man beendet
  es.

  Bewusst NICHT abgesichert: Farbe und Schriftart der normalen Formularfelder.
  Dort darf das Theme mitreden, dort richtet es keinen Schaden an, und eine
  Oberflaeche, die sich gegen jedes Theme stemmt, sieht ueberall gleich fremd
  aus.
*/
.hxl input,
.hxl select,
.hxl textarea,
.hxl button {
  margin: 0 !important;
  max-width: none !important;
  box-shadow: none !important;
}
/* Nur die Felder, die in einer Zeile stehen muessen. Ein Textfeld im
   Formular darf ruhig die volle Breite nehmen. */
.hxl-stepper input,
.hxl-cbid-eingabe input {
  width: auto !important;
  display: inline-block !important;
}

.hxl {
  /* Innenhoehe des Zahlenfelds. Steht hier bei den anderen Variablen, NICHT
     in einem eigenen Selektor: Die Variablen haengen alle an .hxl, und eine
     an .hxl-liga waere nie angekommen — diese Klasse gibt es nicht. */
  --hxl-stepper-h: 30px;
  --hxl-rand: #d9dde3;
  --hxl-text: #1a202c;
  --hxl-still: #64748b;
  --hxl-akzent: #2b6cb0;
  --hxl-ok: #2f855a;
  --hxl-warn: #c05621;
  --hxl-fehler: #c53030;
  --hxl-flaeche: #f7f9fb;
  color: var(--hxl-text);
  line-height: 1.45;
}
.hxl * { box-sizing: border-box; }

/* ── Navigation ─────────────────────────────────────────────────────────── */
.hxl-nav { display: flex; flex-wrap: wrap; gap: .25rem; border-bottom: 2px solid var(--hxl-rand); margin-bottom: 1rem; align-items: center; }
.hxl-tab { background: none; border: 0; border-bottom: 3px solid transparent; padding: .5rem .8rem; cursor: pointer; font: inherit; color: var(--hxl-still); margin-bottom: -2px; }
.hxl-tab.ist-aktiv { color: var(--hxl-text); border-bottom-color: var(--hxl-akzent); font-weight: 600; }
.hxl-tab:hover { color: var(--hxl-text); }
.hxl-nav-rechts { margin-left: auto; display: flex; gap: .5rem; align-items: center; }
.hxl-login { font-size: .9em; }
.hxl-wer { font-size: .9em; font-weight: 600; color: var(--hxl-still); }
.hxl-abmelden { color: var(--hxl-still); }
.hxl-sprache { font-size: .85em; }

/* ── Tabellen ───────────────────────────────────────────────────────────── */
.hxl-tabelle { width: 100%; border-collapse: collapse; font-size: .95em; }
.hxl-tabelle th, .hxl-tabelle td { padding: .45rem .6rem; border-bottom: 1px solid var(--hxl-rand); text-align: left; vertical-align: middle; }
.hxl-tabelle th { font-weight: 600; color: var(--hxl-still); font-size: .85em; text-transform: uppercase; letter-spacing: .03em; }
.hxl-rating { font-weight: 700; font-variant-numeric: tabular-nums; }
.hxl-intervall, .hxl-bilanz { color: var(--hxl-still); font-variant-numeric: tabular-nums; white-space: nowrap; }
.hxl-team { color: var(--hxl-still); font-style: italic; }
.hxl-stand { font-weight: 700; white-space: nowrap; text-align: center; }
.hxl-seite.sieg { font-weight: 600; }
.hxl-seite.niederlage { color: var(--hxl-still); }
.hxl-ud { display: inline-block; margin-left: .35em; font-size: .7em; font-weight: 700; color: #fff; background: var(--hxl-warn); border-radius: 3px; padding: 0 .3em; vertical-align: middle; }
.hxl-status { font-size: .85em; color: var(--hxl-still); }
tr.status-wartet td { background: #fffbeb; }
tr.status-strittig td { background: #fff5f5; }
.hxl-punkt { display: inline-block; width: .7em; height: .7em; border-radius: 50%; margin-right: .45em; vertical-align: middle; }

/* ── Allgemein ──────────────────────────────────────────────────────────── */
.hxl-laden, .hxl-leer { color: var(--hxl-still); font-style: italic; }
.hxl-fehler { color: var(--hxl-fehler); font-weight: 600; }
.hxl-erfolg { color: var(--hxl-ok); font-weight: 600; }
.hxl-hinweis { background: var(--hxl-flaeche); border-left: 4px solid var(--hxl-akzent); padding: .6rem .9rem; }
.hxl-kleingedruckt { color: var(--hxl-still); font-size: .85em; }
.hxl-schalter { display: inline-block; margin-bottom: .6rem; font-size: .9em; cursor: pointer; }
.hxl-knopf { background: var(--hxl-akzent); color: #fff; border: 0; border-radius: 4px; padding: .55rem 1rem; font: inherit; font-weight: 600; cursor: pointer; }
.hxl-knopf:disabled { opacity: .5; cursor: default; }
.hxl-knopf.hxl-zweit { background: #fff; color: var(--hxl-text); border: 1px solid var(--hxl-rand); }
.hxl-klein { background: none; border: 1px solid var(--hxl-rand); border-radius: 3px; cursor: pointer; padding: 0 .4em; font: inherit; font-size: .85em; color: var(--hxl-still); }
.hxl-klein:hover { color: var(--hxl-text); border-color: var(--hxl-still); }
.hxl-fuss { margin-top: 2rem; font-size: .75em; color: var(--hxl-still); text-align: right; }
.hxl-rating-gross { font-size: 2em; font-weight: 700; margin: .2rem 0; }
.hxl-rating-gross small { font-size: .45em; font-weight: 400; color: var(--hxl-still); }

/* ── Formulare ──────────────────────────────────────────────────────────── */
.hxl-form h3 { margin-top: 0; }
.hxl-feld { display: flex; flex-direction: column; gap: .25rem; margin-bottom: .8rem; }
.hxl-feld label { font-weight: 600; font-size: .9em; }
.hxl-feld small { color: var(--hxl-still); font-size: .8em; }
.hxl-feld input, .hxl-feld select, .hxl-feld textarea { font: inherit; padding: .45rem .6rem; border: 1px solid var(--hxl-rand); border-radius: 4px; }
.hxl-zeile { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .8rem; }
.hxl-suche { position: relative; }
.hxl-treffer { position: absolute; z-index: 5; left: 0; right: 0; margin: 0; padding: 0; list-style: none; background: #fff; border: 1px solid var(--hxl-rand); border-radius: 4px; box-shadow: 0 4px 12px rgba(0,0,0,.08); }
.hxl-treffer li button { display: block; width: 100%; text-align: left; background: none; border: 0; padding: .5rem .7rem; font: inherit; cursor: pointer; }
.hxl-treffer li button:hover { background: var(--hxl-flaeche); }
.hxl-treffer li.hxl-leer { padding: .5rem .7rem; }
.hxl-gewaehlt { margin: 0; }
.hxl-form-klein { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--hxl-rand); }

/* ── Teams: eigenes links, gegnerisches rechts ──────────────────────────── */
/*
  Die beiden Teams stehen nebeneinander, die Werte-Tabelle jeweils unter der
  Wabe. Eine fruehere Fassung machte es andersherum — Wabe neben Tabelle, Teams
  untereinander. Das quetschte die Waben auf drei Sechsecke je Reihe und machte
  die Seite doppelt so lang.
*/
.hxl-teams { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; align-items: start; }
@media (max-width: 900px) { .hxl-teams { grid-template-columns: 1fr; } }

fieldset.hxl-team { border: 1px solid var(--hxl-rand); border-radius: 6px; padding: .6rem .8rem .8rem; margin: 0 0 1rem; min-width: 0; }
fieldset.hxl-team legend { font-weight: 700; padding: 0 .4rem; }

/* ── Tournament Extras ──────────────────────────────────────────────────── */
fieldset.hxl-extras { border: 1px solid var(--hxl-rand); border-radius: 6px; padding: .5rem .8rem .7rem; margin: 0 0 1rem; }
fieldset.hxl-extras legend { font-weight: 700; padding: 0 .4rem; font-size: .95em; }
.hxl-extra-liste { display: flex; flex-wrap: wrap; gap: .35rem .5rem; }
.hxl-extra { display: inline-flex; align-items: center; gap: .35rem; border: 1px solid var(--hxl-rand); border-radius: 4px; padding: .2rem .5rem; font-size: .85em; cursor: pointer; background: #fff; }
.hxl-extra:hover { border-color: var(--hxl-still); }
.hxl-extra.ist-gewaehlt { border-color: var(--hxl-akzent); background: #eaf2fb; font-weight: 600; }
/* Gesperrt statt beim Absenden abgelehnt: Der Nutzer soll vorher sehen, dass
   Koorie Queen und Zlavin nicht zusammengehen. */
.hxl-extra.ist-gesperrt { opacity: .4; cursor: not-allowed; text-decoration: line-through; }
.hxl-extra-marke { font-style: normal; font-size: .8em; color: var(--hxl-warn); border: 1px solid currentColor; border-radius: 3px; padding: 0 .25em; }


/* ── Die Wabe ───────────────────────────────────────────────────────────── */
.hxl-wabe { --hex-b: 76px; --hex-h: calc(var(--hex-b) * 1.1547); --hex-gap: 5px; }
.hxl-wabe-stand { margin: 0 0 .4rem; color: var(--hxl-still); font-size: .85em; }
.hxl-wabe-raster { display: flex; flex-direction: column; align-items: flex-start; }
.hxl-wabe-reihe { display: flex; gap: var(--hex-gap); }
/* Reihen greifen ineinander: drei Viertel der Höhe je Reihe. */
.hxl-wabe-reihe + .hxl-wabe-reihe { margin-top: calc(var(--hex-h) * -0.25 + var(--hex-gap) * 0.5); }
/* Versetzte Reihe: eine halbe Sechseckbreite nach rechts. */
.hxl-wabe-reihe.ist-versetzt { margin-left: calc((var(--hex-b) + var(--hex-gap)) / 2); }

.hxl-hex {
  --hex-farbe: #4a5568;
  position: relative;
  width: var(--hex-b);
  height: var(--hex-h);
  flex: 0 0 auto;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
  transition: transform .12s;
}
.hxl-hex-form {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--hex-farbe);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  overflow: hidden;
}
.hxl-hex-bild { width: 100%; height: 100%; object-fit: cover; display: block; }
.hxl-hex-kuerzel { color: #fff; font-weight: 800; font-size: 1.35rem; letter-spacing: .02em; }

.hxl-hex:hover .hxl-hex-form { filter: brightness(1.12); }
.hxl-hex.ist-gewaehlt { transform: scale(1.05); z-index: 2; }
.hxl-hex.ist-gewaehlt .hxl-hex-form { box-shadow: inset 0 0 0 4px #fff, inset 0 0 0 7px var(--hex-farbe); }
.hxl-hex.ist-gesperrt { opacity: .32; cursor: not-allowed; }
.hxl-hex.ist-fan .hxl-hex-form::after {
  content: "★";
  position: absolute;
  left: 50%;
  bottom: 6%;
  transform: translateX(-50%);
  font-size: 9px;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,.9);
}
.hxl-hex:focus-visible { outline: 3px solid var(--hxl-akzent); outline-offset: 3px; border-radius: 4px; }

/* ── Team-Werte ─────────────────────────────────────────────────────────── */
/*
  Masse in festen Pixeln, nicht in em: `font: inherit` und Padding in em
  uebernehmen die Schriftgroesse des WordPress-Themes, und die ist von hier aus
  nicht vorhersehbar. Vier Anlaeufe brauchte diese Tabelle; die Fehler waren
  em-Masse, zu enge Zeilen, ein `max-width: 0` das die Zahlenspalten erdrueckte,
  und Eingabefelder, die an der Textgrundlinie statt an der Zellenmitte hingen.

  Die Charakterfarbe laeuft als Balken am linken Zeilenrand mit. Das ist nicht
  Schmuck: Es ist dieselbe Farbe wie im Sechseck darueber, und damit findet das
  Auge die Zeile zum Aristo, ohne den Namen zu lesen.
*/
.hxl-teamwerte {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin-top: .7rem;
  font-size: 14px;
  line-height: 1.2;
}
.hxl-teamwerte th,
.hxl-teamwerte td {
  padding: 0 6px;
  height: 46px;
  vertical-align: middle;
  text-align: left;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--hxl-rand);
}
.hxl-teamwerte thead th {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--hxl-still);
  font-weight: 700;
  height: 26px;
  border-bottom: 2px solid var(--hxl-rand);
}

/* Feste Breiten fuer die schmalen Spalten. Der Name nimmt, was uebrig ist. */
.hxl-tw-ini { width: 46px; color: var(--hxl-still); font-variant-numeric: tabular-nums; text-align: center; }
.hxl-tw-zahl { width: 108px; }
.hxl-tw-weg { width: 34px; }
.hxl-teamwerte th.hxl-tw-ini, .hxl-teamwerte th.hxl-tw-zahl { text-align: center; }

/* Zeile: Farbbalken links, sanfte Hervorhebung beim Ueberfahren. */
.hxl-teamwerte tbody tr { transition: background .12s; }
.hxl-teamwerte tbody tr:hover { background: var(--hxl-flaeche); }
.hxl-teamwerte tbody td:first-child { box-shadow: inset 4px 0 0 var(--zeilen-farbe, transparent); padding-left: 12px; }

.hxl-tw-mitte { display: flex; align-items: center; justify-content: center; height: 46px; }
.hxl-tw-inhalt { display: flex; align-items: center; gap: 10px; min-width: 0; height: 46px; }
.hxl-tw-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; color: var(--hxl-text); }
.hxl-tw-fan { color: var(--hxl-warn); margin-left: .3em; font-size: .8em; }

/* Sechseck statt Rechteck — dieselbe Form wie in der Wabe darueber. */
.hxl-tw-hex {
  width: 38px;
  height: 44px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  overflow: hidden;
}
.hxl-tw-bild { width: 100%; height: 100%; object-fit: cover; display: block; }
.hxl-tw-kuerzel { color: #fff; font-size: 12px; font-weight: 800; }

/*
  Zahlenfeld mit Knoepfen. Nach einer Partie um 23 Uhr tippt niemand gern in
  ein Zahlenfeld, und auf dem Handy blendet jedes davon die Tastatur ein.
*/
/*
  DIE HOEHE STEHT AN EINER STELLE. Vorher standen hier drei Zahlen — 32 fuer
  den Rahmen, 30 fuer die Knoepfe, 30 fuer das Feld — und die Zahl im Feld sass
  trotzdem zu hoch. Drei Zahlen, die zusammenpassen muessen, laufen frueher
  oder spaeter auseinander, und dann sucht man im falschen Selektor.

  Innenhoehe, Rahmenhoehe daraus abgeleitet:
*/
.hxl-stepper {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--hxl-rand);
  border-radius: 5px;
  overflow: hidden;
  background: #fff;
  /* stretch statt center: Alle drei Kinder fuellen die Hoehe komplett aus.
     Mit center haengt jedes Kind an seiner eigenen Hoehe, und schon eine
     abweichende reicht fuer eine schiefe Zeile. */
  height: calc(var(--hxl-stepper-h) + 2px);
  box-sizing: border-box;
}
.hxl-stepper:focus-within { border-color: var(--hxl-akzent); box-shadow: 0 0 0 2px rgba(43,108,176,.15); }
.hxl-stepper.hat-wert { border-color: var(--hxl-akzent); }

/*
  WARUM HIER !important STEHT, und nur hier.

  Ein Plugin lebt in fremdem CSS. Themes setzen fast alle etwas wie
  `.entry-content input[type="number"] { padding: .6em; line-height: 1.6; }` —
  Spezifitaet 0-2-1. Die Regel `.hxl-stepper input` hat 0-1-1 und verliert.
  Genau das ist am 10.09.2026 passiert: Eine Korrektur der Zeilenhoehe wurde
  eingebaut, getestet, ausgeliefert — und die Zahl sass unveraendert zu hoch,
  weil das Theme die Zeile nie an sich kommen liess.

  Abgesichert sind deshalb GENAU die drei Eigenschaften, die die vertikale
  Lage bestimmen: Hoehe, Zeilenhoehe, Innenabstand. Alles andere (Farbe,
  Schrift, Rahmen) darf das Theme gern beeinflussen — dort richtet es keinen
  Schaden an, und ein pauschales !important auf dem ganzen Block wuerde die
  Oberflaeche in jedem Theme gleich haesslich machen.
*/
.hxl-stepper-knopf {
  width: 28px;
  height: var(--hxl-stepper-h) !important;
  line-height: var(--hxl-stepper-h) !important;
  padding: 0 !important;
  border: 0;
  background: var(--hxl-flaeche);
  color: var(--hxl-still);
  font-size: 16px;
  cursor: pointer;
  flex: 0 0 auto;
  box-sizing: border-box;
}
.hxl-stepper-knopf:hover:not(:disabled) { background: var(--hxl-akzent); color: #fff; }
.hxl-stepper-knopf:disabled { opacity: .3; cursor: default; }
.hxl-stepper input {
  /* Die Breite braucht !important, weil der Schutzwall oben `width: auto`
     erzwingt — sonst waere das Feld so breit wie sein Inhalt und die Spalte
     wackelte mit jeder Zahl. */
  width: 40px !important;
  /*
    Ein Eingabefeld zentriert seinen Text NICHT von selbst vertikal. Die Zahl
    sitzt in einer Zeile der Hoehe line-height, und die liegt am oberen Rand,
    wenn sie kleiner als das Feld ist. Deshalb: line-height GLEICH der
    Feldhoehe, Innenabstand null. Beides muss durchkommen, sonst wandert die
    Zahl — siehe der Kommentar oben.
  */
  height: var(--hxl-stepper-h) !important;
  line-height: var(--hxl-stepper-h) !important;
  padding: 0 !important;
  /* Enfold setzt einen vollen Rahmen. Ohne !important bekommt die Zahl einen
     eigenen Kasten IM Kasten — genau so sah es auf dem Screenshot aus. */
  border: 0 !important;
  border-left: 1px solid var(--hxl-rand) !important;
  border-right: 1px solid var(--hxl-rand) !important;
  border-radius: 0;
  /* `font: 1em Helvetica` des Themes wuerde Schrift UND Zeilenhoehe kapern.
     Beide Angaben einzeln, damit die Kurzform nichts mehr auszurichten hat. */
  font-family: inherit !important;
  font-size: 15px !important;
  font-variant-numeric: tabular-nums;
  text-align: center !important;
  background: none !important;
  color: inherit;
  box-sizing: border-box;
  -moz-appearance: textfield;
}
/* Ein Wert im Feld faellt auf. Auch das muss gegen `color: #777` des Themes
   bestehen, sonst ist die Hervorhebung unsichtbar. */
.hxl-stepper.hat-wert input { color: var(--hxl-akzent) !important; font-weight: 700 !important; }
.hxl-stepper input::-webkit-outer-spin-button,
.hxl-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.hxl-tw-weg-knopf { width: 24px; height: 24px; border: 0; border-radius: 50%; background: none; color: var(--hxl-rand); font-size: 17px; line-height: 1; cursor: pointer; padding: 0; }
.hxl-teamwerte tbody tr:hover .hxl-tw-weg-knopf { color: var(--hxl-still); }
.hxl-tw-weg-knopf:hover { background: var(--hxl-fehler); color: #fff; }

/* Summenzeile: das Ergebnis der Eingabe, also darf sie auffallen. */
.hxl-teamwerte tfoot th {
  background: var(--hxl-flaeche);
  color: var(--hxl-text);
  font-size: 14px;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
  border-bottom: 0;
  border-top: 2px solid var(--hxl-rand);
  height: 40px;
}
.hxl-tw-summe { font-size: 17px; font-variant-numeric: tabular-nums; }
.hxl-tw-limit { color: var(--hxl-still); font-weight: 400; font-size: 12px; }
.hxl-teamwerte tfoot tr.hat-warnung th { background: #fffbeb; color: var(--hxl-warn); }
.hxl-tw-warnung { background: #fffbeb; color: var(--hxl-warn); font-size: 12px; padding: 6px 12px; height: auto; border-bottom: 0; }
.hxl-teamwerte-leer { color: var(--hxl-still); font-style: italic; font-size: 14px; margin: .6rem 0 0; padding: .5rem .7rem; background: var(--hxl-flaeche); border-radius: 5px; }

@media (max-width: 480px) {
  .hxl-tw-zahl { width: 92px; }
  .hxl-stepper input { width: 30px; }
  .hxl-stepper-knopf { width: 24px; }
}

/* ── Underdog ───────────────────────────────────────────────────────────── */
.hxl-underdog { background: var(--hxl-flaeche); border-radius: 6px; padding: .7rem .9rem; margin-bottom: 1rem; border-left: 4px solid var(--hxl-akzent); }
.hxl-underdog[data-underdog="offen"] { border-left-color: var(--hxl-warn); background: #fffbeb; }
.hxl-ud-kopf { display: flex; flex-wrap: wrap; gap: .5rem; align-items: baseline; }
.hxl-ud-summen { font-variant-numeric: tabular-nums; font-weight: 700; }
.hxl-ud-hinweis { color: var(--hxl-still); font-size: .9em; }
.hxl-ud-ergebnis { margin: .35rem 0 0; }
.hxl-ud-wahl { display: flex; gap: .5rem; margin-top: .5rem; flex-wrap: wrap; align-items: center; }
.hxl-ud-knopf { background: #fff; border: 2px solid var(--hxl-rand); border-radius: 5px; padding: .4rem 1rem; font: inherit; font-weight: 600; cursor: pointer; color: var(--hxl-still); }
.hxl-ud-knopf:hover { border-color: var(--hxl-still); color: var(--hxl-text); }
.hxl-ud-knopf.ist-aktiv { background: var(--hxl-warn); border-color: var(--hxl-warn); color: #fff; }

/* ── Offene Partien ─────────────────────────────────────────────────────── */
.hxl-offen { list-style: none; padding: 0; margin: 0; }
.hxl-karte { border: 1px solid var(--hxl-rand); border-radius: 6px; padding: .8rem 1rem; margin-bottom: .6rem; display: flex; flex-wrap: wrap; gap: .8rem; justify-content: space-between; align-items: center; }
.hxl-aktionen { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.hxl-aktionen input { font: inherit; padding: .4rem .6rem; border: 1px solid var(--hxl-rand); border-radius: 4px; }

/* ── Charaktertabelle ──────────────────────────────────────────────────────
   Gedaempft, wo die Zahl nichts aussagt. NICHT ausgeblendet: Wer eine Zeile
   vermisst, vermutet, es werde etwas unterschlagen — und eine Winrate aus
   drei Partien ist nicht falsch, sie ist nur nichts wert. */
.hxl-charaktere tr.ist-duenn td { opacity: .5; }
.hxl-charaktere .hxl-wr { font-variant-numeric: tabular-nums; font-weight: 600; }
.hxl-charaktere .hxl-wr-spanne {
  font-variant-numeric: tabular-nums;
  font-size: .85em;
  color: var(--hxl-still);
  white-space: nowrap;
}

/* ── Selbstauskunft der Datenbank ──────────────────────────────────────────
   Unauffaellig, solange alles stimmt: Ein Diagnosekasten, der jeden Tag ins
   Auge springt, wird nach einer Woche uebersehen — auch dann, wenn er etwas
   zu sagen hat. */
.hxl-systemcheck { border: 1px solid var(--hxl-rand); border-radius: 6px; padding: .5rem .8rem; margin-bottom: 1rem; background: var(--hxl-flaeche); }
.hxl-check-kopf { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.hxl-check-kopf strong { font-size: 14px; color: var(--hxl-still); font-weight: 600; }
.hxl-check-inhalt { margin-top: .6rem; }
.hxl-check-lage { font-weight: 700; margin: .3rem 0; }
.hxl-check-lage.ist-gut { color: var(--hxl-ok); }
.hxl-check-lage.ist-schlecht { color: var(--hxl-fehler); }
.hxl-check-liste { list-style: none; padding: 0; margin: .5rem 0; font-size: 13px; }
.hxl-check-liste li { padding: .15rem 0; border-bottom: 1px solid var(--hxl-rand); display: flex; gap: .6rem; align-items: baseline; }
.hxl-check-liste li:last-child { border-bottom: 0; }
.hxl-check-liste code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; min-width: 11ch; }
.hxl-check-liste li.ist-schlecht em { color: var(--hxl-fehler); font-style: normal; font-weight: 600; }
.hxl-check-haken { color: var(--hxl-ok); }

/* ── Spielerverwaltung ──────────────────────────────────────────────────── */
.hxl-verwaltung h3 { margin-top: 0; }
.hxl-neuer-spieler, .hxl-bearbeiten { background: var(--hxl-flaeche); border: 1px solid var(--hxl-rand); border-radius: 6px; padding: .7rem .9rem; margin-bottom: 1rem; }
.hxl-bearbeiten { border-color: var(--hxl-akzent); }
.hxl-neuer-spieler > strong, .hxl-bearbeiten > strong { display: block; margin-bottom: .5rem; }
.hxl-spielerliste .hxl-zahl { font-variant-numeric: tabular-nums; }
/* Ein Spieler ohne Konto kann nicht bestaetigen — das muss man in der Liste
   sehen, nicht erst wenn eine Partie in die Frist laeuft. */
.hxl-ohne-konto { color: var(--hxl-warn); font-style: normal; font-size: .85em; }

/* ── Corvus-Belli-ID ────────────────────────────────────────────────────────
   Die ID ist ein Code, kein Wort. Deshalb Monospace mit tabular-nums: Nur so
   stehen N9661 und X0001L untereinander gleich breit und ein Zahlendreher
   faellt beim Ueberfliegen der Spalte auf. In der Fliesstextschrift wandern
   die Ziffern und die Spalte franst aus. */
.hxl-cbid-wert {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-variant-numeric: tabular-nums;
  font-size: .9em;
  letter-spacing: .02em;
}
/* Selbst vergebene IDs sind gedaempft und gestrichelt unterstrichen: Sie
   gelten NICHT bei Corvus Belli. Wer ein offizielles Turnier meldet, muss die
   auf einen Blick von den echten trennen koennen — sonst faellt es erst beim
   Hochladen auf, und dann steht das Turnier schon. Farbe allein reicht dafuer
   nicht, das sieht ein rotgruenblinder Nutzer nicht. */
.hxl-cbid-wert.ist-lokal {
  color: var(--hxl-still);
  text-decoration: underline dotted;
  text-underline-offset: 3px;
}
.hxl-cbid-leer { color: var(--hxl-still); font-style: italic; font-size: .85em; }

/* Technischer Zusatz einer Fehlermeldung: die Rohmeldung vom Server. Steht
   nur da, wenn kein uebersetzter Text passt — dann ist sie das Einzige, was
   weiterhilft. Kleiner und gedaempft, damit sie den lesbaren Teil nicht
   verdraengt, aber auswaehlbar zum Kopieren. */
.hxl-fehler-technisch {
  display: block;
  margin-top: .3rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .8em;
  opacity: .8;
  word-break: break-word;
  user-select: all;
}
/* Feld und Vergeben-Knopf in einer Zeile, damit der Knopf nicht unter das
   Eingabefeld rutscht und wie ein Absenden-Knopf des Formulars aussieht. */
.hxl-cbid-eingabe { display: flex; gap: .4rem; align-items: center; }
.hxl-cbid-eingabe input {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace !important;
  /* 7ch statt einer Prozentbreite: Die ID ist hoechstens sechs Zeichen lang,
     ein breiteres Feld verspricht Platz, den es nicht gibt. */
  width: 8ch !important;
  flex: 0 0 auto;
  text-transform: uppercase;
}
.hxl-cbid-knopf { white-space: nowrap; }

.hxl-spielerliste tr.status-ruhend td { opacity: .6; }
.hxl-spielerliste tr.status-anonymisiert td { opacity: .45; font-style: italic; }
.hxl-entfernen:hover { color: var(--hxl-fehler); border-color: var(--hxl-fehler); }

/* ── Historie ───────────────────────────────────────────────────────────── */
.hxl-historie h3 { margin-top: 0; }
.hxl-filter { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: .8rem; }
.hxl-filter-knopf { display: inline-flex; align-items: center; gap: .4rem; border: 1px solid var(--hxl-rand); background: #fff; border-radius: 20px; padding: .25rem .7rem; font: inherit; font-size: .85em; cursor: pointer; color: var(--hxl-still); }
.hxl-filter-knopf:hover { border-color: var(--hxl-still); color: var(--hxl-text); }
.hxl-filter-knopf.ist-aktiv { background: var(--hxl-akzent); border-color: var(--hxl-akzent); color: #fff; font-weight: 600; }
.hxl-filter-zahl { background: rgba(0,0,0,.08); border-radius: 10px; padding: 0 .4em; font-size: .85em; font-variant-numeric: tabular-nums; }
.hxl-filter-knopf.ist-aktiv .hxl-filter-zahl { background: rgba(255,255,255,.25); }

.hxl-historie-tabelle .hxl-zahl { color: var(--hxl-still); font-variant-numeric: tabular-nums; }
/* Verworfene Partien bleiben lesbar, aber sichtbar aussortiert. */
.hxl-historie-tabelle tr.status-verworfen td { opacity: .5; text-decoration: line-through; }
.hxl-historie-tabelle tr.status-verworfen .hxl-aktionen { opacity: 1; text-decoration: none; }
.hxl-historie-tabelle .hxl-aktionen { display: flex; gap: .3rem; flex-wrap: wrap; }
.hxl-zurueckholen:hover { color: var(--hxl-ok); border-color: var(--hxl-ok); }
.hxl-verwerfen:hover { color: var(--hxl-warn); border-color: var(--hxl-warn); }

/* ── Kurve ──────────────────────────────────────────────────────────────── */
.hxl-kurve { width: 100%; max-width: 600px; height: auto; display: block; }
.hxl-kurve-null { stroke: var(--hxl-rand); stroke-dasharray: 4 4; }
.hxl-kurve-linie { fill: none; stroke: var(--hxl-akzent); stroke-width: 2; }
.hxl-kurve-punkt { fill: var(--hxl-akzent); }
.hxl-kurve-punkt.zeittakt { fill: var(--hxl-still); }

/* ── Schmale Schirme ────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .hxl-wabe { --hex-b: 62px; --hex-gap: 4px; }
  .hxl-hex-kuerzel { font-size: 1.05rem; }
  .hxl-tabelle { font-size: .85em; }
  .hxl-tabelle th, .hxl-tabelle td { padding: .35rem .4rem; }
  .hxl-karte { flex-direction: column; align-items: stretch; }
}