/* Cold Start - Profil in der Kopfzeile und Auswahlfenster (assets/profile.js)
 *
 * Das Medaillon haengt rechts aus der Kopfzeile heraus - Gegenstueck zum
 * Emblem links (Bastian, 2026-09-25).
 */

/* Absolut an der Kopfzeile, nicht im Fluss von .topright: dort steht sonst
   nichts mehr, die Spalte waere null hoch und das Medaillon rutschte nach
   unten (Bastian, 2026-09-25: "kann noch ein Stueck hoeher stehen"). */
.pf-slot {
  position: absolute;
  right: 12px;
  top: 3px;
  width: 104px;                    /* war 80 px - zu klein (Bastian, 2026-09-27) */
  height: 104px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  z-index: 1;
}
.pf-slot .pf-medal {
  display: block;
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .65));
  transition: transform .15s ease;
}
.pf-slot:hover .pf-medal,
.pf-slot:focus-visible .pf-medal { transform: scale(1.06); }
.pf-slot:focus-visible { outline: none; }
.pf-slot:focus-visible .pf-medal { filter: drop-shadow(0 0 5px var(--gold)); }

/* ---------------------------------------------------------- Auswahlfenster */

/* 920 statt 760 px (2026-10-02): Mit 92 Erfolgen in Tafelzeilen - Bild,
   Beschreibung und Wert nebeneinander wie im Vorbild - blieben bei 760 px
   gemessen nur 296 px fuer die Zeile uebrig, und jeder Satz brach dreimal um.
   Die anderen Reiter gewinnen mit: die Gesichterauswahl und die Statistik
   bekommen Luft, ohne dass sich etwas verschiebt. */
/* Und ein Riegel dagegen, dass das Fenster je wieder aus dem Bild laeuft:
   Es wird hoechstens so hoch wie der Schirm, und was nicht hineinpasst, wird
   gerollt. Das gilt fuer JEDEN Reiter und fuer jede kuenftige Zeile darin. */
/* 1120 statt 920 px (Bastian, 2026-10-03: "ich wuerde das Fenster etwas
   breiter machen und den Erfolgen mehr Breite geben"). Die Person links
   bleibt bei 245 px und die Kategorieleiste bei 212 - die 200 px gehen
   vollstaendig an die Ketten: 377 -> 577 px. Damit passt "Erster Einsatz -
   10 Gefechte bestritten." in EINE Zeile; vorher brach jeder zweite Satz um,
   und umgebrochene Saetze machen die Tafeln verschieden hoch.
   `min(..., 94vw)` bleibt: auf einem 1024er Schirm sind es 963 px. */
.pf-card {
  max-width: 1120px; width: min(1120px, 94vw); text-align: left; padding: 24px 28px;
  /* EINE Hoehe fuer alle vier Reiter (Bastian, 2026-10-04: "Das ist die
     Hoehe die das ganze Fenster maximal haben soll, dass soll alle Tabs
     betreffen, die Fenster Hoehe soll sich nicht veraendern wenn man den
     Tab wechselt").

     Der Weg dahin ging ueber zwei Irrtuemer. Zuerst 840 px fest - zu hoch,
     weil 840 die Hoehe des laengsten Reiters war und jeder kurze Reiter
     einen Streifen Leere unten trug. Dann 840 px als Obergrenze - da
     sprang das Fenster beim Reiterwechsel.

     640 px ist die Hoehe, die der Reiter "Erfolge" in der Zusammenfassung
     von sich aus einnimmt (gemessen 636 px); genau dieses Fenster hat er
     als Mass geschickt. Leerer Streifen entsteht dadurch nirgends: gemessen
     wollen Profil 1284, Aussehen 917, Statistik 702 und jeder geoeffnete
     Korb 700 bis 2600 px - alle vier Reiter sind also hoeher als 640 und
     rollen in sich. Wer hier etwas kuerzt, prueft das nach; faellt ein
     Reiter unter 640, traegt er wieder Leere.

     `min(..., 90vh)`: auf einem niedrigen Schirm gewinnt die Fensterhoehe.
     Am Telefon traegt die Seite selbst, siehe die Umstellung bei 760 px. */
  height: min(640px, 90vh); display: flex; flex-direction: column;
  position: relative;
}
/* Kreuz oben rechts statt "Schliessen" unten (Bastian, 2026-10-04) -
   dieselbe Form wie in der Freundesliste und den Einstellungen. */
.pf-x {
  position: absolute; top: 14px; right: 14px; z-index: 2;
  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;
}
.pf-x:hover, .pf-x:focus-visible { color: var(--ink); border-color: var(--gold); outline: none; }
.pf-card > h2, .pf-card > .pf-reiter, .pf-card > .pf-err, .pf-card > .pf-actions { flex: none; }
.pf-card > .pf-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.pf-card h2 { text-align: left; }
.pf-card h3 {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--ink-dim);
}
.pf-body { display: flex; gap: 28px; align-items: flex-start; }

/* 245 px: so breit ist die Reihe des Schaukastens (4 x 56 + 3 x 7). Vorher
   stand hier 190 - die Breite des Medaillons -, und die Reihe hat die Spalte
   darueber hinaus aufgezogen. Eine Spalte, deren Breite aus einem Ueberlauf
   entsteht, ist nicht vorhersagbar; wer die Platzzahl aendert, rechnet hier
   mit (Bastian, 2026-10-03: "Das Profilbild steht nicht mittig"). */
.pf-preview { flex: 0 0 245px; text-align: center; }
/* Mittig, nicht linksbuendig: text-align hilft dem Medaillon nicht, es ist
   ein Block mit fester Breite. Solange die Spalte so breit war wie es, fiel
   das nicht auf. */
