/* Klingenpfad - Optik, Stufe 1
   Hochformat fuers Handy, dunkel, grosse Flaechen, alles mit
   dem Daumen erreichbar. Keine Bibliothek, kein Build. */

:root {
  /* ⚠️ color-scheme fehlte komplett (HO-86, 18.09.2026). Ohne die
     Zeile malt der Browser Eingabefelder, Schieber, Auswahlmenues und
     Scrollbalken in HELL - mitten in einem dunklen Spiel. Und zwar
     nur die, die er selbst zeichnet, deshalb sieht man es im eigenen
     CSS nicht. */
  color-scheme: dark;

  /* Zahlen zappeln nicht mehr. Bei einer Proportionalschrift ist die
     1 schmaler als die 8, also wandert jeder mitlaufende Zaehler bei
     jeder Aenderung ein Stueck hin und her - Gold, XP, Truppenleben,
     die Boss-Uhr. (HO-84) */
  font-variant-numeric: tabular-nums;

  --grund:       #0e1016;
  --flaeche:     #171b26;
  --flaeche-hell:#1f2533;
  --rand:        #2b3345;
  --schrift:     #e8ecf5;
  --schrift-matt:#8e98ad;
  --gold:        #f2c14e;
  --leben:       #48c774;
  --leben-dunkel:#2f7c4d;
  --feind:       #e2494a;
  --feind-dunkel:#8f2b2c;
  --xp:          #4a9ef2;
  --krit:        #ffcf4d;

  /* ⚠️ HO-90, zweiter Teil (20.09.2026). Die Datei trug 14 verschiedene
     Eckenrundungen (2,3,6,7,8,9,10,11,12,13,14,16,18,20) und 17
     verschiedene Zeilenhoehen (18 bis 90). Kein Mensch sieht den
     Unterschied zwischen 12 und 13 px - aber jede Liste wirkte wie aus
     einem anderen Spiel, weil nie zweimal dasselbe Mass kam.

     Ab hier gibt es eine Leiter. Vier Rundungen, fuenf Hoehen. Wer eine
     neue Zahl braucht, braucht in Wahrheit eine der fuenf hier. */

  /* Rundungen: Leisten - kleine Marken - Karten und Zeilen - grosse Kaesten */
  --r-1:  4px;
  --r-2:  8px;
  --r-3: 13px;
  --r-4: 20px;

  /* Hoehen. --zh-3 ist die Daumengrenze aus HO-82: darunter trifft man
     daneben. Alles, was angetippt wird, faengt bei --zh-3 an. */
  --zh-1: 28px;   /* Textplatz, Mini-Marke - nichts zum Antippen */
  --zh-2: 36px;   /* kleine Nebenknoepfe */
  --zh-3: 44px;   /* Daumen-Untergrenze */
  --zh-4: 56px;   /* Standardknopf, Eingabefeld */
  --zh-5: 68px;   /* grosse Zeile mit zwei Textzeilen darin */
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

/* ⚠️ HIER KLEBTE DIE KOPFZEILE NICHT (HO-81, 18.09.2026).
   Vorher stand hier `height: 100%`. Zusammen mit `body { display:
   flex }` macht das aus #rahmen einen Flex-Gegenstand, der auf die
   Hoehe des Fensters GESTRECKT wird - 844 px, waehrend der Inhalt der
   Welt-Ansicht 5.313 px lang ist. Ein klebendes Element darf aber nur
   innerhalb seines eigenen Kastens wandern, und der war zu Ende.
   Gemessen: Bei Scrollstand 1200 sass #kopf auf `top: -466px`.

   Ab 734 px Scrollen waren Gold, Stufe und XP weg - die drei Zahlen,
   um die sich im Spiel alles dreht. Die Reiterleiste unten klebte,
   weil sie `position: fixed` ist und deshalb gar keinen Kasten
   braucht.

   Jetzt: `min-height` statt `height`, #rahmen wird nicht mehr
   gestreckt (align-items), und die Bildschirmhoehe steht dort, wo sie
   gebraucht wird - an #rahmen selbst. */
html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  background: var(--grund);
  color: var(--schrift);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  overscroll-behavior: none;
  user-select: none;
  -webkit-user-select: none;
}

/* ⚠️ HO-87 (20.09.2026): `user-select: none` auf body ist richtig - ein
   Spiel, in dem bei jedem Antippen ein blauer Markierbalken aufgeht,
   fuehlt sich kaputt an. Aber es VERERBT sich bis ins Eingabefeld, und
   auf Android wird Einfuegen per Langdruck damit unzuverlaessig.
   Vorher stand die Gegenregel an genau zwei Stellen (Liga-Feld und
   Sicherungsfeld) - das Chatfeld war NICHT dabei, und der
   Einladungscode der Gilde liess sich nicht kopieren, obwohl er zum
   Weitergeben da ist.

   Jetzt gilt sie fuer alles, was man tippt, und fuer alles, was man
   herauskopieren koennen muss. -webkit- dazu, weil genau die
   betroffenen Handy-Browser die Kurzform noch brauchen. */
input,
textarea,
[contenteditable],
.chat-text,
.gilde-code b,
#sicherungsfeld {
  user-select: text;
  -webkit-user-select: text;
}

body {
  display: flex;
  justify-content: center;
  /* Nicht strecken - sonst ist #rahmen wieder genau fensterhoch und
     die Kopfzeile hat keinen Weg. */
  align-items: flex-start;
}

#rahmen {
  width: 100%;
  max-width: 480px;
  /* Im Kampfbild soll der Rahmen den Bildschirm fuellen (#buehne hat
     flex: 1). Das kommt jetzt von hier statt von body - dvh, weil
     100vh auf dem Handy die Adresszeile mitrechnet. */
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, #121620 0%, var(--grund) 45%);
}

/* ---------- Kopfzeile: Gold, Stufe, XP ---------- */

#kopf {
  /* 14/10 -> 10/8: sechs Pixel, die im Kampfbild den Unterschied
     zwischen "passt" und "passt knapp nicht" machen (18.09.2026
     gemessen). Weiter runter geht es nicht - darunter kleben Gold
     und XP-Leiste aneinander. */
  padding: 10px 16px 8px;
  border-bottom: 1px solid var(--rand);
  background: rgba(15, 18, 26, 0.9);
  position: sticky;
  top: 0;
  z-index: 5;
}

#kopf-titel {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  font-size: 13px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--schrift-matt);
  margin-bottom: 8px;
}

#zonenzeile { color: var(--schrift); font-weight: 600; }
#wellenzeile { white-space: nowrap; }

#kopf-werte {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 10px;
}

.wert {
  display: flex;
  align-items: center;
  gap: 8px;
}

.wert .marke { font-size: 22px; }
#anzeige-gold { color: var(--gold); }
#anzeige-level { color: var(--xp); }

#xp-leiste {
  position: relative;
  height: 20px;
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-radius: var(--r-3);
  overflow: hidden;
}

#xp-fuellung {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #2e6fb5, var(--xp));
  transition: width 0.35s ease-out;
}

/* ⚠️ HO-84: Der Text fuellte die Leiste vollstaendig aus (341 von
   341 px) und wurde vom `overflow: hidden` der Leiste STILL
   abgeschnitten - ohne Auslassungspunkte, man sah einfach eine
   halbe Zahl. Jetzt darf er kleiner werden, bevor er verschwindet. */
#xp-text {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  font-size: clamp(10px, 3vw, 12px);
  font-weight: 600;
  color: var(--schrift);
  text-shadow: 0 1px 2px rgba(0,0,0,0.8);
}

/* ---------- Kampfbild ---------- */

#buehne {
  position: relative;
  flex: 1;
  padding: 18px 16px 8px;
}

#gegner-bereich {
  text-align: center;
  padding: 18px 12px 20px;
  background: radial-gradient(circle at 50% 30%, rgba(226,73,74,0.13), transparent 70%);
  border: 1px solid var(--rand);
  border-radius: var(--r-4);
}

#gegner-name {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 2px;
}

#gegner-nr {
  font-size: 12px;
  color: var(--schrift-matt);
  margin-bottom: 10px;
  letter-spacing: 1px;
}

#gegner {
  font-size: 68px;
  line-height: 1;
  margin: 2px 0 8px;
  display: inline-block;
  animation: wippen 2.2s ease-in-out infinite;
}

#gegner.tot {
  animation: none;
  opacity: 0.25;
  transform: rotate(18deg) scale(0.8);
  transition: all 0.3s ease-out;
}

@keyframes wippen {
  0%, 100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(-6px) scale(1.04); }
}

.balken {
  position: relative;
  background: #0a0d13;
  border: 1px solid var(--rand);
  border-radius: var(--r-2);
  overflow: hidden;
}

.balken.gross { height: 26px; }
.balken.klein { height: 10px; border-radius: var(--r-2); margin-top: 6px; }

/* ---------- Die Helden reden (18.09.2026) ----------------
   Robert: „ich hab einen scheis tag, erfreu mich mit ein paar schönen
   sachen in meinem spiel."
   Zehn gemalte Figuren standen im Kampfbild und haben nie ein Wort
   gesagt. Jetzt schon — und ihre Stimme schwebt über dem Fuß, kostet
   also keine einzige Zeile. Im Kampfbild ist es eng genug. */
#stimme {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 2px;
  z-index: 8;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 12px 7px 8px;
  background: linear-gradient(90deg, rgba(31,37,51,0.97), rgba(23,27,38,0.93));
  border: 1px solid var(--gold);
  border-radius: var(--r-3);
  box-shadow: 0 6px 18px rgba(0,0,0,0.5);
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity 0.25s ease-out, transform 0.25s ease-out;
}

#stimme.sichtbar { opacity: 1; transform: translateY(0); }

/* Und die Karte dessen, der spricht, leuchtet mit — sonst weiß man
   bei vier nebeneinander nicht, wer da redet. */
.held.spricht { box-shadow: inset 0 0 0 1px var(--gold), 0 0 12px rgba(242,193,78,0.35); }

.stimme-figur {
  flex: none;
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  border-radius: var(--r-2);
  background: var(--grund);
}
.stimme-figur img { width: 100%; height: auto; }

.stimme-text {
  flex: 1;
  min-width: 0;
  font-size: 12.5px;
  line-height: 1.3;
  color: var(--schrift);
  font-style: italic;
}
.stimme-text b { font-style: normal; color: var(--gold); margin-right: 4px; }

/* Wer keine Bewegung will, bekommt sie auch hier nicht. */
@media (prefers-reduced-motion: reduce) {
  #stimme { transition: none; transform: none; }
}

/* ---------- Die Gegnerreihe (18.09.2026) ----------------
   Robert hat auf die Frage, was ihm am Kampf fehlt, ALLE VIER Punkte
   angekreuzt. Der erste ist die Wurzel der anderen drei: es stand
   immer nur einer da. Jetzt stehen bis zu drei — und die Karten sind
   mit Absicht gebaut wie die Heldenkarten darunter: dieselbe
   Leserichtung Bild, Name, Leben, Tempo, Restzeit. Wer die eine Reihe
   lesen kann, kann auch die andere. */

#gegner-reihe {
  display: flex;
  align-items: flex-end;
  gap: 6px;
}

.gk {
  flex: 1;
  min-width: 0;
  padding: 6px 4px 5px;
  text-align: center;
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-radius: var(--r-3);
  cursor: pointer;
  transition: border-color 0.12s, box-shadow 0.12s, opacity 0.2s;
}

/* Steht nur einer da, bekommt er die ganze Breite und ein großes Bild
   — die sechzehn gemalten Gegner sollen auch gesehen werden. */
#gegner-reihe.einzeln .gk { padding: 8px 10px 6px; }
#gegner-reihe.einzeln .gk-bild { height: 112px; }
#gegner-reihe.einzeln .gk-name { font-size: 15px; }

.gk-bild {
  height: 80px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  font-size: 44px;
  line-height: 1;
  margin-bottom: 3px;
}
.gk-bild .gegner-figur { max-height: 100%; width: auto; }

.gk-name {
  font-size: 11px;
  font-weight: 700;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 3px;
}

/* Im Kampfbild ist der Lebensbalken je Gegner flacher als der eine
   große von vorher — drei davon müssen nebeneinander passen. */
.gk .balken.gross { height: 18px; }

.gk-leben {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  color: var(--schrift);
  text-shadow: 0 1px 2px rgba(0,0,0,0.9);
}

.gk .balken.tempo.gegner { max-width: none; margin: 3px 0 0; }

.gk-uhr {
  margin-top: 2px;
  font-size: 10px;
  font-weight: 700;
  color: var(--schrift-matt);
  font-variant-numeric: tabular-nums;
}

/* Das Ziel: darauf schlägt die Truppe. Golden, weil Gold im ganzen
   Spiel „hier entscheidest du" heißt. */
.gk.ziel {
  border-color: var(--gold);
  background: var(--flaeche-hell);
}
.gk.ziel .gk-uhr { color: var(--gold); }

/* Wer als Nächstes zuschlägt, glüht rot — dieselbe Marke wie bei den
   Helden, nur in der Gegnerfarbe. */
.gk.dran {
  border-color: var(--feind);
  box-shadow: 0 0 0 2px rgba(226,73,74,0.25);
}
.gk.dran .gk-uhr { color: var(--feind); }

.gk.boss .gk-name { color: var(--krit); }

