/* Cold Start - Freundesliste und die zwei Felder links neben dem Medaillon.
   Siehe assets/freunde.js. */

/* ------------------------------------------- Kopfzeile (nur in der Lobby)

   Das Medaillon haengt absolut rechts (.pf-slot, 104 px breit, right 12).
   Diese Gruppe sitzt daneben, ebenfalls absolut - im Fluss von .topright
   stuende sonst nichts, die Spalte waere null hoch und alles rutschte. */
.lb-tools {
  /* 124 px waeren die Kante des Medaillons (104 breit, right 12) - dann
     stiesse die Zahl am Freundeknopf daran. 136 laesst Luft. */
  /* Seit dem Burgermenue (2026-10-03) steht alles 40 px weiter links:
     12 Rand + 28 Knopf = 40, um die das Medaillon gerueckt ist. */
  position: absolute; right: 176px; top: 50%; transform: translateY(-50%);
  display: flex; align-items: center; gap: 18px; z-index: 1;
}

/* Ohne Rahmen (Bastian, 2026-10-02): ein Rahmen in der Kopfzeile heisst jetzt
   ueberall "anklickbar". Der Kontostand ist nur Anzeige, also steht er nackt. */
.lb-gold {
  display: inline-flex; align-items: center; gap: 7px;
  color: var(--gold);
  font: 700 13px var(--font);
  white-space: nowrap;
}
/* Zwei Riegel in verschiedenen Winkeln (Bastian, 2026-10-02). Der hintere
   liegt etwas weiter hinten und heller gedreht, abgedunkelt, damit er nicht
   mit dem vorderen um die Aufmerksamkeit streitet. Gemessen gegen einen
   einzelnen Riegel: 43 % mehr Goldflaeche - genug, dass man zwei Stuecke
   sieht und nicht nur einen Schatten. 28 x 12 ist das Bild selbst
   (Seitenverhaeltnis 2,35 : 1), das Feld drumherum faengt die Drehung auf. */
.lb-gold-st { position: relative; display: block; flex: none; width: 38px; height: 28px; }
.lb-gold-st img { position: absolute; left: 7px; top: 10px; display: block;
  width: 28px; height: 12px; transform-origin: 50% 50%; }
