/* ═══════════════════════════════════════════════════════════════════════════════════════════ * ARCANE PRISM TD — DIE QUELLE * Angelegt 10.09.2026, Kennung sg1. EIN Blatt mit ALLEN Werten fuer Hub UND Arena. * * FOUNDER-AUFTRAG 10.09.2026, woertlich: * "wir brauchen ein komplettes styleguide fuer den hub und die arena damit alles aus einem * Guss wirkt ... gleiche farben gleiche schrift, gleiche banner usw alles soll im style des * banners den wir kreiert haben orientieren. und ja dein punkt ist solide im match soll * alles gleich sein. aber groessere trefferflaechen." * * WORAUF JEDE ZAHL HIER STEHT — nichts davon ist geschaetzt: * pruefungen/durchgang_d1_20260910/BEFUND.md 36 Bildschirme, 5.394 Elemente gezaehlt * pruefungen/durchgang_k1_20260910/FARBEN.md 57 AA-Bildschirme, 6 Knopffamilien ausgelesen * public/ui_assets/band_zierbeschlag.webp das Titelband, Founder-Entscheid 10.09. * * DIE DREI SAETZE, aus denen alles folgt: * 1. Nicht weniger Farben als AA — sondern jede Farbe mit GENAU EINER Bedeutung. * AA hat sechs Knopfrezepte. Wir hatten 88 Fuellungen. * 2. Jede Marke hier traegt einen Kommentar, WOFUER sie da ist. Eine Marke ohne Bedeutung * wird in vier Wochen falsch benutzt — das ist genau der Weg, auf dem aus 58 Marken * 2.080 handgetippte Farbwerte geworden sind. * 3. Hub und Arena ziehen aus DEMSELBEN Blatt. Der einzige erlaubte Unterschied ist die * TREFFERFLAECHE (Abschnitt 7) — Founder-Anordnung, gleiche Optik, groesserer Finger. * * WIE DIESES BLATT ZU public/ui_kit.css STEHT * ui_kit.css (28.08.) bleibt unangetastet und weiter geladen — 30 Ansichten haengen daran. * Seine Farbregel ist aber ueberholt: sie sagt "HELLBLAU fuer JEDES Bedienelement", und die * k1-Messung vom 10.09. hat gemessen, warum das nicht traegt (Blau ist bei uns dreifach * belegt: Wasser-Element 209 Grad, Elite-Seltenheit 216 Grad, und der GANZE HINTERGRUND). * Deshalb ein neuer Namensraum --ap-* statt eines Umbaus an --uk-*. Wer eine Ansicht anfasst, * zieht sie von --uk-* auf --ap-* um; niemand muss alles auf einmal umstellen. * * WARUM SO VIELE WERTE ALS var(--sam-…, #hex) STEHEN * Der Hub fuehrt 58 --sam-*-Marken, die Arena kennt sie nicht. Die Schreibweise * var(--sam-x,#hex) loest im Hub ueber die vorhandene Marke auf und faellt in der Arena auf * den gemessenen Hexwert zurueck. So steht der Wert an EINER Stelle und funktioniert in * beiden Haeusern — ohne dass irgendetwas doppelt definiert wird. * ═══════════════════════════════════════════════════════════════════════════════════════════ */ :root{ /* ═══ 1 FARBTAFEL ═══════════════════════════════════════════════════════════════════════════ Gemessen: im Hub stehen 6.120 Farbnennungen mit 2.080 verschiedenen Werten (1.081 Blautoene, 360 Goldtoene, 201 Violett, 177 Gruen, 130 Rot, 128 Grau). Nur 33 % davon entsprechen ueberhaupt einer Variablen. Praktische Folge heute: die Hub-Farbe laesst sich nicht aendern, ohne 2.080 Stellen einzeln anzufassen. Diese Tafel hat 24 Werte in 6 Rollengruppen. ═════ */ /* ── 1.1 GRUND UND PLATTE — worauf alles steht ─────────────────────────────────────────── */ --ap-grund: var(--sam-grund,#001E40); /* tiefster Hub-Grund. Der Hub IST dunkelblau — deshalb darf kein Knopf blau sein (k1). */ --ap-grund-2: #0A192B; /* zweite Tiefe: Fond, Ueberblendungen */ --ap-platte: var(--sam-deckgrund,#0D2257);/* Flaeche von Fenstern, Karten, Deckplaetzen */ --ap-platte-hell: #123763; /* Listenzeile, Innenfeld einer Kachel */ --ap-linie: #2A5488; /* Trennlinie und Plattenrand, EIN Ton */ --ap-kontur: #062043; /* dunkle Aussenkontur JEDES Bedienelements. Uebernommen aus --uk-edge; AAs Knoepfe haben ausnahmslos eine harte fast schwarze Linie. */ /* ── 1.2 SCHRIFTFARBE — drei Stufen, nicht dreissig ────────────────────────────────────── */ --ap-tinte: #FFFFFF; /* Beschriftung, Zahlen, alles Wichtige */ --ap-tinte-2: var(--sam-blatt-k,#B4C8E5); /* Beiwerk: Einheiten, Untertitel */ --ap-tinte-3: var(--sam-blatt,#8CAAD9); /* gedaempft: gesperrt, Platzhalter */ /* ── 1.3 DIE DREI KNOPFFAMILIEN ──────────────────────────────────────────────────────────── k1 hat AAs sechs Familien ausgelesen und den Farbkreis auf unsere Belegung geprueft. Frei sind genau drei Baender: Limette 95–105 Grad, Bernstein 38–50 Grad, Cyan 185–195 Grad. UEBERRASCHUNG DER MESSUNG: die drei Rampen liegen bereits im Blatt (--sam-knopf-*) und treffen k1s Zielwinkel auf ein bis drei Grad genau. Es musste keine einzige neue Farbe erfunden werden — nachgerechnet, Farbton je Hexwert: #6BF52C 101,2° #3CC70A 104,1° -> Limette, k1 verlangt 90–110 #FFCB43 43,4° #EEA406 40,9° -> Bernstein, k1 verlangt den Abfall auf ~40 unten #4AE6FB 187,1° #00C6F0 190,5° -> Cyan, k1 verlangt 188 Deshalb zeigen die Marken hier auf die vorhandenen Rampen und legen nichts Neues an. */ /* LIMETTE — nehmen, sammeln, aufwerten. "Etwas kommt zu mir, oder etwas wird staerker." Traegt: Claim, Upgrade, Level Up, Open, Abholen, Play im Matchmaking. ⚠ NIE unter 90 Grad (dann ist es die Uncommon-Seltenheit #8CD24B bei 85 Grad) und NIE ueber 110 Grad (dann ist es die Kristallwaehrung #2FD47A bei 150 Grad bzw. Natur bei 145). */ --ap-knopf-limette-1: var(--sam-knopf-gruen1,#6BF52C); /* Flaeche oben */ --ap-knopf-limette-2: var(--sam-knopf-gruen2,#3CC70A); /* Flaeche unten */ --ap-knopf-limette-k: var(--sam-knopf-gruen-s,#235F0D); /* Kante und Sockel */ /* BERNSTEIN — die EINE Hauptaktion des Bildschirms. Nicht "kaufen": AA setzt Gold auf den lautesten Knopf, egal was er tut (BATTLE, aber auch ein schlichtes "Go" bei den Missionen und "Chat" beim Clan). Gefunden 34-mal in 57 AA-Bildschirmen. ⚠ DIE REGEL, DIE GOLD ERST TRAEGT: GENAU EIN bernsteinfarbener Knopf pro Bildschirm. Ein zweiter nimmt dem ersten die Wirkung — das ist der eigentliche Grund, warum Gold bei AA funktioniert, obwohl dort dieselbe Dreifachbelegung herrscht wie bei uns. ⚠ Der Knopf faellt unten auf 41 Grad (Bernstein), die Muenze bleibt bei 49 Grad (Gelb). Ohne diesen Abfall wird der Knopf zur Muenzflaeche. Form trennt zusaetzlich: Muenze rund, Knopf breites Rechteck. */ /* ⛑ 10.09.2026 (u6) DIE REGEL WAR ZU GROB FORMULIERT — FOUNDER-PRAEZISIERUNG. u4 hat sie richtig angewandt und ist damit von AA WEGgelaufen: "Go" steht sechsmal in der Missionsliste, also faerbte er alle sechs silber. AA faerbt alle sechs GOLD. "EIN GOLD JE BILDSCHIRM" MEINT EINE HANDLUNG, NICHT EIN ELEMENT. Eine LISTE gleichartiger Eintraege, in der JEDE Zeile DIESELBE Handlung anbietet (Missionen mit "Go", Belohnungen mit "Claim"), traegt in ALLEN Zeilen dieselbe Farbe — auch wenn das Gold ist. Sechs goldene "Go" sind EIN Gold: sie sind sechs Kopien derselben Handlung, kein Wettbewerb um den Rang. VERBOTEN bleibt Gold fuer VERSCHIEDENE Handlungen nebeneinander — "Kaufen" und "Weiter" und "Ansehen" alle drei gold: dann weiss der Blick nicht mehr, wohin. DER BELEG IST AAs MISSIONSLISTE (missionen.png, GEGEN_MISSIONEN.png rechte Spalte): sechs goldene "Go" untereinander, dazwischen ein gruenes "Claim" — und genau weil die sechs GLEICH sind, springt das eine "Claim" heraus. Silber haette der Liste genau diesen Sprung genommen. ⚠ PRUEFFRAGE VOR JEDEM SILBER: "Sind das mehrere HANDLUNGEN oder mehrere ZEILEN derselben Handlung?" Mehrere Zeilen -> alle gleich, Gold erlaubt. Mehrere Handlungen -> genau eine davon gold. */ --ap-knopf-bernstein-1: var(--sam-knopf-gold1,#FFCB43); --ap-knopf-bernstein-2: var(--sam-knopf-gold2,#EEA406); --ap-knopf-bernstein-k: var(--sam-knopf-gold-s,#A96C05); /* ⛑ 10.09.2026 AAs GEMESSENE LICHTFUEHRUNG FUER GOLD — acht Stufen statt zwei. Der BATTLE-Knopf trug sie seit dem 29.08. als EIGENE Flaeche; beim Umzug auf die Bauteile ist sie entfallen, und der lauteste Knopf des Spiels wurde dabei flacher. Die Loesung ist NICHT, ihn vom Styleguide auszunehmen — dann waere es keins mehr — sondern AAs Messung hier zu heben, wo sie fuer JEDEN goldenen Knopf gilt. GEMESSEN an AAs Goldknopf (f_battle_lupe.png, s2b_battle_lupe.png): die dunkelste Stelle liegt bei 45 Prozent, danach hellt er wieder auf (68 und 90 Prozent), und die oberste Zeile ist helles Gold (250,255,108) — KEIN Weiss. Genau andersherum als eine naive Rampe, die nach unten dunkler wird. ⚠ NICHT wieder auf zwei Stufen zusammenstreichen. Der Unterschied ist auf einem 44-px-Knopf klein und auf dem 79-px-BATTLE deutlich; genau deshalb faellt er nur dort auf und wird anderswo unterschaetzt. */ --ap-gold-flaeche: linear-gradient(180deg,#fffbe0 0%,#FFCB43 14%,#f6c62e 30%, #e5a413 45%,#f0b524 68%,#ffcf3e 90%,#ffd54e 98%,#8a5f06 100%); /* CYAN — die zweite Handlung, das Neutrale, die Reiter. Alles, was neben der Hauptsache steht. Cyan STATT Blau ist der Kern des k1-Befunds: ein blauer Knopf (207–216 Grad) muesste sich auf blauem Grund ueber Helligkeit durchsetzen statt ueber Farbe — genau daher kommen die 73 verschiedenen Verlaeufe im Hub, jeder Einbau hat sich sein Blau heller gedreht, bis es sich abhob. Cyan bei 188 Grad ist frei UND ist die Farbe der Gemme im neuen Titelband: Band und Knopf tragen damit denselben Akzent. */ --ap-knopf-cyan-1: var(--sam-knopf-cyan1,#4AE6FB); --ap-knopf-cyan-2: var(--sam-knopf-cyan2,#00C6F0); --ap-knopf-cyan-k: var(--sam-knopf-cyan-s,#0A6F97); /* TIEFBLAU — Founder-Entscheid 10.09. nach dem ersten Blick auf dem Telefon: "mir gefaellt es in dem dunklen blau besser." Das ist AAs eigene System-Familie, aus 57 Bildschirmen ausgelesen (FARBEN.md): #24AADC nach #1565B2, Sockel #0E4376 — bei AA traegt sie Zurueck, Listen und Systemzeilen. ⚠ DER k1-EINWAND BLEIBT GUELTIG UND WIRD HIER NUR ENTSCHAERFT, NICHT WIDERLEGT: Blau ist bei uns dreifach belegt (Wasser-Element #3CA0FF, Elite-Seltenheit #579EFE, Hintergrund). Diese Rampe funktioniert trotzdem, weil sie mit 205 Grad und deutlich dunkler liegt als beide — der Abstand zum Grund kommt aus der Helligkeit, nicht aus der Farbe. Genau das war der Weg, der im Hub zu 73 Eigenverlaeufen gefuehrt hat; er ist hier ZULAESSIG, weil es EINE gemessene Rampe ist statt 73 geratener. Wer eine weitere blaue Rampe anlegt, macht den alten Fehler von vorn. */ --ap-knopf-blau-1: #24AADC; --ap-knopf-blau-2: #1565B2; --ap-knopf-blau-k: #0E4376; /* ── 1.4 ZWEI ZUSTAENDE, KEINE FAMILIEN ────────────────────────────────────────────────── Sie sind keine vierte und fuenfte Farbwahl. Man waehlt sie nie aus — ein Knopf GERAET hinein, weil er dritte Wahl ist oder gerade nicht gedrueckt werden kann. */ /* SILBER — dritte Handlung oder Wartezeit. Bei AA: "Request" und "DONATE" im Clan. */ --ap-knopf-silber-1: #A7BBC4; --ap-knopf-silber-2: #7E98A7; --ap-knopf-silber-k: #4E5F6B; /* SCHIEFER — gesperrt. AA nimmt fuer gesperrt KEIN Grau, sondern ein sehr dunkles, entsaettigtes Blaugruen (gemessen an "Max Level" auf der Turmkarte). Der Knopf sieht damit ausgeschaltet aus und nicht kaputt. Grau saehe nach Fehler aus. */ --ap-knopf-schiefer-1: #015056; --ap-knopf-schiefer-2: #044555; --ap-knopf-schiefer-k: #0B3859; --ap-knopf-schiefer-t: #565656; /* Schriftfarbe im gesperrten Knopf */ /* ── 1.4b DIE KONTOMARKE ────────────────────────────────────────────────────────────────── ⛑ 10.09.2026 (u1). Beim Umzug der Einstellungen blieb GENAU EINE Farbe uebrig, die in keiner Marke stand: das Orange der runden Plakette hinter "PRISM ID" im Kontoblock. Sie ist kein Ausrutscher und kein Element, keine Waehrung und keine Seltenheit — sie ist das Zeichen des Kontos, und sie ist der einzige warme Punkt auf dem Anmeldeblatt (AA macht es an derselben Stelle genauso). Sie bekommt deshalb einen Namen und eine Bedeutung, statt als getippter Hexwert weiterzuleben. ⚠ NICHT fuer irgendetwas anderes nehmen: dafuer ist Bernstein da. Diese Farbe steht auf genau EINEM Element im ganzen Spiel. */ --ap-konto-id: #E8702A; /* ── 1.4c ZWEI HELLE FLAECHEN — und es sind wirklich ZWEI ───────────────────────────────── ⛑ 10.09.2026 (u6). AA setzt auf dunklem Grund zwei verschiedene helle Traeger ein, und wer sie zusammenlegt, macht genau den Rueckschritt, den dieser Durchgang zu heilen hat: u4 hat den blassrosa Koerper der Festungs-Knotenkarte auf die blauweisse Platte gezogen, und die Ansicht lief damit von AA WEG. Beide Werte sind an der Aufnahme gemessen: KUEHL karte_detail_turm.png, Plattenmitte: #DCE9F1 / #B1C7E4 — das Kartendetail, die Freischaltkacheln, alles Sachliche. Rampe wie bisher #F2F6FC -> #D9E4F2. ROSE festung_ausbaupfad.png, Karte "DPS": Koerper #FCECEE, Wertzeilen #FDEEF0. Ein FAST FLACHER Ton, kein Verlauf — der Abstand betraegt zwei von 255. ⚠ ROSE IST KEINE ZWEITE ALLZWECKPLATTE. Sie steht bei AA auf der Knotenkarte der Festung und sonst nirgends. Wer sie woanders hinlegt, hat wieder zwei Systeme. */ --ap-hellplatte-1: #F2F6FC; /* kuehle helle Platte, oben */ --ap-hellplatte-2: #D9E4F2; /* kuehle helle Platte, unten */ --ap-platte-rose: #FCECEE; /* AAs Knotenkarten-Koerper, flach */ /* ── 1.4d DIE INDIGOZEILE ───────────────────────────────────────────────────────────────── ⛑ 10.09.2026 (u6). AAs Missions- und Questzeile ist NICHT die dunkle Systemplatte, sondern ein kraeftiges Blauviolett: gemessen #4D5BFF -> #3F49D8 mit hellerem Rand #7F92FF (missionen.png; nachgemessen in GEGEN_MISSIONEN.png rechte Spalte: #5057FF). Sie stand schon im Hub — zweimal von Hand getippt, einmal im Clanreiter und einmal als Beschreibung im Kommentar der Missionen. Jetzt traegt sie einen Namen. ⚠ SIE IST KEINE VIERTE KNOPFFAMILIE. Auf ihr steht ein Knopf, sie IST keiner. Der k1-Einwand gegen blaue KNOEPFE (1.3, Cyan) bleibt davon unberuehrt. ⚠ Warum sie nicht die Systemplatte sein kann: die Missionsliste ist der einzige Bildschirm, auf dem sechs gleichrangige Zeilen den ganzen Inhalt ausmachen. Auf der dunklen Platte verschwinden sie im Grund — gemessen #153763 gegen AAs #5057FF, und genau das war der zweite Teil des u4-Rueckschritts. */ --ap-zeile-indigo-1: #4D5BFF; --ap-zeile-indigo-2: #3F49D8; --ap-zeile-indigo-k: #7F92FF; /* ── 1.4e DIE PASSBAHN — EIN GLASROHR, KEIN VERLAUF ─────────────────────────────────────── ⛑ 10.09.2026 (g1). Der Fortschrittsbalken des Battlepasses war die zweitgroesste gemessene Abweichung des Hubs, die keine Knopffarbe ist: dE 48,1 (qa/aa_abstand.mjs). ZEILE FUER ZEILE AN AAs AUFNAHME ABGETASTET (battlepass_golden_fortune.png, Bildzeilen 492 bis 543, alle drei Bildpunkte eine Messung): 492 #953FFF 505 #F27BFD 514-520 #FCD8FE 499 #C84BFB 511 #FCD3FE 526 #F7A0FD 538 #B446FD 541 #9940FF Das ist KEIN Verlauf von oben nach unten, sondern ein GLASROHR: dunkles Violett an BEIDEN Kanten, in der Mitte ein fast weisser Kern ueber ein knappes Drittel der Hoehe. Genau dieser Kern hat uns gefehlt — unsere Bahn lief glatt von hell nach dunkel durch, und der gemessene Punkt lag deshalb bei #F877D6 statt AAs #FCD7FE. ⚠ WARUM VIOLETT UND NICHT UNSER ROSA: der Pass war bei uns SCHON violett — die Grundregel `.pmbar i` traegt #A45EF2, die Premiumzelle `.rwcell.prem` denselben Ton. Das Rosa kam allein aus der `#viewPass`-Ausnahme, die den Eventpass-Balken kopiert hat. Der Founder-Ton der Seltenheit Epic (#A874FF) liegt bei 262 Grad, AAs Kante bei 267 — dieselbe Familie. Wir holen also keine fremde Farbe, wir nehmen unsere zurueck. ⚠ DER EVENTPASS-BALKEN BLEIBT ROSA UND DAS IST KEIN VERSEHEN. AA hat an dieser Stelle ZWEI verschiedene Bahnen: die Wuerfelpass-Bahn (event_dice_pass.png) ist ein flaches Zweiton-Rosa #FF82DD -> #FF60CF, 316 Grad — auf den Grad unser bisheriger Ton. Wer beide Bahnen gleich faerbt, macht eine davon falsch. */ --ap-passbahn-flaeche: linear-gradient(180deg,#953FFF 0%,#C84BFB 14%,#F27BFD 26%, #FCD8FE 40%,#FCD8FE 58%,#F27BFD 72%,#C84BFB 86%,#953FFF 100%); /* ── 1.5 ROT IST KEIN AKTIONSKNOPF ──────────────────────────────────────────────────────── Gemessen ueber 57 AA-Bildschirme: Rot sitzt ausschliesslich auf dem Schliesskreuz oben rechts und auf Fehlermeldungen. Es gibt bei AA keinen einzigen roten Handlungsknopf. Wer hier einen baut, nimmt dem Kreuz seine Bedeutung. */ --ap-rot: #EE6372; --ap-rot-2: #E53F4D; --ap-rot-k: #951626; /* ── 1.6 WAEHRUNG — bewusst AUSSERHALB der Blaupalette ──────────────────────────────────── D1: "Waehrungen muessen auf einen Blick unterscheidbar bleiben." Das ist kein Ausrutscher, das bleibt. Aufraeumbar sind nicht die Toene, sondern die 177 Gruen- und 360 Goldwerte, die im Blatt daraus geworden sind. */ --ap-kristall: #2FD47A; /* Smaragd/Minze, 150 Grad — deshalb darf der Knopf nur Limette */ --ap-kristall-hell: #3CF58D; --ap-kristall-dunkel:#0D6B3A; --ap-muenze: var(--sam-gold,#FAD21F); /* 49 Grad, reines Gelb, rund */ /* ── 1.7 ELEMENTE — die Spielsprache, wird NIE vereinheitlicht ──────────────────────────── Sechs Rollen (plus Arkan), fest vergeben. Was aufzuraeumen ist, sind die 177 Gruen- und 130 Rotwerte, die im Blatt daraus geworden sind — nicht die Toene selbst. */ --ap-el-feuer: #FF7A3C; /* 12 Grad */ --ap-el-wasser: #3CA0FF; /* 209 Grad — deshalb kein blauer Knopf */ --ap-el-erde: #C9A24A; /* 42 Grad */ --ap-el-natur: #42D977; /* 145 Grad */ --ap-el-licht: #FFD24A; /* 46 Grad */ --ap-el-dunkel: #B060FF; /* 272 Grad */ --ap-el-arkan: #E34FD4; /* 306 Grad */ /* ── 1.8 SELTENHEIT — neun Rollen, bereits als --sam-* im Blatt ─────────────────────────── Hier stehen sie nur, damit die Arena dieselben Werte hat und niemand sie neu tippt. */ --ap-selten-common: var(--sam-common,#B9C3DA); --ap-selten-uncommon: var(--sam-uncommon,#8CD24B); --ap-selten-rare: var(--sam-rare,#43CFC6); --ap-selten-elite: var(--sam-elite,#579EFE); --ap-selten-epic: var(--sam-epic,#A874FF); --ap-selten-legendary: var(--sam-legendary,#F6A617); --ap-selten-mythic: var(--sam-mythic,#F24FD0); --ap-selten-relic: var(--sam-relic,#F64347); --ap-selten-prismatic: var(--sam-prismatic,#CFE3FF); /* ── 1.9 DAS TITELBAND ──────────────────────────────────────────────────────────────────── Founder-Entscheid 10.09.: von drei Entwuerfen ist der Zierbeschlag geworden — dunkles Schmiedeband, Filigranspangen aus Silber und Gold, Cyan-Gemme, Wimpelenden. Die drei Zierfarben stehen hier, weil die Knopfkante (Abschnitt 8) aus demselben Topf zieht: DAS ist die Klammer, die Band und Knopf zur selben Familie macht. */ /* ⚠ 10.09.2026 (u1) OHNE var(--shop-band). Gemessen im Hub: mit der Umleitung ueber --shop-band kam das Band als 404 heraus. Grund: --shop-band steht in hub_new.html als url("ui_assets/…"), und Chrome loest den relativen Pfad an der Stelle auf, an der er EINGESETZT wird — also gegen ui_mod/ui_quelle.css: /ui_mod/ui_assets/… Ein Titelband, das nirgends laedt, ist schlimmer als eines mit der falschen Farbe. Ein Pfad, eine Datei, kein Umweg. Wer im Shop ein anderes Band braucht, setzt --ap-band-blatt an der Ansicht neu — genau dafuer ist es eine Marke. */ --ap-band-blatt: url("../ui_assets/band_zierbeschlag.webp"); /* Pfad relativ zu DIESEM Blatt */ --ap-filigran-gold: #E8C36A; /* die Goldvolute der Bandspange */ --ap-filigran-silber: #C6D6E2; /* der Silberfaden daneben */ --ap-gemme: #4AE6FB; /* die Cyan-Gemme in der Bandmitte — derselbe Ton wie der Cyan-Knopf. Das ist Absicht, nicht Zufall. */ /* ═══ 2 SCHRIFTLEITER ═══════════════════════════════════════════════════════════════════════ Gemessen: 1.638 Textstellen in 46 verschiedenen Groessen, 79 verschiedene Groesse-Staerke- Paare, DREI Familien. Baloo 2 traegt heute nur 193 von 1.638 Stellen — 12 Prozent. Die Systemschrift des Telefons traegt 1.449. Das ist der Einzelbefund, der am staerksten gegen "aus einem Guss" arbeitet: AA benutzt auf JEDEM Knopf dieselbe Schrift. Sechs Stufen. Keine siebte. Nichts unter 11 px. ══════════════════════════════════════════ */ --ap-schrift: var(--font-display,"Baloo 2","Rubik Cyr","Rubik",system-ui,-apple-system,sans-serif); /* EINE Familie, ueberall. Der Stapel ist kein Kompromiss: Baloo 2 ist ein Lateinsubset (339 Zeichen), "Rubik Cyr" steht direkt dahinter, damit ein russisches Wort sich seinen Schnitt zeichenweise selbst holt. Wer die Anzeigeschrift wechseln will, aendert im Hub --font-display — nicht diese Zeile. */ --ap-t-klein: 11px; /* Beiwerk: Einheiten, Zaehler, Plakettenzahlen. HARTE UNTERGRENZE. Heute die haeufigste Groesse ueberhaupt: 708 Stellen in 36 Ansichten. */ --ap-t-text: 13px; /* Standard: Knopfbeschriftung, Listentext, Zahlen. 153 Stellen. */ --ap-t-titel: 16px; /* Zwischentitel, Abschnittsband, Kartenname. 72 Stellen. */ --ap-t-kopf: 22px; /* Bildschirmtitel im Band. 91 Stellen in 24 Ansichten. */ --ap-t-zahl: 30px; /* Zahlenschlagzeile: Preis, Belohnungsmenge, Schaden. */ --ap-t-fest: 52px; /* Zeremonie: Siegbildschirm, Packoeffnung, Aufstieg. Selten. */ --ap-fw-text: 400; /* Fliesstext — der einzige Ort ohne Fettung */ --ap-fw-stark: 800; /* alles Beschriftende: Knopf, Titel, Zahl. Baloo 2 traegt bis 800. */ --ap-sperr-kopf: 1.4px;/* Sperrung NUR im Bildschirmtitel. Gemessen sind heute 6 verschiedene Sperrungen zwischen 0,25 und 2,24 px im Band. */ /* ═══ 3 ABSTANDSRASTER ══════════════════════════════════════════════════════════════════════ Gemessen: 56 verschiedene Innenabstaende in 4.069 Messungen, davon 30 krumme Werte (3,7 / 8,2 / 9,1 / 14,6 …). Die krummen entstehen, weil manche Stellen in vw rechnen — derselbe Abstand ist auf einem 393er Telefon ein anderer als auf einem 430er. Nur 22 Prozent aller Innenabstaende liegen heute auf einem 4er-Raster. Fuenf Stufen, alle in px, alle Vielfache von 4. NIE in vw. ══════════════════════════════ */ --ap-a1: 4px; /* Luft im Element: zwischen Symbol und Zahl */ --ap-a2: 8px; /* Luft zwischen Geschwistern in einer Zeile */ --ap-a3: 12px; /* Luft unter dem Titelband, zwischen Listenzeilen */ --ap-a4: 16px; /* Abschnittsabstand */ --ap-a5: 24px; /* Blockabstand, Innenabstand eines Fensters */ --ap-rand: 16px; /* Seitenrand JEDER Ansicht, Hub wie Arena, ohne Ausnahme */ /* ⛑ 11.09.2026 (w2) DIE GASSE — FOUNDER-ENTSCHEID, woertlich: "lass die Gasse mit sechzehn, so wie wir das haben." GEMESSEN (qa/raster.mjs, 22 Ansichten, Telefon 393x660): ZWOELF verschiedene linke Aussenkanten — 0 (navPass, navHeroPass) · 6 (navEvDuels) · 8,2 (navGuide) · 8,5 (navHeroes) · 9,1 (navHome) · 10 (navMissions) · 12 (navEvPass) · 12,2 (navBoard) · 12,8 (navCollection) · 13,1 (navShop) · 16 (zehn Ansichten) · 28,3 (navSettings). AA liegt im Median bei 13,1; die drei Punkte Unterschied sieht niemand — dass es UEBERALL dieselbe Zahl ist, sieht jeder. ⚠ --ap-gasse und --uk-gutter (ui_kit.css, gehoert einem anderen Auftrag) sind DIESELBE Zahl. Damit nicht zwei Zahlen nebeneinander stehen, zeigt --uk-gutter ab hier hierher — ui_quelle.css wird NACH ui_kit.css geladen (hub_new.html Zeile 81 gegen 68), gleiche Spezifitaet, spaeteres Blatt gewinnt. Geloescht wird nichts. AUSNAHMEN, jede einzeln begruendet, stehen im w2-Block von hub_new.html. */ --ap-gasse: 16px; --uk-gutter: var(--ap-gasse); /* ⛑ 11.09.2026 (w2) DIE LUFT UNTER DER KOPFLEISTE. GEMESSEN: die Kopfleiste endet in 20 von 22 Ansichten bei y=56. Der erste Inhalt begann bei 64 / 68 / 70 / 72,2 — VIER Abstaende (8/12/14/16) bei gleicher Bauart. 14 ist der haeufigste (8 Ansichten) und wird gesetzt. Erster Inhalt also y=70. */ --ap-kopfluft: 14px; /* ═══ 4 ECKENRADIEN ═════════════════════════════════════════════════════════════════════════ Gemessen: 25 verschiedene reine px-Radien, 35 Schreibweisen insgesamt — 6, 15, 8.2, 999, 14, 10, 9.1, 3, 4.6, 5.5, 6.4, 7, 7.3, 8, 9, 10.1, 11, 12, 12.8, 13, 16, 16.5, 19.2, 20. Drei Werte plus rund. ⚑ ENTSCHIEDEN — FOUNDER 10.09.2026, woertlich: "15 nehmen". Damit ist die Wahl gefallen: 10 px k1 ("Jeder Knopf 44 hoch, Radius 10") = 23 % der Knopfhoehe 12 px d1 ("8 Kacheln, 12 Knoepfe und Platten, 999") = 27 % 15 px ui_kit.css 29.08., am AA-Dialogknopf abgenommen = 34 % <- GESETZT AA selbst liegt bei 33–41 % der Hoehe (Einrueckungsprofil des Knopfs "Languages", Bogen laeuft bei 26–32 AA-Pixeln aus = 11,6–14,3 CSS px auf 34,9 px Hoehe). 15 ist der einzige der drei Vorschlaege, der IM gemessenen AA-Band liegt. ⚠ DER RADIUS IST NICHT EINE ZEILE. Die Zierkante (Abschnitt 8) ist ein BILD, und ihre Ecken tragen den Radius mit. Beide Kantenblaetter sind deshalb am 10.09. (u1) mit RADIUS = 15.0 neu erzeugt worden: pruefungen/durchgang_u1_20260910/werkzeug/kante.py. Wer diesen Wert wieder aendert, MUSS beide Blaetter neu bauen — sonst sitzt die gemalte Ecke neben der gerundeten Kante. NACHGEMESSEN AM ERGEBNIS (u1/MESSUNG.txt, u1/bilder/ECKE_LUPE.png, 5-fach angesehen): Kantenstaerke unveraendert v1 2,00 px und v2 4,40 px bei 44 px Knopfhoehe; die Dehnung haelt auf 72/132/216/320 px mit 0,0000 % Sprung. In der Ecke traegt das Blatt bei R15 0,88 px, die Gegenprobe "R15-Blatt auf R12" nur 0,53 px, die Kontrolle "k2-Blatt(R12) auf R12" 1,06 px — die Gegenprobe ist sichtbar falsch, dieser Stand nicht. ═══════════ */ --ap-r-kachel: 8px; /* Kacheln, Karten, Belohnungen, Waren */ --ap-r-knopf: 15px; /* Knoepfe, Platten, Fenster, Listenzeilen. Founder 10.09.: "15 nehmen". ⚠ Bei jeder Aenderung BEIDE Kantenblaetter neu bauen (s. oben). */ --ap-r-rund: 999px; /* Plaketten, Fortschrittsbalken, runde Symbole */ /* ═══ 5 KNOPF- UND KARTENMASSE ══════════════════════════════════════════════════════════════ Gemessen: 43 Aktionsknoepfe mit 12 verschiedenen Hoehen (24, 26, 36, 38, 44, 46, 48, 49, 54, 55, 68, 79 px), 13 Radien, 10 Schriftgroessen, 88 Fuellungen, 53 Schlagschatten. Im ganzen Hub haengen 767 Knopfelemente an diesen Formen. 44 px ist KEINE Erfindung — es ist heute schon der haeufigste Fall: 148 von 767 Elementen in 26 von 36 Ansichten, und 24 der 43 Aktionsknoepfe. ═══════════════════════════════════════ */ --ap-knopf-h: 44px; /* der Regelknopf. Jeder Aktionsknopf, ohne Begruendung keine Ausnahme. */ --ap-knopf-h-klein: 31px; /* Reiter, Listenzeilen-Knopf, Zaehler. 82 Fundstellen in 17 Ansichten. */ --ap-knopf-h-winzig:26px; /* ⛑ 10.09.2026 (u6) DER PUNKT. AAs i-Punkt im Eventkopf und am HERO-PASS-Band misst 26 px (event_dice_pass.png, hero_pass.jpg); u5s Stufenpfeile im Monsterdetail messen 20 (monster_detail.png). Beide sind KLEINER als die Zierkante tragen kann — deshalb hat dieser Grad eine eigene Bauform (.ap-knopf.winzig) statt zweier handgeschriebener Ausnahmen. 26 ist der Regelwert; wer 20 oder 23 braucht, setzt sie an seiner Stelle und behaelt die Bauform. */ --ap-knopf-h-gross: 68px; /* Bodenleiste und grosse Kacheln. 101 Fundstellen in 30 Ansichten. BEWUSST gesetzt (D1: "nicht anfassen"). */ --ap-knopf-h-haupt: 79px; /* NUR der BATTLE-Knopf, 149x79. Der eine Hauptknopf des Spiels darf groesser sein als alle anderen; AA macht es genauso. Genau EINER. */ /* Karten und Kacheln. Gemessen: 17 verschiedene Kartenmasse (34x48 bis 143x188) mit 4 Radien, 13 verschiedene Belohnungsmasse mit 5 Radien. Zwei Missionskacheln nebeneinander sind beide 46x46 px, aber die eine hat Radius 0 und die andere Radius 11. Drei Kartengroessen, zwei Belohnungsgroessen, ein Radius. */ --ap-karte-deck-w: 67px; --ap-karte-deck-h: 88px; /* Deckplatz */ --ap-karte-liste-w: 47px; --ap-karte-liste-h: 54px; /* Sammlungsliste */ --ap-karte-detail-w:119px; --ap-karte-detail-h:159px; /* Kartendetail */ --ap-lohn-klein: 46px; /* Belohnung, Ware, Missionssymbol */ --ap-lohn-gross: 100px; /* Truheninhalt, Packvorschau */ /* ═══ 6 TITELBAND-GEOMETRIE ═════════════════════════════════════════════════════════════════ Gemessen: nur 13 von 22 Hauptansichten haben ueberhaupt ein Band. Diese 13 haben 7 Breiten (249–393), 6 Hoehen (40–46), 7 Oberkanten (70, 72, 75, 87, 113, 206, 210) und DREI verschiedene Blaetter. Die Luft darunter betraegt 0, 8, 10, 11, 13 oder 15 px. AA hat dagegen EINE Kapsel: in 6 von 6 gemessenen Bildschirmen 221–228 px breit, 51–52 hoch. Der Schnitt ist nicht frei waehlbar — er ist am Blatt gemessen (b3, 10.09.): band_zierbeschlag ist 2400x417, das Endstueck misst 16,875 % = 405 Quellpunkte. border-image-slice rechnet in QUELLpunkten, border-image-width in ZIELpunkten: 405 * 44/417 = 42,7 ≈ 43 px. Bleibt der Schnitt auf den alten 22 %, presst der Browser 528 Quellpunkte in 43 Zielpunkte, die Spange steht 28 % zu schmal und die Gemme wird zum Ei. Fuer das kleine Band (Hoehe 34): 405 * 34/417 = 33,0 px. ════════════════════════════════ */ --ap-band-w: 361px; /* haeufigste gemessene Breite (Schmiede, Packs, Helden) */ --ap-band-h: 44px; /* deckt sich mit der Regelknopfhoehe — eine Hoehe weniger im Hub */ --ap-band-oben: 70px; /* Oberkante, gemessen in 6 der 13 Baender */ --ap-band-luft: 12px; /* Luft zwischen Band und erstem Inhalt (heute 0–15) */ --ap-band-schnitt: 16.875%; /* border-image-slice, in Quellpunkten des Blattes */ --ap-band-zier: 43px; /* border-image-width bei Bandhoehe 44 */ --ap-band-zier-sm: 33px; /* dasselbe bei Bandhoehe 34 */ --ap-band-h-sm: 34px; /* ═══ 7 TREFFERFLAECHEN — DER EINZIGE ERLAUBTE UNTERSCHIED ZWISCHEN HUB UND ARENA ═══════════ Founder-Anordnung 10.09.: "im match soll alles gleich sein. aber groessere trefferflaechen." WIE DAS GEBAUT IST, und warum nicht als zweite Bauform: Die Bauteile in ui_bauteile.css legen eine unsichtbare Trefferschicht (::after) mittig ueber jeden Knopf, deren Mindestmass --ap-hit ist. Das SICHTBARE Rechteck aendert sich dadurch nicht — kein Umbruch, keine verschobene Zeile, keine zweite Optik. Der Finger trifft nur frueher. Genau das verlangt der Auftrag: dieselbe Optik, groesserer Finger. UMSCHALTEN: die Arena setzt EINE Klasse auf ihr Wurzelelement — . Danach gilt fuer jedes Bauteil in der Arena automatisch das groessere Mass. Sonst nichts. */ --ap-hit-hub: 44px; /* gemessen: heute schon der haeufigste Knopf im Hub (148 von 767). Zugleich die uebliche Untergrenze fuer eine Fingerflaeche. */ --ap-hit-arena: 56px; /* +27 %. Im Match wird unter Zeitdruck auf ein bewegtes Feld getippt; der Hub wird in Ruhe bedient. ⚑ OFFEN — FOUNDER-ENTSCHEID: 56 ist gesetzt, nicht gemessen. Es gibt keine AA-Messung fuer die Match-Trefferflaeche. Eine Zeile, wenn 52 oder 60 richtiger ist. ⚑ FOUNDER 10.09., woertlich: "56 vorerst lassen bis ich getestet habe" — der Wert bleibt bis zum Telefontest unangetastet. */ --ap-hit: var(--ap-hit-hub); /* der geltende Wert. Wird unten fuer .ap-arena umgehaengt. */ /* ═══ 8 ZIERKANTE — DIE HANDSCHRIFT ═════════════════════════════════════════════════════════ AA hat GAR KEINE Zierkante. Sein Knopfaufbau ist: harte fast schwarze Aussenlinie, darunter innen ein cremefarbener Lichtsaum, glaenzende Flaeche, unten ein dunklerer Saum. Das ist Bonbon, nicht Schmiedeeisen. Eine schmale Zierkante geht also BEWUSST ueber AA hinaus — sie ist unsere Handschrift und die Klammer zum neuen Titelband. Deshalb muss sie wirklich schmal bleiben: sobald sie breit wird, sieht der Knopf nach Menuerahmen aus statt nach Mobilspiel. Die Latte ist gemessen: AAs eigene Kante frisst 1,8 px (Equip) bis 3,2 px (Upgrade) von 44. ⚑ OFFEN — FOUNDER-ENTSCHEID. Vier Entwuerfe liegen in pruefungen/durchgang_k1_20260910/ (VERGLEICH.png, IN_SITU.png). Empfehlung an den Founder: v1 Fadenkante 2,0 px — fuer die Serie. Genauso leise wie AA, ueberlebt jede Breite. v2 Eckbeschlag 4,5 px — fuer die wenigen echten Hauptdarsteller. Staerkste Bandnaehe, kostet aber 4,5 px von 44 und traegt vier Eckstuecke. v3 Nietkante 9,0 px — abgeraten: dreimal so laut wie AA, nimmt der Flaeche 9 px. v4 Gemmenkante 2,4 px — schoen, braucht aber rund 110 px Knopfbreite; bei einem 72 px breiten "Go" blieben neben der Gemme nur 20 px fuer die Schrift. DIE ENTSCHEIDUNG IST DIE NAECHSTE ZEILE. Nichts sonst muss angefasst werden. */ /* ⛑ 10.09.2026 (k2) DIE KANTE IST JETZT EIN BLATT, kein Schattenrezept mehr. Gezeichnet wird sie in ui_bauteile.css auf der ::before-Ebene (border-image), weil ein box-shadow die vier geschmiedeten Eckvoluten von v2 nicht MALEN kann. Die zwei Marken unten bleiben als Rueckfall stehen, falls ein Blatt einmal nicht laedt — dann traegt der Knopf wenigstens seine Linie und sieht nicht nackt aus. UMSCHALTEN AUF v2: nicht hier, sondern am Knopf die Klasse "beschlag" setzen. Der Founder-Entscheid lautet v1 fuer die SERIE und v2 nur fuer den einen Hauptdarsteller je Bildschirm — eine Marke waere dafuer das falsche Werkzeug, weil sie ALLE umstellen wuerde. */ --ap-kante: var(--ap-kante-v1); /* v1 FADENKANTE — eine umlaufende Goldlinie, innen ein Silberfaden. Kein Eckstueck, kein Stein. AAs Knopf plus einer goldenen Linie, gemessen 2,0 px. */ --ap-kante-v1: inset 0 0 0 1px var(--ap-filigran-gold), inset 0 0 0 2px rgba(198,214,226,.42); /* v2 ECKBESCHLAG — Haarlinie umlaufend, dazu vier geschmiedete Eckbeschlaege. Die Beschlaege selbst zeichnet ui_bauteile.css als eigene Ebene (.ap-btn::before), weil ein Schatten keine Ecke malen kann; hier steht nur die umlaufende Kante mit ihrer groesseren Breite. */ --ap-kante-v2: inset 0 0 0 1px var(--ap-filigran-gold), inset 0 0 0 2px rgba(198,214,226,.42), inset 0 0 0 4.5px rgba(4,20,40,.30); /* ═══ 9 SCHATTEN- UND GLANZREZEPTE ══════════════════════════════════════════════════════════ Gemessen: 53 verschiedene Schlagschatten allein auf Knoepfen, 72 verschiedene Textschatten. Fuenf Rezepte. Der Glanz ist aus AAs Knopf abgenommen und auf UNSERE Farben umgerechnet, nicht abgeschrieben — die Herleitung steht ausfuehrlich bei --uk-gloss in ui_kit.css: AA hebt die Helligkeit um Faktor 1,93 an; auf unserem Grundton ergibt das eine Auflage von .38 an der Oberkante. RADIAL und nicht linear, weil AAs Glanzunterkante GEBOGEN ist — in der Mitte tiefer als an den Seiten. Ein linearer Verlauf kann das nicht. ══════════════ */ /* ⛑ 11.09.2026 (s1) EINE LICHTQUELLE, OBEN — DIE TAFEL, AUF DIE ALLE LICHTSYSTEME ZEIGEN. ANLASS. Founder: "momentan sieht es noch nicht aus einem Guss aus … fehlen da vielleicht Schatten in den Schaltflaechen?" qa/tiefe.mjs hat am 11.09. gezaehlt, was dahinter steckt: 132 verschiedene box-shadow-Rezepte, 23 verschiedene Unschaerfen, 209 von 664 Bedien- elementen ganz ohne Tiefe, und DREI parallele Lichtsysteme im selben Blatt (--uk-rim/--uk-gloss in ui_kit.css, --ap-sockel/--ap-innenlicht hier, --platte-licht in hub_new.html) mit drei verschiedenen Werten fuer dieselbe Sache (.17 gegen .45 gegen cc). Ab hier ist DIESE Tafel die Quelle; die beiden anderen zeigen hierher. ⚠ SELBST GEMESSEN, NICHT ABGESCHRIEBEN (qa/_s1_aa_lippe.py, Spaltenlesung durch AAs Knopf): AAs BATTLE (home.png, Elementkasten aus leitflaechen.json = 255 Bildpunkte hoch): Oberkante hell #fffef7 … #fff983 5 Bildpunkte = 1,5 CSS Fuellung #fef769 oben -> #fbe769 unten (Aufhellung kurz vor Schluss) LIPPE #cb8504 -> #893400, Mitte #984400 20 Bildpunkte = 5,95 CSS Kontur #010104 … #030715 4 Bildpunkte, DUNKEL, kein weisser Ring Lippe/Elementhoehe = 20/255 = 0,078 AAs "Go" (missionen.png, Spalte x=1050, Element 146 Bildpunkte hoch): Oberkante hell #feeaa5 #ffeeba 5 Bildpunkte = 1,5 CSS LIPPE #d08203 -> #702b0e, Mitte #8f440b 9 Bildpunkte = 2,68 CSS Lippe/Elementhoehe = 9/146 = 0,062 DARAUS DIE REGEL: Lippenhoehe = 0,075 x Elementhoehe, gedeckelt 1,2 bis 7. ⚠ ABWEICHUNG VOM AUFTRAG, SO GEMESSEN: der Auftrag nennt 0,09 und 7,4 CSS am BATTLE. Meine Spaltenlesung ergibt 0,062 bis 0,078 und 5,95 CSS. Der Unterschied ist die Schnittkante: wer die Uebergangszeilen 2341-2343 (#edcb4a #deae29 #d49815) zur Lippe zaehlt, kommt auf 23 Bildpunkte = 6,85 CSS und 0,087. Ich zaehle nur die Zeilen, die den Lippenton TRAGEN, nicht den Verlauf dorthin. Gerechnet wird mit 0,075. ⚠ UND DIE LIPPE IST DER EIGENE TON, NICHT SCHWARZ. Vorher: Schwarz 40 % unter jedem Knopf. Auf unserem Gold ergibt das gerechnet #937c06, ein Oliv — "abgedunkelt". AA steht bei #984400 — "beleuchtet". Der eigene dunkle Ton liegt bei uns laengst im Blatt: --ap-knopf--k, bisher nur als border-bottom-color benutzt. Er wird hier zur Lippe. KEINE NEUE FARBE — Probe: AAs Gold-Lippe #8f440b gegen unsere Rechnung aus der eigenen Fuellung (#EEA406, Helligkeit x 0,594, Farbton -13 Grad) = #8E4303, Abstand 1/1/8. Die Ableitung stimmt also; wir nehmen trotzdem den vorhandenen Wert #A96C05, weil jede neue Farbe die Styleguide-Tafel wachsen liesse. */ --ap-licht: rgba(255,255,255,.45); /* DIE Lichtfarbe. Eine Staerke, eine Stelle. */ --ap-innenlicht: inset 0 1px 0 var(--ap-licht); /* EINE Dicke: 1 CSS-Punkt, oben innen. Vorher lagen 21 Rezepte fuer dieselbe Kante im Blatt (93x .17/1px, 88x .45/2px, 81x .28/2px, 40x .5/1px, 31x .14/1px, …). */ --ap-bodenschatten: 0 2px 2px rgba(0,0,0,.45); /* DIE EINE weiche Unschaerfe. AA traegt unter der harten Lippe einen kurzen weichen Bodenschatten (1,2 bis 2,4 CSS). Erlaubt sind ab hier genau zwei Unschaerfen: 0 fuer die Lippe und 2 hier. Alles dazwischen faellt weg. */ --ap-mulde: inset 0 2px 2px rgba(0,0,0,.45); /* Die Gegenform zur Lippe: eine Flaeche, die im Grund LIEGT statt darauf zu stehen — Sockel eines Symbols, leeres Deckfach, Balkenbahn, Waehrungspille. Dieselbe eine Unschaerfe 2, dieselbe eine Richtung (von oben nach innen). AAs Waehrungsleiste ist genau das (home.png, Kopfzeile): eine dunkle Rinne, in der die Muenze liegt. */ --ap-randring: 0 0 0 1px var(--ap-kontur); /* DUNKEL. Vorher trugen 84 Elemente rgba(255,255,255,.07) RINGSUM — ein Ring ohne Richtung sagt "Licht von allen Seiten" und loescht die Lichtfuehrung an genau den grossen Flaechen. Gemessen: AAs BATTLE-Kontur L=0,0001 gegen Grund L=0,017. */ /* Die Lippe. Farbe und Hoehe stehen als eigene Marken, damit jede Fuellfamilie und jede Bauform sie UMBINDEN kann, ohne den Schattenstapel zu wiederholen (CSS loest var() erst am benutzenden Element auf). Wer nichts setzt, bekommt die Familie Tiefblau. */ --ap-lippe-neutral: rgba(6,32,67,.55); /* Die Lippe einer Flaeche OHNE Farbfamilie — Kachel, Zeile, Plakette. Sie bleibt durchscheinend wie der alte Schwarzsockel (sie multipliziert mit dem Grund, statt ihn zu decken), traegt aber unseren Konturton #062043 statt Schwarz. Damit ist auch die neutrale Lippe BELEUCHTET und nicht abgedunkelt. */ --ap-lippe: var(--ap-lippe-neutral); --ap-lippe-h: 3px; /* 0,075 x 44 px Regelknopf = 3,3 */ --ap-lippe-h-klein: 2px; /* 0,075 x 31 px = 2,3 ; 26 px = 2,0 */ --ap-lippe-h-gross: 5px; /* 0,075 x 68 px = 5,1 */ --ap-lippe-h-haupt: 6px; /* 0,075 x 79 px = 5,9 ; AA misst 5,95 */ --ap-sockel: 0 var(--ap-lippe-h) 0 var(--ap-lippe); --ap-sockel-klein: 0 var(--ap-lippe-h-klein) 0 var(--ap-lippe); --ap-sockel-gross: 0 var(--ap-lippe-h-gross) 0 var(--ap-lippe); --ap-sockel-ab: 0 1px 0 var(--ap-lippe); /* derselbe Knopf gedrueckt */ --ap-plattenschatten: 0 6px 14px rgba(0,0,0,.45); /* Fenster ueber dem Grund */ --ap-textschatten: 0 2px 0 rgba(0,0,0,.45); /* Knopf- und Titelschrift */ /* ── DIE ZWEITE VON DREI QUELLEN: ui_kit.css zeigt ab hier hierher ─────────────────────── ui_kit.css gehoert einem anderen Auftrag und wird nicht angefasst. Weil ui_quelle.css NACH ui_kit.css geladen wird (hub_new.html Zeile 68 gegen 81), reicht es, seine Marken hier umzubiegen: gleiche Spezifitaet, spaeteres Blatt gewinnt. Geloescht wird nichts. */ --uk-rim: var(--ap-licht); /* war rgba(255,255,255,.45) — jetzt dieselbe Quelle */ --uk-gloss: var(--ap-glanz); --uk-gloss-warm: var(--ap-glanz-warm); /* ⛑ 11.09.2026 (l3) DIE SCHRIFTKONTUR — AAs zweite Haelfte der Knopfschrift. AA traegt auf JEDEM Knopf ZWEI Dinge: den Schatten nach unten (oben) UND eine dunkle Kontur rings um die Buchstaben. Wir hatten bisher nur den Schatten, und deshalb stand unsere weisse Knopfschrift auf den drei HELLEN Fuellungen (Bernstein, Limette, Cyan) bei 1,6 bis 2,0:1 — unter jeder Schwelle. Die Kontur ist nicht Zierde: sie ist der Grund, warum AAs weisses "Go" auf Gold ueberhaupt lesbar ist. GEMESSEN AN _ui_ref/aa_2026/missionen.png (1320x2868), drei Knoepfe, drei Fuellungen, je die Konturflaeche geteilt durch den Umfang der weissen Schrift (A/P — richtungsfrei, im Gegensatz zu einer Lauflaenge in EINER Bildzeile, die an jeder schraegen Zugkante zu breit misst): "Go" auf Gold t = 2,89 Vorlagenpunkte, Schrifthoehe 40 -> t/Hoehe 0,0723 "Claim" auf Gruen t = 2,73 Schrifthoehe 45 -> t/Hoehe 0,0606 "Back" auf Blau t = 2,30 Schrifthoehe 35 -> t/Hoehe 0,0657 Bei 1320/393 = 3,359 sind das 0,68 bis 0,86 CSS-Punkte, Mittel 0,78. ⚠ WARUM em UND NICHT px — DAS IST DIE EIGENTLICHE MESSUNG. Die drei Zahlen oben sagen NICHT "AA nimmt 0,8 px". Sie sagen: AAs Kontur WAECHST mit der Schrift und bleibt dabei bei rund 6,6 % der Schrifthoehe (der Bildschirmtitel derselben Aufnahme, Hoehe 68, traegt t = 3,74 — dieselbe Groessenordnung, nicht dieselbe Zahl). Ein fester px-Wert waere auf unserem 16-px-Knopf richtig und auf dem 11-px-Zaehler ein Drittel zu fett; das ist genau der Fall, vor dem der Auftrag warnt ("die kleinste Knopfform darf die Kontur duenner tragen"). Mit .05em erledigt sich die Ausnahme, bevor sie entsteht: 11 px -> 0,55 · 13 px -> 0,65 · 16 px -> 0,80 CSS-Punkte. EIN Wert, KEINE zweite Bauform. 0,05em, weil die Kapitaelhoehe von Baloo 2 rund 0,72 em misst: 0,0723 * 0,72 = 0,052. ⚠ ACHT RICHTUNGEN, NICHT -webkit-text-stroke. Der Strich zeichnet bei HTML-Text MITTIG auf die Zugkante und frisst damit die halbe Strichbreite von der weissen Flaeche weg; `paint-order` haelt das in HTML nicht verlaesslich auf. Acht Schatten liegen HINTER dem Buchstaben — die weisse Flaeche bleibt unangetastet. Die Diagonalen tragen .0354em (= .05/Wurzel 2), sonst waere der Ring an den Ecken 41 % breiter als an den Flanken. ⚠ DIE REIHENFOLGE IST NICHT BELIEBIG: die Kontur steht VOR --ap-textschatten, damit der Ring ueber dem Schlagschatten liegt. Umgekehrt frisst der Schatten die untere Ringhaelfte. */ --ap-textkontur: .05em 0 0 var(--ap-kontur), -.05em 0 0 var(--ap-kontur), 0 .05em 0 var(--ap-kontur), 0 -.05em 0 var(--ap-kontur), .0354em .0354em 0 var(--ap-kontur), -.0354em .0354em 0 var(--ap-kontur), .0354em -.0354em 0 var(--ap-kontur), -.0354em -.0354em 0 var(--ap-kontur); --ap-glanz: radial-gradient(120% 74% at 50% -8%, rgba(235,250,255,.38) 0%, rgba(235,250,255,.20) 42%, rgba(235,250,255,0) 70%); /* Auf Bernstein waere ein kuehler Glanz ein Fremdkoerper — dieselbe Geometrie, warmer Ton, und schwaechere Auflage: auf der bereits hellen Goldflaeche las sich .38 als aufgesetzter weisser Streifen mit sichtbarer Kante, nicht als Licht. Auf Blau traegt der Grund die .38, auf Gold nicht — die Auflage muss so viel schwaecher sein, wie der Grund heller ist. */ --ap-glanz-warm: radial-gradient(120% 86% at 50% -8%, rgba(255,252,224,.30) 0%, rgba(255,250,214,.14) 46%, rgba(255,248,205,0) 74%); /* ═══ 10 BEWEGUNG ═══════════════════════════════════════════════════════════════════════════ D1: "Das ist der einheitlichste Bereich des Hubs, hier ist nichts zu tun." 9 Uebergangszeiten, aber 0,09 s (1.581 Stellen) und 0,22 s (1.100) tragen zusammen 88 Prozent; zwei Kurven tragen 91 Prozent. Die beiden Werte stehen hier nur, damit neuer Code sie nimmt statt einer zehnten Zeit — nicht, weil etwas umzubauen waere. ═══════════════════════════════════════════════ */ /* ═══ 11 DIE NEU-MARKE ══════════════════════════════════════════════════════════════════════ Founder-Entscheid 11.09.: "pinkes Band wie AA". Die drei Werte sind AM VORBILD GEMESSEN, nicht gewaehlt — aa_hub.mp4, Bild bei 25,00 s, Aufloesung 1320x2868, Punktprobe im Band: obere 30 % der Bandhoehe #fd92dc darunter #fe53c7 Kante der Schrift #601349 Sie stehen HIER und nicht im Bauteileblatt, weil sie Farbwerte sind und jeder Farbwert dieses Hauses hier steht — sonst zaehlt der Styleguide-Waechter sie zu Recht als Fremdfarbe (von Hand getippt, an keine Bedeutung gebunden). ════════════════════════════ */ --ap-neu-hell: #fd92dc; --ap-neu-voll: #fe53c7; --ap-neu-kante: #601349; --ap-zeit-kurz: .09s; /* Knopfdruck, Zustandswechsel */ --ap-zeit-lang: .22s; /* Ein- und Ausblenden */ /* ── 11.09.2026 (W3 §4) DIE DRITTE DAUER UND DIE ZWEI HAUSKURVEN ────────────────────────── GEMESSEN ueber alle sichtbaren Elemente aller 23 Ansichten (qa/rueckmeldung.mjs): Zeiten 0,09 s (1859x) · 0,22 s (563x) · 0,14 s (176x) · 0,16 s (120x) · 0,12 s (68x) · 0,08 s (9x) · 0,34 s (1x) Kurven cubic-bezier(.22,.61,.36,1) 2175x · ease 296x · cubic-bezier(.2,1.5,.4,1) 275x · cubic-bezier(.2,.7,.3,1) 50x Sieben Zeiten und vier Kurven sind keine Sprache, sondern vier Leute, die sich nicht abgesprochen haben. Die beiden grossen Zeiten und die beiden grossen Kurven tragen zusammen 88 bzw. 91 Prozent — sie sind die Sprache, der Rest ist Rauschen. DIE VIER AUSREISSER UND WOHER SIE KAMEN (nachgelesen, nicht geraten): 0,12 s (68x) = `--t-fast` in hub_new.html -> zieht auf --ap-zeit-kurz 0,08 s (9x) = zweimal `transform 80ms` an den Guide-Reitern -> --ap-zeit-kurz 0,34 s (1x) = `--t-slow` in hub_new.html -> zieht auf --ap-zeit-eingang ease (296x) = zwoelf Regeln OHNE Kurvenangabe -> --ap-kurve-haus ⚠ `--ap-kurve` ist NICHT die Hauskurve. Sie traegt 50 von 2 750 Vorkommen; die Hauskurve ist cubic-bezier(.22,.61,.36,1) mit 2 175. Sie bleibt stehen, damit nichts bricht, ist aber nicht mehr die Vorgabe fuer neuen Code. ⚠ --ap-zeit-eingang IST GEMESSEN, NICHT GEWAEHLT: aa_hub.mp4, 60 Bilder je Sekunde, Wechsel Shop -> Sammlung bei 24,467 s. Der INHALT wechselt in EINEM Bild; danach klingt die Eingangsbewegung des Inhalts ueber neun bis fuenfzehn Bilder ab (24,483 -> 24,717 s, also 234 ms bis auf den Leerlaufpegel). Aufgerundet 0,25 s. ═══════════════════════════════════════════════════════════════════════════════════════ */ --ap-zeit-eingang: .25s; /* Eingangsbewegung der Zielansicht (AA: 234 ms gemessen) */ --ap-kurve-haus: cubic-bezier(.22,.61,.36,1); /* 2 175 von 2 750 Vorkommen */ --ap-kurve-ueber: cubic-bezier(.2,1.5,.4,1); /* Quittungen, Treffer, Aufploppen */ /* ⛑ 11.09.2026 DRITTE KURVE AUFGELOEST. Sie stand auf cubic-bezier(.2,.7,.3,1) und trug 50 der 2 750 gerenderten Uebergaenge. Der Auftrag nennt ZWEI Kurven, und der Unterschied zur Hauskurve ist am Bild nicht auszumachen (gemessen von w3). Die Marke bleibt STEHEN und zeigt auf die Hauskurve — 50 Stellen umzuschreiben waere 50 Stellen mehr Angriffsflaeche fuer einen Tippfehler, und wer die Marke spaeter wieder eigen haben will, aendert eine Zeile statt fuenfzig. */ --ap-kurve: var(--ap-kurve-haus); } /* ═══ DIE EINE ZEILE FUER DIE ARENA ══════════════════════════════════════════════════════════ — mehr braucht das Match nicht. Danach traegt jedes Bauteil dort die groessere Trefferflaeche, bei unveraenderter Optik. Founder-Anordnung 10.09. ═════════════ */ .ap-arena{ --ap-hit: var(--ap-hit-arena); }