/* Der Schlag eines Gegners bekommt einen eigenen Augenblick
   (18.09.2026). Robert: „Der Boss zieht nachdem ich die Spieler
   gespielt hab aber immer noch nicht automatisch seinen Zug."
   Nachgemessen hat er sehr wohl gezogen — nur war nichts davon AN IHM
   zu sehen: Die Schadenszahl fliegt unten am Helden, und oben, wo man
   hinschaut, passierte nichts. */
.gk.schlaegt {
  animation: gegner-schlag 0.34s ease-out;
  border-color: var(--feind);
}

@keyframes gegner-schlag {
  0%   { transform: translateY(0)     scale(1);    box-shadow: 0 0 0 0 rgba(226,73,74,0); }
  35%  { transform: translateY(10px)  scale(1.06); box-shadow: 0 0 0 3px rgba(226,73,74,0.55); }
  100% { transform: translateY(0)     scale(1);    box-shadow: 0 0 0 0 rgba(226,73,74,0); }
}

/* Der unsichtbare Anker, an dem die fliegenden Zahlen hängen —
   zwei Ids an einem Element gehen nicht. */
.gk-anker { position: absolute; left: 50%; top: 45%; width: 1px; height: 1px; }
.gk { position: relative; }

.gk.tot { opacity: 0.3; cursor: default; }
.gk.tot .gk-bild { filter: grayscale(1); }

.gk:active { background: var(--rand); }

.fuellung {
  height: 100%;
  width: 100%;
  transition: width 0.3s linear;
}

#gegner-fuellung {
  background: linear-gradient(90deg, var(--feind-dunkel), var(--feind));
}

.fuellung.leben {
  background: linear-gradient(90deg, var(--leben-dunkel), var(--leben));
}

#gegner-leben-text {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  text-shadow: 0 1px 2px rgba(0,0,0,0.9);
}

/* ---------- Die Truppe ---------- */

.abschnitt-titel {
  margin: 20px 0 8px;
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--schrift-matt);
}

/* Die Truppe im Kampfbild - VIER NEBENEINANDER (16.09.2026).
   Robert mit einem Screenshot: "siehst du das problem, es sollte alles
   auf den bildschirm passen." Vorher waren es zwei Reihen mit grossen
   Karten: 360 von 844 Pixeln nur fuer die Truppe, und darunter kam
   noch die Faehigkeitsleiste. Jetzt ~90 px, und die Karte ist
   gleichzeitig die Auswahl fuer die Faehigkeiten. */
#truppe {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 5px;
}

.held {
  display: flex; flex-direction: column; align-items: center;
  gap: 1px;
  padding: 5px 2px 6px;
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-radius: var(--r-3);
  color: var(--schrift);
  transition: opacity .3s, border-color .3s;
}
/* ⚠️ "kann handeln" und "ist aufgeklappt" sind ZWEI Dinge und brauchen
   zwei Zeichen. Bis zum 17.09.2026 waren beide golden umrandet, und
   jede Karte trug eine goldene Marke - dadurch sah alles gleich aktiv
   aus, obwohl nur eines ging. Jetzt:
     leuchtet  = hat etwas Bereites
     Balken    = ist gerade aufgeklappt  */
.held { opacity: .72; }
.held.kann  { opacity: 1; border-color: var(--gold); }
.held.offen { background: var(--flaeche-hell); box-shadow: inset 0 -3px 0 var(--gold); }
.held.zug   { box-shadow: inset 0 -3px 0 var(--gold), 0 0 0 1px var(--gold); }
.held:not(.kann) .held-marke { color: var(--schrift-matt); }
.held:active { background: var(--rand); }
.held.gefallen, .held.tot {
  opacity: .4;
  border-color: var(--feind-dunkel);
}

/* ⚠️ HIER RAGTE DAS PORTRAET AUS SEINEM KASTEN (HO-90, 19.09.2026).
   Der Kasten war 30 px hoch, das Bild darin 48 - gemessen im Kampf an
   allen vier Heldenkarten: 18 px Ueberlauf. Die Zeile darunter war
   `.held-figur { height: 30px; width: auto }` und tat NICHTS: weiter
   unten steht `.held-figur { width: 48px; height: 48px }` (Zeile 2224),
   gleiche Staerke, spaeter in der Datei - die gewinnt. Die 30 px waren
   also seit jeher tot, und niemand sah es, weil der Kasten sie trug.
   Jetzt traegt der Kasten die Groesse, die wirklich drinsteht. */
.held-emoji { display: block; height: 48px; font-size: 22px; }

.held-name {
  font-size: 10.5px; font-weight: 700; line-height: 1.1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 100%;
}

.balken.winzig {
  display: block; width: 100%; height: 4px;
  margin: 2px 0 1px;
  background: var(--grund);
  border-radius: var(--r-1); overflow: hidden;
}
.balken.winzig .fuellung { display: block; height: 100%; }

/* ⚠️ HO-84 (18.09.2026): 9 px. Das ist die Zahl, auf die man im Kampf
   schaut - und sie war die kleinste Schrift im ganzen Bild. Jetzt
   11 px und heller.
   ⚠️ Vorsicht bei weiteren Erhoehungen: Robert hat am 16.09. einen
   Screenshot geschickt, weil das Kampfbild nicht mehr auf den
   Bildschirm passte ("es sollte alles auf den Bildschirm passen").
   Nach dieser Aenderung nachgemessen: 745 px bei 844 verfuegbaren. */
.held-leben {
  font-size: 11px; color: var(--schrift);
  font-variant-numeric: tabular-nums;
}
.held-marke {
  font-size: 10px; font-weight: 700; color: var(--gold);
  font-variant-numeric: tabular-nums;
}
.held.tot .held-marke { color: var(--feind); }

/* Die Ueberschrift im Kampfbild darf kleiner sein - dort zaehlt jede
   Zeile. */
.abschnitt-titel.klein { margin: 10px 0 5px; font-size: 10px; }

/* ---------- Fliegende Zahlen ---------- */

#flugzahlen {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.flugzahl {
  position: absolute;
  font-weight: 800;
  font-size: 20px;
  transform: translate(-50%, 0);
  animation: hoch 1.1s ease-out forwards;
  text-shadow: 0 2px 4px rgba(0,0,0,0.9);
  white-space: nowrap;
}

.flugzahl.schaden      { color: #ffffff; }
.flugzahl.krit         { color: var(--krit); font-size: 28px; }
.flugzahl.schaden-gegen{ color: #ff8f8f; font-size: 17px; }
.flugzahl.krit-gegen   { color: var(--feind); font-size: 22px; }
.flugzahl.gold         { color: var(--gold); font-size: 18px; }
.flugzahl.level        { color: var(--xp); font-size: 26px; letter-spacing: 1px; }

@keyframes hoch {
  0%   { opacity: 0; transform: translate(-50%, 6px) scale(0.7); }
  15%  { opacity: 1; transform: translate(-50%, -4px) scale(1.15); }
  40%  { opacity: 1; transform: translate(-50%, -26px) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -66px) scale(0.95); }
}

/* ---------- Meldung ---------- */

#meldung {
  position: fixed;
  left: 50%;
  top: 96px;
  transform: translate(-50%, -12px);
  padding: 10px 18px;
  border-radius: var(--r-3);
  background: var(--flaeche-hell);
  border: 1px solid var(--rand);
  font-weight: 700;
  font-size: 14px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s, transform 0.25s;
  z-index: 20;
}

#meldung.sichtbar { opacity: 1; transform: translate(-50%, 0); }
#meldung.gut      { color: var(--leben); border-color: var(--leben-dunkel); }
#meldung.schlecht { color: var(--feind); border-color: var(--feind-dunkel); }

/* ---------- Fussleiste ---------- */

#fuss {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
}

button {
  flex: 1;
  min-height: var(--zh-4);
  font-size: 16px;
  font-weight: 700;
  color: var(--schrift);
  background: var(--flaeche-hell);
  border: 1px solid var(--rand);
  border-radius: var(--r-3);
  cursor: pointer;
}

button:active { background: #2a3245; transform: translateY(1px); }

#knopf-neu {
  flex: 0 0 64px;
  font-size: 20px;
  color: var(--schrift-matt);
}

#stand-text {
  flex: 1;
  text-align: center;
  font-size: 13px;
  color: var(--schrift-matt);
}

/* ⚠️ HO-85 (18.09.2026): Das lag `right: 14px` am FENSTER - am PC
   also 700 px neben dem Spiel an der Bildschirmkante, und am Handy
   quer ueber der Wellenzeile und beim Scrollen mitten im Fliesstext
   ("— jedes genau einmal" im Eidstein-Bild).
   Jetzt ist es ein Band ueber der ganzen Breite, in dem der Text an
   der rechten Kante der 480er-Spalte sitzt. `pointer-events: none`,
   damit es nie einen Knopf darunter abfaengt. */
/* ⚠️ HO-85 (18.09.2026): Das lag `right: 14px; top: 14px` am FENSTER -
   am PC also 700 px neben dem Spiel an der Bildschirmkante, am Handy
   quer ueber der Wellenzeile. Beim ersten Anlauf habe ich es nur
   waagerecht in die Spalte geholt; im Screenshot lag es danach
   immer noch auf "BOSSKAMPF". Die Zonenzeile ist Information, ein
   "gespeichert" ist es nicht - also nach UNTEN, dicht ueber die
   Reiterleiste. Dort steht nur der Fuss, und #meldung sitzt oben auf
   96 px, die beiden koennen sich nicht in die Quere kommen. */
#gespeichert {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 72px;
  margin: 0 auto;
  width: fit-content;
  padding: 3px 10px;
  pointer-events: none;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--leben);
  background: var(--flaeche-hell);
  border: 1px solid var(--leben-dunkel);
  border-radius: var(--r-2);
  opacity: 0;
  transition: opacity 0.3s;
  z-index: 30;
}

#gespeichert.sichtbar { opacity: 1; }

/* ---------- Stufe 2: Bossuhr ---------- */

/* ⚠️ Die Zahl liegt AUF der Leiste, nicht darunter (18.09.2026).
   Zwei Zeilen fuer eine Information sind im Kampfbild eine zu viel:
   gemessen 28 px -> 16 px, und ablesbar ist es besser, weil Balken
   und Zahl zusammen an einer Stelle stehen. */
#bossuhr {
  display: none;
  position: relative;
  margin: 5px auto 2px;
  max-width: 260px;
}

#bossuhr.sichtbar { display: block; }

#bossuhr-leiste {
  height: 14px;
  background: #0a0d13;
  border: 1px solid var(--feind-dunkel);
  border-radius: var(--r-2);
  overflow: hidden;
}

#bossuhr-fuellung {
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, var(--feind), var(--krit));
  transition: width 0.45s linear;
}

#bossuhr-text {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 800;
  color: var(--schrift);
  letter-spacing: 1px;
  text-shadow: 0 1px 2px rgba(0,0,0,0.9);
}

#gegner-bereich.boss {
  border-color: var(--feind-dunkel);
  background: radial-gradient(circle at 50% 30%, rgba(242,193,78,0.14), transparent 70%);
}

#gegner-bereich.boss #gegner-name { color: var(--krit); }

/* ---------- Stufe 2: Reiterleiste ---------- */

#buehne { padding-bottom: 24px; }

#reiterleiste {
  position: sticky;
  bottom: 0;
  display: flex;
  gap: 0;
  border-top: 1px solid var(--rand);
  background: rgba(13, 16, 23, 0.97);
  padding-bottom: env(safe-area-inset-bottom);
  z-index: 6;
}

.reiter {
  flex: 1;
  min-height: var(--zh-5);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  font-size: 12px;
  font-weight: 600;
  color: var(--schrift-matt);
  background: transparent;
  border: none;
  border-radius: 0;
  border-top: 2px solid transparent;
}

.reiter span { font-size: 21px; line-height: 1; }
.reiter.aktiv { color: var(--schrift); border-top-color: var(--xp); background: rgba(74,158,242,0.08); }
.reiter:active { background: rgba(74,158,242,0.16); }

/* ---------- Die Welt-Leiste (20.09.2026) ----------
   Vier Ziele oben in jeder Welt-Ansicht. Eine ganz normale Knopfreihe,
   NICHT klebend - siehe den Kommentar an der Leiste im index.html.
   Das Zahnrad traegt kein Wort, weil es ein Zahnrad sein soll - nicht
   aus Platzmangel. Nachgemessen bei 390 px: mit "Optionen" daneben
   werden die vier Knoepfe 82/82/82/95 px breit, nichts laeuft ueber
   und kein Wort wird abgeschnitten. Wer das Wort doch will, nimmt im
   index.html die Klasse .zahnrad weg und haengt <span>Optionen</span>
   an den Knopf. */
.welt-leiste {
  display: flex;
  gap: 6px;
  margin-bottom: 14px;
}

.welt-knopf {
  flex: 1;
  min-height: var(--zh-3);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--schrift-matt);
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-radius: var(--r-3);
}

.welt-knopf.zahnrad { flex: 0 0 52px; gap: 0; font-size: 19px; }

.welt-knopf.aktiv {
  color: var(--schrift);
  border-color: var(--xp);
  background: rgba(74,158,242,0.12);
}

/* ---------- Stufe 2: Kader und Zonen ---------- */

.hinweis {
  font-size: 12px;
  line-height: 1.5;
  color: var(--schrift-matt);
  margin-bottom: 10px;
}

.hinweis.stark { color: var(--xp); font-weight: 700; }

.kader-zeile, .zone-zeile {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  margin-bottom: 8px;
  min-height: var(--zh-5);
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-radius: var(--r-3);
}

.kader-zeile.dabei, .zone-zeile.hier {
  border-color: var(--leben-dunkel);
  background: linear-gradient(90deg, rgba(72,199,116,0.10), var(--flaeche) 60%);
}