.lb-gold-h { transform: translate(-5px, -2px) rotate(32deg); filter: brightness(.72); }
.lb-gold-v { transform: translate(1px, 2px) rotate(-17deg); }
.lb-gold b { color: #e8dcb0; letter-spacing: .2px; }

/* Zeichen und Zahl, sonst nichts (Bastian, 2026-10-02). Das Zeichen ist die
   Infanteriefigur aus assets/icons.js - dieselbe Hand wie auf den Karten. */
.lb-fr {
  display: inline-flex; align-items: center; gap: 7px;
  height: 34px; padding: 0 11px;
  border: 1px solid #4a3a26; border-radius: 9px;
  background: rgba(0, 0, 0, .28);
  color: var(--ink-dim); cursor: pointer;
  font: 700 13px var(--font); white-space: nowrap;
  transition: color .13s, border-color .13s;
}
/* 30 : 26 ist der Rahmen der Einheitensymbole. */
.lb-fr svg { width: 21px; height: 18px; flex: none; fill: currentColor; }
.lb-fr:hover, .lb-fr:focus-visible { color: var(--ink); border-color: var(--gold); outline: none; }
/* Die Gesamtzahl - heller als das Zeichen, weil sie die Antwort ist. */
.lb-fr-n { color: var(--ink); font-weight: 700; }
/* Ampel: gruen, sobald einer da ist. Sagt ohne Lesen, ob sich das Fenster
   gerade lohnt. */
.lb-fr-amp {
  width: 9px; height: 9px; flex: none; border-radius: 50%;
  background: var(--ok); box-shadow: 0 0 6px rgba(126, 163, 107, .7);
}
.lb-fr-amp.aus { background: #4a4336; box-shadow: none; }

/* Rangliste (2026-10-23): der goldene Pokal, randlos wie die Goldstreifen
   daneben (Bastian: "genauso wie das Goldstreifen Icon"). Nur das Bild,
   beim Zeigen etwas heller - wie die Zahl am Kontostand. */
a.lb-rk { padding: 2px 4px; margin: -2px -4px; }
.lb-rk-b { display: block; width: 22px; height: 26px; }
a.lb-rk:hover .lb-rk-b, a.lb-rk:focus-visible .lb-rk-b { filter: brightness(1.18); }

@media (max-width: 620px) {
  .lb-tools { right: 164px; gap: 12px; }
  .lb-gold { font-size: 12px; gap: 5px; }
  .lb-fr { height: 32px; padding: 0 9px; gap: 5px; }
}

/* --------------------------------------------------------- Das Fenster */

/* 560 -> 600 (2026-10-07, der Schaukasten brauchte Platz) -> 760
   (2026-10-08, Bastian: "das ganze Fenster soll breiter gemacht werden").
   Die breite Karte je Freund traegt Medaillon, Schaukasten, Erfolgsleiste
   und vier Zahlen nebeneinander; bei 600 stand die Statistik eng unter
   dem Schaukasten. */
.fr-card {
  width: min(760px, 94vw); max-width: 760px;
  padding: 20px 22px 22px; text-align: left;
}
/* Die Kopfzeile des FENSTERS. Sie hiess bis zum 2026-10-10 ebenfalls
   .fr-kopf - wie die Namenszeile in jeder Spielerkarte weiter unten. Die
   zweite Regel setzte dort zwar Anzeige und Abstand neu, aber nicht das
   `margin: 0 0 12px` von hier: unter jedem Namen standen deshalb 12 px
   Luft, die niemand bestellt hatte (Bastian, 2026-10-10: "die eine hat zu
   wenig Abstand, die andere zu viel"). Ein Klassenname fuer zwei Dinge -
   jetzt heisst das Fenster .fr-titel. */
.fr-titel { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; }
.fr-titel h2 { margin: 0; flex: 0 0 auto; }
.fr-zahl { flex: 1; font: 500 12.5px var(--font); color: var(--ink-mute); }
.fr-close {
  flex: 0 0 auto; width: 30px; height: 30px; padding: 0;
  display: grid; place-items: center;
  border: 1px solid var(--panel-edge); border-radius: 7px;
  background: rgba(0, 0, 0, .35); color: var(--ink-dim);
  font-size: 17px; line-height: 1; cursor: pointer;
}
.fr-close:hover { color: var(--ink); border-color: var(--gold); }

/* Der Raum unter dem Suchfeld hat eine FESTE Hoehe (Bastian, 2026-10-07:
   "die Freundesliste soll eine feste Hoehe haben und nicht springen, wenn man
   einen Tab oeffnet"). Vorher trug die Liste selbst ein max-height und das
   Fenster wuchs mit seinem Inhalt - beim Wechsel auf "Anfragen" sprang die
   Karte, und der Reiter rutschte unter dem Mauszeiger weg.

   `height`, nicht `min-height`: sonst waere es nur eine Untergrenze und das
   Fenster waere beim Suchen wieder hoeher. Was bleibt, ist leerer Raum, wenn
   zwei Freunde dastehen - und das ist der ruhigere Fehler.

   Der Wert haengt am Fenster, nicht am Bestand: eine Zeile misst rund 66 px,
   300 zeigen also VIER ganze und von der fuenften die Haelfte.

   Viermal gewandert, und das ist die Geschichte dazu: 372 (fuenf) war zu
   wenig - "viel zu wenig hoch, so dass mindestens 5 bis 7 Freunde in die
   Liste passen"; 500 (sieben) war zu viel - "Freunde ist mir zu hoch, wir
   sprachen darueber", naemlich ueber die dunkle Flaeche, die bei zwei oder
   drei Freunden unten stehen bleibt; 352 (fuenf) war immer noch zu viel -
   "wir wollten das Freunde Fenster doch weniger hoch machen, es waren doch
   um die 300 px im Gespraech". Eine FESTE Hoehe muss diesen Preis zahlen;
   die Frage ist nur, wie hoch. Die leere Flaeche wiegt schwerer als die
   fuenfte Zeile - fast jeder hat wenige Freunde, aber jeder sieht das leere
   Fenster.

   Die halbe fuenfte Zeile ist Absicht: sie ist der deutlichste Hinweis,
   dass es weitergeht, und kostet keinen Pfeil und keinen Satz.
   Unter 42 vh bleibt die Karte auf einem flachen Bildschirm ganz sichtbar.
   Beim Wechsel des Reiters aendert sich keins von beidem. */
/* 300 px waren vier Zeilen und ein Anschnitt - solange eine Zeile 70 px
   hoch war. Seit der breiten Karte (2026-10-08) misst sie 109 px, und in
   dieselben 300 px passten nur noch zweieinhalb Freunde. Die Zahl der
   sichtbaren Zeilen ist die Entscheidung, nicht die Pixel: wieder vier und
   ein Anschnitt. Nach oben haelt 58vh das Fenster auf kleinen Schirmen im
   Rahmen. */
.fr-raum {
  height: min(58vh, 480px);
  overflow: auto;
  /* Platz fuer den Rollbalken, damit die Zeilen nicht springen, sobald er
     erscheint. */
  scrollbar-gutter: stable;
}
.fr-liste {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column;
}
/* Die breite Karte (Bastian, 2026-10-08: "ich moechte die Profile der
   Freunde groesser darstellen" und "ueberleg dir mal eine coolere
   Praesentation" - aus drei Entwuerfen hat er diesen gewaehlt).

   Jede Zeile ist eine Karte mit eigenem Grund und Rand statt einer Zeile in
   einer Liste. Innen ein Raster aus drei Spalten: Medaillon, Inhalt,
   Handlungen. Medaillon und Knoepfe stehen ueber ALLE Zeilen des Rasters -
   so bleibt die Karte gerade, egal wie viel in der Mitte steht (ein Freund
   ohne Schaukasten und ohne Statistik hat eine Zeile weniger). */
.fr-row {
  position: relative;            /* Bezug fuer den Dreipunkt in der Ecke */
  display: flex; align-items: stretch; gap: 0;
  padding: 11px 13px; margin-bottom: 7px; border-radius: 11px;
  background: linear-gradient(160deg, #1d1711, #15110c);
  border: 1px solid #2d241a;
  transition: border-color .13s;
}
.fr-row:hover { border-color: #3d3022; background: linear-gradient(160deg, #221b14, #17120d); }
/* Seit dem 2026-10-09 kein Knopf mehr, sondern nur noch der Inhalt der
   Karte: der Klick darauf oeffnete den Steckbrief, und der tat nichts.
   Damit faellt auch der Zeiger weg - eine Hand ueber etwas, das sich
   nicht anklicken laesst, ist ein Versprechen, das niemand einloest. */
.fr-wer {
  flex: 1; min-width: 0;
  display: flex; align-items: center; gap: 14px;
}
.fr-bild { flex: none; width: 72px; height: 72px; }

/* Die schmale Zeile fuer offene Anfragen (Bastian, 2026-10-08). Alles
   kleiner: Bild 44 statt 72, weniger Luft, und innen stehen ohnehin nur
   zwei Zeilen - Schaukasten und Erfolgsleiste baut freunde.js hier gar
   nicht erst. Die Karte behaelt Grund und Rand, damit die beiden Listen
   dieselbe Sprache sprechen; sie ist nur halb so hoch. */
.fr-row.ist-klein { padding: 7px 11px; }
.fr-row.ist-klein .fr-bild { width: 44px; height: 44px; }
.fr-row.ist-klein .fr-wer { gap: 11px; }
.fr-row.ist-klein .fr-kopf b { font-size: 15px; }
.fr-bild svg { display: block; width: 100%; height: 100%; }
/* Der Inhalt als eigener Kasten und NICHT als Raster um das Medaillon:
   mit grid-row: 1 / -1 bekam die erste Zeile die ganze Hoehe des
   Medaillons, und zwischen Name und Stand klaffte eine Luecke. (Die -1
   meint die letzte Linie des EXPLIZITEN Rasters - ohne grid-template-rows
   ist das Linie 1.) */
.fr-inhalt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }

/* Name und Stufe in einer Zeile. Die Stufe als Marke: sie ist eine Zahl mit
   Rang, kein Nachsatz zum Namen. */
.fr-kopf { display: flex; align-items: center; gap: 8px; min-width: 0; }
.fr-kopf b {
  font: 700 17px var(--font); color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fr-stufe {
  flex: none; font: 700 10px var(--font); letter-spacing: .5px; font-style: normal;
  color: #171310; background: var(--gold); border-radius: 3px; padding: 1px 6px;
}
.fr-row:not(.is-da) .fr-stufe { background: #6a5c38; color: #1a1610; }

/* Schaukasten und Erfolgsleiste teilen sich eine Zeile. */
.fr-mitte { display: flex; align-items: center; gap: 14px; margin-top: 5px; }
/* Wer nicht da ist, steht blasser - das Bild sagt es schneller als das Wort. */
.fr-row:not(.is-da) .fr-bild { opacity: .5; }
/* Eine Zeile, die NICHT umbricht. Als Flexkasten (bis 2026-10-07) wurde aus
   jedem Wort ein eigenes Element, und sobald der Schaukasten daneben Platz
   nahm, stand "Stufe 18 · 6 Erfolge" auf drei Zeilen. Jetzt ist es Text, der
   am Ende abgeschnitten wird - der Name und der Stand stehen vorne. */
/* Eigene Klasse, nicht `.fr-t small`: seit der Erfolgsleiste steht ein
   zweites <small> in derselben Spalte, und eine Regel nach Elementnamen
   traefe beide. */
.fr-stand {
  display: block;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font: 500 11.5px var(--font); color: var(--ink-mute);
}

/* Die kleine Statistik (Bastian, 2026-10-08). Zahl oben, Wort darunter,
   tabellarisch gesetzt - bei jedem Freund an derselben Stelle. "Gegen dich"
   steht zuletzt und in Gold: es ist die einzige Zahl, die es nur in einer
   Freundesliste geben kann. */
.fr-stat { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 8px; }
.fr-z { display: flex; flex-direction: column; line-height: 1.15; }
.fr-z b {
  font: 700 13px var(--font); color: var(--ink);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.fr-z small {
  font: 500 9.5px var(--font); letter-spacing: .4px; text-transform: uppercase;
  color: var(--ink-mute); white-space: nowrap;
}
.fr-duell b { color: var(--gold); }
.fr-row:not(.is-da) .fr-stat { opacity: .75; }
/* Die Erfolgsleiste (Bastian, 2026-10-07: "wenn wir den Erfahrungsbalken
   nicht mehr zeigen, dann den aus Erfolgen"). Dieselbe Lesart wie der Korb
   "Alle Erfolge" im Profilfenster: eine duenne Bahn und die Zahl daneben.

   Gedeckelt auf 190 px: ueber die ganze Zeilenbreite gezogen saehe sie wie
   ein Ladebalken aus, nicht wie eine Angabe. Derselbe Grund wie frueher bei
   der Erfahrungsleiste. */
.fr-erf {
  display: flex; align-items: center; gap: 7px;
  flex: 1 1 auto; max-width: 190px; font-style: normal;
}
.fr-erf u {
  flex: 1; min-width: 0; height: 3px; border-radius: 2px;
  background: rgba(255, 255, 255, .075); overflow: hidden; text-decoration: none;
}
.fr-erf u i { display: block; height: 100%; border-radius: 2px; background: var(--gold); }
.fr-erf small { flex: none; font: 500 10.5px var(--font); color: var(--ink-mute); }
/* Wer nicht da ist, steht blasser - wie Medaillon und Schaukasten. */
.fr-row:not(.is-da) .fr-erf u i { opacity: .6; }
/* Der Schaukasten des Freundes - bis zu vier Abzeichen rechts in der Zeile,
   an der Stelle, an der bis zum 2026-10-07 die Erfahrungsleiste stand
   (Bastian). Sie flieht als Erstes, wenn die Zeile eng wird: der Name und
   der Stand sind die Auskunft, die Abzeichen sind die Zugabe. */
/* Grundform und Hinweistafel kommen seit dem 2026-10-09 aus profile.css
   (CSProfile.schaukasten) - hier steht nur noch, was dieses Fenster
   eigenmaechtig dazutut. */
.fr-row:not(.is-da) .pf-kasten-fremd { opacity: .55; }
.fr-punkt {
  display: inline-block; vertical-align: 1px; margin-right: 4px;
  width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: .45;
}
.fr-row.is-da .fr-punkt { background: var(--ok); opacity: 1; }

/* Rechts in der Zeile stehen ZWEI verschiedene Dinge nebeneinander: was der
   Freund hat (sein Schaukasten) und was ich tun kann. Ohne Trennung liest sich
   das als eine Reihe von fuenf gleichwertigen Feldern (Bastian, 2026-10-07:
   "das muss besser sortiert werden, sprich wir brauchen hier Abstaende,
   senkrechte Striche, Rahmen"). Ein Haarstrich kostet nichts und beantwortet
   die Frage, wo das eine aufhoert. */
/* Bis zum 2026-10-08 stand hier ein senkrechter Strich an der Naht
   zwischen dem Knopf (Bild, Name, Stand, Erfolgsleiste, Schaukasten -
   alles EIN Knopf, der den Steckbrief oeffnet) und den Handlungen.
   Bastian: "der senkrechte Strich zwischen Buttons und Rest der Karte
   soll raus." Im breiteren Fenster trennt der Abstand von selbst, und
   die Karte hat ohnehin ihren eigenen Rand. */
.fr-tat {
  flex: 0 0 auto; display: flex; align-items: center; gap: 5px;
  margin-left: 18px; padding-right: 26px;
}
.fr-mini { padding: 5px 9px; font-size: 12px; }
/* aria-disabled statt disabled (siehe freunde.js): ein disabled Knopf
   schluckt in Chrome die Mauszeiger-Ereignisse, und der Hinweis, WARUM er
   grau ist, erschiene nie. */
.fr-mini:disabled, .fr-mini[aria-disabled="true"] { opacity: .4; cursor: default; }
/* Das Kreuz beendet die Freundschaft. Es steht am Rand und ist still, bis man
   darauf zeigt: eine Handlung, die man nicht rueckgaengig machen kann, soll
   nicht um Aufmerksamkeit werben. */
/* Nachricht und Fordern tragen nur noch ihr Zeichen - dasselbe wie im
   Steckbrief des Chats, wo es neben seinem Wort steht. Quadratisch, damit
   die drei Knoepfe eine Reihe gleicher Felder ergeben. */
/* Alle drei genau 32 x 32 (Bastian, 2026-10-07: "die Rahmen der drei Knoepfe
   sind unterschiedlich gross, das finde ich unguenstig"). Hoehe und Breite
   stehen fest statt sich aus Innenabstand und Zeilenhoehe zu ergeben - so
   kann kein Knopf durch seinen Inhalt aus der Reihe fallen. */
.fr-tat-z { width: 32px; height: 32px; padding: 0; display: grid; place-items: center; }
.fr-ico { display: block; width: 17px; height: 17px; }
/* Das Beenden steht abgesetzt: eine Handlung, die man nicht rueckgaengig
   machen kann, gehoert nicht in dieselbe Gruppe wie Schreiben und Fordern.
   Ein zweiter Strich waere zu viel - der Abstand reicht, und der Knopf ist
   ohnehin stiller. */
/* Nur noch Abstand und Ton - Groesse und Innenabstand kommen von .fr-tat-z.
   Bis zum 2026-10-07 stand hier padding: 5px 8px und font-size: 14px, weil
   im Knopf ein "x" als Buchstabe stand; damit war er schmaler und niedriger
   als seine beiden Nachbarn. */
/* Der Dreipunkt sitzt in der Ecke der Karte, nicht in der Reihe der
   Handlungen (Bastian, 2026-10-08). Still bis man darauf zeigt: dahinter
   liegen Griffe, die man selten braucht und einer davon ist endgueltig.
   Er traegt keinen Rahmen - ein vierter Kasten in der Ecke machte die
   Karte unruhig. .fr-tat haelt rechts Platz frei, damit die Knoepfe nicht
   unter ihn rutschen. */
.fr-mehr {
  position: absolute; top: 7px; right: 7px;
  width: 28px; height: 28px; padding: 0; display: grid; place-items: center;
  border: 0; border-radius: 6px; background: none;
  color: var(--ink-mute); cursor: pointer;
  opacity: .5; transition: opacity .13s, color .13s, background .13s;
}
.fr-row:hover .fr-mehr { opacity: 1; }
.fr-mehr:hover, .fr-mehr:focus-visible {
  opacity: 1; color: var(--gold); background: rgba(201, 162, 39, .12);
}
/* "Angefragt" ist ein Zustand, kein Knopf - deshalb ohne Rahmen. */
.fr-wartet { font: 600 11.5px var(--font); color: var(--ink-mute); letter-spacing: .03em; }

/* --------------------------------------------- Suchen und Sortieren */

/* Das Suchfeld steht allein ueber der Liste. Die Sortierung daneben ist am
   2026-10-07 wieder entfallen (Bastian: "die Sortierung nehmen wir komplett
   raus, die brauchen wir nicht") - es war ein Schalter fuer eine Entscheidung,
   die niemand trifft. */
.fr-such {
  display: flex; align-items: center; gap: 7px;
  height: 32px; padding: 0 10px; margin: 0 0 10px;
  border: 1px solid var(--panel-edge); border-radius: 8px;
  background: rgba(0, 0, 0, .3);
}
.fr-such:focus-within { border-color: var(--gold); }
.fr-such-z { flex: none; display: block; width: 15px; height: 15px; color: var(--ink-mute); }
.fr-such-z svg { display: block; width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.fr-such input {
  flex: 1; min-width: 0; border: 0; background: none; outline: none;
  color: var(--ink); font: 500 13px var(--font);
}
.fr-such input::placeholder { color: var(--ink-mute); }

/* ------------------------------------------------------------ Reiter

   Freunde und Anfragen (Bastian, 2026-10-07). Dieselbe Machart wie die
   Gespraechsreiter im Chat: kein Kasten, kein Gold - nur hellere Schrift und
   ein feiner goldener Strich unter dem offenen (chat.md). Die Leiste steht
   nur da, wenn es ueberhaupt eine Anfrage gibt. */
.fr-reiter { display: flex; gap: 4px; margin: 0 0 10px; border-bottom: 1px solid var(--panel-edge); }
.fr-reit {
  padding: 6px 10px 7px; border: 0; border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  background: none; color: var(--ink-mute); cursor: pointer;
  font: 600 12.5px var(--font);
}
.fr-reit:hover { color: var(--ink-dim); }
.fr-reit.ist-an { color: var(--ink); border-bottom-color: var(--gold); }
/* Die Zahl am Reiter: still, solange es die eigenen Anfragen sind, und
   golden, sobald jemand etwas von MIR will. */
.fr-reit i {
  display: inline-grid; place-items: center; min-width: 16px; height: 16px; padding: 0 4px;
  margin-left: 3px; border-radius: 8px;
  background: rgba(255, 255, 255, .08); color: var(--ink-mute);
  font: 700 10.5px var(--font); font-style: normal; vertical-align: 1px;
}
.fr-reit i.ist-neu { background: var(--gold); color: #1a1409; }

/* Ueberschrift ueber einem Abschnitt - nur, wenn es etwas zu trennen gibt. */
.fr-blk {
  margin: 12px 0 4px; font: 600 10.5px var(--font);
  letter-spacing: .09em; text-transform: uppercase; color: var(--ink-mute);
}
.fr-blk:first-of-type { margin-top: 0; }
.fr-meldung {
  margin: 0 0 10px; padding: 7px 10px;
  border: 1px solid rgba(201, 162, 39, .35); border-radius: 7px;
  background: rgba(201, 162, 39, .09);
  font: 500 12px var(--font); color: var(--ink-dim);
}

/* Offene Anfragen am Knopf in der Kopfzeile: eigene Marke, golden. Die
   Freundeszahl bleibt daneben stehen - zwei Fragen, zwei Zeichen. */
.lb-fr-anf {
  display: inline-grid; place-items: center; min-width: 17px; height: 17px; padding: 0 4px;
  border-radius: 9px; background: var(--gold); color: #1a1409;
  font: 700 11px var(--font);
}
.lb-fr-anf[hidden] { display: none; }

@media (max-width: 480px) {
  /* Die drei Zeichenknoepfe bleiben nebeneinander - sie sind schmal genug.
     Nur die beschrifteten Knoepfe (Annehmen, Ablehnen) stapeln. */
  /* Auf dem Telefon faellt der Strich weg - dort ist die Zeile ohnehin eng,
     und ohne Schaukasten gibt es nichts zu trennen. */
  .fr-tat { flex-wrap: wrap; justify-content: flex-end; margin-left: 0; padding-right: 0; }
  /* Ohne Mauszeiger gibt es kein Ueberfahren - der Dreipunkt steht hier
     immer sichtbar da, sonst waere er nicht zu finden. */
  .fr-mehr { opacity: 1; }
  /* Auf dem Telefon hat die Zeile keinen Platz fuer den Schaukasten. */
  .pf-kasten-fremd { display: none; }
}

/* Goldstreifen oeffnen den Quartiermeister (Bastian, 2026-10-03) - ohne
   Rahmen, wie bisher; nur der Zeiger und ein Aufhellen verraten den Link. */
a.lb-gold { text-decoration: none; cursor: pointer; border-radius: 6px; padding: 2px 4px; margin: -2px -4px; }
a.lb-gold:hover b, a.lb-gold:focus-visible b { color: #fff3c4; }
a.lb-gold:focus-visible { outline: 1px solid var(--gold); outline-offset: 2px; }

/* Feldsack direkt rechts neben den Goldstreifen, im Stil des Freunde-Knopfs.
   Erscheint nur, wenn etwas drin liegt. Euro-Farbe: kuehles Stahlgrau. */
.lb-fs {
  display: inline-flex; align-items: center; gap: 7px;
  height: 34px; padding: 0 11px;
  border: 1px solid #3a444d; border-radius: 9px;
  background: rgba(0, 0, 0, .28);
  color: #c9d3db; cursor: pointer;
  font: 700 13px var(--font); white-space: nowrap;
  transition: color .13s, border-color .13s;
}
.lb-fs[hidden] { display: none; }
/* Schmale Kopfzeile (2026-10-28): was nicht mehr passt, faellt weg -
   gemessen von assets/kopf.js, nicht an festen Breiten. Die Breitenregel
   fuer den Feldsack im Gefecht (bis heute: erst ab 1600 px) ist damit
   ersetzt; sie war gewaehlt, nicht gemessen, und lag je nach Lage in der
   Mitte zu frueh oder zu spaet. Reihenfolge und Begruendung stehen in
   kopf.js. Alles hier Ausgeblendete steht im Burgermenue. */
.topbar.kopf-weg-fs #lb-fs,
.topbar.kopf-weg-rk #lb-rk,
.topbar.kopf-weg-fr #lb-fr,
.topbar.kopf-weg-gold #lb-gold { display: none; }
.topbar.kopf-weg-wort .brand-text { display: none; }
.lb-fs svg { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.lb-fs:hover, .lb-fs:focus-visible { color: #fff; border-color: #9fb1bf; outline: none; }

/* Burgermenue: Quartiermeister mit EINEM waagerechten Goldstreifen statt
   Tasche (Bastian, 2026-10-04: erst "ein Goldstreifen als Icon und keine
   Tasche", dann "nur ein Goldstreifen, der horizontal liegt"). Feld so breit
   wie die anderen Zeichen, damit der Text buendig bleibt. Die Klassen
   .gm-gold-h/.gm-gold-v (zwei gekippte Riegel) braucht weiter das
   Hauptmenue-Zeichen in lobby.css - der Knopf ist dort gerade ausgebaut. */
.gm-menu .gm-ico.gm-ico-gold { display: flex; align-items: center; justify-content: center; width: 22px; height: 18px; margin: 0 -2px; }
.gm-ico-gold img { display: block; width: 18px; height: 8px; }

/* Burgermenue, Umbau 2026-10-28: was in der Kopfzeile wegfallen kann
   (assets/kopf.js), steht hier mit seiner Zahl - rechts am Eintrag, wie
   die Taste an "Einstellungen". */
.gm-menu .gm-wert {
  margin-left: auto; padding-left: 14px;
  display: inline-flex; align-items: center; gap: 7px;
  color: #e8dcb0; font: 700 12.5px var(--font);
}
.gm-menu .gm-wert:empty { display: none; }
.gm-menu .gm-wert [hidden] { display: none; }
.gm-menu .gm-ico-bild, .gm-menu .gm-ico-fr, .gm-menu .gm-ico-sack {
  display: flex; align-items: center; justify-content: center;
}
.gm-menu .gm-ico.gm-ico-fr { width: 22px; margin: 0 -2px; }
.gm-menu .gm-ico-bild img { display: block; width: 15px; height: 18px; }
.gm-menu .gm-ico-fr svg { display: block; width: 20px; height: 18px; fill: currentColor; }
.gm-menu .gm-ico-sack svg {
  display: block; width: 18px; height: 18px;
  fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}

/* Text "ueber mich" (2026-10-18) - in der Freundesliste und im Steckbrief
   im Chat. Hoechstens zwei Zeilen; der ganze Text steht in der Hinweistafel. */
.fr-ueber {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow: hidden; margin-top: 4px;
  font: italic 400 12.5px/1.4 var(--font); color: var(--ink-dim);
  white-space: normal; overflow-wrap: anywhere;
}