/* ==========================================================================
 * arena_clanlist.css — CLAN-DURCHSUCHEN (die Ebene VOR der Innenansicht)
 * --------------------------------------------------------------------------
 * Vorbild: _ui_ref/screens/clans.jpg (AA). Alle Masse sind AM BILD GEMESSEN,
 * nicht geschaetzt. Das Bild ist 1320 px breit; unsere Entwurfsbreite ist
 * 430 px, der Massstab also 430/1320 = 0,32576.
 *
 *   AA gemessen (Originalpixel)        ->  bei 430 px
 *   Reihenkarte hoch      167          ->  54,4
 *   Luecke zwischen Reihen 35,5        ->  11,6
 *   Reihen-Rasterschritt  202,5        ->  66,0
 *   Karte breit          1250          ->  407,3   (Seitenrand 11,4)
 *   Werkzeugleiste hoch   162..171     ->  53..56
 *   Create-Knopf         300 x 115     ->  97,7 x 37,5
 *   Suchfeld             860 x 107     ->  280,2 x 34,9
 *   Lupenknopf im Feld    95 x 95      ->  30,9 x 30,9
 *   Wappen               135 x 135     ->  44,0 x 44,0
 *   Kleinstlabel „Min Peak Trophy Requirement“  ~22 -> 7,2
 *
 * ⚠ Der Auftrag nannte 123 px Reihenhoehe (= 40 bei 430), 54x32 fuer den
 *   Create-Knopf und 202x36 fuer das Suchfeld. Nachgemessen stimmen nur die
 *   HOEHEN grob; Reihe und Knopfbreiten sind deutlich groesser (siehe oben,
 *   Messkript im Bericht). Voreingestellt sind die GEMESSENEN Werte. Wer die
 *   Auftragswerte will, aendert genau diese drei Variablen im :root-Block
 *   unten — sonst nichts.
 *
 * Farben: Titelband, Werkzeugleiste und Dialog laufen auf den Hub-Tokens
 * (--panel, --panel2, --act, --gold, --radius*, --mat-*). Die LISTE SELBST
 * ist bewusst HELL — Founder-Regel vom 28.08.: „die helle Liste IST der
 * Hauptdarsteller, kein Kopfbild". Ihre fuenf Farbwerte stehen als
 * --acl-row-1/-2 und --acl-ink/-2/-gold im .aclist-Block und sind am
 * AA-Bild abgegriffen. Dieses Blatt setzt KEINE Hub-Variable um.
 * Die Rueckfaelle hinter jedem var() sind nur fuer die Testseite da, die
 * hub_new.html-CSS bewusst NICHT laedt.
 * ========================================================================== */