/* ⚠️ HO-86: 0,45 ergab 2,25:1 - und in genau diesen Zeilen steht die
   Freischaltbedingung ("Boss von Zone 7"). Wer sie nicht lesen kann,
   weiss nicht, was er tun soll. */
.kader-zeile.zu, .zone-zeile.zu { opacity: 0.66; }
.kader-zeile:not(.zu):active, .zone-zeile:not(.zu):active { background: var(--flaeche-hell); }

/* ⚠️ Kader und Zonen brauchen VERSCHIEDEN breite Kaesten (HO-90,
   19.09.2026). Sie standen zusammen auf 34 px, aber in der Kaderzeile
   sitzt ein gemaltes Portraet (.kader-figur, 44 px), in der Zonenzeile
   nur ein Emoji. Gemessen an allen zehn Heldenzeilen: das Bild ragte
   10 px nach rechts aus dem Kasten und liess vom 12-px-Abstand zum
   Namen genau 2 uebrig - deshalb klebten die Zeilen. Ein Emoji bei
   28 px ist 38,5 px breit, braucht also auch mehr als 34. */
.kader-emoji { font-size: 28px; width: 44px; text-align: center; }
.zone-emoji  { font-size: 28px; width: 40px; text-align: center; }
.kader-mitte, .zone-mitte { flex: 1; min-width: 0; }
.kader-name, .zone-name { font-size: 15px; font-weight: 700; }
.kader-rolle, .zone-info { font-size: 11px; color: var(--schrift-matt); margin-top: 2px; }
.kader-spruch { font-size: 11px; color: var(--schrift-matt); margin-top: 3px; font-style: italic; }

.kader-marke, .zone-marke {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--schrift-matt);
  text-align: right;
  white-space: nowrap;
}

.kader-zeile.dabei .kader-marke, .zone-zeile.hier .zone-marke { color: var(--leben); }

/* ---------- Eigene Stufe je Held (17.09.2026) ----------
   Robert: "Talentpunkte sollten nur Charakter bekommen die gespielt
   werden, die sollten ihr eigenes lvl haben."
   Damit muss die Stufe auch AM HELDEN stehen - im Kader neben der
   Marke, und auf seiner Karte als eigene Zeile mit Balken. Sonst ist
   die Zahl da, aber niemand sieht sie. */

.kader-stufe {
  display: block;
  color: var(--xp);
  letter-spacing: 0;
  text-transform: none;
  font-size: 11px;
  margin-bottom: 2px;
}

.stufen-zeile {
  background: var(--flaeche-hell);
  border: 1px solid var(--rand);
  border-radius: var(--r-2);
  padding: 7px 9px;
  margin: 8px 0;
}
.stufen-kopf {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  font-size: 13px;
}
.stufen-kopf span { font-size: 10px; color: var(--schrift-matt); text-align: right; }
.stufen-balken {
  height: 6px;
  background: var(--grund);
  border-radius: var(--r-1);
  overflow: hidden;
  margin: 5px 0 4px;
}
.stufen-balken span { display: block; height: 100%; background: var(--xp); }
.stufen-fuss { font-size: 10px; color: var(--schrift-matt); }

/* ---------- Stufe 6: Liga ---------- */

.liga-zeile {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  margin-bottom: 8px;
  min-height: var(--zh-5);
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-radius: var(--r-3);
}

.liga-zeile.ich {
  border-color: var(--xp);
  background: linear-gradient(90deg, rgba(74,158,242,0.12), var(--flaeche) 60%);
}

.liga-platz {
  font-size: 19px;
  font-weight: 800;
  color: var(--schrift-matt);
  min-width: 28px;
  text-align: center;
}

.liga-zeile:first-child .liga-platz { color: var(--gold); }
.liga-mitte { flex: 1; min-width: 0; }
.liga-name { font-size: 15px; font-weight: 700; }
.liga-info { font-size: 11px; color: var(--schrift-matt); margin-top: 2px; }
.liga-truppe { font-size: 15px; margin-top: 4px; letter-spacing: 2px; }

.liga-punkte {
  font-size: 17px;
  font-weight: 800;
  color: var(--xp);
  white-space: nowrap;
}

.feld-titel {
  display: block;
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--schrift-matt);
  margin: 10px 0 4px;
}

#liga-einstellung input {
  width: 100%;
  min-height: var(--zh-4);
  padding: 10px 12px;
  font-size: 14px;
  color: var(--schrift);
  background: #0a0d13;
  border: 1px solid var(--rand);
  border-radius: var(--r-3);
  user-select: text;
}

#liga-einstellung input:focus { outline: none; border-color: var(--xp); }
#knopf-senden { margin-top: 14px; }

/* ---------- Stufe 5: Willkommen nach der Pause ---------- */

#willkommen {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(6, 8, 12, 0.85);
}

#willkommen.sichtbar { display: flex; }

#willkommen-kasten {
  width: 100%;
  max-width: 420px;
  max-height: 86vh;
  overflow-y: auto;
  padding: 18px;
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-radius: var(--r-4);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.6);
}

#willkommen-titel {
  font-size: 13px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--schrift-matt);
  margin-bottom: 10px;
}

.willk-kopf { font-size: 19px; font-weight: 700; margin-bottom: 10px; }

.willk-werte {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  margin: 12px 0;
}

.willk-wert {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 10px 6px;
  background: #0d1017;
  border: 1px solid var(--rand);
  border-radius: var(--r-3);
  font-size: 10px;
  color: var(--schrift-matt);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.willk-wert span { font-size: 19px; }
.willk-wert b { font-size: 16px; color: var(--schrift); }

.willk-teil {
  font-size: 12px;
  font-weight: 600;
  padding: 7px 10px;
  margin-bottom: 5px;
  background: #0d1017;
  border: 1px solid var(--rand);
  border-radius: var(--r-3);
}

.willk-teil.s0 { color: var(--s0); }
.willk-teil.s1 { color: var(--s1); }
.willk-teil.s2 { color: var(--s2); border-color: rgba(74,158,242,0.4); }
.willk-teil.s3 { color: var(--s3); border-color: rgba(168,111,242,0.45); }
.willk-teil.s4 { color: var(--s4); border-color: rgba(242,160,61,0.55); }

#willkommen-knopf {
  width: 100%;
  min-height: var(--zh-4);
  margin-top: 14px;
  color: var(--grund);
  background: var(--leben);
  border-color: var(--leben);
}

#sicherungsfeld {
  width: 100%;
  /* Kein eigenes Mass mehr: zwei Sprossen der Leiter uebereinander. */
  min-height: calc(var(--zh-5) + var(--zh-1));
  margin-bottom: 10px;
  padding: 10px;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 11px;
  color: var(--schrift);
  background: #0a0d13;
  border: 1px solid var(--rand);
  border-radius: var(--r-3);
  resize: vertical;
  user-select: text;
}

/* ---------- Stufe 4: Faehigkeiten ---------- */

#faehigkeiten {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.faehigkeit {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  min-height: var(--zh-4);
  padding: 8px 10px;
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-radius: var(--r-3);
  opacity: 0.55;
  text-align: left;
}

.faehigkeit.bereit {
  opacity: 1;
  border-color: var(--xp);
  background: linear-gradient(90deg, rgba(74,158,242,0.14), var(--flaeche) 70%);
}

.f-emoji { font-size: 18px; line-height: 1; }
.f-name { font-size: 12px; font-weight: 700; }
.f-rest { font-size: 10px; color: var(--schrift-matt); letter-spacing: 0.5px; }
.faehigkeit.bereit .f-rest { color: var(--xp); font-weight: 700; }

.flugzahl.faehigkeit { color: #7fd4ff; font-size: 24px; font-weight: 900; }
.flugzahl.heilung { color: var(--leben); font-size: 17px; }
.flugzahl.splitter { color: #b8c4d8; font-size: 17px; }

/* ---------- Stufe 4: Aktivitaeten ---------- */

.akt-zeile {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  margin-bottom: 8px;
  min-height: var(--zh-5);
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-radius: var(--r-3);
}

.akt-zeile.hier {
  border-color: var(--leben-dunkel);
  background: linear-gradient(90deg, rgba(72,199,116,0.10), var(--flaeche) 60%);
}

.akt-zeile.elite {
  border-color: rgba(242,160,61,0.45);
  background: linear-gradient(90deg, rgba(242,160,61,0.09), var(--flaeche) 65%);
}

.akt-zeile.zu { opacity: 0.66; }   /* HO-86, wie die Zonen */
.akt-zeile:not(.zu):active { background: var(--flaeche-hell); }

/* 34 px Kasten, 37,1 px Glyph - 3,1 px Ueberlauf (HO-90, 19.09.2026) */
.akt-emoji { font-size: 27px; width: 38px; text-align: center; }
.akt-mitte { flex: 1; min-width: 0; }
.akt-name { font-size: 15px; font-weight: 700; }
.akt-info { font-size: 11px; color: var(--schrift-matt); margin-top: 3px; line-height: 1.4; }

.akt-marke {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--schrift-matt);
  white-space: nowrap;
}

.akt-zeile.hier .akt-marke { color: var(--leben); }
.akt-zeile.elite .akt-marke { color: var(--krit); }

/* ---------- Stufe 3: Seltenheiten ---------- */

:root {
  --s0: #8e98ad;   /* grau      */
  --s1: #48c774;   /* gruen     */
  --s2: #4a9ef2;   /* blau      */
  --s3: #a86ff2;   /* lila      */
  --s4: #f2a03d;   /* orange    */
}

.s0 .item-name, .s0 .platz-name, .s0 .item-punkte { color: var(--s0); }
.s1 .item-name, .s1 .platz-name, .s1 .item-punkte { color: var(--s1); }
.s2 .item-name, .s2 .platz-name, .s2 .item-punkte { color: var(--s2); }
.s3 .item-name, .s3 .platz-name, .s3 .item-punkte { color: var(--s3); }
.s4 .item-name, .s4 .platz-name, .s4 .item-punkte { color: var(--s4); }

.item-zeile.s2, .platz.s2 { border-color: rgba(74,158,242,0.45); }
.item-zeile.s3, .platz.s3 { border-color: rgba(168,111,242,0.5); }
.item-zeile.s4, .platz.s4 { border-color: rgba(242,160,61,0.6); }

.flugzahl.beute-0 { color: var(--s0); font-size: 15px; }
.flugzahl.beute-1 { color: var(--s1); font-size: 16px; }
.flugzahl.beute-2 { color: var(--s2); font-size: 17px; }
.flugzahl.beute-3 { color: var(--s3); font-size: 19px; font-weight: 900; }
.flugzahl.beute-4 { color: var(--s4); font-size: 22px; font-weight: 900; }

/* ---------- Stufe 3: Teile und Plaetze ---------- */

.item-zeile, .platz {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 12px;
  margin-bottom: 8px;
  min-height: var(--zh-4);
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-radius: var(--r-3);
}

.item-zeile.getragen, .platz:not(.sleer) {
  background: linear-gradient(90deg, rgba(255,255,255,0.05), var(--flaeche) 60%);
}

.item-zeile:active, .platz:active { background: var(--flaeche-hell); }

.item-punkte {
  min-width: 46px;
  text-align: center;
  font-size: 17px;
  font-weight: 800;
}

.item-mitte, .platz-mitte { flex: 1; min-width: 0; }
.item-name, .platz-name { font-size: 14px; font-weight: 700; }
.item-boni, .platz-boni {
  font-size: 11px;
  color: var(--schrift-matt);
  margin-top: 3px;
  line-height: 1.4;
}

.item-marke, .platz-marke {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--schrift-matt);
  text-align: right;
  white-space: nowrap;
}

.platz-emoji { font-size: 24px; width: 30px; text-align: center; }
.platz.sleer { opacity: 0.55; border-style: dashed; }

/* Die vier Punkte in der Heldenliste */
.kader-platzleiste { margin-top: 5px; display: flex; gap: 5px; }

.platz-punkt {
  font-size: 12px;
  width: 22px;
  height: 22px;
  line-height: 22px;
  text-align: center;
  border-radius: var(--r-2);
  background: #0a0d13;
  border: 1px solid var(--rand);
}

.platz-punkt.sleer { opacity: 0.3; }
.platz-punkt.s1 { border-color: var(--s1); }
.platz-punkt.s2 { border-color: var(--s2); }
.platz-punkt.s3 { border-color: var(--s3); }
.platz-punkt.s4 { border-color: var(--s4); box-shadow: 0 0 6px rgba(242,160,61,0.5); }

/* ---------- Stufe 3: Heldenkarte ---------- */

/* ---------- Stufe 3: die Puppe (Held mit Slots drumherum) ---------- */

.puppe {
  display: grid;
  grid-template-columns: 1fr minmax(96px, 1.2fr) 1fr;
  gap: 8px;
  align-items: center;
  padding: 14px 10px;
  margin-bottom: 12px;
  background:
    radial-gradient(circle at 50% 35%, rgba(74,158,242,0.10), transparent 65%),
    var(--flaeche);
  border: 1px solid var(--rand);
  border-radius: var(--r-4);
}

.puppe-spalte { display: flex; flex-direction: column; gap: 8px; }

.puppe-mitte { text-align: center; }

.puppe-figur {
  font-size: 58px;
  line-height: 1.1;
  animation: wippen 3.4s ease-in-out infinite;
}

.detail-art {
  font-size: 11px;
  color: var(--schrift-matt);
  margin-top: 3px;
}