.pf-big { width: 190px; height: 190px; margin: 0 auto 18px; }
.pf-big .pf-medal { width: 100%; height: 100%; }
.pf-name { font-weight: 700; font-size: 16px; margin-bottom: 10px; }
.pf-xp { height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.pf-xp span { display: block; height: 100%; background: var(--gold); }
.pf-xp-t { margin-top: 6px; font-size: 11.5px; color: var(--ink-mute); }

.pf-pick { flex: 1; min-width: 0; }
/* Nicht sechs Spalten, sondern so viele, wie bei rund 84 px hineinpassen.
   Mit festen sechs Spalten wuchsen die Bilder beim Verbreitern des Fensters
   von 760 auf 920 px um ein Viertel mit (aspect-ratio: 1) - drei Reihen
   wurden rund 100 px hoeher, und der Reiter "Aussehen" lief unten aus dem
   Bild (Bastian, 2026-10-02: "die Hoehe im Profil Fenster ist kaputt").
   So bleibt die Kachel gleich gross, und die zusaetzliche Breite wird zu
   einer weiteren Spalte. */
/* Eine Reihe je Gruppe, aber OHNE Ueberschrift (Bastian, 2026-10-04: "Ich
   moechte keine Ueberschriften Westen, Russland. Das sind am Ende Klischees,
   soll jeder selbst entscheiden wie er sich sieht. Aber die Sortierung
   behalten wir so."). Die Gruppen bleiben also als Ordnung bestehen, sie
   werden nur nicht mehr benannt. Was sie trennt, ist allein der groessere
   Abstand: 20 px zwischen den Reihen gegen 8 px darin.

   `auto-fill` statt fester sechs Spalten - damit laeuft eine Gruppe, die
   waechst, von selbst in eine ZWEITE ZEILE (seine Frage: "zweite Zeile oder
   kann man rechts links scrollen?"). Waagerechtes Rollen waere hier falsch:
   es gibt keinen Hinweis, dass rechts noch etwas liegt, und ein Bild, das
   man nicht sieht, waehlt niemand. Heute passen sieben Spalten in die
   Spalte von 789 px; sechs Bilder stehen also wie bisher.

   Links ausgerichtet - die Reihe soll nicht auf 790 px auseinandergezogen
   werden. */
/* Ein Rhythmus fuer den ganzen Reiter (Bastian, 2026-10-04: "Hier passen
   die Abstaende nicht"). Drei Stufen, jede deutlich groesser als die
   darunter, sonst liest sich keine Gruppierung:

     8 px  Ueberschrift -> ihr Block   (.pf-card h3)
    14 px  Reihe -> Reihe INNERHALB einer Gruppe
    24 px  Block -> naechste Ueberschrift

   Vorher stand hier 20 px zwischen den Bildreihen und 4 px vor der
   naechsten Ueberschrift - also der Abstand INNEN groesser als der
   Abstand ZWISCHEN den Abschnitten. Und `.pf-frames` hatte gar keinen,
   weil der Block bis zum 2026-10-04 der letzte war. */
.pf-faces {
  display: grid; grid-template-columns: repeat(auto-fill, 92px);
  gap: 8px; margin-bottom: 14px;
}
/* Den Abschnittsabstand von 24 px traegt seit dem Einklappen (Bastian,
   2026-10-04) der Abschnitt selbst - jeder Block steckt jetzt in einem
   <section class="pf-abs">, die Ueberschrift ist kein Geschwister der
   Bildreihen mehr.

   Der letzte Block eines Abschnitts gibt seinen unteren Abstand ab, damit
   die 24 nicht doppelt zaehlen. Nicht noetig waere es nicht: senkrechte
   Aussenabstaende FALLEN ZUSAMMEN, 14 und 24 ergeben 24. Aber darauf zu
   bauen macht die Rechnung unlesbar - an genau dieser Stelle ist der erste
   Anlauf gescheitert (14 unten plus 10 oben ergaben 14, nicht 24). */
.pf-abs + .pf-abs { margin-top: 24px; }
.pf-abs > :last-child { margin-bottom: 0; }
/* Die Ueberschrift ist ein Knopf (Bastian, 2026-10-04: "Dafuer bekommt das
   noch einen kleinen Pfeil"). Pfeilrichtung wie im Adminbereich: offen zeigt
   er nach rechts, zu nach unten (admin.css, Bastian 2026-10-01). */
.pf-klapp { margin: 0 0 8px; }
.pf-klapp button {
  display: block; width: 100%; padding: 0; text-align: left;
  border: 0; background: none; color: inherit; font: inherit; cursor: pointer;
  user-select: none;
  /* `font: inherit` reicht NICHT: Browser setzen auf Formularelementen
     `text-transform: none` und `letter-spacing: normal`, und die Kurzschrift
     `font` fasst beides nicht an. Seit die Ueberschrift ein Knopf ist,
     standen "Bild", "Rahmen", "Farbe" und "Symbol" deshalb nicht mehr in
     Versalien - dieselbe Schrift, aber ein anderes Bild. */
  text-transform: inherit; letter-spacing: inherit;
}
.pf-klapp button::before { content: "\25B8\A0"; color: var(--gold); }
.pf-abs.is-zu .pf-klapp button::before { content: "\25BE\A0"; }
.pf-abs.is-zu .pf-klapp { margin-bottom: 0; }
.pf-klapp button:hover { color: var(--gold); }
.pf-klapp button:focus-visible { outline: 1px solid var(--gold); outline-offset: 3px; }
.pf-face {
  aspect-ratio: 1;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 50%;
  background: none;
  cursor: pointer;
  overflow: hidden;
}
.pf-face svg { display: block; width: 100%; height: 100%; }
.pf-face:hover { border-color: var(--panel-edge); }
.pf-face.is-on { border-color: var(--gold); box-shadow: 0 0 0 2px rgba(201, 162, 39, .35); }

/* Auch hier eine Hoechstbreite statt 1fr: ein 30-px-Zeichen in einer
   100 px breiten Kachel sieht verloren aus. */
.pf-symbols { display: grid; grid-template-columns: repeat(8, minmax(0, 72px)); gap: 8px; margin-bottom: 4px; }
.pf-sym {
  aspect-ratio: 1;
  padding: 5px;
  border: 1px solid var(--panel-edge);
  border-radius: var(--radius);
  background: rgba(0, 0, 0, .2);
  cursor: pointer;
}
.pf-sym svg { display: block; width: 100%; height: 100%; }
.pf-sym:hover { border-color: var(--ink-mute); }
.pf-sym.is-on { border-color: var(--gold); background: rgba(201, 162, 39, .08); }

/* Eigene Farbe (Bastian, 2026-09-29). Der Gegner behaelt sein Rot, deshalb
   steht hier keins zur Wahl. Aufbau wie die Rahmenreihe darunter. */
/* 14 px wie zwischen den Bildreihen: innerhalb des Abschnitts stehen jetzt
   vier Reihen untereinander (Grundfarben und drei Pakete). Die 24 zwischen
   den Abschnitten traegt .pf-abs. */
.pf-colors { display: grid; grid-template-columns: repeat(5, minmax(0, 132px)); gap: 8px; margin-bottom: 14px; }
.pf-color {
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  padding: 10px 4px 8px;
  border: 1px solid var(--panel-edge);
  border-radius: var(--radius);
  background: rgba(0, 0, 0, .2);
  color: var(--ink); font-size: 12.5px;
  cursor: pointer;
}
/* `:not(.pf-mark)`, weil die Schloss-Marke ebenfalls ein <i> ist: ohne das
   bekam sie hier 30 px, einen Kreis und den Vorgabeton - und verdeckte sich
   selbst mit einem dunklen Punkt. */
.pf-color i:not(.pf-mark) {
  width: 30px; height: 30px; border-radius: 50%;
  /* Die Farbe setzt profile.js in open() ueber die CSSOM (--farbe). Bis zum
     2026-10-04 stand hier je Farbe eine Regel - bei siebzehn Farben waere
     das dieselbe Zahl an zwei Orten, einmal hier und einmal in COLORS. */
  background: var(--farbe, var(--panel-edge));
  box-shadow: inset 0 0 0 3px rgba(0, 0, 0, .35), 0 1px 3px rgba(0, 0, 0, .5);
}
.pf-color:hover { border-color: var(--ink-mute); }
.pf-color.is-on { border-color: var(--gold); background: rgba(201, 162, 39, .08); }

/* Die Chipreihe (Bastian, 2026-10-04: "andere Moeglichkeit waere das man
   zwischen den Fraktionen umschaltet"). Masse und Farben aus
   quartiermeister.css (.qm-chip) uebernommen - dort filtert dasselbe Muster
   seit je die Karten nach Seite. Eine eigene Klasse, weil das Stylesheet des
   Ladens auf den Spielseiten nicht geladen wird.

   Die Zahl im Chip steht fuer die Groesse der Gruppe dahinter. */
.pf-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 12px; }
.pf-chip {
  height: 28px; padding: 0 11px; border-radius: 14px;
  border: 1px solid #3a3628; background: transparent;
  color: var(--ink-dim); font: 600 12.5px var(--font); cursor: pointer;
}
.pf-chip span { color: var(--ink-mute); font-weight: 400; }
.pf-chip:hover { color: var(--ink); border-color: var(--ink-mute); }
.pf-chip.ist-an { background: #2a2213; border-color: #8c6d0f; color: #e2bf45; }
.pf-chip.ist-an span { color: #c9a227; }
.pf-chip:focus-visible { outline: 1px solid var(--gold); outline-offset: 2px; }

/* Gesperrt wie ueberall sonst: gedaempft, mit Schloss, der Klick fuehrt zum
   Quartiermeister. Das Schloss steht oben rechts - unten rechts stuende es
   im Namen. */
.pf-color.is-laden {
  position: relative; display: flex; text-decoration: none; cursor: pointer;
}
.pf-color.is-laden i:not(.pf-mark) { opacity: .45; }
.pf-color.is-laden span { color: var(--ink-mute); }
.pf-color.is-laden:hover { border-color: #9fb1bf; }
.pf-color.is-laden:hover i:not(.pf-mark) { opacity: .8; }
.pf-color.is-laden:hover span { color: #c9d3db; }
.pf-color .pf-mark { right: 4px; top: 4px; bottom: auto; width: 16px; height: 16px; }

.pf-frames { display: grid; grid-template-columns: repeat(5, minmax(0, 132px)); gap: 8px; margin-bottom: 24px; }
/* Fuenf je Reihe (Bastian, 2026-10-07: "bitte fuenf Profile in eine Reihe").
   Die fuenfzehn Rahmen stehen damit in drei vollen Reihen statt in vier
   angebrochenen. Fuenf Spalten messen 5 x 132 + 4 x 8 = 692 px und bleiben
   in der Spalte von 789 px. */
.pf-frame {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 10px 4px 8px;
  border: 1px solid var(--panel-edge);
  border-radius: var(--radius);
  background: rgba(0, 0, 0, .2);
  color: var(--ink);
  font: inherit;
  font-size: 12.5px;
  cursor: pointer;
}
.pf-frame .pf-medal { width: 64px; height: 64px; }
.pf-frame span { display: flex; flex-direction: column; align-items: center; line-height: 1.25; }
.pf-frame small { font-size: 10.5px; color: var(--ink-mute); }
/* :not(.is-locked) statt :not(:disabled) - gesperrte Rahmen tragen seit dem
   2026-10-07 aria-disabled, damit die Hinweistafel an ihnen erscheint. */
.pf-frame:hover:not(.is-locked) { border-color: var(--ink-mute); }
.pf-frame.is-on { border-color: var(--gold); background: rgba(201, 162, 39, .08); }
.pf-frame.is-locked { cursor: not-allowed; }
.pf-frame.is-locked .pf-medal { filter: grayscale(1) brightness(.55); }

.pf-err { color: var(--foe); margin: 14px 0 0; font-size: 13px; }
.pf-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; }

@media (max-width: 700px) {
  .pf-body { flex-direction: column; align-items: center; }
  /* Die rechte Spalte volle Breite, die Reiterleiste wischt seitlich
     (29.10.2026): mit align-items: center nahm die Spalte die Breite der
     fuenf Reiter in einer Zeile an - 469 px auf einem 420er-Telefon, und
     jeder Reiter lief rechts aus dem Dialog. */
  .pf-pick { align-self: stretch; width: 100%; }
  .pf-reiter { overflow-x: auto; scrollbar-width: none; }
  .pf-reiter::-webkit-scrollbar { display: none; }
  .pf-r { flex: none; }
  /* Am Telefon passen sechs nicht nebeneinander - dort zerfaellt eine Gruppe
     in zwei Reihen, und die Ueberschrift darueber haelt sie trotzdem
     zusammen. */
  .pf-faces { grid-template-columns: repeat(3, 1fr); }
  .pf-frames { grid-template-columns: repeat(3, 1fr); }
  .pf-symbols { grid-template-columns: repeat(4, 1fr); }
  .pf-colors { grid-template-columns: repeat(3, 1fr); }
}

/* ------------------------------------------------ Statistik (2026-10-04)

   Drei Teile: Bericht, Kacheln, Kraeftevergleich. Siehe statistikHtml() in
   assets/profile.js, dort steht auch, warum die Fraktionen Stahlblau und
   Messing tragen und nicht Gruen und Rot vom Brett. */
/* Die Klassen stehen im Quelltext nur zusammengesetzt (`f-${k}` in
   profile.js) - eine Suche nach "f-nato" findet sie nicht. Am 29.10.2026
   fielen sie deshalb beim Aufraeumen weg, und Fahne gegen Fahne stand ohne
   Balken da. Nicht wieder streichen. */
.f-nato { background: #4580b4; }
.f-rus  { background: #b08c1f; }
.f-vba  { background: #8a6fae; }

/* Der Satz oben. Goldener Strich links statt Kasten rundum: er ist eine
   Auskunft, keine Warnung. */
.pf-bericht {
  margin: 0 0 15px; padding: 11px 13px;
  border-left: 3px solid var(--gold); border-radius: 0 6px 6px 0;
  background: rgba(201, 162, 39, .06);
  font: 400 13px/1.5 var(--font); color: var(--ink-dim);
}
.pf-bericht b { color: var(--ink); font-weight: 600; }

.pf-kach { display: grid; grid-template-columns: repeat(3, 1fr); gap: 11px; }
.pf-k {
  border: 1px solid var(--panel-edge); border-radius: 7px; padding: 11px 12px 12px;
  background: linear-gradient(rgba(255, 255, 255, .02), rgba(0, 0, 0, .12));
}
.pf-k.ist-breit { grid-column: span 2; }
/* Erste Reihe: Siegquote so breit wie ihre Ringe, der Rest fuer das
   Kraefteverhaeltnis (2026-10-23). */
.pf-kach.pf-kach-oben { grid-template-columns: auto 1fr; margin-bottom: 11px; }
/* Die vier Zahlen aus dem Gefecht: dieselbe Kachel, nur leiser (Bastian,
   2026-10-04: "im Gefecht muessen wir noch optisch anpassen"). Die Zahl
   bleibt die Hauptsache, faellt aber nicht so laut aus wie die Siegquote
   darueber - sonst konkurrieren acht gleich grosse Zahlen miteinander. */
.pf-kach.ist-vier { grid-template-columns: repeat(4, 1fr); margin-top: 11px; }
.pf-k.ist-klein .pf-k-gross { font-size: 22px; color: var(--ink); }
.pf-k.ist-klein h5 { margin-bottom: 6px; }
.pf-k h5 {
  margin: 0 0 8px; font: 600 10.5px var(--font); letter-spacing: .07em;
  text-transform: uppercase; color: var(--ink-mute);
}
.pf-k-gross { font: 800 27px/1 var(--font); color: var(--gold); font-variant-numeric: tabular-nums; }
.pf-k-dazu { margin-top: 3px; font-size: 11.5px; line-height: 1.45; color: var(--ink-mute); }

/* Die Waage: zwei Anteile nebeneinander, 2 px Fuge dazwischen, damit die
   Grenze auch dann zu sehen ist, wenn die Farben nebeneinander liegen. */
.pf-waage { display: flex; height: 13px; margin-top: 9px; border-radius: 4px; overflow: hidden; gap: 2px; }
.pf-waage span { display: block; flex-basis: 0; }
.pf-waage .ist-ok { background: var(--ok); }
.pf-waage .ist-foe { background: var(--foe); }

.pf-punkte { display: flex; gap: 4px; margin-top: 7px; flex-wrap: wrap; }
.pf-punkte i { width: 11px; height: 11px; border-radius: 50%; background: rgba(255, 255, 255, .1); }
.pf-punkte i.ist-da { background: var(--gold); }

.pf-stufe { display: flex; align-items: center; gap: 9px; margin-top: 7px; font-size: 11.5px; color: var(--ink-dim); }
.pf-stufe em { font-style: normal; flex: none; width: 104px; }
.pf-stufe .pf-erf-bahn { flex: 1; margin: 0; }
.pf-stufe b { flex: none; min-width: 26px; text-align: right; color: var(--ink);
              font-weight: 600; font-variant-numeric: tabular-nums; }

.pf-ring { display: block; }
/* Drei Ringe nebeneinander in der Kachel Siegquote (2026-10-23) */
.pf-ringe { display: flex; flex-wrap: wrap; gap: 6px 22px; }
.pf-ringe-teil { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.pf-ringe-teil span { font-size: 11.5px; color: var(--ink-dim); white-space: nowrap; }
.pf-ring-bahn { fill: none; stroke: rgba(255, 255, 255, .09); stroke-width: 7; }
.pf-ring-voll { fill: none; stroke: var(--gold); stroke-width: 7; stroke-linecap: round; }
.pf-ring-gross { fill: var(--ink); font: 700 17px var(--font); }
.pf-ring-klein { fill: var(--ink-mute); font: 500 8.5px var(--font); letter-spacing: .5px; }

/* Fahne gegen Fahne und Deine Truppe (2026-10-23): je Fahne eine Kachel,
   nebeneinander, solange Platz ist. */
.pf-ff { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 11px; }
.pf-ff .pf-k h5 { display: flex; align-items: center; gap: 7px; }
.pf-ff .pf-k h5 i { flex: none; width: 10px; height: 10px; border-radius: 2px; }
.pf-ff .pf-k h5 small {
  margin-left: auto; font: 500 11px var(--font); letter-spacing: 0;
  text-transform: none; color: var(--ink-mute);
}
.pf-stat .pf-tr-fuss { font: 400 11.5px/1.45 var(--font); color: var(--ink-mute); }

.pf-tr-z {
  display: grid; grid-template-columns: 38px minmax(0, 1fr) 58px 58px 64px;
  align-items: center; column-gap: 9px; margin-top: 8px;
}
.pf-tr-z.ist-kopf { margin-top: 0; }
.pf-tr-z em {
  font: 600 9.5px var(--font); font-style: normal; letter-spacing: .03em;
  text-transform: uppercase; color: var(--ink-mute); text-align: right;
}
.pf-tr-z img, .pf-tr-leer {
  width: 38px; height: 38px; border-radius: 5px; object-fit: cover;
  background: rgba(255, 255, 255, .05); border: 1px solid var(--panel-edge);
}
.pf-tr-name { min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.pf-tr-name span:first-child {
  font-size: 12px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pf-tr-name .pf-erf-bahn { margin: 0; }
.pf-tr-z b {
  font: 600 12px var(--font); color: var(--ink); text-align: right; font-variant-numeric: tabular-nums;
}
.pf-tr-fuss { margin: 8px 0 0; }

/* Legende: bei zwei Reihen immer da, sonst traegt die Farbe allein die
   Zuordnung - und das traegt sie nie. */
.pf-leg { display: flex; gap: 18px; margin: 0 0 11px; font-size: 11.5px; color: var(--ink-dim); }
.pf-leg i { display: inline-block; width: 10px; height: 10px; border-radius: 2px;
            margin-right: 6px; vertical-align: -1px; }
.pf-leg b { color: var(--ink); font-weight: 600; }

/* Gespiegelt: links die eine Fahne, rechts die andere, der Name in der
   Mitte. EINE Skala - nur Anzahlen, keine Prozente (siehe profile.js). */
.pf-sp { display: grid; grid-template-columns: 1fr 150px 1fr; align-items: center;
         column-gap: 12px; row-gap: 9px; }
.pf-sp-m { text-align: center; font: 500 12px var(--font); color: var(--ink-dim); }
.pf-sp-l, .pf-sp-r { display: flex; align-items: center; gap: 9px; }
.pf-sp-l b, .pf-sp-r b {
  flex: none; min-width: 34px; font: 600 12px var(--font); color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.pf-sp-l b { text-align: right; }
.pf-sp-bahn { flex: 1; min-width: 0; display: flex; height: 10px; }
.pf-sp-l .pf-sp-bahn { justify-content: flex-end; }
.pf-sp-bahn i { display: block; height: 10px; border-radius: 3px; }

@media (max-width: 760px) {
  .pf-kach, .pf-kach.ist-vier { grid-template-columns: 1fr 1fr; }
  .pf-kach.pf-kach-oben { grid-template-columns: auto 1fr; }
  .pf-k.ist-breit { grid-column: span 2; }
  .pf-sp { grid-template-columns: 1fr 108px 1fr; }
}
@media (max-width: 560px) {
  .pf-kach.pf-kach-oben { grid-template-columns: 1fr; }
}

/* ------------------------------------------------- Reiter im Profil

   Aussehen, Statistik, Erfolge (Bastian, 2026-09-29). Die linke Spalte mit
   Medaillon, Name und Erfahrungsbalken bleibt immer stehen - sie ist die
   Person; gewechselt wird nur, was rechts daneben liegt. */
.pf-reiter {
  display: flex; gap: 2px;
  margin: -4px 0 16px;
  border-bottom: 1px solid var(--panel-edge);
}
.pf-r {
  appearance: none; background: none; border: 0; cursor: pointer;
  padding: 7px 14px 9px;
  font: 600 13px var(--font); color: var(--ink-mute);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.pf-r:hover { color: var(--ink-dim); }
.pf-r.is-on { color: var(--gold); border-bottom-color: rgba(201, 162, 39, .6); }
.pf-r:focus-visible { outline: 1px solid var(--gold); outline-offset: -2px; }

.pf-leer { color: var(--ink-mute); font-size: 13px; line-height: 1.6; }

/* ------------------------------------------------------------ Statistik */

/* KEIN eigener Roller mehr (2026-10-04). Die 430 px stammen aus der Zeit,
   als die Statistik eine kurze Liste war; mit Bericht, Kacheln und
   Kraeftevergleich schnitt die Regel den Inhalt ab und machte einen zweiten
   Rollbalken im Fenster auf. Gerollt wird jetzt dort, wo auch die anderen
   Reiter rollen: im Koerper der Tafel. */
.pf-stat { padding-right: 6px; }
.pf-stat h4 {
  margin: 16px 0 6px; font: 600 11.5px var(--font);
  letter-spacing: .08em; text-transform: uppercase; color: var(--gold);
}
.pf-stat h4:first-child { margin-top: 0; }
.pf-z {
  display: grid; grid-template-columns: 1fr auto auto;
  align-items: baseline; gap: 10px;
  padding: 4px 0; font-size: 13px; color: var(--ink-dim);
  border-bottom: 1px solid rgba(255, 255, 255, .04);
}
.pf-z b { color: var(--ink); font-variant-numeric: tabular-nums; font-weight: 600; }
.pf-z small { font-size: 11.5px; color: var(--ink-mute); min-width: 0; }

/* -------------------------------------------------------------- Erfolge */

/* FESTE Hoehe, nicht max-height (Bastian, 2026-10-02: "Unser Fenster darf
   die Hoehe nicht aendern, wenn man eine Kategorie aendert"). Mit max-height
   bestimmte der Inhalt die Hoehe, solange er darunter blieb - und "Besondere
   Taten" mit drei Ketten liess das Fenster zusammenfallen, "Gegen die KI"
   mit sieben zog es wieder auf. Das Vorbild haelt den Rahmen still und rollt
   nur die Liste; genau das macht es hier auch. */
/* Links die Kategorien, rechts die Ketten (Bastian, 2026-10-02, Vorbild
   Starcraft 2). Bei 92 Erfolgen in vier Koerben traegt sich die Leiste: man
   sieht immer nur einen Korb, und wo man ist. */
/* Fuellt die feste Hoehe des Fensters aus, statt 430 px zu beanspruchen -
   sonst stuende unter der Liste ein Streifen Leere (Bastian, 2026-10-04). */
.pf-erfolge { display: flex; gap: 0; align-items: stretch; height: 100%; min-height: 430px; }
.pf-kat-leiste {
  /* 164 px: "Besondere Taten" bricht darunter um, und umgebrochene Eintraege
     sind verschieden hoch - die Leiste soll eine Spalte gleicher Knoepfe
     sein, so wie im Vorbild. */
  /* Ohne Rahmen (Bastian, 2026-10-03: "nimm den Rahmen wieder weg und mach
     die einzelnen Schaltflaechen etwas groesser"). Die Tafel um die Liste
     war ein Kasten im Kasten - das Fenster hat schon einen Rand. Getrennt
     wird die Spalte wie vorher durch eine Linie, Gewicht bekommen die
     Eintraege selbst. */
  /* 215 statt 190 px: vor dem Namen steht sein Zeichen (18 px plus 9 px
     Abstand). Ohne die 25 px schnitte "Eigene Spiele" ab. */
  flex: 0 0 215px;
  box-sizing: border-box;
  border-right: 1px solid var(--panel-edge); padding: 2px 8px 2px 0;
  overflow-y: auto;                      /* kommen mehr Koerbe dazu, rollt die Leiste fuer sich */
}
/* Eine Zeile je Korb, die Zahl rechts (Bastian, 2026-10-03: "die
   Kategorieleiste ist doch recht lang und gross geworden"). Mit acht
   Koerben sparen die beiden Massnahmen zusammen rund 140 px Hoehe - vorher
   stand der Name oben und die Zahl darunter. */
.pf-kat {
  display: flex; align-items: baseline; justify-content: space-between; gap: 9px;
  flex-wrap: nowrap; position: relative;
  width: 100%; text-align: left; padding: 9px 11px 12px;
  border: 0; border-left: 3px solid transparent; border-radius: 5px; background: none;
  /* 13 px / 500, nicht 13,5 / 600 (Bastian, 2026-10-03: "im Verhaeltnis zu
     den anderen Ueberschriften zu gross/dick"). Gemessen stand die Leiste
     auf derselben Stufe wie die Ueberschriften, die sie begleitet: Reiter
     13/600, Kopf des Korbes 13,5/600, Kettentitel 14/600. Ein Menue gehoert
     darunter. Gewicht bekommt nur der offene Korb. */
  color: var(--ink-dim); font: 500 13px var(--font); cursor: pointer;
}
.pf-kat:hover { color: var(--ink); background: rgba(255, 255, 255, .035); }
.pf-kat.is-on {
  color: var(--ink); font-weight: 600; border-left-color: var(--gold);
  background: linear-gradient(90deg, rgba(201, 162, 39, .10), transparent);
}
.pf-kat > span { flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

/* Zeichen und Fuellstand (Bastian, 2026-10-03: "koennen wir mit Zeichen und
   mit Fortschritt kombinieren?").

   Das Zeichen steht vor dem Namen und ist gedaempft, bis der Korb offen ist
   - acht gleich helle Zeichen untereinander waeren ein Muster, kein
   Wegweiser.

   Die Bahn beginnt ERST hinter dem Zeichen (35 px = 11 Polster + 15 Zeichen
   + 9 Abstand). Laeuft sie darunter durch, verliert die Spalte der Zeichen
   ihre senkrechte Ruhe - probiert und verworfen. Ist ein Korb leer, bleibt
   die Bahn leer: die Zahl daneben sagt es schon, und ein Stummel bei 0
   sieht aus wie Dreck. */
/* Jetzt ein BILD, kein gezeichneter Umriss mehr (Bastian, 2026-10-04).
   18 statt 15 px - drei Pixel mehr, die Zeile waechst davon nicht, sie ist
   37 px hoch.

   Mittig statt auf der Schriftlinie: auf der Linie schoebe das Zeichen die
   Zeile um 2 px auseinander, bei acht Koerben 16 px fuer nichts.

   Ruhend gedaempft, der offene Korb in voller Farbe. Neun gleich helle
   Bilder untereinander waeren ein Jahrmarkt, und der offene ginge darin
   unter - dieselbe Regel wie vorher bei den Umrissen. */
.pf-kat-z {
  flex: none; align-self: center; width: 18px; height: 18px;
  object-fit: contain; opacity: .66; filter: saturate(.85);
}
.pf-kat:hover .pf-kat-z { opacity: .85; filter: none; }
.pf-kat.is-on .pf-kat-z { opacity: 1; filter: none; }
.pf-kat-bahn {
  position: absolute; left: 38px; right: 11px; bottom: 5px;
  height: 2px; border-radius: 2px; overflow: hidden;
  /* Sehr leise: acht leere Bahnen untereinander lesen sich sonst als acht
     Unterstriche, also als Trennlinien zwischen den Koerben. */
  background: rgba(255, 255, 255, .065);
}
.pf-kat-bahn i { display: block; height: 2px; border-radius: 2px; background: var(--ink-dim); }
.pf-kat.is-on .pf-kat-bahn i { background: var(--gold); }
.pf-kat small {
  flex: none; margin: 0;
  font: 500 11.5px var(--font); color: var(--ink-mute);
  font-variant-numeric: tabular-nums;
}
.pf-erf-rechts { flex: 1; min-width: 0; display: flex; flex-direction: column; padding-left: 16px; }
.pf-erf-liste { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding-right: 6px; }

/* Kopf des offenen Korbes mit Balken - im Vorbild steht der Fortschritt der
   Gruppe am Inhalt, nicht nur in der Leiste daneben. */
.pf-erf-bar {
  flex: none; display: flex; align-items: center; gap: 12px;
  margin: 0 6px 12px 0; padding-bottom: 9px;
  border-bottom: 1px solid var(--panel-edge);
}
.pf-erf-bar b { flex: 1; min-width: 0; font: 600 13.5px var(--font); color: var(--ink); }
.pf-erf-bar em {
  font-style: normal; font: 600 11.5px var(--font); color: var(--ink-mute);
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------- Reiter "Profil"

   Drei Kaesten nebeneinander: Stufe, Erfolge, Bilanz. Sie tragen, was andere
   ueber einen sehen - darunter die eigenen Angaben, die niemand sonst sieht. */
.pf-hinweis { margin: -4px 0 12px; font: 400 11.5px var(--font); color: var(--ink-mute); }
/* align-items: stretch statt start (2026-10-04): die drei Kaesten waren
   verschieden hoch - der Erfolgskasten traegt sieben Koerbe, der Stufenkasten
   drei Zeilen -, und eine Reihe Karten mit ungleicher Unterkante sieht aus
   wie ein Satzfehler, nicht wie eine Gliederung. */
.pf-steck-liste, .pf-konto { margin: 8px 0 0; padding: 0; list-style: none; }
.pf-steck-liste li, .pf-konto li {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding: 3px 0; font: 500 12px var(--font); color: var(--ink-mute);
}
.pf-steck-liste li + li, .pf-konto li + li { border-top: 1px solid var(--panel-edge); }
.pf-steck-liste span, .pf-konto span {
  color: var(--ink); font-variant-numeric: tabular-nums;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Die Breite gedeckelt (2026-10-04): die Liste ist ein flex mit
   space-between und lief ueber die ganze Dialogbreite - zwischen "Geburtstag"
   und dem Datum lagen 400 px Nichts, und das Auge musste die Zeile suchen.
   440 px sind genug fuer die laengste Beschriftung und das laengste Datum. */
.pf-konto { max-width: 520px; margin-bottom: 14px; }

/* Seit dem 2026-10-05 traegt jede aenderbare Angabe ihren Knopf und klappt
   ihr Formular DARUNTER auf. Das li ist deshalb kein flex mehr - das ist
   jetzt die Zeile darin; sonst stuende das aufgeklappte Formular neben dem
   Wert statt unter ihm. Beide Regeln haben dieselbe Spezifitaet wie die
   gemeinsame Regel mit .pf-steck-liste weiter oben und muessen danach
   stehen. */
.pf-konto > li { display: block; padding: 0; }
.pf-ko-zeile {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 6px 0; font: 500 12.5px var(--font); color: var(--ink-mute);
}
.pf-ko-zeile span { flex: 1 1 auto; text-align: right; }
.pf-ko-knopf.btn { flex: 0 0 auto; padding: 3px 11px; font-size: 11px; }
/* Das aufgeklappte Formular (Bastian, 2026-10-08: "wenn ein Feld
   ausgeklappt ist, dann sieht das Formular etwas wuselig aus").

   Vorher stand es ohne jede Abgrenzung zwischen zwei Listenzeilen: Text,
   Beschriftung, Feld und Knopf lagen im selben Fluss wie "Handy", "Passwort"
   und "Geburtstag" darunter. Man sah nicht, wo es anfaengt, wo es aufhoert
   und zu welcher Zeile es ueberhaupt gehoert - drei Fragen, und jede bekommt
   hier ihre eigene Antwort:

   - WOZU es gehoert: die offene Zeile traegt ihre Beschriftung in Gold, und
     der Kasten haengt mit einer goldenen Kante an genau dieser Seite.
   - WO es anfaengt und aufhoert: eigener, dunklerer Grund mit Innenabstand.
     Luft INNEN statt aussen - aussen sieht nach Abstand zwischen Zeilen aus,
     innen nach einem eigenen Ding.
   - DASS es anfassbar ist: der Grund hebt sich vom Fenster ab, die Liste
     darueber und darunter nicht.

   Die Klasse `ist-offen` setzt koAufklappen() am <li>; ueber :has() ginge es
   auch, aber der Zustand steht schon im JavaScript, und zwei Quellen fuer
   denselben Zustand laufen irgendwann auseinander. */
.pf-konto > li.ist-offen .pf-ko-zeile > b { color: var(--gold); }
.pf-ko-auf {
  margin: 4px 0 14px;
  padding: 12px 14px;
  border-left: 2px solid var(--gold);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: rgba(0, 0, 0, .22);
}
.pf-ko-auf .pf-form { margin: 0; }
.pf-ko-auf > .pf-hinweis:first-child { margin-top: 0; }
.pf-ko-auf > :last-child { margin-bottom: 0; }
/* Die Rueckmeldung der Freipruefung sitzt im Hinweistext selbst - eine
   zweite Zeile daneben waere eine Zeile zu viel. */
#pf-nm-frei.ist-frei { color: var(--gold); }
#pf-nm-frei.ist-weg { color: #e4a09a; }
/* Der Ausblick am Fuss des Reiters gehoert zu keinem Abschnitt. Ohne den
   Abstand klebte er unter der Ueberschrift "Anmeldung in zwei Schritten" und
   sah aus wie deren Erklaerung. */
.pf-abs + .pf-hinweis { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--panel-edge); }

/* ------------------------------------------------------------ Schaukasten

   Vier Plaetze unter dem Profilbild, selbst bestueckt (Bastian, 2026-10-03:
   "nur vier Erfolge erlauben, dafuer die dann groesser").
   Sie fuellen den Platz, der unter der Erfahrungsleiste ohnehin leer stand.
   Ein leerer Platz ist ein gestrichelter Rahmen mit Pluszeichen - ein blasses
   Abzeichen sieht aus wie ein nicht verdienter Erfolg, nicht wie eine
   Einladung. */
.pf-kasten {
  display: flex; justify-content: center; gap: 7px;
  margin-top: 18px;
}
/* Der Bedienhinweis steht EINMAL unter dem Kasten und nicht viermal in den
   Hinweistafeln der Plaetze (Bastian, 2026-10-08). Und nur im Reiter, in dem
   man auswaehlt - sonst erklaert er eine Bewegung, die gerade niemand
   machen will. */
.pf-kasten-tipp {
  margin: 9px 0 0; text-align: center;
  font-size: 10.5px; color: var(--ink-mute);
}
.pf-kasten-platz {
  display: grid; place-items: center;
  width: 56px; height: 56px; padding: 0;
  border: 1px dashed var(--panel-edge); border-radius: 11px;
  background: none; cursor: pointer;
  transition: border-color .15s, background .15s;
}
.pf-kasten-platz:hover, .pf-kasten-platz:focus-visible {
  border-color: var(--gold); background: rgba(201, 162, 39, .10); outline: none;
}
.pf-kasten-platz.ist-voll {
  border-style: solid;
  background: linear-gradient(rgba(255, 255, 255, .03), rgba(0, 0, 0, .14));
  cursor: grab;
  /* Waagerecht ziehen, senkrecht blaettern (Bastian, 2026-10-04: "touch ist
     gut wegen Tablet"). Die vier Plaetze stehen nebeneinander, zum Tauschen
     reicht die waagerechte Bewegung - mit `none` bliebe der Finger auf einem
     Abzeichen haengen und das Fenster liesse sich dort nicht mehr scrollen. */
  touch-action: pan-y;
  -webkit-user-select: none; user-select: none;
}
/* Tauschen mit der Maus (Bastian, 2026-10-04). Der aufgenommene Platz wird
   blass, das Ziel bekommt den Goldrahmen - dieselbe Sprache wie beim
   Ueberfahren, nur kraeftiger, damit man beim Ziehen sieht, wo man landet. */
.pf-kasten-platz.ist-zieht { opacity: .35; cursor: grabbing; }
.pf-kasten-platz.ist-ziel {
  border-color: var(--gold); border-style: solid;
  background: rgba(201, 162, 39, .20);
}
/* Das Pluszeichen aus zwei Strichen - ein Zeichen weniger zu laden. */
.pf-kasten-platz i { position: relative; display: block; width: 13px; height: 13px; opacity: .55; }
.pf-kasten-platz i::before, .pf-kasten-platz i::after {
  content: ''; position: absolute; inset: 0; margin: auto;
  background: var(--ink-mute); border-radius: 1px;
}
.pf-kasten-platz i::before { width: 13px; height: 1.6px; }
.pf-kasten-platz i::after { width: 1.6px; height: 13px; }
.pf-kasten-platz:hover i::before, .pf-kasten-platz:hover i::after { background: var(--gold); }

/* Die Wand zum Auswaehlen, rechts statt der Reiterinhalte. Feste Hoehe mit
   eigener Rollleiste: das Fenster soll beim Auswaehlen nicht wachsen. */
.pf-wahl-zahl {
  margin-left: 8px; font: 500 11.5px var(--font);
  color: var(--ink-mute); letter-spacing: 0; text-transform: none;
}
.pf-wahl-wand {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 8px; max-height: 380px; overflow-y: auto; padding-right: 6px;
}
.pf-wahl {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 9px 5px; cursor: pointer;
  border: 1px solid var(--panel-edge); border-radius: 8px;
  background: linear-gradient(rgba(255, 255, 255, .025), rgba(0, 0, 0, .12));
}
.pf-wahl:hover, .pf-wahl:focus-visible { border-color: rgba(201, 162, 39, .5); outline: none; }
.pf-wahl.is-on { border-color: var(--gold); background: rgba(201, 162, 39, .12); }
.pf-wahl span {
  max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  font: 500 10.5px var(--font); color: var(--ink-mute); text-align: center;
}
.pf-wahl.is-on span { color: var(--ink); }

/* ------------------------------------------------------- Zusammenfassung

   "Allgemein" ist kein Korb, sondern die Uebersicht (Bastian, 2026-10-03,
   wie die "Zusammenfassung" im Vorbild): oben der Fortschritt je Korb, zum
   Hineinspringen, darunter die drei Stufen, die am naechsten dran sind. Sie
   steht an derselben Stelle wie sonst die Liste der Ketten und rollt wie
   diese - die Hoehe des Fensters darf sich beim Wechseln nicht aendern. */
.pf-ueb { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding-right: 6px; }
.pf-ueb-h {
  margin: 0 0 7px; font: 600 11px var(--font);
  letter-spacing: .08em; text-transform: uppercase; color: var(--ink-mute);
}
.pf-ueb-h + * + .pf-ueb-h { margin-top: 8px; }
/* Zwei Spalten: bei vier bis sechs Koerben passt alles ohne Rollen ins
   Fenster, und die Balken stehen paarweise untereinander zum Vergleichen. */
.pf-ueb-koerbe { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pf-ueb-korb {
  display: grid; grid-template-columns: 1fr auto; gap: 7px 10px;
  align-items: center; width: 100%; text-align: left;
  padding: 9px 11px; cursor: pointer;
  border: 1px solid var(--panel-edge); border-radius: 8px;
  background: linear-gradient(rgba(255, 255, 255, .025), rgba(0, 0, 0, .12));
}
.pf-ueb-korb:hover { border-color: rgba(201, 162, 39, .45); }
.pf-ueb-korb b {
  grid-column: 1 / -1; font: 600 13px var(--font); color: var(--ink);
}
.pf-ueb-korb .pf-erf-bahn { margin: 0; }
.pf-ueb-korb em {
  font-style: normal; font: 600 11.5px var(--font); color: var(--ink-mute);
  font-variant-numeric: tabular-nums;
}
/* Letzte Erfolge: eine Reihe von Abzeichen mit dem Titel darunter. Bis zu
   fuenf nebeneinander; der Titel bricht nicht um, sondern wird gekuerzt -
   sonst waeren die Felder verschieden hoch und die Reihe wackelte. */
.pf-letzte { display: flex; gap: 10px; }
.pf-letzt {
  flex: 1 1 0; min-width: 0; display: flex; flex-direction: column;
  align-items: center; gap: 4px; padding: 3px 4px;
  border: 1px solid var(--panel-edge); border-radius: 8px;
  background: linear-gradient(rgba(255, 255, 255, .025), rgba(0, 0, 0, .12));
}
.pf-letzt small {
  max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  font: 500 10.5px var(--font); color: var(--ink-mute); text-align: center;
}

/* Eine Zeile je offene Stufe, in derselben Ordnung wie die Tafeln daneben:
   Abzeichen, Satz, Balken, Zahl. */
.pf-ueb-zeile {
  display: flex; align-items: center; gap: 11px;
  padding: 8px 11px; margin-bottom: 5px;
  border: 1px solid var(--panel-edge); border-radius: 8px;
  background: linear-gradient(rgba(255, 255, 255, .025), rgba(0, 0, 0, .12));
}
.pf-ueb-text { flex: 1 1 auto; min-width: 0; }
.pf-ueb-text b { display: block; font: 600 13px var(--font); color: var(--ink); }
.pf-ueb-text small {
  display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  margin-top: 1px; font: 400 11.5px var(--font); color: var(--ink-mute);
}
.pf-ueb-zeile .pf-erf-bahn { flex: 0 0 96px; margin: 0; }
.pf-ueb-zeile em {
  flex: none; min-width: 74px; text-align: right;
  font-style: normal; font: 500 11.5px var(--font); color: var(--ink-mute);
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------ Abzeichen

   Schild in der Farbe des Rangs (--ab, gesetzt in profile.js ueber die
   CSSOM), darin das Zeichen der Kette, unten rechts die Rangzahl. Nicht
   Verdientes bleibt farblos und blass - der Unterschied muss auf einen
   Blick erkennbar sein, nicht erst beim Vergleichen. */
.pf-ab { position: relative; display: block; flex: none; color: var(--ab, #4a4336); }
.pf-ab svg { display: block; width: 100%; height: 100%; }
/* Auch ohne Besitz FARBIG, nur hohl: Der Unterschied ist die Fuellung des
   Schildes, nicht die Farbe (Bastian, 2026-10-02). Vorher stand alles, was
   man noch nicht hatte, in einem toten Grau - bei 92 Erfolgen und null
   verdienten war das ganze Fenster grau. */
/* Die Raute ist schmaler als das Schild war - der Strich darf dafuer etwas
   kraeftiger stehen, sonst wirkt sie bei 26 px zerbrechlich. */
.pf-ab-schild { fill: #241c13; stroke: currentColor; stroke-width: 2.3; opacity: .82; }
.pf-ab-z path {
  fill: none; stroke: currentColor; stroke-width: 1.9;
  stroke-linecap: round; stroke-linejoin: round; opacity: .85;
}
/* Verdient heisst GEFUELLT. Seit die Farbe nicht mehr am Besitz haengt, ist
   die Fuellung der einzige Unterschied - bei 26 px muss sie deshalb deutlich
   sein; .22 war zu zart, um sie im Vorbeisehen zu erkennen. */
.pf-ab.is-da .pf-ab-schild { fill: currentColor; fill-opacity: .4; opacity: 1; }
.pf-ab.is-da .pf-ab-z path { opacity: 1; }
/* Abzeichen mit gemaltem Bild (Bastian, 2026-10-04). Verdient: volles Bild,
   kraeftiger Rand. Offen: dasselbe Bild, aber abgedunkelt - farbig bleibt
   es, der Unterschied muss trotzdem auf einen Blick zu sehen sein. */
.pf-ab-grund { fill: #15110c; }
.pf-ab-bild { opacity: .38; }
.pf-ab-rand { fill: none; stroke: currentColor; stroke-width: 2.4; opacity: .7; }
.pf-ab.is-da .pf-ab-bild { opacity: 1; }
.pf-ab.is-da .pf-ab-rand { stroke-width: 2.8; opacity: 1; }
.pf-ab-stufe:hover .pf-ab-rand { opacity: 1; }
/* Die ganze Leiter steht in der Reihe, auch was noch fehlt (Bastian,
   2026-10-04: "ich moechte doch, dass alle Stufen des Erfolges angezeigt
   werden. Ausgegraut wenn noch nicht erreicht, aber so, dass man mit der Maus
   drueberfahren kann, um die Belohnungen zu sehen - das ist als Motivation
   gedacht"). Grau werden sie dabei NICHT: das war am 2026-10-02 ausdruecklich
   verworfen ("bei uns macht das alles ohne schon Erfolge zu haben einen
   trueben Eindruck"). Offen heisst weiter farbig und dunkel.

   Beim Darueberfahren hellt die offene Stufe auf - nicht bis zur verdienten,
   nur so weit, dass der Hinweis sich angefasst anfuehlt. Die Regel ist auf
   :not(.is-da) eingeschraenkt, weil .pf-ab.is-da .pf-ab-bild dieselbe
   Spezifitaet haette und sonst die VERDIENTEN beim Zeigen abdunkeln wuerde. */
.pf-ab-stufe:hover .pf-ab:not(.is-da) .pf-ab-bild,
.pf-ab-stufe:focus-visible .pf-ab:not(.is-da) .pf-ab-bild { opacity: .62; }
.pf-ab-stufe:focus-visible .pf-ab-rand { opacity: 1; }
/* Mauszeiger: der des Systems. Vom 2026-10-04 bis 2026-10-23 sass hier ein
   eigener Zeiger (Pfeil mit goldenem Sechseck und "i", assets/zeiger/
   hinweis-*.png) - die einzige Stelle im Spiel mit eigenem Zeiger. Bastian,
   2026-10-23: "das moechte ich raus nehmen". Nicht cursor: help - das
   Fragezeichen war der Grund fuer den eigenen Zeiger ("mir gefaellt der
   Cursor das Fragezeichen nicht"). Und nicht pointer: die Abzeichen sind
   kein Knopf. */
.pf-ab-stufe { cursor: default; }
/* Hier sass bis zum 2026-10-03 die Rangzahl als kleiner Kreis an der Flanke
   der Raute. Sie ist weg (Bastian): "Diese Kreise mit Zahlen - wollten wir
   die nicht weglassen und haben uns deswegen auf maximal fuenf Stufen
   beschraenkt, damit wir das mit den Farben der Rahmen machen koennen?"
   Genau so ist es. Der Rang steht im METALL - Eisen, Bronze, Silber, Gold,
   Platin -, und deshalb hoert jede Kette bei fuenf Stufen auf. Eine Zahl
   daneben sagt dasselbe noch einmal, nur kleiner. Welche Stufe eine Raute
   ist, sagt ausserdem der Hinweis beim Darueberfahren. */
/* Die Abzeichen sind reine Anzeige - kein Knopf, keine Auswahl (Bastian,
   2026-10-03). Was jede Stufe heisst und verlangt, sagt ihr Hinweis. */

.pf-ab-reihe { display: flex; gap: 6px; }
/* Die verdienten Stufen sind NICHT mehr anklickbar (Bastian, 2026-10-03:
   "Anklicken kann man die unterschiedlichen Stufen dann nicht mehr"). Sie
   zeigen beim Darueberfahren eine kleine Tafel mit Titel, Satz, Erfahrung
   und Gabe - fuer die Tastatur ueber tabindex, sonst waere der Hinweis fuer
   alle weg, die nicht mit der Maus unterwegs sind. */
.pf-ab-stufe {
  display: block; line-height: 0; border-radius: 5px;
  /* Der Zeiger steht weiter unten, zusammen mit seiner Begruendung - hier
     stand frueher cursor: default. Zwei Stellen fuer denselben Wert sind
     eine Falle fuer den Naechsten. */
}
.pf-ab-stufe:hover .pf-ab-schild { opacity: 1; }
.pf-ab-stufe:focus-visible { outline: 1px solid var(--gold); outline-offset: 2px; }

/* Was die naechste Stufe einbringt - ein eigener kleiner Kasten (Bastian,
   2026-10-03: "das gefaellt mir so nicht, vielleicht in eine kleine
   Hinweisbox setzen"). Er steht IMMER da, auch wenn es nur Erfahrung gibt:
   eine Zeile, die mal da ist und mal nicht, macht die Tafeln ungleich hoch.
   Gold bekommt er erst, wenn es wirklich etwas zu holen gibt. */
.pf-naechste {
  /* Zwei Zeilen, nicht eine: die Beschriftung "Belohnung fuer naechste
     Stufe" ist breit, und daneben blieb vom Titel nichts uebrig. Das
     Geschenkzeichen steht links ueber beide Zeilen. */
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 10px; row-gap: 3px;
  align-items: center;
  box-sizing: border-box; min-height: 52px;
  /* Mehr Luft, und oben weniger als unten (Bastian, 2026-10-06: "muss nicht
     gleichmaessig sein mach es wie es gut aussieht"). Oben schliesst der
     Kasten an einen Flattersatz an, der selbst schon Unterlaenge hat -
     darunter folgt die Abzeichenreihe, deren Kanten hart sind und die den
     groesseren Abstand braucht, damit sie nicht am Rahmen klebt. */
  margin: 13px 0 17px; padding: 9px 12px;
  border: 1px solid var(--panel-edge); border-radius: 5px;
  background: rgba(0, 0, 0, .22);
  font: 500 11.5px var(--font); color: var(--ink-mute);
}
.pf-naechste b {
  flex: none;
  font: 600 10px var(--font); letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-mute);
}
.pf-naechste span {
  font-size: 12px; color: var(--ink-dim);
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.pf-naechste.ist-da { border-color: rgba(201, 162, 39, .38); background: rgba(201, 162, 39, .07); }
/* Die Gaben als kleine Bilder rechts im Kasten (2026-10-06). Sie stehen in
   der zweiten Zeile neben dem Satz und bekommen eine eigene Spalte - sonst
   schoebe sich der Satz zusammen, sobald es drei Stuecke gibt. */
.pf-naechste { grid-template-columns: auto minmax(0, 1fr) auto; }
/* Die drei Spalten MUESSEN festgenagelt werden: das Raster fuellt sonst von
   selbst weiter, und die Gaben landeten in der zweiten Zeile neben der
   Beschriftung statt rechts. */
.pf-naechste > .pf-gabe-bild { grid-column: 1; }
.pf-naechste > b, .pf-naechste > span:not(.pf-naechste-gaben) { grid-column: 2; }
.pf-naechste-gaben {
  grid-column: 3; grid-row: 1 / span 2; align-self: center;
  display: flex; align-items: center; gap: 8px; padding-left: 12px;
}
/* Auch hier quer statt quadratisch - dieselbe Begruendung wie in
   style.css, nur eine Nummer kleiner, weil der Kasten schmaler ist. */
.pf-naechste-gaben .cs-gabe-bild { width: 50px; height: 34px; }
/* Im Kasten gilt dieselbe Lesart wie in der Tafel: die naechste Belohnung
   ist eine Aussicht und deshalb gedaempft, das Erhaltene hat volle Farbe. */
.pf-naechste-gaben .cs-gabe-bild { filter: grayscale(.55) brightness(.78); }
.pf-naechste.ist-erhalten .pf-naechste-gaben .cs-gabe-bild { filter: none; }
/* "Erhalten" steht bei einer fertigen Kette. Der Satz nennt die Stuecke
   ausgeschrieben - hier ist Platz, weil weder Titel noch Erfahrung
   danebenstehen. */
.pf-naechste.ist-erhalten > span:not(.pf-naechste-gaben) {
  white-space: normal; color: var(--ink-dim);
}
.pf-naechste.ist-da span { color: var(--gold); }
/* Die Kiste. Sie ist keine Grafik, sondern eine MASKE: die Datei traegt nur
   die Silhouette, die Farbe kommt aus `color`. Nur so kann dasselbe Zeichen
   gold sein, wenn es etwas zu holen gibt, und sonst gedaempft.

   18 x 15 px - das Seitenverhaeltnis seiner Zeichnung ist 1,204. Schmaler
   verliert der Lichtspalt zwischen Deckel und Korpus seine Breite, breiter
   wird das Zeichen lauter als die Beschriftung daneben (11,5 px).

   `@supports`: wo Masken fehlen, bliebe sonst ein goldener Klotz stehen.
   Dann ist lieber gar kein Zeichen da - der Satz steht ja. */
.pf-naechste .pf-gabe-bild {
  grid-row: 1 / span 2; align-self: center;
  width: 18px; height: 15px; color: var(--ink-mute);
}
.pf-naechste.ist-da .pf-gabe-bild { color: var(--gold); }
@supports ((mask-image: url("paket/kiste-zeichen.png")) or (-webkit-mask-image: url("paket/kiste-zeichen.png"))) {
  .pf-gabe-bild {
    display: block; background: currentColor;
    -webkit-mask: url("paket/kiste-zeichen.png") center / contain no-repeat;
            mask: url("paket/kiste-zeichen.png") center / contain no-repeat;
  }
}

/* Alt, noch benutzt von der Wand der verdienten Erfolge im Schaukasten. */

/* -------------------------------------------------------------- Ketten

   Eine Tafel je Kette, nach dem Vorbild: Bild links, Text in der Mitte, Wert
   gross rechts; darunter die Stufen und was noch fehlt. Der Rahmen macht aus
   den Angaben eine Zeile, die man ueberfliegen kann - ohne ihn verschwimmen
   bei sieben Ketten untereinander Bild, Satz und Zahl zu einem Block. */
/* Behutsam mehr Luft (Bastian, 2026-10-04: "die Box ist etwas zu
   gedrungen"). Jeder Wert um 1-2 px, nicht mehr: die Tafel soll atmen,
   nicht auseinanderfallen. Zusammen sind es rund 12 px je Tafel. */
.pf-kette {
  margin-bottom: 12px; padding: 12px 14px;
  border: 1px solid var(--panel-edge); border-radius: 8px;
  background: linear-gradient(rgba(255, 255, 255, .025), rgba(0, 0, 0, .12));
}
.pf-kette.ist-voll { border-color: rgba(201, 162, 39, .45); }
.pf-kette-kopf { display: flex; align-items: center; gap: 14px; }
/* Der Platz fuer zwei Namenszeilen haengt am GANZEN Block, nicht mehr an
   der einzelnen Zeile (Bastian, 2026-10-04: "die gelbe Ueberschrift soll
   naeher unter der weissen stehen").

   Vorher trug `b` eine Mindesthoehe von 32 px. Bei einem einzeiligen Namen
   wie "Gesellig" standen darunter 16 px Luft, bevor der goldene Rang kam -
   der Name schwebte, und der Rang sah aus, als gehoere er zum Satz darunter.
   Erst als Reserve am Block versucht (87 px) - dann steht die Luft eben
   nicht mehr zwischen Name und Rang, sondern als Loch zwischen Satz und
   Belohnungskasten. Nebeneinander gerendert war das deutlich schlechter.
   Also GAR KEINE Reserve mehr: die Tafeln sind jetzt verschieden hoch, aber
   hoechstens um eine Zeile (17 px), und keine hat ein Loch. Die Gleichheit
   der Hoehen war mein Grundsatz, nicht seiner; sie ist diesen Preis nicht
   wert. Was bleibt, ist die Zweizeilen-Grenze fuer Name und Satz - sie
   verhindert Ausreisser nach oben. */
.pf-kette-text { flex: 1; min-width: 0; }
.pf-kette-text b {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
  font: 600 14px/1.22 var(--font); color: var(--ink);
}
/* Der hoechste verdiente Rang, in Gold, direkt unter dem Namen der Kette
   (Bastian, 2026-10-03: "wenn es verschiedene Stufen gibt, dann steht die
   hoechste Stufe unter dem Namen des Erfolgs, vielleicht in Gold").

   Die Zeile steht IMMER da, auch leer. Sonst waeren Tafeln mit verdienter
   Stufe 15 px hoeher als die ohne - und gleich hohe Tafeln sind das, was
   die Liste ueberfliegbar macht. */
/* Ohne verdiente Stufe steht hier die NAECHSTE, gedaempft (Bastian,
   2026-10-04: "wenn man den Erfolg nicht verdient hat, sollte die
   Ueberschrift aber genauso stehen, kann alles ausgegraut sein, aber es
   sollte gleich aussehen"). Vorher blieb die Zeile leer - damit sah eine
   Tafel ohne Erfolg anders gebaut aus als eine mit, und das Auge musste
   zweimal hinsehen, um dieselbe Stelle zu finden. */
.pf-kette-rang.ist-offen { color: var(--ink-mute); }
/* Die Abstaende im Kopf sind gestaffelt, nicht gleich (Bastian,
   2026-10-06: "optimiere nochmal die Abstaende zwischen dem Erfolg, der
   gelben Unterueberschrift und dem Text"). Name und Rang sind EIN Gedanke -
   wie die Kette heisst und wo man darin steht -, der Satz darunter ist der
   naechste. Also oben eng (4 px) und darunter deutlich (9 px). Vorher waren
   es 3 und 5: beinahe gleich, und damit lasen sich die drei Zeilen wie eine
   Aufzaehlung statt wie zwei Bloecke. */
.pf-kette-rang {
  display: block; min-height: 15px; margin-top: 4px;
  font: 600 12px/1.25 var(--font); font-style: normal;
  color: var(--gold);
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
/* Hoechstens zwei Zeilen, und immer Platz fuer zwei: So sind ALLE Tafeln
   gleich hoch. Das ist die stillste Eigenschaft des Vorbilds und die, die am
   meisten traegt - eine Liste aus gleich hohen Zeilen ueberfliegt man, eine
   aus ungleichen liest man. */
/* Vier Pixel Abstand zum Rang, nicht zwei: der Rang gehoert optisch nach
   OBEN zum Namen, der Satz ist die naechste Sache. Ohne diesen Unterschied
   lesen sich die drei Zeilen als ein Block. */
.pf-kette-text small {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; margin-top: 9px;
  font: 400 12px/1.45 var(--font); color: var(--ink-mute);
}
/* Der Wert rechts, wie die Punktzahl im Vorbild: die Zahl gross, das Wort
   klein darunter. Tabellenziffern, damit die Zahlen untereinander stehen. */
.pf-kette-lohn { flex: none; text-align: right; line-height: 1.05; }
.pf-kette-lohn b {
  display: block; font: 800 19px var(--font); color: var(--gold);
  font-variant-numeric: tabular-nums;
}
.pf-kette-lohn small {
  font: 600 9.5px var(--font); letter-spacing: .09em;
  text-transform: uppercase; color: var(--ink-mute);
}
.pf-kette.ist-voll .pf-kette-lohn b { color: #ded0a0; }
.pf-kette-fuss { display: flex; align-items: center; gap: 12px; margin-top: 11px; }
/* EINE Leiste je Tafel, und zwar die zur naechsten Stufe (Bastian,
   2026-10-03). Eine Leiste je Stufe waere ein Zebrastreifen, und die Frage,
   die man vor der Tafel hat, ist ohnehin nur eine: wie weit noch bis zur
   naechsten. Sie laeuft ueber die ganze Breite der Tafel, nicht in der Luecke
   zwischen Abzeichen und Zahl - dort war sie je nach Zahl der verdienten
   Stufen verschieden lang und taugte nicht zum Vergleichen. */
.pf-kette > .pf-erf-bahn { display: block; margin: 11px 0 0; }
/* Die Reihe haelt ihre Hoehe auch leer - sonst waere eine Tafel ohne
   verdiente Stufe niedriger als die anderen. */
.pf-kette-fuss { min-height: 28px; }
.pf-kette-leer { font: 400 11.5px var(--font); color: var(--ink-mute); opacity: .75; }
/* Punkte zum Abhaken statt Leiste und Zahl (Bastian, 2026-10-03). Die Reihe
   ist genau so hoch wie Fussreihe plus Leiste zusammen - sonst waere die
   eine Tafel, die Punkte hat, niedriger als alle anderen daneben, und die
   gleiche Hoehe aller Tafeln ist das Beste am Vorbild. */
.pf-haken-reihe {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px;
  min-height: 42px; margin-top: 9px;
}
.pf-haken {
  display: inline-flex; align-items: center; gap: 7px;
  font: 500 12.5px var(--font); color: var(--ink-mute);
}
.pf-haken-z {
  flex: none; width: 17px; height: 17px; padding: 2px;
  border: 1px solid var(--panel-edge); border-radius: 5px;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
  color: transparent;                     /* unerledigt: leeres Kaestchen */
}
.pf-haken.ist-da { color: var(--ink); }
.pf-haken.ist-da .pf-haken-z {
  color: var(--gold); border-color: rgba(201, 162, 39, .55);
  background: rgba(201, 162, 39, .12);
}
.pf-kette-rest {
  /* Ganz nach rechts: Seit die Leiste aus dieser Zeile heraus ist, schiebt
     sie die Zahl nicht mehr dorthin - ohne das klebte "31 / 50" an den
     Abzeichen und wanderte mit jeder verdienten Stufe nach rechts. */
  margin-left: auto;
  flex: none; min-width: 74px; text-align: right;
  font: 500 11.5px var(--font); color: var(--ink-mute);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 760px) {
  /* Hier traegt die Seite selbst: feste Hoehe plus waagerechte Leiste waere
     ein Fenster im Fenster. Deshalb faellt die gemeinsame Hoehe von oben
     hier wieder weg - am Telefon rollt das Fenster als Ganzes. */
  .pf-card { height: auto; max-height: 90vh; }
  .pf-erfolge { display: block; height: auto; max-height: 60vh; overflow-y: auto; }
  .pf-erf-rechts { display: block; padding-left: 0; }
  .pf-erf-liste { overflow: visible; }
  .pf-ueb { overflow: visible; }
  .pf-ueb-koerbe { grid-template-columns: 1fr; }
  .pf-kat-leiste {
    display: flex; gap: 2px; overflow-x: auto; border-right: 0;
    border-bottom: 1px solid var(--panel-edge); padding: 0 0 2px; margin-bottom: 12px;
  }
  /* Am Telefon ist die Leiste eine waagerechte Reihe: dort truege die Bahn
     unter dem Namen mit dem Goldstrich des offenen Korbes um denselben
     Platz, und die Eintraege sind verschieden breit. Also nur die Zeichen,
     keine Bahn. */
  .pf-kat { width: auto; white-space: nowrap; border-left: 0; border-bottom: 3px solid transparent;
            padding: 10px 11px; }
  .pf-kat-bahn { display: none; }
  .pf-kat.is-on { border-left: 0; border-bottom-color: var(--gold); background: none; }
  .pf-erf-liste { padding-left: 0; }
}

.pf-erf { margin-bottom: 13px; }
.pf-erf-bahn {
  height: 5px; margin: 5px 0 3px; border-radius: 3px; overflow: hidden;
  background: rgba(0, 0, 0, .40); box-shadow: inset 0 0 0 1px var(--panel-edge);
}
.pf-erf-bahn i { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, #8a6c1c, var(--gold)); }
.pf-erf.is-voll .pf-erf-bahn i,
.pf-erf-bahn.ist-voll i { background: linear-gradient(90deg, var(--gold), #ded0a0); }
.pf-erf small { font-size: 11.5px; color: var(--ink-mute); }

/* ------------------------------------------------- Kontoformulare
   Passwort und E-Mail aendern im Reiter "Profil" (Bastian, 2026-10-03).
   Beide stehen untereinander in einer schmalen Spalte: zwei dreifeldrige
   Formulare nebeneinander laden zum Vertippen in der falschen Haelfte ein.
   Der Knopf steht links unter den Feldern, nicht rechts - rechts unten im
   Dialog sitzt schon "Übernehmen", und zwei Knoepfe auf derselben Linie
   sehen aus, als gehoerten sie zusammen. */
.pf-form { max-width: 340px; margin: 6px 0 16px; }
.pf-feld { display: block; margin-bottom: 8px; }
.pf-feld > span {
  display: block; margin-bottom: 3px;
  font: 600 11px var(--font); letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-mute);
}
.pf-feld > input {
  width: 100%; box-sizing: border-box; padding: 7px 9px;
  font: 500 13px var(--font); color: var(--ink);
  background: rgba(0, 0, 0, .25);
  border: 1px solid var(--panel-edge); border-radius: 4px;
}
.pf-feld > input:focus { outline: none; border-color: var(--gold); }
.pf-form-go { margin-top: 2px; }

/* Zwei Schritte: zwischen dem Text und dem Knopf stand der Abstand, der fuer
   FELDER gedacht ist - .pf-hinweis 12px + .pf-form 6px + .pf-form-go 2px,
   zusammen 20px. Wo nur ein einzelner Knopf folgt, ist das zu viel Luft
   (Bastian, 2026-10-08: "der Abstand vom Text zum Button ist ein wenig zu
   hoch"). Zusammen jetzt 12px. */
#pf-2f-box > .pf-hinweis { margin-bottom: 10px; }
#pf-2f-box .pf-form { margin-top: 0; }
/* Dasselbe eine Stufe tiefer: zwischen dem Codefeld und der Knopfreihe
   standen 69 Pixel - 8 vom Feld, 43 von der zweizeiligen Meldung, dazu die
   Abstaende der Knoepfe. Der Text ist jetzt einzeilig, und hier faellt der
   Rest weg (Bastian, 2026-10-08: "die Buttons sind etwas zu weit unten").
   Gemessen wird es in sh/erf/zwei2.js, nicht geschaetzt. */
#pf-2f-box .pf-feld { margin-bottom: 6px; }
#pf-2f-box .pf-msg { margin-bottom: 4px; }
#pf-2f-box .pf-knopfreihe .pf-form-go { margin-top: 0; }
/* Dasselbe im Anschriftenformular: "Speichern" und "Leeren" stehen
   nebeneinander, und der Abstand gehoert der Reihe, nicht den Knoepfen
   (sonst sitzt der zweite in einer umgebrochenen Zeile zu hoch). */
.pf-knopfreihe .pf-form-go { margin-top: 0; }
.pf-msg { margin: 0 0 8px; font: 500 12px var(--font); color: var(--ink-mute); min-height: 0; }
.pf-msg:empty { margin: 0; }
.pf-msg.ist-schlecht { color: #e4a09a; }
.pf-msg.ist-gut { color: var(--gold); }

/* Ladenware, die man noch nicht hat (Quartiermeister, 2026-10-04): gedimmt,
   mit Goldstreifen-Marke; ein Klick fuehrt zum Quartiermeister. */
.pf-face.is-laden, .pf-sym.is-laden { position: relative; display: block; text-decoration: none; }
/* Erfolgsbild: gedaempft wie Ladenware, aber OHNE Goldstreifen-Marke und
   ohne Klickziel - es gibt dafuer nichts zu kaufen, nur zu verdienen
   (Bastian, 2026-10-04). */
/* `position: relative` ist hier KEINE Zierde: ohne sie bezieht sich die
   Marke auf das naechste gestellte Elternteil - im ersten Anlauf auf das
   ganze Fenster, und die Raute stand 14 Kachelradien weit weg oben links.
   Ladenware hat es seit je (eine Zeile hoeher), das Erfolgsbild fehlte. */
.pf-face.ist-verdienen { position: relative; cursor: default; }
.pf-face.ist-verdienen svg, .pf-face.ist-verdienen image { filter: grayscale(.75) brightness(.55); }
.pf-face.is-laden svg, .pf-sym.is-laden svg { filter: grayscale(.75) brightness(.55); }
.pf-face.is-laden:hover svg, .pf-sym.is-laden:hover svg { filter: grayscale(.3) brightness(.8); }

/* Woher ein gesperrtes Stueck kommt (Bastian, 2026-10-04: "Die Kennzeichnung
   woher man ein nicht freies Profil bekommen kann ist nicht gut ... kleine
   Icons, die muessen sichtbar sein, die sollen nicht zu dominant sein" - und
   danach: "nur Erfolge und Shop unterscheiden, die drei Icons sind doch
   zuviel, nur darf das Icon dann nicht ein Goldstreifen sein").

   ZWEI MARKEN, weil es an dieser Stelle zwei Fragen gibt:

     Raute mit Winkel  - verdienen. Die Form, die im Reiter "Erfolge" jedes
                         Abzeichen traegt, in METALL[1] #b06f33.
     Kreis mit Schloss - kaufen. Dasselbe Schloss wie an der gesperrten
                         Lackierung in der Sammlung (deck.css,
                         .dk-lack-schloss), wo es seit dem 2026-10-02
                         "der Klick fuehrt zum Quartiermeister" heisst.

   Der Goldstreifen ist raus: er stand auch an Euro-Ware. Welche Muenze ein
   Stueck kostet, sagt der Hinweis und die Ladenseite - das ist eine Auskunft
   des Ladens, keine zweite Sperre.

   Form UND Zeichen, nicht nur Farbe: bei 20 px und bei Rot-Gruen-Schwaeche
   traegt die Silhouette die Auskunft.

   Die Kachel gibt ihr Beschneiden auf: `.pf-face` schneidet rund zu, eine
   Marke in der Ecke waere halb weg. Das Bild selbst beschneidet sich im SVG
   (face() setzt einen clipPath), die runde Form bleibt also. Die Marke sitzt
   auf dem Rand, halb drin und halb draussen - der Punkt bei 45 Grad liegt
   bei r*0,707, bei 92 px Kachel also 78 px, und genau dort ist ihre Mitte. */
.pf-face.is-laden, .pf-face.ist-verdienen { overflow: visible; }
/* Blankes Zeichen mit Schlagschatten, kein Kreis darum (Bastian, 2026-10-04:
   "Schloss finde ich gut und ich finde auch gut wie das hier geloest ist ...
   aber es soll alles aehnlich aussehen und funktionieren"). Genau so steht
   das Schloss an der gesperrten Lackierung in der Sammlung: 17 px, in
   `--ink`, mit `drop-shadow` gegen den Untergrund (deck.css,
   .dk-lack-schloss). Der Schatten ersetzt den Rahmen - er traegt das Zeichen
   auf jedem Bild, ohne eine zweite Form mitzubringen.

   ABER NICHT MITTIG. Auf der Lackierungskachel sitzt das Schloss in der
   Mitte, dort liegt ein Fahrzeug darunter. Hier liegt ein Gesicht darunter
   (Bastian: "natuerlich sollten wir das Schloss nicht direkt auf das Gesicht
   stellen"). Deshalb unten rechts auf dem Rand. */
.pf-mark {
  position: absolute; right: 4px; bottom: 4px;
  width: 20px; height: 20px;
  display: grid; place-items: center;
  font-style: normal; pointer-events: none;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .85));
}
.pf-m-laden {
  opacity: .85;
  background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7.5 10V7a4.5 4.5 0 0 1 9 0v3' fill='none' stroke='%23e8e2d5' stroke-width='2.2'/%3E%3Crect x='4.5' y='10' width='15' height='10.5' rx='2' fill='%23e8e2d5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.pf-face.is-laden:hover .pf-m-laden, .pf-sym.is-laden:hover .pf-m-laden { opacity: 1; }
/* Und derselbe Rand beim Ueberfahren wie dort: Stahlgrau, der Ton des
   Quartiermeisters (deck.css, .dk-lack-k.ist-zu.ist-laden:hover). */
.pf-face.is-laden:hover, .pf-sym.is-laden:hover { border-color: #9fb1bf; }
.pf-m-erf svg { display: block; width: 20px; height: 20px; overflow: visible; }
/* Die Raute bleibt die Form der Erfolgsleiter, traegt aber jetzt denselben
   Schatten statt eines Kreises - damit stehen beide Marken im selben Stil.
   Die LEERE Raute war im ersten Anlauf nicht zu sehen: ein dunkles Sechseck
   auf einem dunklen, gedaempften Bild liest sich als nichts. Der Winkel
   darin ist das Zeichen, das "verdient" sagt, ohne ein Wort. */
.pf-m-erf .pf-m-rand { fill: #1b1712; fill-opacity: .9; stroke: #c98c4a; stroke-width: 3; }
.pf-m-erf .pf-m-z {
  fill: none; stroke: #e0b07a; stroke-width: 4.6;
  stroke-linecap: round; stroke-linejoin: round;
}
/* Im Symbolfeld sitzt die Marke IN der Kachel - die ist eckig, da gibt es
   keinen Rand, auf dem etwas sitzen koennte. */
.pf-sym .pf-mark { right: 1px; bottom: 1px; }


/* ---------------------------------------------------- Reiter "Profil"
   Sortiert am 2026-10-04 (Bastian: "Der sieht furchtbar aus. Erstmal
   sortieren, da fehlen doch Werte"). Die Abschnitte selbst nutzen .pf-abs
   und .pf-klapp aus dem Reiter Aussehen - ein zweites Klappmuster waere
   eins zu viel. */

/* Der Erfahrungsbalken steht jetzt im Stufenkasten. Er braucht Luft nach
   oben, sonst klebt er an der grossen Zahl. */
/* display: block ist hier NICHT schmueckend: .pf-erf-bahn ist ein <span> und
   damit von Haus aus inline - und an einem inline-Kasten wirkt weder die
   Hoehe noch das height:100% des Fuellstuecks darin. An den anderen Stellen
   im Haus faellt das nicht auf, weil die Bahn dort ohnehin Flex-Kind ist
   (.pf-stufe, .pf-ueb-zeile) oder es ausdruecklich bekommt (.pf-kette). Hier
   stand sie 82 px breit und 0 px hoch auf dem Schirm - also gar nicht. */

/* Fehlende und nicht bestaetigte Angaben. Nicht rot: ein fehlender
   Geburtstag ist kein Fehler, nur eine Luecke. Die unbestaetigte Adresse
   dagegen schon - die faellt auf. */
.pf-leer { font-style: normal; opacity: .55; }
.pf-warn { font-style: normal; color: var(--foe, #b4553f); margin-left: 6px; }

/* Wie sicher ist das Passwort. Fuenf Stufen, der Balken waechst in
   Fuenfteln - die Breite setzt staerkeZeigen() ueber die CSSOM, weil ein
   style-Attribut aus innerHTML an der CSP scheitert. */
.pf-staerke { margin: -4px 0 10px; }
.pf-staerke-bahn {
  display: block; height: 5px; border-radius: 3px;
  background: rgba(255, 255, 255, .08); overflow: hidden;
}
.pf-staerke-bahn i {
  display: block; height: 100%; width: 0; border-radius: 3px;
  background: currentColor; transition: width .18s ease;
}
.pf-staerke small {
  display: block; margin-top: 4px; font-size: 12px; line-height: 1.4;
}
.pf-staerke b { color: currentColor; }
.pf-staerke em { font-style: normal; opacity: .7; }
/* Die Farbe traegt die ganze Anzeige ueber currentColor - Balken und
   Wort sagen dasselbe, und zwar in einem Ton. */
.pf-staerke.ist-0 { color: #b4553f; }
.pf-staerke.ist-1 { color: #c07a3a; }
.pf-staerke.ist-2 { color: #c9a227; }
.pf-staerke.ist-3 { color: #8ea84f; }
.pf-staerke.ist-4 { color: #6fae63; }






/* ------------------------------------------------------------- Freitext

   Der oeffentliche Teil des Profils (2026-10-05). Hier stand bis zum selben
   Abend auch die Wand der Schaustuecke - Miniaturen aus assets/minis/ zum
   Ausstellen auf dem Profilbanner. Mit Banner und Spielerkarte ist sie wieder
   herausgefallen (Bastian: "Miniatur brauchen wir nicht"). */

/* Das Textfeld. Der Zaehler steht rechts darunter und wird beim Tippen
   nachgefuehrt, ohne den Dialog neu zu zeichnen - sonst waere nach dem
   ersten Zeichen der Einfuegepunkt weg. */
.pf-text { max-width: 460px; }
.pf-text textarea {
  display: block; width: 100%; padding: 8px 10px; resize: vertical;
  border: 1px solid var(--panel-edge); border-radius: 6px;
  background: rgba(0, 0, 0, .3); color: var(--ink);
  font: 400 13px/1.5 var(--font);
}
.pf-text textarea:focus-visible { outline: 1px solid var(--gold); outline-offset: 1px; }
.pf-text small {
  display: block; margin-top: 3px; text-align: right;
  font-size: 11px; color: var(--ink-mute); font-variant-numeric: tabular-nums;
}




/* ======================================= Erreichbarkeit und Anschriften

   Gebaut 2026-10-05 (Bastian: "lass uns jetzt Land, Sprache, Handynummer
   und PLZ generell Adresse für den Shop einbauen"). Die Formulare benutzen
   .pf-form und .pf-feld wie "Passwort ändern" daneben - hier steht nur, was
   dort fehlte: zwei Felder nebeneinander, die Vorschlagsliste und der
   Schalter. */

/* Zwei Felder in einer Zeile, auf schmalem Schirm untereinander. */
.pf-zwei { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
/* Straße und Hausnummer teilen sich NICHT halbe/halbe: "Hauptstraße" braucht
   Platz, "12a" nicht. */
.pf-strasse { grid-template-columns: 3fr 1fr; }
@media (max-width: 620px) {
  .pf-zwei, .pf-strasse { grid-template-columns: 1fr; }
}

/* Der Pfeil wird SELBST gezeichnet (Bastian, 2026-10-08: "bei all diesen
   Feldern braucht der Pfeil auf der rechten Seite des Auswahlfeldes mehr
   Abstand nach rechts").

   Mit dem Pfeil des Browsers ging das nicht: Chrome setzt ihn fest an den
   rechten Rand des Feldes, und padding-right verschiebt ihn NICHT -
   nachgemessen mit 9, 16 und 24 Pixeln, alle drei Felder sahen gleich aus.
   Also appearance:none und ein eigener Haken als Hintergrundbild, der dort
   steht, wo er stehen soll. Nebenbei sieht er damit in jedem Browser gleich
   aus.

   Als data:-URL im Stylesheet erlaubt, die Inhaltsrichtlinie fuehrt
   `img-src 'self' data:` (.htaccess); dasselbe Mittel wie beim Sechseckraster
   in style.css. Die Farbe steht als Zahl darin - currentColor wirkt in einem
   Hintergrundbild nicht. */
.pf-form select {
  appearance: none; -webkit-appearance: none;
  display: block; width: 100%;
  /* rechts Platz fuer den Pfeil: 14 Abstand + 11 Pfeil + 9 wie links */
  padding: 7px 34px 7px 9px;
  border: 1px solid var(--panel-edge); border-radius: 6px;
  background-color: rgba(0, 0, 0, .3); color: var(--ink);
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' fill='none' stroke='%23a49b89' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  font: 400 13px/1.4 var(--font);
  cursor: pointer;
}
.pf-form select:focus-visible { outline: 1px solid var(--gold); outline-offset: 1px; }

/* Die Vorschlagsliste zur Postleitzahl. Sie liegt ÜBER dem Feld darunter
   (position: absolute), damit das Formular beim Tippen nicht springt - ein
   Formular, das unter dem Finger wächst, trifft man nicht mehr. */
.pf-plz { position: relative; }
.pf-vorschlaege {
  position: absolute; z-index: 5; left: 0; right: 0; top: 100%;
  max-height: 232px; overflow-y: auto; margin: 2px 0 0; padding: 4px;
  list-style: none;
  border: 1px solid #6b5a3a; border-radius: 6px;
  background: #16130f; box-shadow: 0 10px 24px rgba(0, 0, 0, .55);
}
.pf-vorschlaege li { margin: 0; }
.pf-vorschlaege button {
  display: block; width: 100%; padding: 6px 8px; text-align: left;
  border: 0; border-radius: 4px; background: none; color: var(--ink);
  font: 400 13px/1.35 var(--font); cursor: pointer;
}
.pf-vorschlaege button:hover, .pf-vorschlaege button:focus-visible {
  background: rgba(201, 162, 39, .14); outline: none;
}
.pf-vorschlaege b { color: var(--gold); font-variant-numeric: tabular-nums; }

/* Ein Haken mit Text daneben, nicht untereinander. */
/* Der Haken und darunter der Umschalter Versand | Rechnung.
   Seit dem 2026-10-08 in dieser Folge (Bastian): der Haken ist die Frage,
   der Umschalter ihre Folge - es gibt ihn ueberhaupt nur, weil der Haken
   gesetzt ist. Bis dahin stand er umgekehrt, mit der Begruendung, der Haken
   duerfe nicht "ganz unten als Nachtrag" erscheinen; das Argument war
   richtig und die Lehre daraus die falsche - er gehoerte nach OBEN, nicht
   in die Mitte. */
.pf-abs > .pf-schalter { margin: 0 0 11px; }
.pf-abs .pf-chips { margin-bottom: 13px; }
.pf-schalter { display: flex; gap: 9px; align-items: flex-start; cursor: pointer; }
.pf-schalter input { flex: none; width: 16px; height: 16px; margin-top: 2px; accent-color: var(--gold); }
.pf-schalter span { font-size: 13px; line-height: 1.45; }

/* Der gezeichnete Haken (Bastian, 2026-10-08: "pass die Checkbox an die UI
   an. Wir haben ja eine auf der Aussehen-Seite. Nimm natuerlich da nur die
   Styles ohne die Groesse - die Groesse bleibt hier normal.").

   Deshalb ist die GESTALT hier gemeinsam und die GROESSE unten getrennt:
   .pf-nur ist der kleine, zurueckhaltende Haken ueber dem Bilderraster,
   .ist-eckig derselbe in normaler Groesse im Formular. Zwei Abschriften
   derselben Zeichnung wuerden beim naechsten Nachbessern auseinanderlaufen -
   genau das ist der Grund, warum er ueberhaupt angeglichen wird. */
.pf-schalter.pf-nur input[type="checkbox"],
.pf-schalter.ist-eckig input[type="checkbox"] {
  appearance: none; -webkit-appearance: none; flex: none; position: relative;
  margin: 0; border-radius: 2px; cursor: pointer;
  background: rgba(0,0,0,.35); border: 1px solid var(--ink-mute);
  transition: border-color .15s, background-color .15s;
}
.pf-schalter.pf-nur:hover input[type="checkbox"],
.pf-schalter.ist-eckig:hover input[type="checkbox"] { border-color: var(--ink-dim); }
.pf-schalter.pf-nur input[type="checkbox"]:checked,
.pf-schalter.ist-eckig input[type="checkbox"]:checked { background: var(--gold); border-color: var(--gold); }
.pf-schalter.pf-nur input[type="checkbox"]:checked::after,
.pf-schalter.ist-eckig input[type="checkbox"]:checked::after {
  content: ""; position: absolute;
  border: solid #171310; border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.pf-schalter.pf-nur input[type="checkbox"]:focus-visible,
.pf-schalter.ist-eckig input[type="checkbox"]:focus-visible {
  outline: 1px solid var(--gold); outline-offset: 2px;
}

/* Klein: ueber dem Bilderraster im Reiter "Aussehen". */
.pf-schalter.pf-nur { justify-content: flex-end; align-items: center; gap: 7px; margin: 0 0 12px; }
.pf-schalter.pf-nur input[type="checkbox"] { width: 12px; height: 12px; }
.pf-schalter.pf-nur input[type="checkbox"]:checked::after {
  left: 3px; top: 0; width: 3px; height: 7px;
}
.pf-schalter.pf-nur span { font-size: 11.5px; line-height: 1.3; letter-spacing: .02em; color: var(--ink-mute); transition: color .15s; }
.pf-schalter.pf-nur:hover span, .pf-schalter.pf-nur input:checked + span { color: var(--ink-dim); }

/* Normal: im Formular, neben einem Satz in Lesegroesse. Der Haken waechst
   mit, die Schrift bleibt die des Formulars.

   OBEN ausgerichtet und nicht mittig: auf einem schmalen Schirm bricht die
   Beschriftung auf zwei Zeilen um, und ein Haken, der dann in der Mitte
   zwischen ihnen schwebt, gehoert zu keiner von beiden. Bei einer Zeile
   sieht man den Unterschied nicht. */
.pf-schalter.ist-eckig { align-items: flex-start; }
.pf-schalter.ist-eckig input[type="checkbox"] { width: 16px; height: 16px; margin-top: 2px; }
.pf-schalter.ist-eckig input[type="checkbox"]:checked::after {
  left: 5px; top: 1.5px; width: 3.5px; height: 8.5px;
}

.pf-knopfreihe { display: flex; flex-wrap: wrap; gap: 8px; }

/* Gruppenüberschrift im Reiter „Konto" (2026-10-05). Sie trennt ANMELDUNG
   von VERSAND, ohne eine zweite Klappebene einzuführen - zwei Ebenen zum
   Aufklappen wären genau das Sammelsurium, das weggehen sollte. */
/* `.overlay-card p` (0-1-1) schlaegt `.pf-gruppe` (0-1-0) und setzte den
   oberen Abstand auf null - die Ueberschrift klebte an der Kurzfassung des
   Abschnitts darueber. Gemessen, nicht geraten: getComputedStyle sagte
   marginTop 0px, obwohl 34 dastand. Deshalb hier eine Klasse mehr. */
.overlay-card .pf-gruppe {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px;
  /* 34 oben, nicht 22: darueber steht ein zugeklappter Abschnitt mit seiner
     Kurzfassung, und mit weniger Abstand liest sich die Ueberschrift wie
     dessen Fortsetzung statt wie ein neuer Block. */
  margin: 34px 0 10px; padding-bottom: 5px;
  border-bottom: 1px solid var(--panel-edge);
  font: 800 11px var(--font); letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--gold);
}
.overlay-card .pf-gruppe small {
  font: 400 12px var(--font); letter-spacing: 0; text-transform: none;
  color: var(--ink-mute);
}

/* Die Kurzfassung neben dem Titel eines zugeklappten Abschnitts. Sie bricht
   NICHT um und wird abgeschnitten: eine Überschrift, die auf drei Zeilen
   wächst, ist keine Überschrift mehr. */
/* Zustandslicht im Abschnittskopf (Bastian, 2026-10-08: "ein rotes oder
   grünes Licht"). Dasselbe `.gm-licht` wie der Kontopunkt im Burgermenue -
   ein zweites Licht mit eigenen Farben waere derselbe Gedanke zweimal.

   `vertical-align: middle` statt Flex: der Kopf ist ein Knopf mit
   `display: block` und traegt sein Dreieck als ::before. Ein Flexkasten
   daraus zu machen haette das Dreieck zu einem eigenen Kind gemacht und die
   Einrueckung der Kurzfassung mitgerissen. */
/* Eine Zeile in der Vorschlagsliste, die KEIN Vorschlag ist - heute nur
   "das Verzeichnis ist nicht eingelesen". Nicht anklickbar, und deutlich
   anders als ein Treffer, damit niemand darauf zielt. */
/* Der Hinweis unter dem Strassenfeld (2026-10-08). Gedaempft und in der
   Warnfarbe des Profils - er ist ein Hinweis, kein Fehler: speichern geht
   weiter, und wer in einem Neubaugebiet wohnt, hat nichts falsch gemacht. */
.pf-str-hinweis {
  margin: -2px 0 10px; padding: 0;
  font: 400 11.5px/1.45 var(--font); color: #d9c48a;
}
.pf-vor-leer {
  padding: 8px 10px; font: 400 12px/1.4 var(--font);
  color: var(--ink-mute); font-style: italic;
}

/* Das Licht steht VOR dem Wort in der Zeile unter dem Titel (Bastian,
   2026-10-08). Es sitzt damit in .pf-abs-kurz, nicht mehr hinter der
   Ueberschrift - zwei Zustandsanzeigen an zwei Orten waeren eine zu viel. */
.pf-abs-licht {
  display: inline-block; vertical-align: baseline;
  margin-right: 7px; position: relative; top: 0;
  width: 8px; height: 8px;
}

/* Der Schaukasten eines ANDEREN Spielers (CSProfile.schaukasten). Er steht
   in der Freundesliste und im Mehrspieler-Dialog; die Grundform wohnt hier
   bei den Abzeichen, die Fenster legen nur noch ihre eigenen Regeln
   darueber (blasser, wenn jemand nicht da ist; weg auf dem Telefon). */
.pf-kasten-fremd { flex: 0 0 auto; display: flex; align-items: center; gap: 5px; }
.pf-ab-fremd { flex: none; display: block; line-height: 0; }

.pf-abs-kurz {
  /* Eingerueckt auf die Hoehe des Titels: davor steht das Dreieck
     (.pf-klapp button::before) samt geschuetztem Leerzeichen. Ohne den
     Einzug beginnt die Kurzfassung unter dem Dreieck und sieht aus wie ein
     eigener Absatz statt wie ein Untertitel. */
  display: block; margin-top: 2px; padding-left: 1.1em;
  font: 400 12px/1.4 var(--font); letter-spacing: 0; text-transform: none;
  color: var(--ink-mute);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Zwei Spalten im Reiter „Konto" (2026-10-05, Bastian: „Ich denke wir
   bekommen vielleicht zwei Spalten hin").

   Das Raster folgt der BREITE DER FORMULARE, nicht der Optik: links und
   rechts stehen schmale Sachen (Listen, ein Feld, ein Knopf), die Anschriften
   unten über beide Spalten — ihre Felder sind selbst schon zweispaltig
   (Vorname / Nachname, Straße / Nummer), in einer halben Spalte würden
   daraus wieder acht Zeilen untereinander. */
.overlay-card .pf-spalten {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0 30px; align-items: start;
}
/* Die Gruppenüberschrift beginnt in den BEIDEN OBEREN Spalten ohne Vorlauf —
   sonst stünden ihre Köpfe auf verschiedener Höhe. Der breite Block darunter
   ist davon ausgenommen: er fängt eine neue Zeile an und braucht den vollen
   Abstand, sonst liest er sich als Fortsetzung der linken Spalte. Genau das
   war beim ersten Anlauf zu sehen. */
.overlay-card .pf-spalte:not(.pf-spalte-breit) > .pf-gruppe:first-child { margin-top: 2px; }

/* 980 und nicht 620: Die Spalten werden zu eng, lange bevor der Schirm
   schmal ist — „Anmeldung in zwei Schritten" bricht dann in der Überschrift
   um. Gemessen am Fenster, nicht geraten. */
@media (max-width: 980px) {
  .overlay-card .pf-spalten { grid-template-columns: 1fr; }
}

/* Ladenrahmen im Profilfenster (2026-10-07): Weg zum Quartiermeister */
a.pf-frame { position: relative; text-decoration: none; }
.pf-frame.is-laden .pf-medal { opacity: .55; }
.pf-frame.is-laden:hover .pf-medal { opacity: .9; }
.pf-frame.is-laden .pf-mark { right: 6px; top: 6px; bottom: auto; width: 18px; height: 18px; }

/* Erfolgszeichen, noch nicht verdient (2026-10-19) - wie die Erfolgsbilder */
.pf-sym.ist-verdienen { position: relative; display: block; overflow: visible; cursor: default; }
.pf-sym.ist-verdienen svg { filter: grayscale(.75) brightness(.55); }

/* Symbole ueber die ganze Breite wie Rahmen und Farben (Bastian,
   2026-10-19): acht Spalten zu 1fr, die Kaesten werden breiter, das Zeichen
   behaelt seine Groesse und steht mittig. */
.pf-symbols { grid-template-columns: repeat(8, minmax(0, 1fr)); }
.pf-sym { aspect-ratio: auto; height: 72px; display: grid; place-items: center; box-sizing: border-box; }
.pf-sym svg { width: 60px; height: 60px; }
@media (max-width: 700px) { .pf-symbols { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.pf-sym.is-laden, .pf-sym.ist-verdienen { display: grid; place-items: center; }

/* Erfolgsmarke im Symbolfeld wieder klein (2026-10-20): ".pf-sym svg
   { 60px }" weiter oben traf auch das SVG der Marke - sie wurde 60 px gross
   und hing unter den Kacheln. Hier spezifischer, und ohne den Grauschleier
   des gesperrten Zeichens. */
.pf-sym .pf-mark svg, .pf-sym .pf-m-erf svg { width: 20px; height: 20px; filter: none; }

/* Reiter "Gefechte" (29.10.2026): Aufzeichnungen zum Nachspielen.
   Ueberarbeitet am selben Tag (Bastian: "optisch noch etwas aufwerten"):
   je Gefecht der Kopf des Gegners, Kennzahlen als Marken,
   der Satz zur Aufbewahrung als Hinweis mit Abstand. */
.pf-gf-liste { display: grid; gap: 8px; }
.pf-gf {
  display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; align-items: center; gap: 14px;
  padding: 10px 14px 10px 10px; border: 1px solid #3b3025; border-left: 4px solid #5a4d33; border-radius: 7px;
  background: linear-gradient(90deg, #1f1912 0%, #18140f 60%); color: var(--ink); text-decoration: none;
  transition: border-color .12s, background-color .12s, transform .12s;
}
.pf-gf { cursor: pointer; }
.pf-gf:hover, .pf-gf:focus-within { border-color: #6b5426; background: #221b13; }
.pf-gf:hover .pf-gf-play, .pf-gf-play:focus-visible { background: var(--gold); }
.pf-gf:hover .pf-gf-play svg, .pf-gf-play:focus-visible svg { fill: #1a140d; }
.pf-gf-play:focus-visible, .pf-gf-zeichen:focus-visible, .pf-gf-name:focus-visible, .pf-gf-fi:focus-visible {
  outline: 2px solid var(--gold); outline-offset: 2px;
}
.pf-gf.ist-sieg { border-left-color: #7fa05f; background: linear-gradient(90deg, #1c2015 0%, #18140f 55%); }
.pf-gf.ist-niederlage { border-left-color: #a4553f; background: linear-gradient(90deg, #221612 0%, #18140f 55%); }
.pf-gf-kopf { width: 64px; height: 64px; display: block; }
.pf-gf-kopf .pf-medal { width: 64px; height: 64px; display: block; }
.pf-gf.ist-sieg .pf-gf-kopf { filter: saturate(.55) brightness(.85); }   /* der Unterlegene, wie in der Lage des Gefechts */
.pf-gf-mitte { display: grid; gap: 4px; min-width: 0; }
.pf-gf-zeile1 { display: flex; align-items: baseline; gap: 7px; min-width: 0; }
.pf-gf-zeile1 small { font-size: 11px; color: var(--ink-mute); flex: none; }
.pf-gf-zeile1 b { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-gf-erg {
  flex: none; padding: 2px 7px; border-radius: 3px; background: #2c251b;
  font: 700 10.5px/1.3 var(--font); letter-spacing: .07em; text-transform: uppercase; color: var(--ink-dim);
}
.pf-gf.ist-sieg .pf-gf-erg { background: #2c3a20; color: #b9d79a; }
.pf-gf.ist-niederlage .pf-gf-erg { background: #3c221a; color: #e09a7a; }
.pf-gf-meta { display: flex; align-items: center; gap: 5px; min-width: 0; font-size: 11.5px; color: var(--ink-mute); }
.pf-gf-meta > span:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-left: 4px; }
.pf-gf-fahne { display: inline-flex; flex: none; }
.pf-gf-fahne .cs-emblem { width: 18px; height: 18px; }
.pf-gf-vs { font-size: 10px; color: var(--ink-mute); }
.pf-gf-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.pf-gf-chip {
  display: inline-flex; align-items: center; gap: 4px; padding: 1px 7px 1px 5px;
  border: 1px solid #3b3025; border-radius: 10px; background: #15110c;
  font-size: 11px; color: var(--ink-dim); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.pf-gf-chip svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pf-gf-chip.ist-plus svg { color: #a9c98a; }
.pf-gf-chip.ist-minus svg { color: #d08a6a; }
.pf-gf-chip.ist-ende { color: var(--ink-mute); }
.pf-gf-rechts { display: grid; justify-items: end; gap: 8px; }
.pf-gf-knoepfe { display: flex; align-items: center; gap: 6px; }

/* Lesezeichen "behalten" (29.10.2026) */
.pf-gf-zeichen {
  appearance: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid #3b3025; background: transparent; color: var(--ink-mute); cursor: pointer; padding: 0;
}
.pf-gf-zeichen svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }
.pf-gf-zeichen:hover:not(:disabled) { color: var(--gold); border-color: #6b5426; }
.pf-gf-zeichen.is-on { color: var(--gold); border-color: #6b5426; }
.pf-gf-zeichen.is-on svg { fill: var(--gold); }
.pf-gf-zeichen:disabled { opacity: .35; cursor: default; }
.pf-gf.ist-behalten { box-shadow: inset 0 0 0 1px rgba(201, 162, 39, .28); }

/* Name eines Mitspielers: oeffnet seinen Steckbrief */
.pf-gf-name {
  appearance: none; border: 0; background: none; padding: 0; cursor: pointer; color: var(--ink);
  font: 700 14px var(--font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  text-decoration: underline dotted rgba(201, 162, 39, .55); text-underline-offset: 3px;
}
.pf-gf-name:hover { color: var(--gold); }

/* Filter */
.pf-gf-filter { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.pf-gf-fi {
  appearance: none; display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  padding: 4px 10px; border: 1px solid #3b3025; border-radius: 14px; background: #15110c;
  font: 600 11.5px var(--font); color: var(--ink-dim);
}
.pf-gf-fi small { font-size: 10.5px; color: var(--ink-mute); font-variant-numeric: tabular-nums; }
.pf-gf-fi:hover { border-color: #6b5426; color: var(--ink); }
.pf-gf-fi.is-on { border-color: var(--gold); background: #2a2113; color: var(--gold); }
.pf-gf-fi.is-on small { color: var(--gold); }
.pf-gf-fi.ist-leer { opacity: .45; }

/* Wertung als Marke */
.pf-gf-chip.ist-hoch { color: #b9d79a; }
.pf-gf-chip.ist-runter { color: #e09a7a; }

/* Steckbrief des Mitspielers */
.pf-gf-zurueck {
  appearance: none; display: inline-flex; align-items: center; gap: 4px; margin: 0 0 14px; padding: 4px 8px 4px 2px;
  border: 0; background: none; cursor: pointer; font: 600 12px var(--font); color: var(--ink-dim);
}
.pf-gf-zurueck svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.pf-gf-zurueck:hover { color: var(--gold); }
.pf-gf-sb {
  display: flex; gap: 22px; align-items: flex-start; padding: 18px;
  border: 1px solid #3b3025; border-radius: 8px; background: #17130e;
}
.pf-gf-sb-bild { flex: none; width: 120px; height: 120px; }
.pf-gf-sb-bild .pf-medal { width: 100%; height: 100%; }
.pf-gf-sb-text { min-width: 0; display: grid; gap: 6px; }
.pf-gf-sb-text h4 { margin: 0; font: 800 20px var(--font); color: var(--ink); }
.pf-pick .pf-gf-sb-text p { margin: 0; font-size: 12.5px; line-height: 1.5; }
.pf-pick p.pf-gf-sb-zeile { color: var(--ink-mute); }
.pf-pick p.pf-gf-sb-frei { color: var(--ink-dim); font-style: italic; white-space: pre-line; }
.pf-pick p.pf-gf-sb-bilanz { color: var(--ink); }
.pf-gf-sb-taten { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
@media (max-width: 560px) {
  .pf-gf-sb { flex-direction: column; align-items: center; text-align: center; }
  .pf-gf-sb-taten { justify-content: center; }
}
.pf-gf-wann { font-size: 11px; color: var(--ink-mute); white-space: nowrap; font-variant-numeric: tabular-nums; }
.pf-gf-play {
  width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid #6b5426; background: #241c12; transition: background-color .12s;
}
.pf-gf-play svg { width: 15px; height: 15px; fill: var(--gold); margin-left: 2px; }
/* Mit .pf-pick davor: ".overlay-card p" (style.css) setzt sonst Abstand und
   Schriftgroesse jedes Absatzes im Dialog - daran lag der fehlende Abstand. */
.pf-pick p.pf-gf-hinweis {
  display: flex; gap: 9px; align-items: flex-start; margin: 18px 0 0; padding: 10px 12px;
  border: 1px solid #3b3025; border-left: 3px solid var(--gold); border-radius: 6px; background: #17130e;
  font-size: 12px; line-height: 1.5; color: var(--ink-dim);
}
.pf-gf-hinweis svg { flex: none; width: 16px; height: 16px; margin-top: 1px; fill: none; stroke: var(--gold); stroke-width: 2; stroke-linecap: round; }
.pf-pick .pf-leer + p.pf-gf-hinweis { margin-top: 12px; }
@media (max-width: 560px) {
  .pf-gf { grid-template-columns: 48px minmax(0, 1fr); gap: 10px; }
  .pf-gf-kopf, .pf-gf-kopf .pf-medal { width: 48px; height: 48px; }
  .pf-gf-rechts { grid-column: 1 / -1; grid-template-columns: 1fr auto; align-items: center; justify-items: start; }
  .pf-gf-knoepfe { justify-self: end; }
}