.aclist{
  /* --- gemessene AA-Geometrie (bei 430 px Breite) --- */
  --acl-row-h:54px;          /* AA 167 px */
  --acl-row-gap:12px;        /* AA 35,5 px */
  --acl-create-w:98px;       /* AA 300 px */
  --acl-create-h:37px;       /* AA 115 px */
  --acl-search-w:280px;      /* AA 860 px */
  --acl-search-h:35px;       /* AA 107 px */
  --acl-lupe:31px;           /* AA 95 px */
  --acl-bar-h:54px;          /* AA 162..171 px */
  --acl-crest:44px;          /* AA 135 px */
  --acl-side:11px;           /* AA 35 px Seitenrand */
  --acl-minlabel:6.6px;      /* AA ~22 px = 7,2 bei 430 — bewusst unter --fs-1 (11px),
                                sonst passt AAs Label nicht in seine Spalte */
  --acl-right-w:112px;       /* AA 340 px Rechtsspalte */
  --acl-fs-name:18px;
  --acl-fs-chip:11px;

  /* --- DIE HELLE LISTE (Founder-Regel 28.08.: „die helle Liste IST der
     Hauptdarsteller, kein Kopfbild"). Am AA-Bild abgegriffen, Reihe 1:
     Kartenoberkante rgb(194,212,224), Mitte rgb(178,201,215), Unterkante
     rgb(205,215,224); Name rgb(59,85,98); Kleinstlabel rgb(55,73,97);
     Open-Chip rgb(36,115,184). Unsere Tinte ist dunkler als AAs, weil AAs
     Name eine schwarze Kontur traegt und ohne die 4,91:1 zu knapp waere. */
  --acl-row-1:#c6d8e4;       /* Karte oben */
  --acl-row-2:#aec6d6;       /* Karte unten */
  --acl-ink:#1d3243;         /* Clanname */
  --acl-ink-2:#374961;       /* Kleinstlabel, Chipschrift */
  --acl-ink-gold:#5a3a06;    /* Trophaeenzahl — Goldfamilie, aber lesbar */

  display:block;
  width:100%;
  box-sizing:border-box;
  font-family:var(--font-display,"Baloo 2","Rubik",system-ui,sans-serif);
  color:var(--txt,#e4edf7);
  -webkit-tap-highlight-color:transparent;
}
.aclist *,.aclist *::before,.aclist *::after{box-sizing:border-box}

/* ---------- 1. Titelband ---------------------------------------------------
 * IM HUB AUSGESCHALTET LASSEN (opts.titel:false): hydrateArt() macht dort aus
 * jedem h2.title schon ein Goldband. Zwei identische Goldbaender uebereinander
 * waren in der Clan-Innenansicht bereits einmal ein sichtbarer Fehler
 * (hub_new.html, Kommentar bei #viewClan). Hier steht das Band nur fuer
 * Modul-Testseiten und fuer den Fall, dass die Liste ohne Hub-Kopf laeuft. */
.aclist .acl-title{
  margin:0 var(--acl-side) 10px;
  height:44px;line-height:44px;text-align:center;
  font-size:var(--fs-8,22px);font-weight:900;letter-spacing:.06em;
  color:var(--gold,#f2c53d);text-transform:uppercase;
  background:linear-gradient(180deg,var(--panel2,#132f51),var(--panel,#102743));
  border-radius:var(--radius,14px);
  box-shadow:var(--mat-raised,inset 0 1px 0 #ffffff2b,0 2px 5px -1px #0000008c);
  text-shadow:0 2px 0 #00000073;
}

/* ---------- 2. Werkzeugleiste: Create + Suche ------------------------------
 * AA legt beides in EIN gerahmtes Feld (dort goldgelb). Wir behalten die
 * Anordnung und das Feld, nur in der Hub-Farbwelt. */
.aclist .acl-bar{
  display:flex;align-items:center;gap:9px;
  margin:0 var(--acl-side) var(--acl-row-gap);
  padding:0 8px;
  height:var(--acl-bar-h);
  background:linear-gradient(180deg,var(--panel2,#132f51),var(--panel,#102743));
  border-radius:var(--radius,14px);
  box-shadow:var(--mat-raised,inset 0 1px 0 #ffffff2b,0 2px 5px -1px #0000008c);
}

/* Create — die Handlungsfarbe des Hubs (--act/--act-2 + --act-sockel).
   Genau der Verlauf, den hub_new.html 15-mal traegt; hier ueber die Tokens. */
.aclist .acl-create{
  flex:0 0 var(--acl-create-w);
  width:var(--acl-create-w);height:var(--acl-create-h);
  border:0;cursor:pointer;
  border-radius:var(--radius-sm,10px);
  background:linear-gradient(180deg,var(--act,#468ce1),var(--act-2,#1b5ba9));
  box-shadow:inset 0 1.5px 0 #ffffff45,inset 0 -1px 0 #00000055,
             0 3px 0 var(--act-sockel,#11498c),0 4px 8px -2px #0000008c;
  color:#fff;font-family:inherit;font-size:var(--fs-6,16px);font-weight:900;
  letter-spacing:.01em;text-shadow:0 2px 0 #00000059;
  display:flex;align-items:center;justify-content:center;
}

/* Suchfeld — versenkt (var(--mat-well)), wie jedes Eingabefeld im Hub. */
.aclist .acl-search{
  position:relative;flex:1 1 var(--acl-search-w);
  min-width:0;max-width:var(--acl-search-w);
  height:var(--acl-search-h);
  background:var(--bg,#0a192b);
  border-radius:var(--radius-sm,10px);
  box-shadow:var(--mat-well,inset 0 3px 8px #0000008c,inset 0 -1px 0 #ffffff1f);
}
.aclist .acl-search input{
  width:100%;height:100%;
  padding:0 calc(var(--acl-lupe) + 10px) 0 11px;
  border:0;outline:0;background:transparent;
  font-family:inherit;font-size:var(--fs-4,13px);font-weight:700;
  color:var(--txt,#e4edf7);
}
.aclist .acl-search input::placeholder{color:var(--dim,#7c9bc0);font-weight:700}
.aclist .acl-lupe{
  position:absolute;top:50%;right:2px;transform:translateY(-50%);
  width:var(--acl-lupe);height:var(--acl-lupe);
  border:0;cursor:pointer;
  border-radius:var(--radius-xs,6px);
  background:linear-gradient(180deg,var(--act,#468ce1),var(--act-2,#1b5ba9));
  box-shadow:inset 0 1px 0 #ffffff45,0 2px 0 var(--act-sockel,#11498c);
  color:#fff;font-size:15px;line-height:1;
  display:flex;align-items:center;justify-content:center;
}

/* ---------- 3. Die Liste ---------------------------------------------------
 * Eine Reihe ist EIN Knopf. AA hat in der Reihe keinen eigenen Aktionsknopf —
 * die Reihe selbst ist die Handlung. Deshalb traegt sie hier <button> und
 * nicht <div>: Tastatur, Fokus und disabled kommen dann geschenkt. */
.aclist .acl-rows{display:flex;flex-direction:column;gap:var(--acl-row-gap);
  margin:0 var(--acl-side)}

.aclist .acl-row{
  display:flex;align-items:center;gap:8px;
  width:100%;height:var(--acl-row-h);
  padding:0 7px 0 5px;
  border:0;cursor:pointer;text-align:left;
  font-family:inherit;color:var(--acl-ink);
  /* HELL, nicht --panel: das ist der eine bewusste Bruch mit der
     Hub-Farbwelt. Die Werkzeugleiste darueber bleibt Hub-Blau, damit die
     Liste der hellste Block auf dem Bildschirm ist und nichts mit ihr
     um die Aufmerksamkeit streitet. */
  background:linear-gradient(180deg,var(--acl-row-1),var(--acl-row-2));
  border-radius:var(--radius,14px);
  box-shadow:inset 0 2px 0 #ffffffcc,inset 0 -3px 0 #7e99ab5e,
             0 2px 5px -1px #00000073,0 0 0 1px #ffffff45;
}
.aclist .acl-row .acl-crest{
  flex:0 0 var(--acl-crest);width:var(--acl-crest);height:var(--acl-crest);
  display:flex;align-items:center;justify-content:center;
}
/* Die farbige Platte traegt die Clanfarbe (badge.color), das einfarbige
   Relief liegt darauf — dasselbe Prinzip wie .sbadge im Hub. */
.aclist .acl-plate{
  width:100%;height:100%;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  box-shadow:inset 0 2px 0 #ffffff59,inset 0 -3px 0 #00000047,
             0 0 0 1.5px #0000005e,0 2px 4px #00000073;
}
.aclist .acl-plate img{width:76%;height:76%;object-fit:contain;
  filter:drop-shadow(0 1px 2px #00000073)}
/* Buchstaben-Wappen: nur, wenn zu einem Clan kein Bild-Preset passt. */
.aclist .acl-letter{
  width:100%;height:100%;display:flex;align-items:center;justify-content:center;
  font-size:19px;font-weight:900;color:#fff;text-shadow:0 2px 0 #00000073;
}

.aclist .acl-main{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;
  justify-content:center;gap:3px}
.aclist .acl-name{
  font-size:var(--acl-fs-name);font-weight:900;line-height:1.05;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  color:var(--acl-ink);text-shadow:0 1px 0 #ffffff8c;
}
.aclist .acl-chips{display:flex;align-items:center;gap:6px;min-width:0}
.aclist .acl-chip{
  display:flex;align-items:center;gap:3px;flex:0 0 auto;
  height:18px;padding:0 6px 0 3px;
  border-radius:var(--radius-voll,999px);
  font-size:var(--acl-fs-chip);font-weight:900;line-height:1;
  background:#ffffff8c;box-shadow:inset 0 1px 0 #ffffffb3,0 0 0 1px #7e99ab4d;
  color:var(--acl-ink-2);
}
.aclist .acl-chip img{width:14px;height:14px;object-fit:contain;flex:0 0 14px}
/* Zugangs-Chips: gedeckte Vollfarbe mit weisser Schrift — auf der hellen
   Karte ist das der einzige Weg, der bei 11 px noch ueber 4,5:1 kommt.
   AA macht es genauso (Open-Chip gemessen rgb(36,115,184), weisse Schrift). */
.aclist .acl-chip.acl-open{background:#2473b8;color:#fff;box-shadow:inset 0 1px 0 #ffffff59}
.aclist .acl-chip.acl-req{background:#6b3fa0;color:#fff;box-shadow:inset 0 1px 0 #ffffff59}
.aclist .acl-chip.acl-full{background:#a8203f;color:#fff;box-shadow:inset 0 1px 0 #ffffff59}
.aclist .acl-chip.acl-tro{background:transparent;box-shadow:none;padding-left:0;
  color:var(--acl-ink-gold)}

/* Rechtsspalte: AAs „Min Peak Trophy Requirement“ ueber einer Trophaeen-Pille */
.aclist .acl-right{flex:0 0 var(--acl-right-w);width:var(--acl-right-w);
  display:flex;flex-direction:column;align-items:flex-end;gap:2px}
.aclist .acl-minlbl{
  font-size:var(--acl-minlabel);font-weight:900;letter-spacing:.02em;
  line-height:1;color:var(--acl-ink-2);white-space:nowrap;
  max-width:100%;overflow:hidden;
}
/* ⛑ 28.09.2026 (lane-fix_a, QA A-13) 6,6 px lag unter der 10-px-Untergrenze. Die Beschriftung
   nimmt die kleinste Tafelstufe (11 px, --acl-fs-chip) und bricht rechtsbuendig in zwei Zeilen um,
   statt auf AAs Pixelgroesse geschrumpft zu werden. */
.aclist .acl-minlbl{font-size:var(--acl-fs-chip);white-space:normal;text-align:right;line-height:1.05;overflow:visible}
.aclist .acl-minbox{
  display:flex;align-items:center;gap:4px;
  width:100%;height:20px;padding:0 8px 0 3px;
  border-radius:var(--radius-xs,6px);
  background:linear-gradient(90deg,#ffffffcc,#ffffff5e);
  box-shadow:inset 0 1px 3px #00000026,0 0 0 1px #7e99ab4d;
}
.aclist .acl-minbox img{width:16px;height:16px;object-fit:contain;flex:0 0 16px}
.aclist .acl-minbox b{flex:1;text-align:center;font-size:var(--fs-4,13px);
  font-weight:900;color:var(--acl-ink)}

/* Voll (40/40) — die Reihe bleibt lesbar, ist aber sichtbar tot.
   Auf der hellen Karte ist ABDUNKELN falsch (sie saehe schmutzig aus, nicht
   deaktiviert). ⚠ opacity() ist hier ebenfalls verboten: gemessen mit
   filter:grayscale(1) contrast(.86) opacity(.66) fiel der Name auf 3,93:1 —
   die Deckkraft mischt die helle Karte in den dunklen Grund. grayscale()
   allein laesst die Leuchtdichte in Ruhe und damit den Kontrast: alle Farbe
   ist weg (Wappen, Chip), die Schrift bleibt scharf. */
.aclist .acl-row[disabled],.aclist .acl-row.is-disabled{
  cursor:default;filter:grayscale(1) brightness(.95);
}

/* ---------- 4. Leer-/Ladezustand ------------------------------------------ */
.aclist .acl-empty{
  margin:0 var(--acl-side);padding:22px 12px;text-align:center;
  font-size:var(--fs-4,13px);font-weight:700;color:var(--acl-ink-2);
  background:linear-gradient(180deg,var(--acl-row-1),var(--acl-row-2));
  border-radius:var(--radius,14px);
  box-shadow:inset 0 2px 0 #ffffffcc,0 2px 5px -1px #00000073,0 0 0 1px #ffffff45;
}

/* ---------- 5. Create-Dialog ----------------------------------------------
 * Eigene Ebene im Container, damit die Liste dahinter stehen bleibt. */
.aclist-dlg{
  position:fixed;inset:0;z-index:400;
  display:flex;align-items:center;justify-content:center;padding:16px;
  background:rgba(3,11,20,.72);
  font-family:var(--font-display,"Baloo 2","Rubik",system-ui,sans-serif);
  color:var(--txt,#e4edf7);
}
.aclist-dlg *,.aclist-dlg *::before,.aclist-dlg *::after{box-sizing:border-box}
.aclist-dlg .acl-card{
  width:100%;max-width:330px;padding:14px;
  background:linear-gradient(180deg,var(--panel2,#132f51),var(--panel,#102743));
  border-radius:var(--radius,14px);
  box-shadow:var(--mat-raised-lg,0 10px 22px -6px #000000bf),0 0 0 1px #ffffff14;
}
.aclist-dlg h3{margin:0 0 12px;font-size:var(--fs-7,22px);font-weight:900;
  text-align:center;color:var(--gold,#f2c53d);text-shadow:0 2px 0 #00000073}
.aclist-dlg label{display:block;margin:0 0 4px;font-size:var(--fs-2,11px);
  font-weight:900;color:var(--dim,#7c9bc0)}
.aclist-dlg .acl-fld{margin-bottom:11px}
.aclist-dlg input{
  width:100%;height:34px;padding:0 10px;border:0;outline:0;
  background:var(--bg,#0a192b);border-radius:var(--radius-sm,10px);
  box-shadow:var(--mat-well,inset 0 3px 8px #0000008c);
  font-family:inherit;font-size:var(--fs-4,13px);font-weight:700;
  color:var(--txt,#e4edf7);
}
.aclist-dlg .acl-seg{display:flex;gap:6px}
.aclist-dlg .acl-seg button{
  flex:1;height:32px;border:0;cursor:pointer;
  border-radius:var(--radius-sm,10px);
  background:var(--bg,#0a192b);box-shadow:var(--mat-sunken,inset 0 2px 5px #00000073);
  font-family:inherit;font-size:var(--fs-3,11px);font-weight:900;
  color:var(--dim,#7c9bc0);
}
.aclist-dlg .acl-seg button.on{
  background:linear-gradient(180deg,var(--act,#468ce1),var(--act-2,#1b5ba9));
  box-shadow:inset 0 1.5px 0 #ffffff45,0 2px 0 var(--act-sockel,#11498c);
  color:#fff;
}
.aclist-dlg .acl-err{min-height:15px;margin:0 0 8px;font-size:var(--fs-2,11px);
  font-weight:900;color:var(--danger,#ff5e7e)}
.aclist-dlg .acl-actions{display:flex;gap:8px}
.aclist-dlg .acl-actions button{
  flex:1;height:38px;border:0;cursor:pointer;font-family:inherit;
  border-radius:var(--radius-sm,10px);font-size:var(--fs-6,16px);font-weight:900;
  color:#fff;text-shadow:0 2px 0 #00000059;
}
.aclist-dlg .acl-ok{
  background:linear-gradient(180deg,var(--act,#468ce1),var(--act-2,#1b5ba9));
  box-shadow:inset 0 1.5px 0 #ffffff45,0 3px 0 var(--act-sockel,#11498c);
}
/* ⛑ 30.09.2026 (Founder-Entscheid "Clans werden ECHT") MITGLIEDER-FENSTER +
   MELDEN/BLOCKIEREN — dieselbe .aclist-dlg/.stbox-Vorlage wie der Gruenden-
   Dialog darueber, keine neuen Farben (aus der Styletafel: --panel/--text/
   --act/--danger). Kompakte Zeilen statt Karten, weil bis zu 50 Mitglieder
   in dasselbe Fenster passen muessen. */
.cmlist{max-height:38vh;overflow-y:auto;margin-bottom:6px}
.cmrow{display:flex;align-items:center;gap:6px;padding:7px 4px;
  border-bottom:1px solid var(--line,#2a3f5c)}
.cmrow:last-child{border-bottom:0}
.cmrow.me{background:#ffffff0d;border-radius:var(--radius-sm,10px)}
.cmname{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;font-size:var(--fs-3,12px);font-weight:800;color:var(--text,#e9f1ff)}
.cmrolle{flex:0 0 auto;font-size:var(--fs-2,11px);color:var(--sub,#9fb3d6)}
.cmtro{flex:0 0 auto;display:flex;align-items:center;gap:3px;
  font-size:var(--fs-2,11px);font-weight:900;color:var(--gold,#f4e3a6)}
.cmtro img{width:13px;height:13px}
.cmbtns{flex:0 0 auto;display:flex;align-items:center;gap:5px}
.cmbtns .ap-knopf.klein{height:26px;padding:0 8px;font-size:var(--fs-1,10px)}
.cmmore{width:26px;height:26px;border:0;border-radius:50%;cursor:pointer;
  background:#ffffff14;color:var(--text,#e9f1ff);font-size:14px;line-height:1}
.cmreqhead{margin:10px 0 4px;font-size:var(--fs-3,12px);font-weight:900;
  color:var(--sub,#9fb3d6);text-transform:uppercase;letter-spacing:.02em}
.cmreqlist{max-height:22vh;overflow-y:auto}
.aclist-dlg .acl-cancel{
  background:linear-gradient(180deg,#2b4a75,#1a3252);
  box-shadow:inset 0 1.5px 0 #ffffff2b,0 3px 0 #102743;
}

/* ---------- 6. Druckverhalten ----------------------------------------------
 * hub_new.html installiert global einen pointerdown-Zuhoerer, der jedem
 * .pressable-Element die Klasse .pressed gibt (installPress()). Wir liefern
 * hier nur das AUSSEHEN dazu — und einen :active-Rueckfall fuer die
 * Testseite, auf der jener Zuhoerer nicht existiert. */
.aclist .pressable,.aclist-dlg .pressable{
  transition:transform 90ms ease,filter 90ms ease;
}
.aclist .pressable.pressed,.aclist-dlg .pressable.pressed,
.aclist .pressable:active,.aclist-dlg .pressable:active{
  transform:scale(.96);filter:brightness(.85);
}
.aclist .pressable[disabled]:active{transform:none;filter:none}

/* ---------- 7. Eigener Toast ------------------------------------------------
 * Nur der Rueckfall: im Hub uebernimmt window.toast(). */
.aclist-toast{
  position:fixed;left:50%;bottom:64px;transform:translateX(-50%);z-index:500;
  max-width:82vw;padding:9px 14px;
  background:#0c2340;
  border-radius:var(--radius-voll,999px);
  box-shadow:0 6px 16px -4px #000000bf,0 0 0 1px #ffffff1f;
  font-family:var(--font-display,"Baloo 2","Rubik",system-ui,sans-serif);
  font-size:var(--fs-3,11px);font-weight:900;color:var(--txt,#e4edf7);
  text-align:center;pointer-events:none;
}

/* ==========================================================================
 * AA-5 — GRUPPE G3 „KLAN + SOZIAL" 1:1 NACH AA (10.09.2026)
 * Vorbilder: _ui_ref/aa_2026/clan.png · clan_spende_popup.png · freunde.png ·
 *            rangliste_champions_peak.png
 * --------------------------------------------------------------------------
 * WARUM DIESER BLOCK HIER UND NICHT IN hub_new.html:
 *   An diesem Durchgang arbeiten fuenf Gruppen-Agenten GLEICHZEITIG. Jeder
 *   von ihnen wuerde seinen CSS-Block an dasselbe `</style>` am Ende des
 *   Blattes haengen — und genau dieser Anker ist nach der ERSTEN Anwendung
 *   verbraucht (der Suchtext existiert dann nicht mehr). Der zweite Patch
 *   scheitert mit 0 Treffern. arena_clanlist.css gehoert AA-5 allein, also
 *   liegt der Block hier; hub_new.html bekommt nur Markup-Anker.
 *
 * ⚠ LADEREIHENFOLGE: diese Datei steht in <head> VOR dem grossen <style>.
 *   Bei gleicher Spezifitaet gewinnt deshalb das Blatt. Jede Regel hier
 *   traegt darum `body.ukskin #app <view>` — eine Stufe mehr als die
 *   Blattregeln. Nachgemessen wird mit getComputedStyle, nicht geglaubt.
 *
 * MASSSTAB: AA-Bildpunkt -> --aa.  1320 px Bild = 440 CSS bei DPR 3,
 *   unsere Entwurfsbreite 430. Faktor 430/1320 = 0,32576.
 *   Alle Zahlen unten sind AM BILD gemessen (Kantenprofile), nicht geraten.
 *
 * FARBEN (staerkster 4-Bit-Kuebel je Flaeche, echtes RGB-Mittel darin):
 *   clan.png    Grund #031833 · Titelband #46CBF9->#2094FE · Kopfkarte
 *               #FAD42B->#FEA302->#E98408 · Feedzeile rot #FF8989->#E13C3C ·
 *               Feedzeile gelb #FFED98->#F5D33E · Feedzeile blau #65BEF9->#3574B7 ·
 *               Spendenkopf lila #982CFE · Spendenkoerper #E0C0F9->#CAADE0 ·
 *               Balkenrinne #2A003E · Balken gruen #48D948 ·
 *               Knopf Request #94AAB7->#6A8899 · Friendly #08EBF7->#01C4F2 ·
 *               Chat #FEF866->#F4D708
 *   freunde.png Blatt #8BA9D8 (= AA-4s .stbox, unveraendert) ·
 *               Liste innen #3E5170 · Add-Friend #FE9B03->#FBB712
 *   rangliste   Kopfbalken #5D00AE->#4D06B9 · Zeile #4A6091->#435880 ·
 *               Listengrund #1B1435
 *   spende      Blatt #EAA941->#ECB246 · Rahmen #FAE379 · Band #F4CB44->#F2A83B ·
 *               Ok #AAF14E->#74D944
 * ========================================================================== */

/* ---------- 8. TITELBAND (AA hat UEBERALL ein blaues Band) -----------------
 * AA fuehrt JEDE Ansicht mit demselben blauen Band mit Pfeilenden an; wir
 * tragen ein goldenes Filigranband (Asset `banner_title`, ueber hydrateArt
 * global gesetzt). Das global umzustellen betraefe ALLE Gruppen und damit
 * die Arbeit der anderen vier Agenten — deshalb steht es hier NUR fuer die
 * drei Ansichten dieser Gruppe, als vorzeigbares Muster. Die Entscheidung,
 * ob es global gilt, gehoert dem Founder (offener Punkt im Bericht). */
body.ukskin #app #viewClan .viewhead .title,
body.ukskin #app #viewBoard .viewhead .title{
  background:linear-gradient(180deg,#5FD6FB 0,#2FAEFB 46%,#1E8DFC 100%) !important;
  border:calc(2*var(--aa)) solid #8CE0FF;
  border-radius:var(--ap-r-kachel);
  box-shadow:0 calc(3*var(--aa)) calc(6*var(--aa)) #0007;
  color:#fff;-webkit-text-fill-color:#fff;
  text-shadow:0 calc(2*var(--aa)) 0 #0B4E8E,0 0 calc(4*var(--aa)) #0009;
  min-height:calc(27*var(--aa));
  display:flex;align-items:center;justify-content:center;
  /* hydrateArt() legt `banner_title.webp` als border-image auf JEDEN
     h2.title. Ohne das Zuruecknehmen liegt AAs Filigran-Gold weiter auf
     dem blauen Band — im Bild sofort als Doppelrahmen zu sehen. */
  border-image-source:none !important;
  /* 14 --aa Luft links und rechts, damit die Pfeilflaggen Platz haben und
     die linke nicht unter dem Rueckknopf verschwindet (gemessen: Knopf endet
     bei x 68, Band begann bei 73 — die Flagge lag bei 61..76 darunter). */
  margin-left:calc(14*var(--aa));margin-right:calc(14*var(--aa));
  position:relative;overflow:visible}
/* AAs Band traegt links und rechts eine dunklere Pfeilflagge, die ueber die
   Bandkante hinaussteht — clan.png x 20..70 bzw. 1250..1300. Sie ist reines
   Chrome und deshalb ::before/::after, kein Bildplatz. */
body.ukskin #app #viewClan .viewhead .title::before,
body.ukskin #app #viewBoard .viewhead .title::before,
body.ukskin #app #viewClan .viewhead .title::after,
body.ukskin #app #viewBoard .viewhead .title::after{
  content:"";position:absolute;top:calc(4*var(--aa));bottom:calc(4*var(--aa));
  width:calc(15*var(--aa));background:#0A5FC4;
  border:calc(2*var(--aa)) solid #8CE0FF;border-radius:var(--ap-r-kachel)}
body.ukskin #app #viewClan .viewhead .title::before,
body.ukskin #app #viewBoard .viewhead .title::before{
  left:calc(-12*var(--aa));
  clip-path:polygon(100% 0,100% 100%,0 100%,45% 50%,0 0)}
body.ukskin #app #viewClan .viewhead .title::after,
body.ukskin #app #viewBoard .viewhead .title::after{
  right:calc(-12*var(--aa));
  clip-path:polygon(0 0,100% 0,55% 50%,100% 100%,0 100%)}

/* ---------- 9. CLAN — KOPFKARTE (gold) ------------------------------------
 * AA: y 360..536 Bildpunkte = 57,3 CSS440 = 56 --aa hoch, Seitenrand 11
 * CSS440 = 10,75 --aa. EINE Zeile: Wappen | Name + „Members online" |
 * Trophaeensumme. `bgArt()` schreibt das Hallenbild INLINE in
 * background-image — deshalb hier die Kurzform `background:` mit
 * !important; ohne sie bliebe die dunkle Halle unter dem Gold liegen. */
body.ukskin #app #viewClan .clanhead{
  background:linear-gradient(180deg,#F7D62F 0,#FEB50B 34%,#FEA302 64%,#E98408 100%) !important;
  border:calc(3*var(--aa)) solid #8A4819;
  border-radius:var(--ap-r-knopf);
  padding:calc(7*var(--aa)) calc(11*var(--aa));
  gap:calc(10*var(--aa));
  box-shadow:0 calc(3*var(--aa)) 0 #6B3A11;
  min-height:calc(56*var(--aa));overflow:hidden}
/* AAs Wappen ist 44 --aa breit; unsere Bannerform war 60 hoch und trieb
   die Karte auf 95,7 px. Gemessen an clan.png: Wappen y 372..524 = 49,5. */
body.ukskin #app #viewClan .clanhead .cbanner{
  flex:0 0 calc(44*var(--aa));width:calc(44*var(--aa));height:calc(50*var(--aa))}
/* Die Ambient-/Tint-Schichten der Karte wuerden das Gold wieder eintrueben. */
body.ukskin #app #viewClan .clanhead::before,
body.ukskin #app #viewClan .clanhead::after{display:none}
body.ukskin #app #viewClan .clanhead .cnm{
  font-size:var(--ap-t-titel);color:#fff;-webkit-text-fill-color:#fff;
  text-shadow:0 calc(2*var(--aa)) 0 #7A3B06,0 0 calc(3*var(--aa)) #00000059}
body.ukskin #app #viewClan .clanhead .conline{
  font-size:var(--ap-t-text);color:#fff;font-weight:900;
  text-shadow:0 calc(1.5*var(--aa)) 0 #7A3B06}
body.ukskin #app #viewClan .clanhead .conline b{color:#fff}
body.ukskin #app #viewClan .clanhead .odot{
  /* w2: Unschaerfe war calc(5*var(--aa)) = 4,57 px — krumm. Erlaubt sind seit s1 genau
     zwei Unschaerfen (0 und 2). Der Punkt behaelt seinen Schein, nur enger. */
  background:#31E23B;box-shadow:0 0 2px #31E23B}
body.ukskin #app #viewClan .clanhead .ctro{
  font-size:var(--ap-t-titel);color:#fff;-webkit-text-fill-color:#fff;
  text-shadow:0 calc(2*var(--aa)) 0 #7A3B06}
body.ukskin #app #viewClan .clanhead .ctro .ico{
  width:calc(22*var(--aa));height:calc(22*var(--aa))}
/* Der Zugang zur Clanhalle. AA hat an dieser Stelle NICHTS — die Karte ist
 * dort eine reine Kopfzeile. Loeschen kaeme aber nicht in Frage: er ist der
 * EINZIGE Weg zu Quests, Krieg und Aktivitaet (Begruendung im Markup). Er
 * bleibt deshalb in der Karte, aber als schmaler Streifen statt als Block,
 * damit die AA-Zeile ihre Hoehe behaelt. */
/* ⛑ 10.09.2026 (u3) TOTE REGEL GELOESCHT. Der Streifen sitzt seit AA-5b in
 * .clanhallrow UNTER der Goldkarte — dieser Selektor verlangt .clanhead als
 * Vorfahren und hat seither nichts mehr getroffen. Er trug einen Radius, eine
 * Schriftgroesse und zwei Farben, die niemand sah. */

/* ---------- 10. CLAN — GESCHEHEN (AAs farbige Zeilen) ---------------------
 * AA zeigt zwischen Kopfkarte und Spendenanfrage vier volle Zeilen
 * („Match Cancelled"), dann eine gelbe und eine blaue. Gemessen: Zeile
 * 102 Bildpunkte hoch = 33,2 --aa, Rasterschritt 129 = 42 --aa (Luecke 8,8).
 * Die Daten liegen seit jeher in ArenaClan.feed() — sie wurden im Hub nur
 * nie gezeigt. Erzeugt wird also nichts Neues, es wird sichtbar gemacht. */
body.ukskin #app #viewClan .clanfeed{margin-top:calc(9*var(--aa))}
body.ukskin #app #viewClan .clanfeed .cfrow{
  display:flex;align-items:center;justify-content:center;
  min-height:calc(33*var(--aa));margin-top:calc(8.8*var(--aa));
  padding:calc(4*var(--aa)) calc(12*var(--aa));
  border-radius:var(--ap-r-kachel);text-align:center;
  /* ⛑ 10.09.2026 (u3) 11 statt 13. AAs Geschehenzeilen sind EINZEILIG (clan.png);
     der Leiterlauf hatte 12,5*--aa auf die naechsthoehere Stufe gehoben, und
     "Lyra Stoneheart: Need cards — check the requests!" brach dadurch um. */
  font-size:var(--ap-t-klein);font-weight:900;line-height:1.2;
  color:#fff;-webkit-text-fill-color:#fff;text-shadow:0 calc(1.5*var(--aa)) 0 #00000073;
  background:linear-gradient(180deg,#FF8989,#E13C3C);
  border:calc(1.5*var(--aa)) solid #9E0F0F}
body.ukskin #app #viewClan .clanfeed .cfrow.k-win,
body.ukskin #app #viewClan .clanfeed .cfrow.k-chest{
  background:linear-gradient(180deg,#FFED98,#F5D33E);border-color:#A9800A;
  color:#3A2A00;-webkit-text-fill-color:#3A2A00;text-shadow:none}
body.ukskin #app #viewClan .clanfeed .cfrow.k-donate,
body.ukskin #app #viewClan .clanfeed .cfrow.k-help,
body.ukskin #app #viewClan .clanfeed .cfrow.k-request{
  background:linear-gradient(180deg,#65BEF9,#3574B7);border-color:#1B4B86}
/* ⛑ 17.09.2026 (arena-v455) EINGUSS_1709 Fund 3: Gruen (#8DE879/#3F9E2C) war die tragende
   Flaeche fuer Beitritts-/Clan-Zeilen und machte die ganze Ansicht zum einzigen gruenen
   Ausreisser unter den 18 Hauptansichten (Founder-Auftrag "gruen -> navy/Gold wie die uebrigen
   Hub-Ansichten"). Loss/Win/Donate/Emote bleiben ihre eigenen AA-gemessenen Farben (echte
   Bedeutungscodierung, nicht angefasst) — nur Gruen zieht auf die Dialogfamilie (--apd-bg-1/2,
   --apd-edge); .cfrow traegt bereits weisse Schrift, die auf Navy unveraendert lesbar bleibt.
   ⛑ AUFGEHOBEN DURCH FOUNDER-REFERENZ 27.09.2026 (aafix_2709/b): neues AA-Bild (aa_clan_feed.png)
   verlangt ausdruecklich Gruen fuer "Mitglied beigetreten" mit farbig hervorgehobenem Namen/Verb —
   Founder-Entscheid nach Ruecksprache: "Beitritt gruen bleibt, das neue Founder-Bild ist
   massgeblich (AA-treu)". Diese Zeile hier ist damit NICHT mehr gueltig, bleibt nur als
   Historie stehen. Gueltig ist die Regel weiter unten (.k-join gruen). k-filled/k-clan
   (Systemmeldungen wie "Clan founded") bleiben Navy/Gold — dafuer gibt es in keinem AA-Bild
   eine Entsprechung. k-leave (tuerkis, "has left" hervorgehoben) ist neu seit 27.09. */
body.ukskin #app #viewClan .clanfeed .cfrow.k-filled,
body.ukskin #app #viewClan .clanfeed .cfrow.k-clan{
  background:linear-gradient(180deg,#17365e,#0d2340);border-color:#c79a3f}
body.ukskin #app #viewClan .clanfeed .cfrow.k-join{
  background:linear-gradient(180deg,#8DE879,#3F9E2C);border-color:#1F6E12;
  color:#0B2A05;-webkit-text-fill-color:#0B2A05;text-shadow:none}
body.ukskin #app #viewClan .clanfeed .cfrow.k-leave{
  background:linear-gradient(180deg,#7CE7E1,#2FAFA8);border-color:#146560;
  color:#062522;-webkit-text-fill-color:#062522;text-shadow:none}
/* ⚠ .cfrow ist display:flex — ein roher Leerzeichen-Textknoten direkt neben einem Flex-Kind
   (hier .cfverb) wird von der Flex-Box am Rand abgeschnitten (Anonymous-Flex-Item-Regel),
   gemessen als "hasjoinedthe" ohne Leerraum. Feste margin statt echtem Leerzeichen umgeht das. */
body.ukskin #app #viewClan .clanfeed .cfrow .cfverb{margin:0 0.28em}
body.ukskin #app #viewClan .clanfeed .cfrow.k-join .cfverb{color:#0F5C08;-webkit-text-fill-color:#0F5C08}
body.ukskin #app #viewClan .clanfeed .cfrow.k-leave .cfverb{color:#7A1610;-webkit-text-fill-color:#7A1610}
body.ukskin #app #viewClan .clanfeed .cfrow.k-emote{
  background:linear-gradient(180deg,#B79AE7,#7A55C4);border-color:#3F2270}

/* ---------- 11. CLAN — SPENDENANFRAGE ------------------------------------
 * AA: dunkler, kraeftig gefaerbter Kopfstreifen ueber einem HELLEN Koerper.
 * Der Kopf traegt bei uns die ELEMENTFARBE der angefragten Karte (--t1) —
 * das ist eine unserer Ausnahmen von „1:1" (Verfahren Punkt 6), AAs Lila
 * waere hier ein Informationsverlust. Der helle Koerper ist AAs Lavendel. */
body.ukskin #app #viewClan .anfrage{
  margin-top:calc(10*var(--aa));border-radius:var(--ap-r-knopf);
  border:calc(3*var(--aa)) solid #2A003E;
  background:linear-gradient(180deg,#E4CDF8,#C9AADF)}
body.ukskin #app #viewClan .anfkopf{
  padding:calc(6*var(--aa)) calc(10*var(--aa)) calc(6*var(--aa)) calc(32*var(--aa));
  border-bottom:calc(2*var(--aa)) solid #00000045;
  background:linear-gradient(180deg,var(--t1,#A03FFE),
    color-mix(in srgb,var(--t1,#A03FFE) 74%,#000000))}
body.ukskin #app #viewClan .anfkopf .anfname{font-size:var(--ap-t-text)}
body.ukskin #app #viewClan .anfkopf .anffrage{font-size:var(--ap-t-klein)}
body.ukskin #app #viewClan .anfinfo{
  width:calc(24*var(--aa));height:calc(24*var(--aa));flex-basis:calc(24*var(--aa));
  border-radius:var(--ap-r-kachel);background:#00000059;border-color:#ffffff73}
body.ukskin #app #viewClan .anfkoerper{
  background:transparent;padding:calc(9*var(--aa)) calc(10*var(--aa));
  gap:calc(9*var(--aa))}
body.ukskin #app #viewClan .anfbild{
  flex-basis:calc(46*var(--aa));width:calc(46*var(--aa));
  border:calc(3*var(--aa)) solid #4D8FE8;border-radius:var(--ap-r-kachel);
  background-color:#12233F}
body.ukskin #app #viewClan .anfhast{
  background:#EBD9F9;border:calc(2*var(--aa)) solid #A780CE;
  border-radius:var(--ap-r-kachel);padding:calc(6*var(--aa)) calc(6*var(--aa))}
body.ukskin #app #viewClan .anfhast .hk{color:#5C3A7C}
body.ukskin #app #viewClan .anfhast b{color:#2A003E;font-size:var(--ap-t-titel)}
body.ukskin #app #viewClan .anfhast.leer b{color:#7C5C96}
/* AAs DONATE ist GRAU, weil dort nichts zu geben ist — der gesperrte
 * Zustand. Der spendbare Zustand ist bei AA gruen (der CLAIM-Knopf im
 * Geschenkstreifen). Genau so bleibt es hier: gruen = geht, grau = geht nicht. */
/* ⛑ 10.09.2026 (u3) DONATE traegt .ap-knopf.silber, gesperrt .ap-knopf.zu.
 * AAs Grau war hier zweimal gebaut (Blatt und Haut) — beide Fassungen sind weg.
 * Es bleibt nur die Breite in der Zeile, und die ist AAs Mass. */
body.ukskin #app #viewClan .anfspenden{flex-basis:calc(96*var(--aa))}
/* „Prints received:" steht bei AA UEBER dem Balken und der Balken laeuft
 * ueber die volle Kartenbreite — nicht als Zeile daneben. */
body.ukskin #app #viewClan .anffort{
  display:block;background:transparent;
  padding:0 calc(10*var(--aa)) calc(9*var(--aa))}
body.ukskin #app #viewClan .anffort .fk{
  display:block;text-align:center;color:#3E1A5E;
  font-size:var(--ap-t-klein);font-weight:900;
  margin-bottom:calc(4*var(--aa))}
body.ukskin #app #viewClan .anffort .fbar{
  display:block;width:100%;height:calc(17*var(--aa));
  border-radius:var(--ap-r-kachel);background:#2A003E;
  border:calc(2*var(--aa)) solid #4B1A6B}
/* ⛑ 17.09.2026 (arena-v455) EINGUSS_1709 Fund 3 (Balken): der Spendenbalken und der
   Quoten-Punkt waren gruen (#7CF07C/#33B833) — dieselbe Umstellung wie die Geschehen-Zeilen
   oben, jetzt die sitesweite Gold-Flaeche (--ap-gold-flaeche), die die Dialogfamilie als
   "positiv/Fortschritt" traegt (siehe .apd-btn). Lavendel-Karte/Kopf bleiben AAs eigene
   Elementfarbe (--t1), nicht angefasst — nur das Gruen selbst weicht. */
body.ukskin #app #viewClan .anffort .fbar i{
  background:var(--ap-gold-flaeche,linear-gradient(180deg,#fffbe0 0%,#FFCB43 14%,#f6c62e 30%,
    #e5a413 45%,#f0b524 68%,#ffcf3e 90%,#ffd54e 98%,#8a5f06 100%))}
body.ukskin #app #viewClan .anffort .fnum{font-size:var(--ap-t-text)}
body.ukskin #app #viewClan .anfquota{
  color:#3E1A5E;padding:0 calc(10*var(--aa)) calc(9*var(--aa));
  background:transparent}
body.ukskin #app #viewClan .anfquota b{color:#2A003E}
body.ukskin #app #viewClan .anfquota .qd{background:#2A003E66}
body.ukskin #app #viewClan .anfquota .qd.on{background:#c79a3f}
body.ukskin #app #viewClan .anfmarke{
  left:calc(7*var(--aa));top:calc(7*var(--aa));
  border-radius:var(--ap-r-kachel)}
body.ukskin #app #viewClan .anfrage .gotpts{
  flex-basis:calc(96*var(--aa));color:#2A003E;font-weight:900;
  font-size:var(--ap-t-text)}

/* ---------- 12. CLAN — KNOPFREIHE ----------------------------------------
 * AA: drei Knoepfe nebeneinander, 44 --aa hoch — grau (Request), cyan
 * (Friendly Battle), gelb (Chat). Die Farben sind AAs, die Reihenfolge auch. */
body.ukskin #app #viewClan .clanbtns{
  gap:calc(9*var(--aa));margin-top:calc(11*var(--aa))}
/* ⛑ 10.09.2026 (u3) VIER EIGENE KNOPFFORMEN SIND HIER GELOESCHT.
 * Sie waren AAs Farben, aber jede als eigene Rampe: silber, cyan, gold und die
 * neutrale Breitform — vier Fuellungen, zwei Radien, zwei Schriftgroessen und
 * zwei Hoehen fuer VIER Knoepfe. Dieselben vier Farben stehen als Familien in
 * ui_quelle.css und werden im Markup gewaehlt (.silber / .cyan / .gold / ohne).
 * Der goldene Chat-Knopf ist der EINE Hauptdarsteller und traegt Eckbeschlag.
 * Die Breitform behaelt nur ihren Abstand. */
body.ukskin #app #viewClan .clanbtn-wide{margin-top:calc(9*var(--aa))}

/* ---------- 13. FREUNDE — AAs FENSTER ------------------------------------
 * freunde.png zeigt FRIENDS als Fenster ueber dem Hub: helles Blatt, blaues
 * Titelband mit Pfeilenden, roter Schliessknopf oben rechts. Genau dieses
 * Chrome hat AA-4 am 09.09. fuer PROFIL/EDIT PROFILE gebaut (.epwin/.stbox/
 * .sthead/.stx). Ein zweites daneben zu stellen waere Wildwuchs — die
 * Ansicht uebernimmt es. Blattfarbe AA #8BA9D8, AA-4s Blatt #8FABD6: ΔE 1,4.
 * Hier steht deshalb KEINE eigene Blattfarbe. */
body.ukskin #app #viewFriends.frwin .stbox{
  max-width:calc(418*var(--aa));
  background:linear-gradient(180deg,#8FABD6,#7896C5);border-color:#6788BB}
/* ⛑ 11.09.2026 Fuellung und Rand raus: sie WAREN die blaue Kapsel, und die Kapsel ist
   seit heute das Zierblatt (Begruendung unten bei den Wimpelspitzen). Eine Fuellung
   darueber wuerde das Blatt verdecken. */
body.ukskin #app #viewFriends.frwin .sthead .stt{text-transform:uppercase}
body.ukskin #app #viewFriends.frwin .epbody{padding:0 calc(11*var(--aa)) calc(12*var(--aa))}
/* AAs gruene Zeile „Online: 0/0" unter dem Band. Unsere Kopfkarte traegt
 * dieselbe Zahl plus den Freundescode (den AA in einem eigenen Dialog
 * fuehrt) — sie bleibt, wird aber flach und schmal wie AAs Zeile. */
body.ukskin #app #viewFriends.frwin .frhead{
  background:transparent;border:0;box-shadow:none;
  padding:calc(8*var(--aa)) 0 calc(6*var(--aa));gap:calc(9*var(--aa))}
body.ukskin #app #viewFriends.frwin .frhtitle{
  font-size:var(--ap-t-text);color:#0B2A50;-webkit-text-fill-color:#0B2A50;
  text-shadow:0 calc(1*var(--aa)) 0 #FFFFFF6E}
/* AAs Zeile „Online: 0/0" ist GRUEN — die einzige gruene Angabe im Fenster. */
body.ukskin #app #viewFriends.frwin .frhsub{
  font-size:var(--ap-t-text);font-weight:900;
  /* ⛑ 28.09.2026 (lane-fix_a, QA A-16) #0C7A22 auf dem hellen Blatt lag unter 4,5:1 -> dunkleres
     Gruen der Tafel (#235F0D), die gruene Aussage bleibt. */
  color:#235F0D;-webkit-text-fill-color:#235F0D;
  text-shadow:0 calc(1*var(--aa)) 0 #FFFFFF8C}
body.ukskin #app #viewFriends.frwin .frcode{
  background:#22344F;border:calc(2*var(--aa)) solid #6E85AC;
  border-radius:var(--ap-r-kachel);box-shadow:none}
/* AAs oranger Vollbreiten-Knopf. Er fuehrt bei uns auf den Reiter „Suchen" —
 * dort liegt genau AAs Handlung (Spieler finden und anfragen). */
/* ⛑ 10.09.2026 (u3) "Add Friend" ist .ap-knopf.gold.beschlag.gross.voll —
 * AAs Orange kommt jetzt aus der Bernsteinrampe der Quelle. Die eigene Fuellung,
 * der eigene Radius, der eigene Rahmen und die eigene Schriftgroesse sind weg. */
body.ukskin #app #viewFriends.frwin .fradd{
  margin:calc(2*var(--aa)) 0 calc(9*var(--aa))}
/* AAs Listenfeld: eingelassene, dunkle Flaeche im hellen Blatt. */
body.ukskin #app #viewFriends.frwin .frpane{
  background:#3E5170;border:calc(2*var(--aa)) solid #6E85AC;
  border-radius:var(--ap-r-knopf);
  padding:calc(8*var(--aa));min-height:calc(300*var(--aa));
  box-shadow:var(--ap-mulde)}   /* w2: war inset 0 2,74 7,31 — jetzt DIE Mulde, Unschaerfe 2 */
body.ukskin #app #viewFriends.frwin .tabs{margin:0 0 calc(8*var(--aa))}
/* AAs Listenfeld traegt keine Ueberschrift — das Fenster heisst schon FRIENDS.
   Unser goldenes Abschnittsband stand als zweiter Titel darin. */
body.ukskin #app #viewFriends.frwin .frpane > .secribbon{display:none}
body.ukskin #app #viewFriends.frwin .frnote{color:#1B2C48}

/* ---------- 14. RANGLISTE -------------------------------------------------
 * rangliste_champions_peak.png: violetter Kopfbalken (50 --aa hoch) ueber
 * einem fast schwarz-violetten Listengrund; die Zeilen sind schiefergrau-
 * blau, 46,3 --aa hoch, Rasterschritt 54,8. Gemessen an den Kantenprofilen
 * bei x=60 (y 878..1028 Balken, 1069..1211 erste Zeile). */
/* AAs Kopfbild fuellt die volle Breite und endet HART an der Oberkante des
   violetten Balkens (y 0..600 Bildpunkte = 195 --aa). Unser Motiv ist
   freigestellt (hub_leaderboard, 1024x1024) — es bekommt deshalb AAs dunkle
   Buehne als Grund und steht mittig darin, statt beschnitten zu werden. */
body.ukskin #app #viewBoard .lbhero{
  width:100%;margin:0;border-radius:0;height:calc(150*var(--aa));
  background-color:#2A1150;
  background-image:radial-gradient(120% 85% at 50% 8%,#7A2BC9 0,#3B1470 46%,#1B1435 100%);
  background-size:cover}
body.ukskin #app #viewBoard .lbhero[data-bild]{
  background-repeat:no-repeat;background-position:center calc(6*var(--aa));
  background-size:auto calc(132*var(--aa)),cover}
body.ukskin #app #viewBoard .tabs{
  margin:0;padding:calc(7*var(--aa)) calc(10*var(--aa));
  background:linear-gradient(180deg,#5D00AE,#4D06B9);
  border-top:calc(2*var(--aa)) solid #8B3BF2;
  border-bottom:calc(2*var(--aa)) solid #2C0068;
  gap:calc(7*var(--aa))}
/* ⛑ 10.09.2026 (u3) DIE REITER SIND .ap-reiter. Geometrie, Radius und
 * Schriftgroesse kommen aus dem Bauteil; hier bleiben AUSSCHLIESSLICH die zwei
 * Farbzeilen, weil dieser Balken violett ist und der offene Reiter seinen Akzent
 * aufnimmt — dieselbe Regel, die sonst Cyan traegt. */
body.ukskin #app #viewBoard .tabs .reiter{
  color:#E7D6FF;-webkit-text-fill-color:#E7D6FF;
  text-shadow:0 calc(1.5*var(--aa)) 0 #2C0068}
/* ⛑ 10.09.2026 (u3) DER OFFENE REITER IST CYAN WIE IN JEDER ANDEREN LEISTE.
 * Der erste Anlauf hatte ihm AAs Violett gelassen, weil der Ligabalken darueber
 * violett ist. GEMESSEN war das aber eine Fuellung MEHR in der Rangliste, und
 * "eine Zahl, die waechst, ist ein Fehler". Die Reiter stehen ausserdem gar nicht
 * IM Balken, sondern als Pillen auf dem Listengrund darunter — der Akzent, den
 * sie aufnehmen muessten, ist dort nicht. Violett bleibt dem Balken. */
body.ukskin #app #viewBoard .tabs .reiter.on{
  color:#fff;-webkit-text-fill-color:#fff}
body.ukskin #app #viewBoard .lblist{
  margin-top:0;padding:calc(9*var(--aa)) calc(13*var(--aa)) calc(12*var(--aa));
  background:#1B1435}
body.ukskin #app #viewBoard .lbrow{
  margin-top:calc(8.5*var(--aa));min-height:calc(46*var(--aa));
  gap:calc(9*var(--aa));padding:calc(5*var(--aa)) calc(11*var(--aa));
  border-radius:calc(11*var(--aa));
  background:linear-gradient(180deg,#4A6091,#3D5375);
  border:calc(1.5*var(--aa)) solid #26304A;
  /* ⛑ 11.09.2026 (w2) LICHTFUEHRUNG — Rest aus Auftrag s1, der dieses Blatt nicht in
     seiner Sperre hatte. War: 0 calc(2*var(--aa)) 0 #12172a, gerendert 1,83 px hohe
     SCHWARZBLAUE Lippe, 14 Zeilen. Jetzt die eine Quelle: Hoehe 3 px (0,075 x 42 px
     Zeilenhoehe = 3,15), Farbe --ap-lippe-neutral. Die Zeile hat keine Fuellfamilie.
     Diese Regel schlaegt hub_liste.css (0,2,1 gegen 0,4,0) — deshalb muss sie MIT. */
  box-shadow:var(--ap-innenlicht),var(--ap-sockel)}
body.ukskin #app #viewBoard .lbrow .lrk{
  flex-basis:calc(38*var(--aa));font-size:calc(19*var(--aa));
  color:#FFFFFF;-webkit-text-fill-color:#FFFFFF;
  text-shadow:0 calc(2*var(--aa)) 0 #16203A}
body.ukskin #app #viewBoard .lbrow .lnm{
  font-size:calc(15*var(--aa));color:#FFFFFF;-webkit-text-fill-color:#FFFFFF;
  text-shadow:0 calc(1.5*var(--aa)) 0 #16203A}
body.ukskin #app #viewBoard .lbrow .lnm small{color:#C6D6EE}
/* AA stellt die Trophaeenzahl in eine eigene Spalte mit Trennlinie links —
 * Pokal ueber der Zahl, nicht daneben. */
body.ukskin #app #viewBoard .lbrow .ltr{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:calc(1*var(--aa));
  min-width:calc(52*var(--aa));padding-left:calc(9*var(--aa));
  border-left:calc(2*var(--aa)) solid #FFFFFF33;
  font-size:calc(14*var(--aa));
  color:#FFFFFF;-webkit-text-fill-color:#FFFFFF;
  text-shadow:0 calc(1.5*var(--aa)) 0 #16203A}
body.ukskin #app #viewBoard .lbrow .ltr .ico{
  width:calc(20*var(--aa));height:calc(20*var(--aa))}
body.ukskin #app #viewBoard .lbrow .lbg{
  flex-basis:calc(30*var(--aa));width:calc(30*var(--aa));height:calc(34*var(--aa))}
body.ukskin #app #viewBoard .lbnote{padding:calc(10*var(--aa)) calc(13*var(--aa))}

/* ---------- 15. SPENDEN-FENSTER (clan_spende_popup.png) -------------------
 * AA zeigt „CLAN DONATIONS / You've received: <Karte> xN / Ok", sobald die
 * EIGENE Anfrage voll ist. Bei uns entsteht dieser Moment in
 * ArenaClan.syncMyRequest() als Notiz der Art „filled" — sie wurde bisher
 * nur im Protokoll gefuehrt und nie gezeigt. Das Fenster benutzt das
 * vorhandene .modal/.sheet-Chrome; nur die Haut ist AAs Gold. */
/* AA setzt das Fenster MITTIG auf einen abgedunkelten Hub; .modal/.sheet
   sind auf ganzseitige Blaetter gebaut (min-height:100%). Fuer dieses eine
   Fenster wird daraus eine zentrierte Ebene — dieselbe Bauform wie .stlayer. */
body.ukskin #clanGetDlg{align-items:center;padding:calc(56*var(--aa)) calc(10*var(--aa));
  background:#000000a8}
body.ukskin #clanGetDlg .sheet{
  max-width:calc(392*var(--aa));min-height:0;overflow:visible;background:transparent}
body.ukskin #clanGetDlg .cgbox{
  position:relative;margin-top:calc(16*var(--aa));
  padding:calc(30*var(--aa)) calc(16*var(--aa)) calc(20*var(--aa));
  border-radius:var(--ap-r-knopf);
  background:linear-gradient(180deg,#EAA941,#ECB246);
  border:calc(4*var(--aa)) solid #FAE379;
  box-shadow:0 calc(10*var(--aa)) calc(24*var(--aa)) #000000b3}
body.ukskin #clanGetDlg .cghead{
  position:absolute;left:50%;top:calc(-15*var(--aa));transform:translateX(-50%);
  min-width:62%;padding:calc(7*var(--aa)) calc(26*var(--aa));
  border-radius:var(--ap-r-kachel);text-align:center;white-space:nowrap;
  background:linear-gradient(180deg,#F4CB44,#F2A83B);
  border:calc(3*var(--aa)) solid #FAE379;
  box-shadow:0 calc(4*var(--aa)) calc(9*var(--aa)) #0007;
  font-size:var(--ap-t-titel);font-weight:900;letter-spacing:.04em;
  color:#fff;-webkit-text-fill-color:#fff;text-transform:uppercase;
  text-shadow:0 calc(2*var(--aa)) 0 #8A4B06}
/* Dieselben Pfeilflaggen wie am blauen Band, nur in Gold. */
body.ukskin #clanGetDlg .cghead::before,
body.ukskin #clanGetDlg .cghead::after{
  content:"";position:absolute;top:calc(4*var(--aa));bottom:calc(4*var(--aa));
  width:calc(15*var(--aa));background:#D98B18;
  border:calc(2*var(--aa)) solid #FAE379;border-radius:var(--ap-r-kachel)}
body.ukskin #clanGetDlg .cghead::before{
  left:calc(-12*var(--aa));clip-path:polygon(100% 0,100% 100%,0 100%,45% 50%,0 0)}
body.ukskin #clanGetDlg .cghead::after{
  right:calc(-12*var(--aa));clip-path:polygon(0 0,100% 0,55% 50%,100% 100%,0 100%)}
body.ukskin #clanGetDlg .cgx{
  position:absolute;top:calc(-14*var(--aa));right:calc(-8*var(--aa));
  width:var(--ap-knopf-h-klein);height:var(--ap-knopf-h-klein);
  border-radius:var(--ap-r-kachel);font-size:var(--ap-t-titel);font-weight:900;
  color:#fff;background:linear-gradient(180deg,#F2665A,#C22E22);
  border:calc(2*var(--aa)) solid #FFB0A6;box-shadow:0 calc(3*var(--aa)) 0 #8B1A11}
body.ukskin #clanGetDlg .cgt{
  text-align:center;font-size:var(--ap-t-kopf);font-weight:900;
  color:#fff;-webkit-text-fill-color:#fff;
  text-shadow:0 calc(2*var(--aa)) 0 #8A4B06;
  margin:calc(6*var(--aa)) 0 calc(14*var(--aa))}
body.ukskin #clanGetDlg .cgcard{
  /* AAs Kachel ist QUADRATISCH (clan_spende_popup.png: 190x190 Bildpunkte
     = 62 --aa), nicht im Kartenformat 3:4. */
  position:relative;width:calc(74*var(--aa));margin:0 auto calc(16*var(--aa));
  aspect-ratio:1/1;border-radius:var(--ap-r-knopf);
  border:calc(4*var(--aa)) solid #4D8FE8;background:#12233F;
  background-repeat:no-repeat;background-position:center;background-size:cover;
  display:flex;align-items:center;justify-content:center;font-size:var(--ap-t-zahl);
  overflow:hidden}
/* cardArtHTML() liefert <span class="cartemo"> + <img class="cart">. Ausserhalb
   einer .artbox greift keine der Groessenregeln des Blattes — im ersten Anlauf
   stand die 720x1280-Karte bildschirmfuellend hinter dem Fenster. Hier wird
   sie eingespannt, statt einen zweiten Bildweg zu bauen. */
body.ukskin #clanGetDlg .cgcard .cart{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
body.ukskin #clanGetDlg .cgcard .cartemo{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
body.ukskin #clanGetDlg .cgn{
  position:absolute;right:calc(3*var(--aa));bottom:calc(2*var(--aa));
  z-index:3;font-size:var(--ap-t-titel);font-weight:900;color:#fff;
  text-shadow:0 calc(2*var(--aa)) 0 #000,0 0 calc(4*var(--aa)) #000}
/* ⛑ 10.09.2026 (u3) AAs gruener Ok ist .ap-knopf.limette.gross — "nehmen".
 * Die eigene gruene Rampe, der eigene Rahmen und der eigene Radius sind weg;
 * das AA-Mass des Fensters (112 breit) bleibt, es ist gemessen. */
body.ukskin #clanGetDlg .cgok{
  display:block;margin:0 auto}

/* ==========================================================================
 * AA-5b — NACHARBEIT GRUPPE G3 (10.09.2026, nach Founder-Durchsicht der vier
 * Gegenueberbilder aus pruefungen/durchgang_aa5_20260910/)
 * --------------------------------------------------------------------------
 * Sechs Befunde, in der Reihenfolge des Auftrags:
 *   1 Ranglisten-Kopf: AAs Buehnenhoehe + Saisonzeile + violetter Ligabalken
 *   2 Ranglisten-Zeile: Belohnungskachel — ES GIBT KEINE DATENQUELLE, siehe
 *     Bericht; hier steht deshalb bewusst NICHTS.
 *   3 Freunde: Wimpelenden am Band, Personen-Symbol im orangen Knopf,
 *     ROTES Schliesskreuz
 *   4 Spendenfenster: AAs Verhaeltnisse nachgemessen (Zahlen unten)
 *   5 Klan: Ablaufzeile in der Anfrage, Clanhallen-Streifen unter die Karte
 *   6 Wortlaut: nur JS/Markup, kein CSS
 *
 * ⚠ ALLE ZAHLEN AM BILD GEMESSEN (Kantenprofile, python/PIL), nicht geraten.
 *   Umrechnung: AA-Bild 1320 px breit bei DPR 3 -> 440 CSS. Unsere Einheit
 *   --aa ist 1 CSS-Pixel bei Entwurfsbreite 430. Ein AA-Bildpunkt ist also
 *   /3 zu nehmen; die Zahlen unten sind schon umgerechnet.
 * ========================================================================== */

/* ---------- 16. RANGLISTE — KOPFBEREICH (rangliste_champions_peak.png) -----
 * GEMESSEN am Referenzbild (Kantenprofil bei x=20):
 *   Buehne          y   0 …  876  ->  292 CSS  (bei 430 Entwurf: 285)
 *   violetter Balken y 878 … 1028 ->   50 CSS
 *   Liste ab        y 1030
 *   Saison-Kapsel   x 390 … 940, y 782 … 872 -> 183 x 30 CSS, mittig,
 *                   4 Bildpunkte ueber der Balkenkante (also AUF der Buehne)
 * Unsere Buehne war 150 CSS hoch — 47 % von AAs Hoehe. Genau das war der
 * Befund „wirkt daneben aermlich": nicht die Farbe, die HOEHE.
 *
 * ⚠ NEUES BREITFORMAT-ARTWORK IST BEIM FOUNDER ANGEFRAGT UND NICHT
 *   ENTSCHIEDEN. Deshalb steht hier NUR, was ohne neues Bild geht: AAs
 *   Flaechenaufteilung, AAs Hoehe, unser vorhandenes Emblem so gross wie
 *   moeglich darin. Kommt das Bild, wird EINE Zeile getauscht
 *   (background-size: cover statt `auto 72%`) — sonst nichts.
 *
 * HOEHE MIT DECKEL: 285 --aa sind AAs Anteil bei AAs Seitenverhaeltnis
 * (1320x2868 = 1:2,17). Unser Telefon-Messfenster ist 393x660 (1:1,68) —
 * dort waeren 285 --aa 39 % des Bildschirms statt AAs 30,5 %. min() haelt
 * beides zusammen: am 440x956-Abnahmebild greift 285, am kurzen Telefon 31vh. */
body.ukskin #app #viewBoard .lbhero{
  /* VOLLE BREITE. #viewBoard traegt 13,4 --aa Innenabstand; AAs Buehne geht
     randlos ueber den ganzen Bildschirm. calc(430*var(--aa)) IST die
     App-Breite (--aa = min(100vw,430px)/430), also kein zweiter Messwert. */
  position:relative;left:50%;transform:translateX(-50%);
  width:calc(430*var(--aa));max-width:none;
  height:min(calc(285*var(--aa)),31vh);
  margin:0;border-radius:0;overflow:visible}
/* Das Emblem sitzt so gross wie es die Buehne zulaesst und etwas tiefer,
   damit das Titelband darueber (siehe unten) es nicht anschneidet.
   Prozentwerte statt fester Pixel: sie wandern mit dem min()-Deckel mit. */
body.ukskin #app #viewBoard .lbhero[data-bild]{
  background-repeat:no-repeat;background-position:center;
  /* ⛑ 10.09.2026 (AA-16) DAS BREITFORMAT-ARTWORK IST DA: `lb_champions`
     (430x285, randlos, AAs rangliste_champions_peak.png). Der Kommentar hier
     hatte genau diesen Schritt angekuendigt — `auto 90%` + `center 60%` waren
     der Behelf fuer das quadratische `hub_leaderboard` mit durchsichtigem Rand.
     Jetzt `cover` und mittig, wie AA. */
  background-size:cover}
/* AAs Saison-Kapsel liegt AUF der Buehne, mittig, unmittelbar ueber der
   Balkenkante. Der Text kommt aus dem VORHANDENEN Schluessel
   road.seasonEndsIn (Trophaeenstrasse) — kein neuer Schluessel. */
body.ukskin #app #viewBoard .lbseason{
  position:absolute;left:50%;bottom:calc(2*var(--aa));transform:translateX(-50%);
  /* ⛑ 11.09.2026 (r2) Deckel 300·aa -> Buehne minus 16 px je Seite. RU "Сезон заканчивается через
     19 д 9 ч" braucht 276 px, der Deckel stand bei 274, die Buehne ist 393 breit. */
  z-index:2;max-width:calc(100% - 32px);
  padding:calc(5*var(--aa)) calc(16*var(--aa));
  border-radius:var(--ap-r-knopf);
  background:#140A28D9;border:calc(2*var(--aa)) solid #FFFFFF2E;
  box-shadow:var(--ap-bodenschatten);   /* w2: war 0 2,74 7,31 — jetzt DER Bodenschatten */
  font-family:var(--font-display,"Baloo 2","Rubik",system-ui,sans-serif);
  font-size:var(--ap-t-text);font-weight:900;line-height:1.15;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  color:#FFFFFF;-webkit-text-fill-color:#FFFFFF;
  text-shadow:0 calc(1.5*var(--aa)) 0 #000000A6}
body.ukskin #app #viewBoard .lbseason[hidden]{display:none}
/* UNSER TITELBAND IST AAs AUFBAU UNTERGEORDNET (Founder-Befund 1).
   AA fuehrt: Buehne -> violetter Balken -> Liste, ohne etwas dazwischen.
   Unser Band mit „Leaderboard" + Rueckknopf + „Zu meiner Position" bleibt
   (unser Inhalt, Nachtrag 10.09.), legt sich aber AUF die Buehne — genau die
   Bauform, die AA in clan.png selbst benutzt (blaues Band ueber dem
   Hintergrund). Damit ist AAs Reihenfolge wieder ununterbrochen.
   #viewBoard ist bereits position:relative (nachgemessen), es braucht dafuer
   keine zweite Regel. */
body.ukskin #app #viewBoard .viewhead{
  position:absolute;left:0;right:0;top:calc(6*var(--aa));z-index:4;
  /* .viewhead traegt im Blatt negative Seitenraender (Randlos-Trick fuer den
     Fluss). Absolut positioniert wuerden sie die Zeile ueber die App-Kante
     hinausziehen — gemessen 456,78 px statt 430, das Band stand links ausser-
     halb des Bildschirms. Deshalb hier ausdruecklich 0. */
  margin-left:0;margin-right:0;margin-bottom:0}
/* AAs violetter Balken: volle Breite, 50 --aa hoch, Liganame mittig, der
   i-Knopf rechts. Der Knopf traegt .ibtn-aa — die EINE Info-Knopfform des
   Hubs (hub_new.html Z. 16436 ff.); eine zweite daneben waere Wildwuchs. */
body.ukskin #app #viewBoard .lbleague{
  position:relative;left:50%;transform:translateX(-50%);
  width:calc(430*var(--aa));
  display:flex;align-items:center;justify-content:center;gap:calc(9*var(--aa));
  min-height:calc(50*var(--aa));padding:0 calc(13*var(--aa));
  background:linear-gradient(180deg,#5D00AE,#4D06B9);
  border-top:calc(2*var(--aa)) solid #8B3BF2;
  border-bottom:calc(2*var(--aa)) solid #2C0068}
body.ukskin #app #viewBoard .lbleague .lbleaguename{
  font-family:var(--font-display,"Baloo 2","Rubik",system-ui,sans-serif);
  font-size:var(--ap-t-kopf);font-weight:900;letter-spacing:.01em;
  line-height:1.1;text-align:center;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  color:#FFFFFF;-webkit-text-fill-color:#FFFFFF;
  text-shadow:0 calc(2*var(--aa)) 0 #2C0068,0 0 calc(5*var(--aa)) #00000059}
body.ukskin #app #viewBoard .lbleague .lbinfo{
  width:calc(28*var(--aa));height:calc(30*var(--aa));flex:0 0 auto}
/* Der i-Knopf zeigt den Text, der bisher unbeachtet am Listenende stand
   (#lbNote, seit jeher uebersetzt). Kein neuer Wortlaut, kein neuer
   Schluessel — nur ein Ort, an dem man ihn findet. */
body.ukskin #app #viewBoard .lbinfobox{
  position:relative;left:50%;transform:translateX(-50%);
  width:calc(430*var(--aa));
  padding:calc(9*var(--aa)) calc(15*var(--aa));
  background:#2A1150;border-bottom:calc(2*var(--aa)) solid #4D06B9;
  font-size:var(--ap-t-text);line-height:1.35;
  color:#E7D6FF;-webkit-text-fill-color:#E7D6FF}
body.ukskin #app #viewBoard .lbinfobox[hidden]{display:none}
/* DIE REITER SIND JETZT UNTERGEORDNET: sie tragen nicht mehr AAs Ligabalken,
   sondern stehen als Pillen auf dem Listengrund darunter. AA hat sie nicht —
   sie bleiben trotzdem, weil sie drei verschiedene Ranglisten schalten
   (Nachtrag 10.09.: unsere Inhalte bleiben, im AA-Stil gestaltet). */
body.ukskin #app #viewBoard .tabs{
  position:relative;left:50%;transform:translateX(-50%);
  width:calc(430*var(--aa));
  margin:0;padding:calc(9*var(--aa)) calc(13*var(--aa)) calc(3*var(--aa));
  background:#1B1435;border-top:0;border-bottom:0;gap:calc(7*var(--aa))}
/* Der Listengrund geht bei AA ebenfalls randlos bis an beide Kanten. */
body.ukskin #app #viewBoard .lblist{
  position:relative;left:50%;transform:translateX(-50%);
  width:calc(430*var(--aa));
  margin-top:0;padding:calc(6*var(--aa)) calc(13*var(--aa)) calc(12*var(--aa))}

/* ---------- 17. FREUNDE — DIE DREI KLEINIGKEITEN (freunde.png) -------------
 * (a) AAs Titelband traegt seitliche Wimpelenden, unseres nicht.
 * (b) AAs oranger Knopf traegt ein Personen-Symbol VOR dem Text.
 * (c) AAs Schliesskreuz ist ROT mit weissem X, unseres war blau.
 * ⚠ ALLES AUF #viewFriends BESCHRAENKT. .sthead/.stx sind AA-4s Chrome und
 *   tragen auch PROFIL und EDIT PROFILE — die sind abgenommen. Wer die Regeln
 *   dort global aendert, dreht fremde Arbeit um. Ob AAs Profil-Fenster
 *   dieselben drei Merkmale hat, steht als Frage im Bericht. */
/* ⛑ 11.09.2026 DIE ZWEI WIMPELSPITZEN SIND RAUS — FOUNDER-BEFUND AM TELEFON:
   "friends hat keinen neuen banner was soll das".
   ER HAT RECHT, UND AA IST HIER NICHT DAS ARGUMENT. Nachgesehen an
   _ui_ref/aa_2026/freunde.png: AA traegt dort tatsaechlich genau diesen blauen Balken
   mit Wimpelspitzen, und am 09.09. war es richtig, ihn nachzubauen. Am 10.09. hat der
   Founder aber entschieden, AAs blauen Banner UEBERALL durch den Zierbeschlag zu
   ersetzen — woertlich: "diesen blauen banner moechte ich auf jeder schaltflaeche wie AA
   nicht im selben design es muss aber schoener aussehen". Damit ist dieses Fenster kein
   Nachbau mehr, sondern der letzte Rest eines ueberholten Stands.
   ⚠ SIE MUSSTEN HIER WEG UND NICHT NUR UEBERSCHRIEBEN WERDEN: ::before zeichnet seit
   dem 11.09. das Zierblatt (hub_new.html, .sthead::before). Zwei Regeln auf derselben
   Ebene — diese hier gewinnt durch Spezifitaet und haette das Blatt still verschluckt.
   Genau das war der Zustand, den der Founder gesehen hat: das Blatt WAR gesetzt und
   trotzdem nicht da.
   Das rote Schliesskreuz und das Personen-Symbol bleiben; sie sind AAs Merkmale und
   von der Bandfrage unberuehrt. */
body.ukskin #app #viewFriends.frwin .sthead{position:relative;overflow:visible}
/* (c) AAs rotes Kreuz. Dieselbe Haut wie #clanGetDlg .cgx (Abschnitt 15) —
   eine Form fuer beide Schliessknoepfe, nicht zwei Rottoene. */
body.ukskin #app #viewFriends.frwin .stx{
  background:linear-gradient(180deg,#F2665A,#C22E22);
  border:calc(2*var(--aa)) solid #FFB0A6;
  box-shadow:0 calc(3*var(--aa)) 0 #8B1A11;
  color:#fff;-webkit-text-fill-color:#fff}
body.ukskin #app #viewFriends.frwin .stx:active{
  background:linear-gradient(180deg,#D8483C,#A62319)}
/* (b) Personen-Symbol vor dem Text. Es ist das VORHANDENE Icon `ic_friends`
   (ASSETS, seit dem Topbar-Knopf da) — kein neues Bild. */
/* ⛑ 10.09.2026 (u3) Die Zeile mit Symbol UND Text braucht Flex — .ap-knopf ist
 * ein Raster mit EINER Zelle, zwei Kinder staenden sonst uebereinander.
 * ⚠ AAs 54 --aa Hoehe ist zugunsten der EINEN Knopfhoehe (44) entfallen; das ist
 * bewusst und steht im Bericht. */
body.ukskin #app #viewFriends.frwin .fradd{
  display:flex;align-items:center;justify-content:center;gap:calc(10*var(--aa))}
body.ukskin #app #viewFriends.frwin .fradd .fraddico{
  width:calc(24*var(--aa));height:calc(24*var(--aa));
  flex:0 0 auto;object-fit:contain;
  /* AAs Symbol ist dunkelbraun auf dem orangen Knopf, nicht bunt — aber es
     ist noch als Personen-Silhouette lesbar. brightness(.35) hatte es am
     gerenderten Bild zu einem schwarzen Klumpen gemacht. */
  filter:brightness(.5) saturate(.65) contrast(1.15)}

/* ---------- 18. SPENDENFENSTER — AAs VERHAELTNISSE (clan_spende_popup.png) --
 * GEMESSEN (Kantenprofile, Bildpunkte -> CSS bei /3):
 *              AA-Bild            CSS      wir vorher
 *   Blatt      x  55…1265         403 br    392 br   (mittig, beide)
 *              y 985…1952         322 h     231 h    <- der eigentliche Befund
 *   Band       x 231…1089         286 br    258 br
 *              y 917…1096          60 h      40 h
 *   Kachel     x 511… 815         101        74
 *              y 1296…1598        101        74
 *   Ok-Knopf   x 492… 828         112       158      <- unserer war ZU BREIT
 *              y 1666…1844         59        40
 * Das Fenster war also nicht „schmaler", sondern FLACH: 0,59 Hoehe/Breite
 * gegen AAs 0,80. Ursache waren Kachel und Knopf, nicht die Blattbreite. */
body.ukskin #clanGetDlg{padding:calc(40*var(--aa)) calc(8*var(--aa))}
body.ukskin #clanGetDlg .sheet{max-width:calc(404*var(--aa))}
body.ukskin #clanGetDlg .cgbox{
  padding:calc(66*var(--aa)) calc(18*var(--aa)) calc(28*var(--aa))}
body.ukskin #clanGetDlg .cghead{
  min-width:71%;box-sizing:border-box;
  top:calc(-23*var(--aa));
  min-height:calc(60*var(--aa));
  display:flex;align-items:center;justify-content:center;
  padding:calc(6*var(--aa)) calc(22*var(--aa));
  font-size:var(--ap-t-kopf)}
/* ⛑ 10.09.2026 (u3) Das Schliesskreuz traegt die EINE kleine Stufe (31), nicht
 * 36*--aa = 32,9. Das Kreuz gehoert nicht zur Knopffamilie (Quelle 1: nie fuer
 * Schliessen), aber eine eigene GROESSE je Fenster ist eine Stufe zu viel. */
body.ukskin #clanGetDlg .cgx{
  top:calc(-16*var(--aa));right:calc(-2*var(--aa));
  width:var(--ap-knopf-h-klein);height:var(--ap-knopf-h-klein)}
body.ukskin #clanGetDlg .cgt{
  font-size:var(--ap-t-kopf);line-height:1.1;
  margin:0 0 calc(14*var(--aa))}
body.ukskin #clanGetDlg .cgcard{
  width:calc(101*var(--aa));margin:0 auto calc(23*var(--aa))}
body.ukskin #clanGetDlg .cgok{
  width:calc(112*var(--aa));min-height:calc(59*var(--aa));
  font-size:var(--ap-t-kopf)}

/* ---------- 19. KLAN — ABLAUFZEILE UND CLANHALLEN-STREIFEN (clan.png) ------
 * (a) AAs Anfragekarte fuehrt zwischen Kachel und DONATE eine helle Kapsel
 *     „Time left to collect: 🕐 7h 29m" (Bild: x 285…632, y 1330…1440 ->
 *     116 x 37 CSS). Die Zeit ist bei uns echt: die Bot-Anfragen rotieren im
 *     6-h-Eimer, dessen Ende arena_clan.js jetzt als `expiresAt` herausgibt.
 *     Fuer die EIGENE Anfrage gibt es keinen Ablauf — dort bleibt die Zeile
 *     weg, statt eine Zahl zu erfinden.
 * (b) Der Streifen „Clanhalle · Quests, Krieg & Aktivitaet" stand IN der
 *     Goldkarte, wo AA nichts hat. Er bleibt (unser einziger Weg zu Quests/
 *     Krieg/Aktivitaet), sitzt aber jetzt UNTER der Karte — die Karte behaelt
 *     damit AAs Form. Gestaltet wie AAs schmale Vollbreiten-Zeilen. */
/* .anfkoerper ist FLEX (hub_new.html Z. 10989), kein Raster — die Kapsel
   bekommt deshalb eine eigene volle Zeile GANZ OBEN im Koerper (order:-1),
   statt als vierter Kasten die Dreierreihe zu quetschen. Bei AA steht sie
   neben der Kachel; bei 393 px Breite wuerde das aus DONATE einen Streifen
   machen (nachgemessen: Knopf faellt unter 60 --aa). */
body.ukskin #app #viewClan .anfkoerper{flex-wrap:wrap}
body.ukskin #app #viewClan .anfzeit{
  order:-1;flex:0 0 100%;
  display:flex;align-items:center;justify-content:center;gap:calc(6*var(--aa));
  min-height:calc(37*var(--aa));margin:0 0 calc(6*var(--aa));
  padding:calc(4*var(--aa)) calc(10*var(--aa));
  border-radius:var(--ap-r-kachel);
  background:#F0E0FCCC;border:calc(2*var(--aa)) solid #B98FDC;
  font-size:var(--ap-t-text);font-weight:900;line-height:1.15;
  text-align:center;
  color:#4A2170;-webkit-text-fill-color:#4A2170}
body.ukskin #app #viewClan .anfzeit .azico{
  width:calc(15*var(--aa));height:calc(15*var(--aa));flex:0 0 auto}
body.ukskin #app #viewClan .anfzeit b{font-weight:900}
/* (b) Der Streifen unter der Goldkarte. */
body.ukskin #app #viewClan .clanhallrow{
  margin:calc(7*var(--aa)) 0 0}
body.ukskin #app #viewClan .clanhallrow:empty{display:none}
/* ⛑ 10.09.2026 (u3) Der Clanhallen-Streifen ist .ap-knopf.klein.voll.
 * Er war die letzte eigene Knopfform des Klans: eigene Fuellung, eigener Radius,
 * eigene Schriftgroesse, eigene Hoehe. */

/* ---------- 19. CREATE-CLAN — FENSTERCHROME + WAPPENWAHL (27.09.2026) ------
 * Founder-Entscheid Clan, Punkt 3 + Praezisierung: "genau gleich wie
 * unsere anderen Popups" (Clan-Spende-Popup/Freunde-Fenster) — die Klassen
 * .stlayer/.stbox/.sthead/.stx/.epbody stehen bereits GLOBAL in
 * hub_new.html (siehe dort, Abschnitt "WERTE-FENSTER" + Friends/Profile).
 * `.aclist-dlg` bleibt auf dem Wrapper NUR fuer die Feld-/Knopf-Auswahl
 * unten (Abschnitt 5); seine EIGENE Positionierung (fixed/z-index/
 * Hintergrund) wuerde sich sonst mit .stlayer ueberlagern — diese eine
 * Regel gibt der Geometrie von .stlayer eindeutig den Vorrang. */
.aclist-dlg.stlayer{
  position:fixed;inset:0;z-index:70;display:flex;
  align-items:flex-start;justify-content:center;
  padding:56px 10px 20px;background:#000000a8;
}
.aclist-dlg .stbox{color:var(--txt,#0a192b)}
.aclist-dlg .stbox label{color:#2c4568}
.aclist-dlg .stbox input{
  width:100%;height:34px;padding:0 10px;border:0;outline:0;
  background:#0a192b;border-radius:var(--radius-sm,10px);
  box-shadow:inset 0 3px 8px #0000008c;
  font-family:inherit;font-size:13px;font-weight:700;color:#e4edf7;
}
/* Wappenwahl: acht Kacheln, Symbol aus arena_clan.js BADGE_SYMBOLS, Farbe
 * im selben Zug aus BADGE_COLORS (ROTIEREND, kein zweiter Farbwaehler —
 * der Auftrag nennt nur "Wappen ... aus vorhandenen Symbolen", ein Wappen
 * IST hier Symbol+Farbe zusammen, wie ArenaClan es speichert). */
.aclist-dlg .acl-crests{display:flex;flex-wrap:wrap;gap:6px}
.aclist-dlg .acl-crest{
  width:38px;height:38px;border:2px solid #ffffff55;border-radius:10px;
  font-size:17px;font-weight:900;color:#fff;text-shadow:0 1px 0 #0006;
  cursor:pointer;opacity:.55;
}
.aclist-dlg .acl-crest.on{opacity:1;border-color:#fff;box-shadow:0 0 0 2px #1b5ba9}
/* Kosten im gelben Knopf — dieselbe Goldpille-Form wie ueberall sonst
 * (SYM.gold "🪙" + fmt(), hub_core.js), nur als Anhaengsel im Knopftext. */
.aclist-dlg .acl-cost{font-size:13px;opacity:.9;margin-left:4px}
/* Zu wenig Gold: derselbe Grauzustand wie die Freischaltungs-Blende
 * (b1zu/.b1veil, hub_core.js sperre()), hier aber lokal am EINEN Knopf,
 * weil das Formular selbst entscheidet, nicht eine globale Leiter. */
.aclist-dlg .acl-graubtn{
  filter:grayscale(.8) brightness(.75);cursor:not-allowed;
}

/* ⛑ 29.09.2026 (Merge-Runde 10) Lupe als Bild ic_suche (die Form darunter bleibt als Rueckfall-Klasse). */
.aclist .acl-lupe .acl-lupeimg{display:block;width:1.3em;height:1.3em;object-fit:contain;margin:auto}
/* ⛑ 28.09.2026 (lane-fix_a, QA A-08) Lupe als Form statt Emoji. */
.aclist .acl-lupe .acl-lupeform{position:relative;display:inline-block;width:.72em;height:.72em;
  border:.14em solid currentColor;border-radius:50%;margin:-.1em .1em 0 -.1em}
.aclist .acl-lupe .acl-lupeform::after{content:"";position:absolute;width:.14em;height:.42em;
  background:currentColor;right:-.27em;bottom:-.4em;transform:rotate(-45deg)}
/* ⛑ 28.09.2026 (lane-fix_a, QA A-15) Bei "Request Only" lief die Trophaeensumme unter die
   Anforderungsbox ("5490|0"). Die Chipreihe bricht jetzt um, statt unter die rechte Spalte zu laufen. */
.aclist .acl-chips{flex-wrap:wrap;row-gap:3px;overflow:hidden}

/* ⛑ 29.09.2026 (lane-fix_a2, QA H-06) Wappenbild in der Wappenwahl und Goldmuenze als Bild im
   Gruenden-Knopf (vorher Emoji 🔥❄🌿🪨☀🌑 / 🪙). */
.aclist-dlg .acl-crest{padding:2px;display:flex;align-items:center;justify-content:center}
.aclist-dlg .acl-crest .acl-crestimg{display:block;width:100%;height:100%;object-fit:contain}
.aclist-dlg .acl-cost .acl-costimg{display:inline-block;width:1.2em;height:1.2em;object-fit:contain;vertical-align:-.25em;margin-right:3px}

/* ⛑ 29.09.2026 (lane-fix_a2, QA H-09) CLANNAMEN OBEN ABGESCHNITTEN. Mit "Request Only" bricht die
   Chipreihe um (Regel oben, A-15) — bei fester Zeilenhoehe 54 px schob das den Namen nach oben aus
   der Karte ("Verdant Pact", "Frostbound", "Voidcallers"). Die Zeile waechst jetzt mit ihrem Inhalt;
   54 px bleibt die Mindesthoehe (AA-Mass). */
.aclist .acl-row{height:auto;min-height:var(--acl-row-h);padding-top:5px;padding-bottom:5px}