.kachel {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-height: var(--zh-5);
  padding: 7px 5px;
  background: #0d1017;
  border: 1px solid var(--rand);
  border-radius: var(--r-3);
  text-align: center;
}

.kachel:active { background: var(--flaeche-hell); }
.kachel.sleer { border-style: dashed; opacity: 0.6; }
.kachel-emoji { font-size: 23px; line-height: 1; }

.kachel-name {
  font-size: 10px;
  line-height: 1.25;
  font-weight: 600;
  word-break: break-word;
}

.kachel.s0 .kachel-name { color: var(--s0); }
.kachel.s1 { border-color: var(--s1); }
.kachel.s1 .kachel-name { color: var(--s1); }
.kachel.s2 { border-color: var(--s2); }
.kachel.s2 .kachel-name { color: var(--s2); }
.kachel.s3 { border-color: var(--s3); }
.kachel.s3 .kachel-name { color: var(--s3); }
.kachel.s4 { border-color: var(--s4); box-shadow: 0 0 10px rgba(242,160,61,0.4); }
.kachel.s4 .kachel-name { color: var(--s4); }

.item-zeile.unpassend { opacity: 0.4; }
.item-zeile.unpassend .item-marke { color: var(--feind); }

.detail-kopf {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px;
  margin-bottom: 12px;
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-radius: var(--r-4);
}

.detail-emoji { font-size: 48px; }
.detail-name { font-size: 20px; font-weight: 800; }
.detail-rolle { font-size: 12px; color: var(--schrift-matt); margin-top: 2px; }
.detail-spruch { font-size: 11px; color: var(--schrift-matt); font-style: italic; margin-top: 4px; }

.werte {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--rand);
  border: 1px solid var(--rand);
  border-radius: var(--r-3);
  overflow: hidden;
  margin-bottom: 4px;
}

.werte-zeile {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  padding: 9px 11px;
  background: var(--flaeche);
  font-size: 12px;
  color: var(--schrift-matt);
}

.werte-zeile b { font-size: 14px; color: var(--schrift); }

/* Was ein Wert WIRKLICH tut, klein daneben (18.09.2026). Rüstung war
   bis dahin wirkungslos, und es ist niemandem aufgefallen — weil auf
   der Karte nur eine Zahl stand. */
.wert-wirkung {
  font-size: 10px;
  font-weight: 700;
  color: var(--leben);
  white-space: nowrap;
}

.detail-knoepfe { display: flex; gap: 10px; margin-top: 14px; }

button.breit {
  width: 100%;
  min-height: var(--zh-4);
  margin-bottom: 8px;
}

/* ---------- Stufe 3: Beutel-Kopf ---------- */

.beutel-werte {
  display: flex;
  justify-content: space-between;
  font-size: 15px;
  font-weight: 700;
  padding: 10px 12px;
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-radius: var(--r-3);
  margin-bottom: 10px;
}

.beutel-knoepfe { display: flex; gap: 10px; margin-bottom: 10px; }
.beutel-knoepfe button { min-height: var(--zh-4); font-size: 14px; }
#knopf-auto.an { color: var(--leben); border-color: var(--leben-dunkel); }

.saison-zeile {
  padding: 9px 12px;
  margin-bottom: 10px;
  font-size: 12px;
  font-weight: 700;
  color: var(--xp);
  background: rgba(74,158,242,0.10);
  border: 1px solid var(--rand);
  border-radius: var(--r-3);
}

.saison-zeile.bauzeit { color: var(--krit); background: rgba(242,193,78,0.10); }

/* ---------- Stufe 7: Raid, Arena, Postfach ---------- */

.akt-zeile.raid {
  border-color: rgba(168,111,242,0.45);
  background: linear-gradient(90deg, rgba(168,111,242,0.10), var(--flaeche) 65%);
}

.akt-zeile.arena {
  border-color: rgba(74,158,242,0.45);
  background: linear-gradient(90deg, rgba(74,158,242,0.10), var(--flaeche) 65%);
}

.akt-zeile.raid .akt-marke { color: var(--s3); }
.akt-zeile.arena .akt-marke { color: var(--xp); }

.liga-zeile[data-spieler]:not(.ich) { cursor: pointer; }
.liga-zeile[data-spieler]:not(.ich):active { background: var(--flaeche-hell); }

.liga-tun {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--schrift-matt);
  margin-top: 3px;
}

.post-zeile {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 12px;
  margin-bottom: 8px;
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-radius: var(--r-3);
}

.post-emoji { font-size: 24px; width: 30px; text-align: center; }
.post-mitte { flex: 1; min-width: 0; }
.post-name { font-size: 14px; font-weight: 700; color: var(--gold); }
.post-info { font-size: 11px; color: var(--schrift-matt); margin-top: 2px; }

/* ---------- Stufe 8: Talentbaum als echtes Gitter ----------
   Robert hat in der Nacht zum 16.09.2026 ein Bild vom Combat-Baum
   einer Schurkin geschickt: 31/51, sieben Reihen, drei Spalten,
   Pfeile zwischen den Kacheln. Dazu: "ich möchte so einen großen
   Baum wie bei WoW, es sollen viele Möglichkeiten sein."
   Vorher standen hier drei Zeilen untereinander.

   Auf dem Handy heißt das: 22 px Randspalte für die Schwelle,
   dann drei gleich breite Spalten. Bei 360 px Bildschirm bleiben
   rund 90 px je Kachel - mit dem Daumen gut zu treffen. */

.talent-kopf {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  margin-bottom: 10px;
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-radius: var(--r-4);
}

.talent-kopf-mitte { flex: 1; min-width: 0; }

/* ⚠️ HO-83 (18.09.2026): `.talent-hinweis` hatte KEINE EINZIGE
   CSS-Zeile - und ist der einzige Weg in das grösste System des
   Spiels (30 Äste, 450 Talente). 21 px hoher Fließtext, kein Rahmen,
   kein Zeiger, nichts, was nach einem Knopf aussieht. Wer nicht
   wusste, dass man dort tippen kann, hat den Talentbaum nie gesehen.
   Jetzt sieht er wie das aus, was er ist: der Eingang. */
.talent-hinweis {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: var(--zh-4);
  margin-top: 10px;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 700;
  color: var(--schrift);
  background: var(--flaeche-hell);
  border: 1px solid var(--rand);
  border-left: 3px solid var(--gold);
  border-radius: var(--r-3);
  cursor: pointer;
}

.talent-hinweis:active { background: var(--rand); }

/* Liegt ein Punkt herum, leuchtet der Eingang. Das ist die stille
   Fassung des Halte-Fensters, das Robert genervt hat: eine Marke,
   kein Tor. */
.talent-hinweis.offen {
  border-color: var(--gold);
  box-shadow: 0 0 0 2px rgba(242,193,78,0.18);
}

.talent-hinweis b { color: var(--gold); }

/* Der Pfeil sagt "hier geht es weiter" - ohne ein Wort dafür zu
   brauchen, und ohne die Zeile länger zu machen. */
.talent-hinweis::after {
  content: '›';
  margin-left: auto;
  font-size: 22px;
  font-weight: 800;
  color: var(--gold);
  line-height: 1;
}
.talent-kopf .gestalt { font-size: 13px; font-weight: 500; color: var(--gold); }

.talent-frei {
  margin-left: auto;
  text-align: center;
  font-size: 9px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--schrift-matt);
  white-space: nowrap;
}

.talent-frei b {
  display: block;
  font-size: 26px;
  color: var(--gold);
  line-height: 1.1;
}

/* Die Rollen haben Farbe - man soll eine Truppe auf einen Blick lesen */
.rolle-tank    { color: #6fa8ff; }
.rolle-schaden { color: var(--feind); }
.rolle-heilung { color: var(--leben); }

/* ---------- Die drei Aeste als Reiter ---------- */

.ast-leiste {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 6px;
  margin-bottom: 10px;
}

.ast-knopf {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 4px 6px;
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-radius: var(--r-3);
  color: var(--schrift);
  font-family: inherit;
  cursor: pointer;
}

.ast-knopf.aktiv {
  border-color: var(--gold);
  background: var(--flaeche-hell);
}

.ast-emoji { font-size: 22px; line-height: 1; }
.ast-name  { font-size: 10px; font-weight: 700; line-height: 1.2; text-align: center; }
.ast-rolle {
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.ast-punkte {
  font-size: 15px;
  font-weight: 800;
  color: var(--schrift-matt);
  line-height: 1;
}

.ast-knopf.aktiv .ast-punkte { color: var(--gold); }

.ast-kern {
  padding: 10px 12px;
  margin-bottom: 10px;
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-left: 3px solid var(--gold);
  border-radius: var(--r-3);
  font-size: 12px;
  line-height: 1.5;
  color: var(--schrift-matt);
}

.ast-rollentext { margin-top: 6px; font-size: 11px; }
.ast-rollentext .sperre { color: var(--krit); }

/* ---------- Das Gitter ---------- */

.baum {
  position: relative;
  display: grid;
  grid-template-columns: 22px repeat(3, 1fr);
  grid-auto-rows: auto;
  gap: 14px 10px;
  padding: 14px 12px;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(242,193,78,0.06), transparent 60%),
    var(--flaeche);
  border: 1px solid var(--rand);
  border-radius: var(--r-4);
}

/* Die Randspalte: wie viele Punkte diese Reihe verlangt */
.baum-marke {
  grid-column: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
  /* ⚠️ HO-86: var(--rand) auf var(--flaeche) sind 1,36:1 - das ist
     kein blasser Text, das ist unsichtbar. Und hier steht die
     Information, WIE VIELE Punkte die Reihe verlangt. */
  color: var(--schrift-matt);
}

.baum-marke.offen { color: var(--gold); }

.tk {
  position: relative;
  /* Kein `overflow: hidden` mehr (HO-83) - es hat Namen unsichtbar
     abgeschnitten. Der farbige Streifen oben braucht es nicht, er
     liegt innerhalb der Kachel. */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 3px;
  padding: 9px 3px 14px;
  background: var(--flaeche-hell);
  border: 2px solid var(--rand);
  border-radius: var(--r-3);
  cursor: pointer;
  transition: border-color 0.12s, box-shadow 0.12s;
}

/* Der farbige Streifen oben sagt ohne ein Wort, wozu das Talent gut
   ist: rot Angriff, blau Verteidigung, grün Heilung. Robert am
   16.09.2026: "was passiert bei was? mehr Defense, mehr Angriff,
   mehr Krit usw." */
.tk-kat {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 4px;
  /* ⚠️ Seit `.tk` kein `overflow: hidden` mehr hat (HO-83), schneidet
     die Kachel den Streifen nicht mehr an der runden Ecke ab - also
     rundet er sich selbst. Sonst stehen zwei eckige Zipfel heraus. */
  border-radius: var(--r-3) var(--r-3) 0 0;
}

/* ⚠️ HO-83: `overflow: hidden` an der Kachel plus 9 px Schrift hat
   sieben Talentnamen abgeschnitten (Waffenuebung, Hinrichtung,
   Kriegskunst, Zorn des Zwergs, Unaufhaltsam, Klingenwirbel,
   Schlaghagel). Genau der Punkt, ueber den Robert schon einmal
   gestolpert ist.
   Der Name bekommt deshalb Platz, statt die Kachel fest zu lassen:
   zwei Zeilen duerfen stehen, und die Kachel waechst mit. */
.tk-name {
  min-height: 2.3em;
  display: flex;
  align-items: center;
  font-size: 9px;
  font-weight: 700;
  line-height: 1.15;
  text-align: center;
  color: var(--schrift-matt);
  word-break: break-word;
  hyphens: auto;
}

.tk.gelernt .tk-name { color: var(--schrift); }

.tk-emoji { font-size: 26px; line-height: 1; }

.tk-rang {
  position: absolute;
  right: 3px;
  bottom: 2px;
  font-size: 10px;
  font-weight: 800;
  line-height: 1.4;
  padding: 0 5px;
  color: var(--schrift-matt);
  background: var(--grund);
  border: 1px solid var(--rand);
  border-radius: var(--r-2);
}

.tk.gelernt { border-color: var(--leben-dunkel); }
.tk.gelernt .tk-rang { color: var(--leben); border-color: var(--leben-dunkel); }
.tk.voll { border-color: var(--gold); }
.tk.voll .tk-rang { color: var(--gold); border-color: var(--gold); }

/* "bereit" = Reihe offen, Punkt frei, noch nicht voll */
.tk.bereit { box-shadow: 0 0 0 2px rgba(242,193,78,0.18); }
/* ⚠️ HO-86: 0,32 ergab 1,72:1. Eine gesperrte Kachel soll gedaempft
   sein, aber lesbar - man entscheidet an ihr, wohin die naechsten
   Punkte gehen. */
.tk.zu { opacity: 0.55; }
.tk.zu .tk-emoji { filter: grayscale(1); }
.tk:active { background: var(--rand); }

.tk.gewaehlt {
  border-color: var(--xp);
  box-shadow: 0 0 12px rgba(74,158,242,0.45);
}

/* Der Schlussstein sticht heraus - er kostet 31 Punkte */
.tk.stein {
  border-radius: 50%;
  background:
    radial-gradient(70% 70% at 50% 30%, rgba(242,193,78,0.16), transparent 70%),
    var(--flaeche-hell);
}
.tk.stein.voll { box-shadow: 0 0 16px rgba(242,193,78,0.5); }

/* Die Pfeile liegen als SVG ueber dem Gitter */
.baum-pfeile {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
}

.pfeil, .spitze {
  fill: none;
  stroke: var(--rand);
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.pfeil.an, .spitze.an { stroke: var(--leben-dunkel); }

/* ---------- Die Tafel unter dem Gitter ---------- */

/* Die Tafel klebt unten am Bildschirm.
   Robert am 16.09.2026: "ah mom, die haben ja Werte, die stehen nur
   ganz unten - das hab ich nicht gesehen." Genau so war es: Die
   Erklaerung stand unter einem Gitter, das laenger ist als der
   Bildschirm. Man tippt oben und die Antwort erscheint ausserhalb
   des Sichtfelds. Jetzt bleibt sie immer im Blick. */
.talent-tafel {
  position: sticky;
  bottom: 66px;            /* ueber der Reiterleiste, die 63 px hoch ist */
  z-index: 6;
  margin-top: 12px;
  padding: 10px 12px;
  max-height: 44vh;
  overflow-y: auto;
  background: var(--flaeche);
  border: 1px solid var(--gold);
  border-radius: var(--r-3);
  box-shadow: 0 -12px 26px rgba(14, 16, 22, 0.9);
}

.tafel-leer { font-size: 12px; color: var(--schrift-matt); line-height: 1.5; }

.tafel-kopf {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  margin-bottom: 6px;
}

.tafel-kopf .tk-emoji { font-size: 22px; }

.tafel-rang {
  margin-left: auto;
  font-size: 13px;
  font-weight: 800;
  color: var(--gold);
}

.tafel-jetzt    { font-size: 12px; color: var(--leben); line-height: 1.4; }
.tafel-naechste { font-size: 12px; color: var(--schrift); line-height: 1.4; }
.tafel-text     { font-size: 12px; color: var(--schrift-matt); line-height: 1.5; margin-top: 4px; }

.tafel-sperre {
  margin-top: 7px;
  font-size: 11px;
  color: var(--krit);
}

.tafel-tun {
  margin-top: 7px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--gold);
}

/* Auf sehr schmalen Handys wird die Kachel sonst zu klein */
@media (max-width: 340px) {
  .baum { gap: 10px 7px; padding: 10px 8px; }
  .tk-emoji { font-size: 22px; }
  .ast-name { font-size: 9px; }
}

/* ---------- Die vier Landstriche auf der Weltkarte ---------- */
/* Seit dem 16.09.2026 gibt es 25 Zonen - eine reine Liste waere
   auf dem Handy zu lang zum Scrollen. */

.region-kopf {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 16px 2px 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--rand);
}

.region-kopf:first-child { margin-top: 2px; }
.region-kopf.zu { opacity: 0.4; }
.region-emoji { font-size: 17px; }

.region-name {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--gold);
}

.region-zahl {
  margin-left: auto;
  font-size: 11px;
  font-weight: 700;
  color: var(--schrift-matt);
}

/* Die Rollenmarke in der Truppenliste */
.kader-rollenmarke {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 1px 5px;
  border: 1px solid currentColor;
  border-radius: var(--r-2);
  vertical-align: 2px;
}

/* ---------- Eigene Symbole statt Emoji ----------
   Robert, 16.09.2026: "Es wäre auch cool, wenn du eigene Icons
   entwerfen würdest - welche, die auch dazu passen."
   Die Formen stehen in ikonen.js, 84 Stück in zwölf Farbfamilien. */

.ikone {
  display: block;
  width: 30px;
  height: 30px;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.55));
}

.ikone-emoji { font-size: 24px; line-height: 1; }

/* Im Gitter sitzt das Symbol über dem Namen */
.tk .ikone { width: 30px; height: 30px; }
.tk.zu .ikone { filter: grayscale(1) brightness(0.8); }

/* Auf dem Ast-Reiter und in der Tafel etwas kleiner */
.ast-emoji .ikone { width: 22px; height: 22px; margin: 0 auto; }
.tafel-bild { width: 24px; height: 24px; flex: 0 0 auto; }
.kopf-bild  { width: 34px; height: 34px; }

/* Die Heldenkarte hält den Platz für ein Symbol frei */
.detail-emoji .ikone { margin: 0 auto; }

/* Symbole in der Fähigkeitsleiste und auf den Ausrüstungsplätzen */
.f-emoji .ikone   { width: 22px; height: 22px; margin: 0 auto; }
.kachel-emoji .ikone { width: 26px; height: 26px; margin: 0 auto; }

/* ---------- Umschalter Gitter / Liste ----------
   Robert am 16.09.2026: "Die Talente sind ohne Bezeichnung."
   Das Gitter zeigt die FORM des Baums, die Liste den INHALT.
   Auf dem Handy passt nicht beides auf einmal, also beides einzeln. */

.baum-umschalter {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 6px;
  margin-bottom: 10px;
}

.um-knopf {
  padding: 9px 6px;
  font-size: 12px;
  font-weight: 700;
  font-family: inherit;
  color: var(--schrift-matt);
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-radius: var(--r-3);
  cursor: pointer;
}

.um-knopf.aktiv {
  color: var(--grund);
  background: var(--gold);
  border-color: var(--gold);
}

/* ---------- Die Liste: alles ausgeschrieben ---------- */

.tliste {
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-radius: var(--r-4);
  padding: 8px;
}

.tl-reihe {
  margin: 10px 4px 6px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--schrift-matt);
}

.tl-reihe:first-child { margin-top: 2px; }
.tl-reihe.offen { color: var(--gold); }
.tl-reihe b { color: var(--krit); }

.tl-zeile {
  position: relative;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 10px 9px 13px;
  margin-bottom: 5px;
  background: var(--flaeche-hell);
  border: 1px solid var(--rand);
  border-radius: var(--r-3);
  cursor: pointer;
  overflow: hidden;
}

.tl-zeile.zu { opacity: 0.42; }
.tl-zeile.voll { border-color: var(--gold); }
.tl-zeile.gewaehlt { border-color: var(--xp); }
.tl-zeile:active { background: var(--rand); }

/* Derselbe Farbcode wie im Gitter, hier als Streifen links */
.tl-kat {
  position: absolute;
  left: 0;
  top: 0;
  width: 4px;
  height: 100%;
}

.tl-bild { flex: 0 0 auto; }
.tl-ikone { width: 26px; height: 26px; }
.tl-mitte { flex: 1; min-width: 0; }

.tl-kopf {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  flex-wrap: wrap;
}

.tl-marke {
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 1px 5px;
  border: 1px solid currentColor;
  border-radius: var(--r-2);
}

.tl-text {
  font-size: 11px;
  line-height: 1.45;
  color: var(--schrift-matt);
  margin-top: 3px;
}

.tl-sperre { font-size: 10px; color: var(--krit); margin-top: 3px; }

.tl-rang {
  flex: 0 0 auto;
  font-size: 17px;
  font-weight: 800;
  color: var(--schrift-matt);
}

.tl-rang small { font-size: 11px; font-weight: 600; opacity: 0.7; }
.tl-zeile.voll .tl-rang { color: var(--gold); }

/* ---------- In der Tafel: zuerst wozu, dann die Zahl ---------- */

.tafel-wozu {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
  font-size: 12px;
  line-height: 1.5;
  color: var(--schrift);
  margin-bottom: 6px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--rand);
}

.tafel-voll {
  font-size: 11px;
  color: var(--schrift-matt);
  line-height: 1.5;
  margin-top: 2px;
}

/* ---------- Heldenfiguren ----------
   Robert am 16.09.2026: "dass da wirklich Figuren sind - Orks, Elfen,
   Zwerge, gerne Eber, Wölfe usw., aber halt echte."
   Gezeichnet in figuren.js; sobald ein gemaltes Bild in figuren/
   liegt, hat das Vorrang. */

.portraet {
  position: relative;
  display: inline-block;
  line-height: 0;
}

.figur {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: var(--r-2);
  background: #12141c;
}

/* Die gemalten Bilder sind GANZKOERPER im Hochformat 3:4 (Roberts
   Wunsch vom 16.09.2026: "ich haette sie gerne in ganz Koerper").
   contain statt cover: lieber ein schmaler Rand als abgeschnittene
   Fuesse. Die hier gezeichneten Brustbilder sind quadratisch und
   sitzen in derselben Box mittig - beides sieht richtig aus. */
.figur-foto { object-fit: contain; }

/* Die kleine Marke unten rechts: welche Gestalt der Held gerade hat */
.portraet-marke {
  position: absolute;
  right: -3px;
  bottom: -3px;
  width: 44%;
  height: 44%;
  padding: 2px;
  background: var(--grund);
  border: 1px solid var(--rand);
  border-radius: 50%;
  line-height: 0;
}

.portraet-marke .ikone { width: 100%; height: 100%; }

/* ⚠️ Rico, 20.09.2026: HIER STANDEN VIER TOTE ZEILEN (HO-90).
   `.held-figur 42x56`, `.kader-figur 36x48`, `.kopf-figur 42x56` und
   eine Rundung fuer `.kopf-figur .figur` - alle im Hochformat 3:4, mit
   dem Kommentar "damit ein Ganzkoerperbild ohne Beschnitt hineinpasst".

   Sie haben nie gewirkt. Weiter unten (Abschnitt "Kopf klein, ganzer
   Koerper beim Oeffnen") stehen dieselben drei Auswaehler noch einmal,
   gleich stark und spaeter in der Datei - also quadratisch, 48/44/46.
   Wer hier das Hochformat gelesen und danach gerechnet hat, hat mit
   Zahlen gerechnet, die der Browser nie benutzt.

   Die gueltigen Masse stehen weiter unten und BLEIBEN dort. Gemessen
   vor und nach dem Loeschen: 48 / 44 / 46. */

/* Die Gestalt-Marke sitzt kleiner in der Ecke */
.portraet-marke { width: 20px; height: 20px; right: -4px; bottom: -4px; }

/* ---------- Was der Held dadurch kann ----------
   Yvonnes Fund vom 16.09.2026: Das Spiel rechnet in talentWirkung()
   längst aus, was die Talente eines Helden zusammen bewirken — und
   zeigte es nirgends. Das ist Roberts Frage eine Ebene höher:
   nicht was EIN Talent tut, sondern was am Ende herauskommt. */

.kann-kasten {
  padding: 10px 12px;
  margin-bottom: 10px;
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-radius: var(--r-3);
}

.kann-kasten.leer {
  font-size: 11px;
  color: var(--schrift-matt);
  line-height: 1.5;
}

.kann-kopf {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--schrift-matt);
  margin-bottom: 8px;
}

.kann-rolle {
  font-size: 9px;
  color: var(--gold);
  letter-spacing: 0.5px;
}

.kann-zahl {
  margin-left: auto;
  font-size: 13px;
  font-weight: 800;
  color: var(--gold);
  letter-spacing: 0;
}

.kann-liste {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.kann-wert {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px 3px 5px;
  font-size: 10.5px;
  line-height: 1.35;
  color: var(--schrift);
  background: var(--flaeche-hell);
  border: 1px solid var(--rand);
  border-left-width: 3px;
  border-radius: var(--r-2);
}

.kann-wert i { width: 5px; height: 5px; border-radius: 50%; flex: 0 0 auto; }

/* ---------- Truppe gefallen ----------
   Robert am 16.09.2026: "das Sterben unterbricht das Spiel aber noch
   nicht, das läuft ja immer noch einfach weiter."
   Stimmte: es gab fünf Sekunden Pause und dann lief es von allein
   weiter. Jetzt steht alles, bis man selbst wieder antritt. */

#gefallen-feld {
  display: none;
  padding: 20px 18px 18px;
  margin-bottom: 14px;
  text-align: center;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(226, 73, 74, 0.16), transparent 65%),
    var(--flaeche);
  border: 2px solid var(--feind);
  border-radius: var(--r-4);
  animation: gefallen-auf 0.25s ease-out;
}

#gefallen-feld.sichtbar { display: block; }
#gegner-bereich.versteckt { display: none; }

@keyframes gefallen-auf {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: none; }
}

#gefallen-titel {
  font-size: 19px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--feind);
  margin-bottom: 8px;
}

#gefallen-text {
  font-size: 13px;
  line-height: 1.55;
  color: var(--schrift-matt);
  margin-bottom: 16px;
}

#gefallen-text b { color: var(--schrift); }

#knopf-nochmal {
  width: 100%;
  padding: 15px;
  font-size: 16px;
  font-weight: 700;
  font-family: inherit;
  color: var(--grund);
  background: var(--feind);
  border: none;
  border-radius: var(--r-3);
  cursor: pointer;
}

#knopf-nochmal:active { background: var(--feind-dunkel); color: var(--schrift); }

/* --- Halte-Punkte (HO-44, 16.09.2026) -----------------------------
   Gleiche Bauform wie das Gefallen-Feld, aber in Gold statt Rot:
   hier ist nichts schiefgegangen, hier ist eine Entscheidung dran. */
#halt-feld {
  display: none;
  padding: 7px 10px;
  margin-bottom: 6px;
  text-align: left;
  background: var(--flaeche);
  border: 1px solid var(--gold);
  border-radius: var(--r-3);
}

/* ⚠️ EINE Zeile, nicht drei (18.09.2026). Robert: "das mit dem Fenster,
   das immer will das man was macht, nervt auch total - das sollte,
   wenn, nur ein Ausrufezeichen oder so sein."
   Der Titel "Kurz angehalten" sagt nichts, was der Text nicht sagt,
   und im Kampfbild zaehlt jede Zeile. Gemessen: 56 px -> 34 px. */
#halt-feld.sichtbar { display: flex; align-items: center; gap: 8px; }

/* ⚠️ Der Titel ist der INHALT ("❗ Freie Punkte"), nicht die Deko -
   haltFeldZeichnen() schreibt ihn dorthin und laesst #halt-text
   ausdruecklich leer. Wer hier den Titel ausblendet, blendet die
   ganze Meldung aus. (Beim ersten Anlauf am 18.09.2026 genau so
   gemacht und beim Messen gesehen.) */
#halt-titel {
  flex: 1;
  min-width: 0;
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  color: var(--gold);
  letter-spacing: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Der lange Satz steht seit dem 17.09.2026 in der Meldung oben, nicht
   hier - das Feld ist damit immer leer. Ein leeres Blockelement mit
   `flex: 1 1 100%` hat trotzdem eine ganze Zeile gekostet: gemessen
   56 px statt 34 fuer eine Zeile, die nichts anzeigt. */
#halt-text { display: none; }

#halt-knoepfe { display: flex; gap: 6px; flex-shrink: 0; }

/* ⚠️ Tessa, 20.09.2026: "Boss antreten" war 34 px hoch (mit der Leiter
   kurz 36) - und das ist der Knopf, mit dem man den Boss betritt. Unter
   44 px trifft ein Daumen daneben, und daneben heisst hier: man tippt
   auf die Zeile darunter, statt in den Kampf zu gehen. Der Kasten ist
   ein kurzer Hinweisbalken, keine Dauerzeile - die acht Pixel hat das
   Kampfbild (gemessen: 507 von 889 px belegt). */
#halt-knoepfe button {
  flex: none;
  min-height: var(--zh-3);
  padding: 0 12px;
  font-size: 12px;
  font-weight: 700;
  font-family: inherit;
  border: none;
  border-radius: var(--r-3);
  cursor: pointer;
}

#knopf-halt-weiter { color: var(--grund); background: var(--gold); }
#knopf-halt-weiter:active { filter: brightness(0.85); }

#knopf-halt-ziel {
  color: var(--schrift);
  background: var(--flaeche-hell);
  border: 1px solid var(--rand) !important;
}
#knopf-halt-ziel:active { background: var(--flaeche); }

/* Eine Zone, die keine Erfahrung mehr hergibt (HO-48) */
.zone-zeile.leergefarmt .zone-name { color: var(--schrift-matt); }
.zone-zeile.leergefarmt .zone-info { color: var(--feind); }

/* Kopf klein, ganzer Körper beim Öffnen — Robert am 16.09.2026:
   "den Kopf als kleines Bild am Anfang und beim Öffnen dann der
   ganze Körper, wo man die Rüstung anlegt." */

/* Die kleinen Stellen zeigen jetzt Kopfbilder, also quadratisch */
.held-figur  { width: 48px; height: 48px; }
.kader-figur { width: 44px; height: 44px; }
.kopf-figur  { width: 46px; height: 46px; }

.held-figur .figur, .kader-figur .figur, .kopf-figur .figur {
  object-fit: cover;
  border-radius: var(--r-3);
  border: 1px solid var(--rand);
}

/* Der ganze Körper auf der Heldenkarte */
.puppe-figur {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: 168px;
  margin-bottom: 4px;
}

.puppe-bild {
  width: auto;
  height: 100%;
  max-width: 100%;
  object-fit: contain;
  background: none;
  border-radius: 0;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.55));
}

/* ---------- Warum der Offline-Lauf aufgehört hat ----------
   Robert am 16.09.2026: "wenn man 2 Tage nicht da war läuft es ja
   trotzdem einfach weiter. Und bei tot müsste da morgens stehen:
   Gruppe ist gestorben, dann muss man auf Weiter drücken." */

.willk-ende {
  margin: 12px 0;
  padding: 11px 13px;
  font-size: 12.5px;
  line-height: 1.55;
  border-radius: var(--r-3);
  border: 1px solid var(--rand);
  background: var(--flaeche-hell);
}

.willk-ende b { font-size: 14px; }
.willk-ende.tod    { border-color: var(--feind); color: var(--feind); }
.willk-ende.tod b  { color: var(--feind); }
.willk-ende.boss   { border-color: var(--gold); color: var(--gold); }
.willk-ende.beutel { border-color: var(--xp); color: var(--xp); }
.willk-ende.zeit   { color: var(--schrift-matt); }

/* Solange die Truppe liegt, sieht man es auch an ihr — nicht nur
   am roten Feld darüber. Robert am 16.09.2026: "hier steht Truppe
   gefallen, aber die kämpfen dahinter doch einfach weiter?"
   Der Kampf stand wirklich; die Lebensbalken waren nur nie neu
   gezeichnet worden und standen noch auf voll. */
#truppe.liegt { opacity: 0.45; filter: grayscale(0.8); }
#truppe.liegt .held { border-color: var(--feind-dunkel); }

/* --- Das Dorf (HO-47, 16.09.2026) ---------------------------------
   Gleiche Bauform wie die Zonen-Zeilen, damit die Welt-Ansicht ein
   Bild bleibt. Das Gold-Rahmenlicht markiert, was man sich JETZT
   leisten kann - man soll nicht rechnen muessen. */
.dorf-zeile {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  margin-bottom: 8px;
  min-height: var(--zh-5);
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-radius: var(--r-3);
}

.dorf-zeile.geht { border-color: var(--gold); }
.dorf-zeile.voll { opacity: 0.6; }

/* 34 px Kasten, 38,5 px Glyph - 4,5 px Ueberlauf (HO-90, 19.09.2026) */
.dorf-emoji { font-size: 28px; width: 40px; text-align: center; }
.dorf-mitte { flex: 1; min-width: 0; }
.dorf-name  { font-size: 15px; font-weight: 700; }

.dorf-stufe {
  font-size: 11px;
  font-weight: 600;
  color: var(--schrift-matt);
  margin-left: 4px;
}

.dorf-info {
  font-size: 12px;
  line-height: 1.4;
  color: var(--schrift-matt);
  margin-top: 2px;
}

.dorf-knopf { flex-shrink: 0; }

.dorf-knopf button {
  min-width: 88px;
  padding: 9px 8px;
  font-size: 13px;
  font-weight: 700;
  font-family: inherit;
  line-height: 1.25;
  color: var(--grund);
  background: var(--gold);
  border: none;
  border-radius: var(--r-3);
  cursor: pointer;
}

.dorf-knopf button span { font-size: 11px; font-weight: 600; opacity: 0.8; }

.dorf-knopf button:disabled {
  color: var(--schrift-matt);
  background: var(--flaeche-hell);
  border: 1px solid var(--rand);
  cursor: default;
}

.dorf-fertig {
  display: inline-block;
  min-width: 88px;
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  color: var(--gold);
}

/* Die erreichte Hoehe im Turm der Pruefung (HO-47) */
.akt-hoehe {
  font-size: 11px;
  font-weight: 600;
  color: var(--gold);
  margin-left: 6px;
}

.akt-zeile.turm.hier { border-color: var(--gold); }

/* Hardcore-Aufgang: rot statt gold (HO-47) */
.akt-zeile.turm.hardcore .akt-hoehe { color: var(--feind); }
.akt-zeile.turm.hardcore.hier { border-color: var(--feind); }

/* Antippen der Heldenkarte im Kampf fuehrt zur Heldenkarte
   (Roberts Wunsch vom 16.09.2026) */
.held { cursor: pointer; }
.held:active { background: var(--flaeche-hell); }

/* --- Der Saison-Eid (HO-40) --------------------------------------- */
.eid-kasten {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  margin-bottom: 4px;
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(242,193,78,0.12), transparent 70%),
    var(--flaeche);
  border: 1px solid var(--gold);
  border-radius: var(--r-3);
}

.eid-emoji { font-size: 26px; }
.eid-name  { font-size: 14px; font-weight: 800; color: var(--gold); }
.eid-text  { font-size: 12px; color: var(--schrift-matt); margin-top: 2px; }

/* --- Das Fundbuch (HO-40) ----------------------------------------- */
.akt-zeile.fundbuch .akt-hoehe { color: var(--leben); }

.fund-kopf {
  padding: 14px;
  margin-bottom: 10px;
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-radius: var(--r-3);
  text-align: center;
}

.fund-zahl { font-size: 26px; font-weight: 800; color: var(--leben); }
.fund-zahl span { font-size: 15px; font-weight: 600; color: var(--schrift-matt); }
.fund-kopf .balken { margin: 8px 0 6px; }
.fund-rest { font-size: 12px; color: var(--schrift-matt); }
.fund-rest b { color: var(--schrift); }

.fund-abschnitt { margin-bottom: 16px; }

.fund-titel {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 2px;
}

.fund-titel span { font-size: 12px; font-weight: 600; color: var(--schrift-matt); }
.fund-was { font-size: 11px; color: var(--schrift-matt); margin-bottom: 8px; }

.fund-gitter {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(34px, 1fr));
  gap: 4px;
}

.fund-feld {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  background: var(--grund);
  border: 1px solid var(--rand);
  border-radius: var(--r-2);
  color: var(--rand);
}

.fund-feld.da {
  background: var(--flaeche-hell);
  border-color: var(--leben-dunkel);
  color: var(--schrift);
}

.fund-feld.dick { border-width: 2px; }
.fund-feld.dick.da { border-color: var(--gold); }

#knopf-fundbuch-zurueck { width: 100%; margin-top: 8px; }

/* --- Form als zweites Merkmal (Yvonne, 16.09.2026) ---------------
   Farbe allein traegt nicht: die Standardregel gegen Farbenblindheit
   verlangt ein zweites, nicht-farbiges Merkmal - und auf 390 px sieht
   man zwei Gelbtoene ohnehin nicht auseinander. Diablo Immortal macht
   es am Handy genauso: runde Symbole = dauerhafte Werte, eckige =
   Faehigkeiten.

     eckig   = kleines Talent, mehrere Raenge
     rund    = grosses Talent, nur EIN Rang
     ★ Ecke  = Schlussstein
     ⚖ Ecke  = Weiche, du gibst etwas dafuer her                    */

.tk.gross {
  border-radius: 50%;
  padding: 7px 2px 12px;
}

.tk.gross .tk-kat {
  /* Auf einer runden Kachel wird der Streifen zum Bogen oben */
  height: 5px;
  border-radius: var(--r-1) var(--r-1) 0 0;
}

/* Der Schlussstein: rund UND mit Stern, dazu ein dickerer Goldrahmen.
   Er ist das Wichtigste im Ast und darf sich nicht mit den grossen
   Talenten verwechseln lassen. */
.tk.stein { border-width: 3px; }

.tk.stein::after {
  content: '★';
  position: absolute;
  right: 3px;
  bottom: 2px;
  font-size: 10px;
  line-height: 1;
  color: var(--gold);
  opacity: 0.75;
}

/* Die Weiche: abgeschraegte obere Ecke plus Waage. "Du gibst etwas
   dafuer her" soll man sehen, bevor man antippt. */
.tk.weiche {
  border-radius: var(--r-3);
  clip-path: polygon(0 0, calc(100% - 11px) 0, 100% 11px, 100% 100%, 0 100%);
}

.tk.weiche::after {
  content: '\2696';
  position: absolute;
  right: 3px;
  bottom: 2px;
  font-size: 10px;
  line-height: 1;
  opacity: 0.8;
}

/* In der Liste dieselben drei Marken, damit beide Ansichten dieselbe
   Sprache sprechen */
.tl-form {
  display: inline-block;
  margin-left: 5px;
  font-size: 10px;
  opacity: 0.75;
}

/* --- Eidsteine und Kopfgeldtafel (HO-40, 16.09.2026) -------------
   Der Kopf zeigt die Haerte und das naechste Feld, darunter die sechs
   Schalter. Rot wird es erst, wenn wirklich ein Eid steht - vorher
   ist es ein Angebot, keine Warnung. */
.eid-kopf {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  margin-bottom: 8px;
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-radius: var(--r-3);
}

.eid-kopf.scharf {
  border-color: var(--feind);
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(226,73,74,0.13), transparent 70%),
    var(--flaeche);
}

.eid-haerte { text-align: center; flex-shrink: 0; min-width: 52px; }
.eid-haerte b { display: block; font-size: 26px; font-weight: 800; color: var(--feind); }
.eid-haerte span {
  display: block;
  font-size: 9px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--schrift-matt);
}

.eid-lohn { font-size: 12px; line-height: 1.45; color: var(--schrift-matt); }
.eid-lohn b { color: var(--schrift); }
.eid-rest { margin-top: 3px; font-size: 11px; opacity: 0.75; }

.eid-zeile {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  margin-bottom: 6px;
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-radius: var(--r-3);
}

.eid-zeile.an { border-color: var(--feind-dunkel); }
.eid-e { font-size: 22px; width: 28px; text-align: center; }
.eid-m { flex: 1; min-width: 0; }
.eid-n { font-size: 14px; font-weight: 700; }

/* ⚠️ HO-90 (20.09.2026): Der Zusatz stand hinter dem Namen und brach
   mitten im Satz um - "+1 Haerte je" in der ersten Zeile, "Rang" in der
   zweiten. Das liest sich wie zwei Angaben, ist aber eine. Jetzt bleibt
   der Satz zusammen und der Umbruch passiert davor. */
.eid-h {
  margin-left: 6px;
  font-size: 10px;
  font-weight: 600;
  color: var(--feind);
  white-space: nowrap;
}

.eid-t { font-size: 11px; color: var(--schrift-matt); margin-top: 2px; }

.eid-schalter {
  display: flex;
  align-items: center;
  gap: 10px;          /* HO-82: 6 px waren zu wenig zwischen 46ern */
  flex-shrink: 0;
}

/* ⚠️ HO-82 (18.09.2026): 34 x 34 px mit 6 px Abstand. An diesen zwei
   Knoepfen haengt die HAERTE des Elite-Dungeons - ein Fehltipp
   aendert, wie schwer der Lauf wird. 44 px ist die Grenze, unter der
   ein Daumen danebentrifft. */
.eid-schalter button {
  min-width: 46px;
  min-height: var(--zh-3);
  flex: none;
  padding: 0;
  font-size: 20px;
  font-weight: 700;
  border-radius: var(--r-3);
}

.eid-schalter button:disabled { opacity: 0.3; cursor: default; }
.eid-schalter span { min-width: 30px; text-align: center; font-size: 12px; font-weight: 700; }

/* --- Konto und Gilde (16.09.2026) --------------------------------- */
.konto-feld { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }

.konto-feld input {
  width: 100%;
  padding: 12px;
  font-size: 15px;
  font-family: inherit;
  color: var(--schrift);
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-radius: var(--r-3);
}

.konto-feld input:focus { outline: none; border-color: var(--xp); }
.konto-knoepfe { display: flex; gap: 8px; }

.konto-kopf {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: var(--flaeche);
  border: 1px solid var(--leben-dunkel);
  border-radius: var(--r-3);
}

.konto-name { flex: 1; font-size: 16px; font-weight: 700; color: var(--leben); }

button.klein {
  flex: none;
  min-height: var(--zh-2);
  padding: 0 12px;
  font-size: 12px;
  border-radius: var(--r-3);
}

button.breit { width: 100%; margin-bottom: 8px; }

.gilde-kasten {
  margin-top: 8px;
  padding: 12px 14px;
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(74,158,242,0.10), transparent 70%),
    var(--flaeche);
  border: 1px solid var(--rand);
  border-radius: var(--r-3);
}

.gilde-name { font-size: 16px; font-weight: 800; }
.gilde-m { font-size: 12px; color: var(--schrift-matt); margin-top: 3px; }

.gilde-code {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 10px 0 4px;
  font-size: 13px;
  color: var(--schrift-matt);
}

.gilde-code b {
  color: var(--gold);
  font-family: ui-monospace, monospace;
  letter-spacing: 0.5px;
}

/* Die Gilde in der Liga-Zeile und die Liste zum Beitreten (16.09.2026) */
.liga-gilde {
  font-size: 11px;
  font-weight: 600;
  color: var(--xp);
  white-space: nowrap;
}

.gilde-zeile {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  margin-bottom: 6px;
  background: var(--flaeche-hell);
  border: 1px solid var(--rand);
  border-radius: var(--r-3);
  cursor: pointer;
}

.gilde-zeile:active { background: var(--rand); }
.gilde-zeile.zu { opacity: 0.55; cursor: default; }
.gilde-z-mitte { flex: 1; min-width: 0; }
.gilde-z-name { font-size: 14px; font-weight: 700; }
.gilde-z-m { font-size: 11px; color: var(--schrift-matt); margin-top: 2px; }

.gilde-z-marke {
  flex: none;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--leben);
}

.gilde-zeile.zu .gilde-z-marke { color: var(--schrift-matt); text-transform: none; }
.gilde-offen { color: var(--leben); }

/* --- Ton-Schalter (16.09.2026) ------------------------------------ */
.klang-zeile {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  margin-bottom: 6px;
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-radius: var(--r-3);
}

.klang-zeile.an { border-color: var(--leben-dunkel); }
.klang-m { flex: 1; min-width: 0; }
.klang-n { font-size: 14px; font-weight: 700; }
.klang-t { font-size: 11px; color: var(--schrift-matt); margin-top: 2px; }

/* ⚠️ HO-82: Der Schieber war 84 x 16 px. Ein Schieber ist der
   schwerste Knopf ueberhaupt - man muss ihn treffen UND ziehen.
   Die Hoehe kommt von der Bahn, deshalb steht sie hier ausdruecklich. */
.klang-zeile input[type="range"] {
  flex: none;
  width: 96px;
  height: 44px;
  accent-color: var(--gold);
  cursor: pointer;
}

.klang-zeile button {
  flex: none;
  min-width: 62px;
  min-height: var(--zh-3);
  padding: 0 12px;
  font-size: 13px;
  font-weight: 700;
  border-radius: var(--r-3);
}

.klang-zeile.an button { color: var(--grund); background: var(--leben); border-color: var(--leben); }

/* --- Der Vorhang: Anmelden zuerst (16.09.2026) -------------------- */
#tor {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(8, 10, 15, 0.94);
  backdrop-filter: blur(3px);
}

#tor[hidden] { display: none; }

#tor-kasten {
  width: 100%;
  max-width: 360px;
  padding: 22px 20px 18px;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(242,193,78,0.10), transparent 70%),
    var(--flaeche);
  border: 1px solid var(--rand);
  border-radius: var(--r-4);
}

#tor-titel {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-align: center;
  margin-bottom: 6px;
}

#tor-text {
  font-size: 13px;
  line-height: 1.5;
  color: var(--schrift-matt);
  text-align: center;
  margin-bottom: 16px;
}

#tor-meldung {
  min-height: var(--zh-1);
  margin-top: 10px;
  font-size: 12px;
  font-weight: 600;
  text-align: center;
  color: var(--feind);
}

button.tor-klein {
  width: 100%;
  min-height: var(--zh-3);
  margin-top: 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--schrift-matt);
  background: none;
  border: none;
  text-decoration: underline;
}

/* --- Gildenbereich (16.09.2026) ----------------------------------- */
.gilde-kopf {
  padding: 14px;
  margin-bottom: 6px;
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(74,158,242,0.12), transparent 70%),
    var(--flaeche);
  border: 1px solid var(--xp);
  border-radius: var(--r-3);
}

.gilde-k-name { font-size: 18px; font-weight: 800; }
.gilde-k-m { font-size: 12px; color: var(--schrift-matt); margin-top: 3px; }

.gilde-buffs { display: flex; flex-wrap: wrap; gap: 6px; }

.gilde-buff {
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 700;
  color: var(--leben);
  background: var(--flaeche);
  border: 1px solid var(--leben-dunkel);
  border-radius: var(--r-3);
}

.ziel-zeile {
  padding: 11px 12px;
  margin-bottom: 7px;
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-radius: var(--r-3);
}

.ziel-zeile.offen { border-color: var(--leben-dunkel); }

.ziel-kopf {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 6px;
}

.ziel-name { font-size: 14px; font-weight: 700; }

.ziel-stufe {
  margin-left: 6px;
  font-size: 11px;
  font-weight: 600;
  color: var(--gold);
}

.ziel-zahl { font-size: 13px; font-weight: 700; white-space: nowrap; }
.ziel-zahl span { font-size: 11px; font-weight: 600; color: var(--schrift-matt); }
.ziel-text { font-size: 11px; color: var(--schrift-matt); margin-top: 5px; }
.ziel-text b { color: var(--leben); }

.bei-zeile {
  padding: 8px 12px;
  margin-bottom: 4px;
  font-size: 12px;
  color: var(--schrift-matt);
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-radius: var(--r-3);
}

.bei-zeile b { color: var(--schrift); }

/* Der Gildenruf - klein gehalten, zum Verabreden.

   ⚠️ HO-87 (20.09.2026): Hier stand `max-height: 260px; overflow-y:
   auto` - ein Rollkasten IM Rollkasten. Am Handy entscheidet dann der
   Punkt, an dem der Daumen aufsetzt, ob der Chat rollt oder die Seite,
   und man erwischt regelmaessig das Falsche. Schlimmer: steht die
   Tastatur offen, bleiben von 844 px noch rund 480 - davon frass der
   Kasten 260. Der Chat rollt jetzt mit der Seite.

   Damit die Seite dadurch nicht 40 Nachrichten lang wird, stehen die
   letzten zwoelf da. Der Rest ist nicht weg, er wird nur nicht
   gezeichnet - sauberer waere ein `slice(-12)` in spiel.js. */
#gilde-chat {
  padding: 8px;
  margin-bottom: 8px;
  background: var(--grund);
  border: 1px solid var(--rand);
  border-radius: var(--r-3);
}

.chat-zeile:nth-last-child(n + 13) { display: none; }

.chat-zeile {
  padding: 8px 10px;
  margin-bottom: 5px;
  background: var(--flaeche);
  border-radius: var(--r-3);
  border-left: 3px solid var(--rand);
}

.chat-zeile.ich { border-left-color: var(--leben); }

/* HO-87: Die Kopfzeile war 10 px - Name und Uhrzeit, also genau das,
   was beim Ueberfliegen zaehlt. 12 px, und der Name traegt die Farbe. */
.chat-kopf { font-size: 12px; font-weight: 700; color: var(--schrift-matt); }
.chat-zeile.ich .chat-kopf { color: var(--leben); }
.chat-text { font-size: 14px; line-height: 1.45; margin-top: 3px; word-break: break-word; }

button.breit.gross { min-height: var(--zh-4); font-size: 15px; }

/* Der Anlauf im Turm (16.09.2026) ------------------------------------
   Eigene Zeile, damit ein Fehltipp keinen Aufstieg startet. Sie sieht
   absichtlich anders aus als eine Aktivitaet: hier wird nichts
   gekaempft, hier wird nur zurueckgeholt, was schon geschafft war. */
.akt-zeile.anlauf {
  border-style: dashed;
  border-left: 3px solid var(--gold);
}
.akt-zeile.anlauf .akt-marke { color: var(--gold); }

/* Saetze und Beutetafel (16.09.2026) ---------------------------------
   Lenas Befunde vom selben Tag sind hier gleich mit eingebaut:
   Treffergroessen ab 44px, Zahlen mit tabular-nums, und eine einzige
   Eckenrundung statt einer neuen. */
.satz-zeile {
  padding: 12px 14px;
  margin-bottom: 10px;
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-radius: var(--r-3);
}
.satz-kopf {
  display: flex; align-items: baseline; gap: 10px;
  margin-bottom: 8px;
}
.satz-name { flex: 1; font-size: 15px; font-weight: 700; }
.satz-teile {
  display: block;
  font-size: 11px; font-weight: 400; color: var(--schrift-matt);
}
.satz-zeichen {
  font-size: 17px; font-weight: 700; color: var(--gold);
  font-variant-numeric: tabular-nums;
}
.satz-zeichen span { font-size: 12px; font-weight: 400; color: var(--schrift-matt); }
.satz-wofuer { margin: 8px 0 2px; font-size: 12px; color: var(--schrift); }
.satz-quelle { font-size: 11.5px; color: var(--schrift-matt); }
.satz-bonus {
  margin-top: 6px; padding: 7px 10px;
  font-size: 12px; color: var(--schrift-matt);
  background: var(--grund);
  border-left: 3px solid var(--rand);
  border-radius: var(--r-3);
}
.satz-bonus.gilt {
  color: var(--schrift);
  border-left-color: var(--leben);
}
.satz-an { color: var(--leben); font-weight: 700; }
.satz-knoepfe {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
  margin-top: 10px;
}
.satz-knopf {
  min-height: var(--zh-3);          /* Daumen, nicht Maus */
  font-size: 13px;
  background: var(--flaeche-hell);
  border: 1px solid var(--rand);
  border-radius: var(--r-3);
  color: var(--schrift);
}
.satz-knopf:not(.zu) { border-color: var(--gold); color: var(--gold); }
.satz-knopf:not(.zu):active { background: var(--rand); }
.satz-knopf.zu { opacity: .5; }
.satz-knopf.hat { border-style: dashed; }
.satz-rest { margin-top: 8px; font-size: 11.5px; color: var(--schrift-matt); }

.abschnitt-unter {
  margin: 16px 0 8px;
  font-size: 11px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--schrift-matt);
}
.beute-zeile {
  display: flex; align-items: center; gap: 10px;
  min-height: var(--zh-5); padding: 8px 12px;
  margin-bottom: 6px;
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-radius: var(--r-3);
}
.beute-zeile.zu { opacity: .62; }
.beute-emoji { flex: 0 0 auto; width: 34px; font-size: 22px; text-align: center; }
.beute-mitte { flex: 1; min-width: 0; }
.beute-name { font-size: 13.5px; font-weight: 700; }
.beute-name span { font-weight: 400; font-size: 11px; color: var(--schrift-matt); }
.beute-was { font-size: 11.5px; color: var(--schrift); }
.beute-zeichen { font-size: 11px; color: var(--gold); }
.akt-zeile.saetze .akt-hoehe { color: var(--gold); }

/* Die Kampfleiste (16.09.2026) ---------------------------------------
   Robert: "wie waere es wenn man den helden der als naechstes dran ist
   anklickt und dann die faehigkeiten kommen, und zwar so das sie noch
   auf der seite sind."

   Also: links ein schmaler Heldenstreifen, rechts die Faehigkeiten des
   angetippten. Vorher standen bis zu zwoelf Knoepfe untereinander. */
#faehigkeiten { display: block; }

.kampf-leiste { display: block; }

.f-tafel {
  padding: 7px 9px;
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-radius: var(--r-3);
}
.f-tafel-kopf { margin-bottom: 6px; font-size: 12.5px; }
.f-zug { font-size: 11px; color: var(--gold); font-variant-numeric: tabular-nums; }
/* Drei Faehigkeiten, DREI Spalten - eine Reihe statt zwei (spart 44 px)
   und alle drei sind auf einen Blick da, immer am selben Platz. */
.f-tafel-knoepfe { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }

/* ⚠️ Im Rundenkampf sind es VIER Knöpfe — die drei Fähigkeiten plus
   der einfache Angriff, der immer geht. Als eigene Zeile hat er 54 px
   gekostet und das Kampfbild auf 840 von 844 px gebracht: vier Pixel
   Luft (18.09.2026 gemessen). Also vier in eine Reihe. Der Angriff
   bekommt weniger Breite als die Fähigkeiten — er ist der Ausweg,
   nicht die Wahl. */
.f-tafel-knoepfe.mit-angriff {
  grid-template-columns: repeat(3, 1fr) 0.62fr;
}
.f-tafel-knoepfe .faehigkeit {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1px;
  min-height: var(--zh-3); padding: 3px 2px;
  font-size: 10.5px; line-height: 1.1;
  border-radius: var(--r-3);
}
.f-tafel-knoepfe .faehigkeit .f-name { text-align: center; }
/* Abgeblendet, aber am Platz - und die Restzeit steht drauf. */
.f-tafel-knoepfe .faehigkeit.kuehlt { opacity: .45; }
.f-uhr {
  font-size: 9px; font-weight: 700; color: var(--gold);
  font-variant-numeric: tabular-nums;
}
.f-tafel-knoepfe .faehigkeit.kuehlt .f-uhr { color: var(--schrift-matt); }
.f-tafel-knoepfe .faehigkeit.schuetzt { border-color: var(--xp); color: var(--xp); }
.f-tafel-knoepfe .faehigkeit.schlag { border-color: var(--rand); }
.f-kuehlt {
  margin-top: 6px;
  font-size: 10.5px; color: var(--schrift-matt);
  font-variant-numeric: tabular-nums;
}
/* Der Weg auf die Heldenkarte. Er hing vorher am Antippen der
   Truppenkarte - das oeffnet jetzt die Faehigkeiten. */
.f-mehr {
  display: block; width: 100%;
  min-height: var(--zh-1); margin-top: 6px;
  font-size: 11px; text-align: left;
  background: none; border: 0; border-top: 1px solid var(--rand);
  border-radius: 0;
  color: var(--schrift-matt);
}
.f-mehr:active { color: var(--gold); }

/* Die Reihenfolge im Rundenkampf */
.zug-reihe {
  display: flex; align-items: center; gap: 4px;
  margin-bottom: 6px;
  min-height: var(--zh-1);
}
.zug-titel {
  margin-right: 2px;
  font-size: 9.5px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--schrift-matt);
}
.zug-marke {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; font-size: 14px;
  background: var(--flaeche); border: 1px solid var(--rand); border-radius: var(--r-2);
}
.zug-marke.jetzt { border-color: var(--gold); background: var(--flaeche-hell); }
.zug-marke.feind { border-color: var(--feind); }
.zug-pfeil { color: var(--schrift-matt); font-size: 11px; }
.zug-warte { padding: 8px 2px; font-size: 11.5px; color: var(--schrift-matt); }

/* Der Umschalter Rundenkampf / alle gleichzeitig */
/* Der Umschalter sitzt in der Reihenfolge-Zeile, nicht in einem
   eigenen Kasten: als eigener Kasten kostete er 50 px, und im Browser
   gemessen war das Kampfbild im Turm damit 865 px hoch - 21 mehr, als
   ein Handy hat (16.09.2026). */
/* Der einfache Angriff (18.09.2026): immer verfügbar, bewusst
   schlichter als eine Fähigkeit. In SW hat Fähigkeit 1 nie eine
   Abklingzeit — hier haben alle drei eine, also braucht der Zug einen
   Ausweg, sonst steht man da und kann nichts drücken. */
.faehigkeit.einfach { border-style: dashed; opacity: 0.85; }
.f-tafel-knoepfe .faehigkeit.einfach .f-name { font-size: 9.5px; }
.f-tafel-knoepfe .faehigkeit.einfach .f-uhr { color: var(--schrift-matt); }

/* ⚠️ Der Umschalter darf NICHT hoeher werden - als eigener Kasten hat
   er das Kampfbild im Turm auf 865 px getrieben, 21 mehr als ein Handy
   hat. Der Daumen braucht trotzdem seine 44 px. Beides geht: die
   Trefferflaeche liegt unsichtbar ueber dem Knopf und kostet keine
   einzige Zeile Hoehe, weil sie absolut sitzt. (HO-90, 20.09.2026) */
.zug-weise {
  position: relative;
  margin-left: auto;
  min-height: var(--zh-1); padding: 0 10px;
  font-size: 10.5px; white-space: nowrap;
  background: var(--flaeche); border: 1px solid var(--rand);
  border-radius: var(--r-2); color: var(--schrift-matt);
}
.zug-weise::after {
  content: "";
  position: absolute;
  left: -6px; right: -6px;
  top: 50%;
  height: var(--zh-3);
  transform: translateY(-50%);
}
.zug-weise:active { border-color: var(--gold); color: var(--gold); }

/* Die Boss-Uhr: zaehlt durchgehend rueckwaerts bis zur naechsten
   Attacke, wird rot beim Laden und gruen, wenn der Schutz steht. */
.ansage[hidden] { display: none; }
.ansage {
  display: flex; align-items: center; gap: 8px;
  margin: 5px 0; padding: 5px 10px;
  border: 1px solid var(--rand);
  border-radius: var(--r-3);
  background: var(--flaeche);
}
.ansage.ruhig .ansage-uhr { color: var(--schrift-matt); }
.ansage:not(.ruhig) {
  background: rgba(226, 73, 74, .16);
  border-color: var(--feind);
  animation: ansage-puls .6s ease-in-out infinite alternate;
}
.ansage.sicher {
  background: rgba(72, 199, 116, .14);
  border-color: var(--leben);
  animation: none;
}
.ansage-kopf { font-size: 12.5px; font-weight: 700; }
.ansage-uhr {
  font-size: 17px; font-weight: 700; color: var(--feind);
  font-variant-numeric: tabular-nums;
}
.ansage.sicher .ansage-uhr { color: var(--leben); }
.ansage-rat {
  flex: 1; min-width: 0;
  font-size: 10px; color: var(--schrift-matt);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
@keyframes ansage-puls {
  from { border-color: var(--feind); }
  to   { border-color: var(--gold); }
}
/* Lenas Befund HO-89: prefers-reduced-motion kam im Projekt nicht vor */
@media (prefers-reduced-motion: reduce) {
  .ansage { animation: none; }
}

/* Die gemalten Gegnerbilder (HO-42, 17.09.2026).
   Mehrere Gegner teilen sich einen Archetyp - 128 Gegner, 27 Bilder.
   Fehlt eines, steht dort weiterhin das Emoji, deshalb muessen beide
   dieselbe Hoehe haben, sonst springt das Kampfbild. */
.gegner-figur {
  display: block;
  /* ⚠️ Groesser als das Emoji: Ein gemaltes Bild von 512 px auf 82 px
     zu quetschen ist Verschwendung, und das Kampfbild hat Luft (17.09.
     2026 im Browser gemessen: 692 von 844 Pixeln belegt). */
  height: 112px;
  width: auto;
  max-width: 200px;
  object-fit: contain;
}
#gegner .ikone-emoji { font-size: inherit; line-height: 1; }

/* Tempo sichtbar machen (17.09.2026) --------------------------------
   Robert: "bei SW gibt es einen Wert der Speed heisst und bestimmt
   welcher Charakter als naechstes dran ist, das ist eine tolle
   Mechanik. Der Boss hat halt auch einen Wert." Und danach: "das
   Problem, man sieht nicht welcher Spieler am Zug ist."

   Die Mechanik gab es hier schon immer - `fortschritt` fuellt sich mit
   `tempo` und loest bei 1 einen Schlag aus, genau wie die Attack Bar
   in SW. Sie war nur unsichtbar. */
.balken.tempo {
  display: block; width: 100%; height: 3px;
  margin: 1px 0 0;
  background: var(--grund);
  border-radius: var(--r-1); overflow: hidden;
}
.balken.tempo .fuellung {
  display: block; height: 100%;
  background: var(--xp);
  transition: width .12s linear;
}
.balken.tempo.gegner {
  height: 5px; max-width: 200px; margin: 4px auto 0;
}
.balken.tempo.gegner .fuellung { background: var(--feind); }

/* Wer als Naechstes zuschlaegt - das ist die Antwort auf "man sieht
   nicht, wer am Zug ist". Nicht der mit der vollsten Leiste, sondern
   der mit der kuerzesten Restzeit. */
.held.dran { border-color: var(--xp); }
.held.dran .held-marke { color: var(--xp); }
.held.dran .balken.tempo .fuellung { background: var(--gold); }

.f-tempo {
  font-size: 10px; color: var(--schrift-matt);
  font-variant-numeric: tabular-nums;
}

/* Der Halt ist eine ZEILE, kein Fenster (17.09.2026) -----------------
   Robert: "das mit dem Fenster, das immer will das man was macht,
   nervt auch total. Das sollte, wenn, nur ein Ausrufezeichen oder so
   sein."

   HO-44 war seine eigene Ansage, und die Absicht bleibt richtig: An
   bestimmten Stellen soll man erfahren, dass etwas zu entscheiden
   waere. Falsch war die Form. Das Spiel laeuft jetzt daneben weiter,
   der Gegner bleibt sichtbar, und das hier ist nur ein Hinweis. */
/* (Die zweite Fassung von #halt-feld stand hier und ist am 18.09.2026
   nach oben gewandert - siehe dort. Zwei Bloecke fuer dasselbe Feld
   sind dieselbe Falle wie der doppelte Gildenbereich, HO-67.) */

/* Im Kampfbild zaehlt jede Zeile: der Fuss traegt drei kleine Dinge und
   brauchte 54 px (17.09.2026 im Browser gemessen). */
#fuss { padding: 6px 0 0; gap: 8px; }
/* HO-90: waren 40 - unter der Daumengrenze. 44 kostet vier Pixel im
   Kampfbild und spart den Fehltipp auf den falschen Reiter. */
#fuss button { min-height: var(--zh-3); }
/* Die Ueberschrift "Deine Truppe" sagt nichts, was die Karten nicht
   selbst sagen - im Kampfbild ist sie weg. */
#ansicht-kampf .abschnitt-titel.klein { display: none; }

/* Der Knopf, der den Beutel in einem Griff leert */
#knopf-leeren {
  font-size: 13px; font-weight: 700;
  border-color: var(--gold); color: var(--gold);
}

/* Der Gegner ist als Naechster dran (17.09.2026) ---------------------
   Robert: "der boss muesste auch irgendwann dran sein." Er WAR es
   immer - nur stand es nie da. Jetzt leuchtet sein Bereich, wenn er
   als Naechster kommt, und darunter steht, in wie vielen Sekunden. */
#gegner-bereich.dran { border-color: var(--feind); }
#gegner-tempo-text {
  margin-top: 2px;
  font-size: 10px; color: var(--schrift-matt);
  font-variant-numeric: tabular-nums;
  text-align: center;
}
#gegner-bereich.dran #gegner-tempo-text { color: var(--feind); font-weight: 700; }


/* ---------- HO-88: Knoepfe, die auf den Pi warten (20.09.2026) ------
   "Senden", "Beitreten", "Anmelden" gehen ueber Tailscale zum Pi und
   zurueck - gut eine Sekunde, in der sichtbar NICHTS passiert. Also
   tippt man ein zweites Mal, und dann steht die Nachricht doppelt da.

   Der Knopf behaelt seine Beschriftung (man soll sehen, was man
   gedrueckt hat), wird matt, nimmt keine Tipper mehr an und bekommt
   unten eine wandernde Goldlinie. Kein Kreisel, der die Beschriftung
   verdeckt.

   ⚠️ Die Klasse setzt niemand - das gehoert in spiel.js und ist nicht
   meine Datei. Der Haken ist fertig: `knopf.classList.add('laedt')`
   vor dem await, `remove` im finally. Siehe Befund unten. */
button.laedt {
  position: relative;
  overflow: hidden;
  pointer-events: none;
  color: var(--schrift-matt);
  border-color: var(--gold);
}

button.laedt::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 40%;
  height: 3px;
  background: var(--gold);
  border-radius: var(--r-1) var(--r-1) 0 0;
  animation: warte-linie 1.1s ease-in-out infinite alternate;
}

@keyframes warte-linie {
  from { left: 0; }
  to   { left: 60%; }
}

/* Wer wartet, soll wenigstens nicht ins Leere tippen: abgeblendete
   Knoepfe sahen bisher ueberall anders aus - oder gar nicht anders. */
button:disabled {
  opacity: 0.4;
  cursor: default;
}

/* ---------- Wer keine Bewegung will, bekommt keine (HO-89) ---------
   ⚠️ `prefers-reduced-motion` kam im ganzen Projekt nicht ein
   einziges Mal vor (18.09.2026). Im Spiel wippt der Gegner endlos,
   jedes Heldenbild wippt mit, und dazu fliegen bei jedem Treffer
   Zahlen durchs Bild. Fuer wen das ein Problem ist, hat es in der
   Systemeinstellung stehen - und niemand sollte es zweimal sagen
   muessen.

   Das Spiel bleibt vollstaendig spielbar: Was hier abgeschaltet wird,
   ist Schmuck. Die fliegenden Zahlen erscheinen weiter, sie fliegen
   nur nicht - sonst waere die Rueckmeldung weg, und DIE ist Inhalt. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001s !important;
    scroll-behavior: auto !important;
  }
  #gegner, .held-figur, .portraet-figur { animation: none !important; }
  .flugzahl { animation: none !important; opacity: 1; }
}