/* ═══════════════════════════════════════════════════════════════════════════════════════════ * ARCANE PRISM TD — DIE BAUTEILE * Angelegt 10.09.2026, Kennung sg1. Zehn Bauformen fuer Hub UND Arena. * Setzt public/ui_mod/ui_quelle.css voraus — dort steht JEDER Wert, hier steht KEIN Wert. * * DIE REGEL DIESES BLATTES: hier darf keine Zahl und keine Farbe stehen, die nicht aus der * Quelle kommt. Wer hier einen Hexwert oder ein "13px" hineinschreibt, hat den Zweck der * beiden Blaetter aufgehoben — dann sind wir wieder bei 2.080 Farbwerten und 46 Schriftgroessen. * (Ausnahmen, jede einzeln begruendet: Deckungswerte in rgba(), Prozentzahlen einer Geometrie * und die 0/1/2 px einer Haarlinie. Sie sind keine Entwurfsentscheidung, sondern Mechanik.) * * DIE ZEHN BAUTEILE, und wofuer sie da sind: * .ap-knopf Aktionsknopf, drei Farben, drei Zustaende * .ap-knopf.klein derselbe Knopf in klein — Reiter, Zeilenknopf, Zaehler * .ap-knopf.winzig derselbe Knopf unter 31 px — i-Punkt, Stufenpfeil, ohne Zierkante * .ap-band Titelband ueber einer Ansicht * .ap-kachel quadratisches Feld mit Symbol: Belohnung, Ware, Missionssymbol * .ap-karte Spielkarte, drei Groessen * .ap-fenster dunkle Platte: Popup, Abschnitt, Traeger * .ap-zeile Listenzeile * .ap-geld Waehrungsleiste am oberen Rand * .ap-balken Fortschrittsbalken * .ap-reiter Reiterleiste * Jede Bauform steht in public/styleguide.html lebend und in jedem Zustand. * * HUB UND ARENA TRAGEN DIESELBEN BAUTEILE. Der einzige Unterschied ist --ap-hit, und der * kommt ueber aus der Quelle. Es gibt hier bewusst KEINE zweite * Bauform fuer das Match: eine zweite Bauform waere in vier Wochen eine zweite Optik. * ═══════════════════════════════════════════════════════════════════════════════════════════ */ /* ⚠ box-sizing GEHOERT HIERHER UND NICHT IN EINE GLOBALE REGEL. GEMESSEN am 10.09. auf public/styleguide.html, bevor diese Zeile stand: die Kachel kam mit 50x50 statt 46x46 heraus, die Listenkarte mit 51x58 statt 47x54, die Listenzeile mit 64 px statt 44 und der Fortschrittsbalken mit 28 statt 24. Grund ist immer derselbe — jedes Bauteil traegt eine 2-px-Aussenkontur, und im Voreinstellungsmodell (content-box) kommt die ZU den Massen hinzu. Damit waeren die drei gemessenen Kartengroessen aus D1 auf dem Schirm nie die, die im Blatt stehen: aus 67x88 wuerde 71x92. Eine globale `*{box-sizing:border-box}` waere hier falsch: dieses Blatt wird IN den Hub geladen, und dort rechnen 5.394 Elemente seit Monaten im anderen Modell. Deshalb die Aufzaehlung — sie fasst genau die zehn Bauteile an und nichts sonst. */ .ap-knopf,.ap-band,.ap-kachel,.ap-karte,.ap-fenster,.ap-zeile,.ap-geld,.ap-balken, .ap-reiter,.ap-reiter>.reiter,.ap-balken>.bahn,.ap-feld{box-sizing:border-box} /* ═══ 1 AKTIONSKNOPF ════════════════════════════════════════════════════════════════════════ WANN: fuer jede Handlung, die der Spieler ausloest. WANN NICHT: fuer etwas, das nur anzeigt (dann .ap-kachel oder .ap-zeile), und nie fuer "Schliessen" — das Kreuz ist rot und gehoert nicht zu dieser Familie. DIE DREI FARBEN, und wann welche: .gold die EINE Hauptaktion des Bildschirms. GENAU EINE pro Bildschirm. .limette nehmen, sammeln, aufwerten — Claim, Upgrade, Level Up, Open. (ohne) Cyan ist die Voreinstellung: jede zweite Handlung, jedes Neutrale. .silber dritte Wahl oder Wartezeit — Request, Donate, "spaeter". Wer keine Farbe waehlt, bekommt Cyan. Das ist Absicht: Cyan ist die Farbe, von der es viele geben darf, und der haeufigste Fehler waere ein zweites Gold. ═══════════════════════════ */ .ap-knopf{ /* Mass und Form — alle vier Werte aus der Quelle */ min-height:var(--ap-knopf-h); padding:0 var(--ap-a4); border-radius:var(--ap-r-knopf); border:2px solid var(--ap-kontur); /* Schrift — EINE Familie, EINE Groesse, EINE Staerke fuer alle 767 Knopfelemente */ font-family:var(--ap-schrift); font-size:var(--ap-t-text); font-weight:var(--ap-fw-stark); /* ⛑ 11.09.2026 (l3) KONTUR UND SCHATTEN, NICHT NUR SCHATTEN. Eine Tinte fuer fuenf Fuellungen geht nur auf, wenn die Buchstaben ihre eigene Kante mitbringen: drei der fuenf Fuellungen sind HELL (Bernstein, Limette, Cyan), und weiss auf hell stand gemessen bei 1,59 bis 1,96:1. Die Herleitung der Breite steht in der Quelle bei --ap-textkontur; sie ist an AAs Go/Claim/Back abgenommen und traegt .05em, also 0,55 px am 11-px-Zaehler und 0,80 px am 16-px-Hauptknopf. ⚠ ZWEI FAMILIEN NEHMEN SIE AUSDRUECKLICH NICHT: .silber schreibt in --ap-grund und der gesperrte Knopf in --ap-knopf-schiefer-t. Beide sind DUNKLE Tinte, und eine dunkle Kontur um dunkle Schrift ist kein Rand, sondern ein Fleck. Beide setzen weiter unten bereits `text-shadow:none` — sie loeschen damit auch die Kontur, und das ist richtig. */ color:var(--ap-tinte); text-shadow:var(--ap-textkontur),var(--ap-textschatten); /* GROSSSCHREIBUNG: gemessen schreiben heute 29 Knoepfe GROSS und 114 normal, und in 17 von 36 Bildschirmen stehen beide Schreibweisen nebeneinander. Hier steht keine Regel, weil text-transform eine i18n-Entscheidung ist (RU-Versalien lesen sich anders als EN) — die Schreibweise gehoert in den Text, nicht ins Blatt. */ /* Flaeche: Glanz UEBER dem Grundverlauf. Der Glanz ist an AA gemessen, siehe Quelle 9. */ /* ⛑ 10.09.2026 (FOUNDER) DIE VOREINSTELLUNG IST JETZT TIEFBLAU, nicht mehr Cyan. Ein Knopf ohne Familienklasse traegt AAs System-Familie. Wer Cyan will, setzt es. */ background:var(--ap-glanz), linear-gradient(180deg,var(--ap-knopf-blau-1),var(--ap-knopf-blau-2)); box-shadow:var(--ap-kante),var(--ap-innenlicht),var(--ap-sockel); border-bottom-color:var(--ap-knopf-blau-k); display:inline-grid; place-items:center; position:relative; cursor:pointer; white-space:nowrap; user-select:none; -webkit-tap-highlight-color:transparent; transition:transform var(--ap-zeit-kurz) var(--ap-kurve), box-shadow var(--ap-zeit-kurz) var(--ap-kurve); } /* DIE TREFFERSCHICHT — der einzige Unterschied zwischen Hub und Arena. Eine unsichtbare, mittig zentrierte Flaeche mit dem Mindestmass --ap-hit. Sie liegt UNTER der Beschriftung (z-index 0 gegen die Kinder) und veraendert das sichtbare Rechteck nicht: der Knopf sieht in der Arena aus wie im Hub, faengt den Finger aber 6 px frueher. */ .ap-knopf::after{ content:""; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:100%; height:100%; min-width:var(--ap-hit); min-height:var(--ap-hit); border-radius:inherit; z-index:0; } .ap-knopf>*{position:relative; z-index:1} /* ═══ DIE ZIERKANTE ALS BLATT ═══════════════════════════════════════ ⛑ 10.09.2026 (k2) Founder-Entscheid "v1 und v2 wie du sagtest": v1 Fadenkante fuer die Serie, v2 Eckbeschlag fuer die wenigen Hauptdarsteller je Bildschirm. WARUM ::before UND NICHT ::after: ::after traegt bereits die Trefferschicht (Hub 44 / Arena 56). Zwei Aufgaben auf einer Ebene waeren ein Fehler, der erst im Gefecht auffaellt. WARUM EIN BLATT UND KEIN SCHATTEN: ein box-shadow kann keine Ecke MALEN. v2 traegt vier geschmiedete Voluten, die es als Bild geben muss. v1 koennte ein Schatten, benutzt aber dasselbe Blatt, damit beide Kanten denselben Weg gehen. WARUM ZWEI DATEIEN FUER 54 KNOEPFE: die Kante ist farbNEUTRAL. Flaeche, Farbe und Sockel kommen aus Code — ein Farbwechsel bleibt eine Zeile, statt neun Bilder zu kosten. MASSE GEMESSEN (k2, MESSUNG.txt): v1 Schnitt 160, Zierzone 16 px, haelt bis 32 px Knopfhoehe. v2 Schnitt 190 230, Zierzone 19/23 px, senkrecht 19+19 = 38 von 44 — deshalb NUR ab 44 px. Die Dehnung wurde auf 72, 132, 216 und 320 px geprueft: groesster Sprung 0,0000 Prozent. */ /* ⚠ `?r15` ist kein Zierrat. Beide Blaetter haben am 10.09. denselben Namen behalten und NUR ihren Inhalt gewechselt (Radius 12 -> 15). Ein Telefon, das die alte Datei im Speicher hat, zeichnete sonst die alte Ecke auf die neue Rundung — genau der Fehler, den dieser Durchgang beheben sollte, nur unsichtbar fuer den, der ihn baut. Beim naechsten Radiuswechsel wandert diese Kennung mit. */ .ap-knopf::before{ content:""; position:absolute; inset:0; z-index:2; pointer-events:none; border-style:solid; border-color:transparent; border-width:16px; border-image:url("../ui_assets/knopf_kante_faden.webp?r15") 160 / 16px / 0 stretch; } .ap-knopf.beschlag::before{ border-width:19px 23px; border-image:url("../ui_assets/knopf_kante_beschlag.webp?r15") 190 230 / 19px 23px / 0 stretch; } /* ⛑ 11.09.2026 BESCHLAG NUR AB 140 PX (Founder-Entscheid "2 ja"). Gemessen (qa/_beschlag_wort.mjs): die 23-px-Zierzone links und rechts haelt Text in EN, DE und RU erst ab etwa 140 px Breite; schmalere Kaufknoepfe verdeckten Buchstaben mit den Voluten. Unter 140 px traegt der Knopf deshalb die Fadenkante der Serie — dieselben Werte wie `.ap-knopf::before` oben, nichts Neues. Die Klasse setzt die Beschlag-Wache in hub_new.html (misst offsetWidth, also ohne Druck-Skalierung). */ /* ⛑ 11.09.2026 HIDDEN HEISST WEG. `.ap-knopf` und seine Groessen setzen display:grid/inline-grid — das schlaegt die Browserregel [hidden]{display:none}. Gemessen (qa/_hidden_knoepfe.mjs): #streakGet und #btnMaxLevel standen mit hidden-Attribut auf grid/inline-grid; in der Streak-Leiste zeigte das einen leeren Limetten-Knopf rechts (A-Z-Bild 061_245p4s). Die Regel gilt fuer das ganze Bauteil, weil die Ursache im Bauteil liegt und nicht im einzelnen Knopf. */ .ap-knopf[hidden]{display:none!important} .ap-knopf.beschlag.beschlag-schmal::before{ border-width:16px; border-image:url("../ui_assets/knopf_kante_faden.webp?r15") 160 / 16px / 0 stretch; } /* Der gesperrte Knopf traegt die Zierde gedaempft — sie soll nicht heller sein als die Flaeche darunter, sonst sieht ein ausgeschalteter Knopf teurer aus als ein bereiter. */ .ap-knopf.zu::before,.ap-knopf[disabled]::before,.ap-knopf[aria-disabled="true"]::before{ opacity:.45; filter:saturate(.5); } /* Zustand GEDRUECKT — der Knopf faellt um 2 px auf seinen Sockel. Ein Knopf, der beim Druck nichts tut, fuehlt sich kaputt an; das ist der billigste Griff im ganzen Blatt. */ .ap-knopf:active{ transform:translateY(2px); box-shadow:var(--ap-kante),var(--ap-innenlicht),var(--ap-sockel-ab); } /* Zustand GESPERRT — dunkler Schiefer, kein Grau. AA nimmt fuer gesperrt ein sehr dunkles, entsaettigtes Blaugruen ("Max Level" auf der Turmkarte). Der Knopf sieht damit ausgeschaltet aus und nicht kaputt. Grau saehe nach Fehler aus. Gilt fuer alle drei Farben. */ .ap-knopf.zu,.ap-knopf[disabled],.ap-knopf[aria-disabled="true"]{ background:linear-gradient(180deg,var(--ap-knopf-schiefer-1),var(--ap-knopf-schiefer-2)); border-color:var(--ap-knopf-schiefer-k); border-bottom-color:var(--ap-knopf-schiefer-k); color:var(--ap-knopf-schiefer-t); text-shadow:none; box-shadow:none; cursor:default; transform:none; } /* Die drei Farben. Jede aendert GENAU drei Dinge: Flaeche oben, Flaeche unten, Sockelkante. */ .ap-knopf.gold{ /* ⛑ 10.09.2026 GOLD TRAEGT AAs ACHTSTUFIGE LICHTFUEHRUNG, nicht die Zweistufen-Rampe. Begruendung und Messwerte stehen in ui_quelle.css bei --ap-gold-flaeche. */ background:var(--ap-glanz-warm),var(--ap-gold-flaeche); border-bottom-color:var(--ap-knopf-bernstein-k); } .ap-knopf.limette{ background:var(--ap-glanz), linear-gradient(180deg,var(--ap-knopf-limette-1),var(--ap-knopf-limette-2)); border-bottom-color:var(--ap-knopf-limette-k); } /* ⛑ 10.09.2026 (FOUNDER) TIEFBLAU — nach dem ersten Blick auf dem Telefon: "mir gefaellt es in dem dunklen blau besser." AAs System-Familie, gemessen aus 57 Bildschirmen. Sie ist ab sofort die VOREINSTELLUNG der neutralen Knoepfe; Cyan bleibt als Klasse fuer die Stellen, an denen der Akzent des Titelbands aufgenommen werden soll. */ .ap-knopf.cyan{ background:var(--ap-glanz), linear-gradient(180deg,var(--ap-knopf-cyan-1),var(--ap-knopf-cyan-2)); border-bottom-color:var(--ap-knopf-cyan-k); } .ap-knopf.blau{ background:var(--ap-glanz), linear-gradient(180deg,var(--ap-knopf-blau-1),var(--ap-knopf-blau-2)); border-bottom-color:var(--ap-knopf-blau-k); } .ap-knopf.silber{ background:var(--ap-glanz), linear-gradient(180deg,var(--ap-knopf-silber-1),var(--ap-knopf-silber-2)); border-bottom-color:var(--ap-knopf-silber-k); color:var(--ap-grund); text-shadow:none; } /* ⛑ 10.09.2026 (u1) DER WARNKNOPF — und warum er KEINE vierte Farbfamilie ist. Die Quelle sagt in Abschnitt 1.5: Rot ist bei AA kein Aktionsknopf, es sitzt auf dem Schliesskreuz und auf Fehlern. Das gilt weiter. Genau ZWEI Knoepfe im ganzen Hub sind aber UNUMKEHRBAR — "Konto loeschen" und "Alles zuruecksetzen" —, und dort IST die Farbe die Warnung (Befund Agent RK, 04.09.: "Ein Loeschknopf, der nicht rot ist, ist der gefaehrlichste Knopf im Menue"). Deshalb nicht ".rot" als waehlbare Familie, sondern ".warn" als Zustand einer Handlung, die nicht rueckgaengig zu machen ist. Wer ihn fuer etwas Umkehrbares nimmt, hat ihn falsch benutzt. Die Werte stehen in der Quelle, 1.5. */ .ap-knopf.warn{ background:var(--ap-glanz),linear-gradient(180deg,var(--ap-rot),var(--ap-rot-2)); border-bottom-color:var(--ap-rot-k); } /* Ueber die ganze Breite seines Platzes. Reine Mechanik, kein Wert — dafuer gab es bisher .setbig.wide, .wide, width:100% und flex:1 nebeneinander in vier Ansichten. */ .ap-knopf.voll{ width:100%; } /* DER EINE HAUPTKNOPF DES SPIELS — 149x79, nur BATTLE. D1: "Der eine Hauptknopf des Spiels darf groesser sein als alle anderen; AA macht es genauso." Genau EINER im ganzen Hub. */ /* ⛑ 10.09.2026 (FOUNDER-ENTSCHEID) DER EINE HAUPTDARSTELLER JE BILDSCHIRM DARF LAUTER SEIN. AA setzt seinen goldenen Knopf auf 17 px, unsere Regelschrift ist 13 — der wichtigste Knopf der Ansicht wirkte dadurch leiser als seine Nachbarn, obwohl er der Grund ist, warum man den Bildschirm ueberhaupt geoeffnet hat. Wir nehmen 16 (--ap-t-titel) statt AAs 17, weil 17 in unserer Leiter nicht vorkommt und eine siebte Stufe genau das waere, wovon wir weg wollen. Gilt fuer die Klasse "gross" — NICHT fuer .haupt, das bleibt der BATTLE-Knopf. */ .ap-knopf.gross{ font-size:var(--ap-t-titel) } .ap-knopf.haupt{ min-height:var(--ap-knopf-h-haupt); font-size:var(--ap-t-zahl); padding:0 var(--ap-a5); border-radius:var(--ap-r-knopf); } /* ═══ 1c DIE LIPPE — s1, 11.09.2026 ═════════════════════════════════════════════════════════ Die Lippe ist der harte Schatten unter dem Knopf (Aussenschatten, y>0, Unschaerfe 0). Sie war bis heute bei JEDER Bauteilhoehe dieselbe: Median 3 px bei Hoehe 30-50, bei 50-80 und bei 80-400; 118 von 199 Lippen im Hub waren exakt 3 px, und 161 von 199 waren SCHWARZ. AA macht beides anders — selbst gemessen (Spaltenlesung durch AAs Knopf, Werte und Herleitung stehen in ui_quelle.css Abschnitt 9): AAs BATTLE Element 255 Bildpunkte, Lippe 20 -> 0,078 der Hoehe, Ton #984400 AAs "Go" Element 146 Bildpunkte, Lippe 9 -> 0,062 der Hoehe, Ton #8f440b Hier wird deshalb NUR die Marke umgebunden, nicht der Schattenstapel wiederholt: --ap-sockel steht einmal in ui_quelle.css als `0 var(--ap-lippe-h) 0 var(--ap-lippe)`, und CSS loest beide var() erst am benutzenden Element auf. Eine Familie setzt also ihre Farbe, eine Groesse ihre Hoehe — der Stapel bleibt einer. ⚠ KEINE NEUE FARBE. Jede Lippe nimmt --ap-knopf--k, den Ton, der als border-bottom-color ohnehin schon an derselben Kante steht. ══════════════════════════════ */ /* ⚠ DIE FALLE, DIE MICH EINEN MESSLAUF GEKOSTET HAT (s1, 11.09.2026): --ap-sockel steht in ui_quelle.css als `0 var(--ap-lippe-h) 0 var(--ap-lippe)` AUF :root. Eine benutzerdefinierte Eigenschaft wird aber DORT eingesetzt, wo sie DEKLARIERT ist, und erst der fertige Wert wird vererbt. Wer unten --ap-lippe umbindet, aendert --ap-sockel deshalb NICHT mehr — gemessen am BATTLE-Knopf: --ap-lippe war korrekt #A96C05 und --ap-lippe-h korrekt 6px, --ap-sockel stand trotzdem auf `0 3px 0 rgba(6,32,67,.55)`. Die Deklaration muss also an dem Element stehen, das sie auch benutzt. Genau dafuer sind diese drei Zeilen da; die Fassung in der Quelle bleibt die Voreinstellung fuer alle Flaechen, die keine Knopffamilie tragen. */ .ap-knopf{ --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); } .ap-knopf { --ap-lippe:var(--ap-knopf-blau-k) } /* Voreinstellung Tiefblau */ .ap-knopf.gold { --ap-lippe:var(--ap-knopf-bernstein-k) } .ap-knopf.limette { --ap-lippe:var(--ap-knopf-limette-k) } .ap-knopf.cyan { --ap-lippe:var(--ap-knopf-cyan-k) } .ap-knopf.blau { --ap-lippe:var(--ap-knopf-blau-k) } .ap-knopf.silber { --ap-lippe:var(--ap-knopf-silber-k) } .ap-knopf.warn { --ap-lippe:var(--ap-rot-k) } /* Die Hoehe haengt an der BAUFORM, nicht an der Farbe: 0,075 x sichtbare Knopfhoehe. */ .ap-knopf.klein,.ap-knopf.winzig { --ap-lippe-h:var(--ap-lippe-h-klein) } /* 31 / 26 px */ .ap-knopf.gross { --ap-lippe-h:var(--ap-lippe-h-gross) } /* 68 px */ .ap-knopf.haupt { --ap-lippe-h:var(--ap-lippe-h-haupt) } /* 79 px, BATTLE */ /* ═══ 2 KLEINER KNOPF ═══════════════════════════════════════════════════════════════════════ WANN: Reiter, Knopf in einer Listenzeile, Zaehler, Plus-Knopf. 82 Fundstellen in 17 Ansichten. WANN NICHT: fuer eine echte Handlung mit Folgen — die traegt den Regelknopf. ⚠ Die Trefferschicht bleibt unveraendert: der kleine Knopf ist SICHTBAR 31 px hoch, aber seine Trefferflaeche ist weiter --ap-hit. Genau dafuer ist die Schicht da. ══════════════ */ /* ⚠ 10.09.2026 (u1) DER KLEINE KNOPF BEHAELT DEN KNOPFRADIUS und bekommt NICHT den Kachelradius. Grund ist mechanisch, nicht geschmacklich: die Zierkante ist ein BILD, das auf --ap-r-knopf (heute 15) gezeichnet ist. Auf 8 px Radius schnitte die Rundung dem Blatt die Ecke ab — genau der Fehler, den u1 heute an der Gegenprobe "R15-Blatt auf R12" gemessen hat (Kante in der Ecke 0,53 statt 0,88 px). Ein Knopf, EIN Radius. */ .ap-knopf.klein{ min-height:var(--ap-knopf-h-klein); padding:0 var(--ap-a3); font-size:var(--ap-t-klein); } /* ═══ 2b WINZIGER KNOPF — UNTER 31 PX, OHNE ZIERKANTE ═══════════════════════════════════════ ⛑ 10.09.2026 (u6). WARUM ES DIESE BAUFORM GEBEN MUSS UND NICHT ZWEI AUSNAHMEN: Die Fadenkante ist ein BILD mit 16 px Zierzone oben UND unten. 16 + 16 = 32. In einen 26-px-Knopf passt das nicht — das Blatt wird gestaucht und liegt als HELLER RING auf der Flaeche. u4 hat den Fall an AAs 26-px-i-Punkten gefunden (.evinfo, .hpinfo) und mit `border-image:none` abgestellt; u5 hat denselben Fall an den 20-px-Stufenpfeilen gefunden und die Bauform dort ganz weggelassen. Zwei Agenten, derselbe Befund, zwei verschiedene Notloesungen — genau das erzeugt die 73 Eigenverlaeufe, von denen wir wegwollen. WANN: jeder Knopf unter 31 px — i-Punkt, Stufenpfeil, Zaehler, Schrittmarke. WANN NICHT: fuer eine Handlung mit Folgen. Ein Knopf, den man nicht mit dem Daumen trifft, darf nichts ausloesen, was man nicht zuruecknehmen kann; er zeigt oder er blaettert. ⚠ ER VERLIERT NUR DIE ZIERDE, SONST NICHTS. Flaeche, Farbfamilie, Radius, Sockel, Druckweg und Trefferflaeche kommen weiter aus .ap-knopf — es ist derselbe Knopf, nur zu klein fuer sein Blatt. Deshalb steht hier auch KEINE eigene Fuellung und KEINE eigene Farbe. ⚠ NICHT die Zierkante auf ein kleineres Blatt umbauen: die Kante ist AAs Erkennungszeichen des GROSSEN Knopfes. Ein 20-px-Punkt mit Goldfaden sieht nicht feiner aus, sondern verkratzt — gemessen im Gegenueberbild EVENT_PASS vom 10.09. ═══════════════════════════ */ .ap-knopf.winzig{ min-height:var(--ap-knopf-h-winzig); padding:0 var(--ap-a2); font-size:var(--ap-t-klein); /* ⛑ 10.09.2026 (w1) OHNE DEN GOLDFADEN — und das ist die Vervollstaendigung der Bauform, keine neue Entscheidung. u6 hat die Zierkante hier als BLATT abgeschaltet (::before, naechste Zeile), aber die Fadenkante liegt an ZWEI Stellen: als Blatt UND als --ap-kante-v1 im Schattenstapel von .ap-knopf. Die Marke ist dort ausdruecklich als Rueckfall gedacht ("falls ein Blatt einmal nicht laedt"), sie wird aber immer gemalt. Am 20-px-Stufenpfeil des Monsterdetails ist das gemessen sichtbar: 1 px Gold plus 1 px Silber auf 18,3 px Knopf sind 22 % des Durchmessers — der Pfeil bekam einen goldenen Ring und sah aus wie eine Medaille, nicht wie ein Pfeil. Genau der Befund, wegen dem u5 die Bauform hier ganz weggelassen hat. Eine Bauform, die "ohne Zierkante" heisst, muss sie an BEIDEN Stellen ablegen, sonst bleibt der Grund fuer die naechste Ausnahme stehen. ⚠ Innenlicht und Sockel BLEIBEN — sie sind Koerper, nicht Zierde. Ohne den Sockel verlaere der Knopf seinen Druckweg, und dann waere es kein Knopf mehr. */ box-shadow:var(--ap-innenlicht),var(--ap-sockel); } .ap-knopf.winzig::before{ border-image:none; border-width:0 } .ap-knopf.winzig:active{ box-shadow:var(--ap-innenlicht),var(--ap-sockel-ab) } /* ═══ 3 TITELBAND ═══════════════════════════════════════════════════════════════════════════ WANN: ueber jeder Ansicht und jedem Abschnitt, der einen Namen traegt. Heute haben 9 von 22 Hauptansichten gar keines — sie bekommen dieses. WANN NICHT: als Knopf. Das Band ist eine Ueberschrift, es wird nicht gedrueckt. ZWEI FAMILIEN, und das bleibt so — AA hat ebenfalls zwei: die schmale Kapsel (.ap-band) und den vollbreiten Abschnittskopf ueber Keyart (.ap-band.breit, fuer Guide, HeroPass, Missions, Pass, Eventseiten). Sieben Varianten sind zu viel, zwei sind richtig. Der Schnitt ist am Blatt gemessen, Herleitung in der Quelle, Abschnitt 6. ═══════════════ */ .ap-band{ width:var(--ap-band-w); max-width:100%; height:var(--ap-band-h); margin:0 auto var(--ap-band-luft); position:relative; display:grid; place-items:center; font-family:var(--ap-schrift); font-size:var(--ap-t-kopf); font-weight:var(--ap-fw-stark); letter-spacing:var(--ap-sperr-kopf); color:var(--ap-tinte); text-shadow:var(--ap-textschatten); } /* Das Blatt liegt auf einer eigenen Ebene, damit die Schrift NICHT mitskaliert. Genau daran ist die alte Bandfamilie gescheitert: wer border-image auf das Element selbst legt, kann die Zierzone nicht unabhaengig von der Textbreite steuern. */ .ap-band::before{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none; border-style:solid; border-color:transparent; border-image-source:var(--ap-band-blatt); border-image-slice:0 var(--ap-band-schnitt) fill; border-image-width:0 var(--ap-band-zier); } .ap-band>*{position:relative; z-index:1} .ap-band.sm{ height:var(--ap-band-h-sm); font-size:var(--ap-t-titel); } .ap-band.sm::before{ border-image-width:0 var(--ap-band-zier-sm); } /* Die vollbreite Familie: dasselbe Blatt, ueber die ganze Breite gezogen. */ .ap-band.breit{ width:100%; } /* ═══ 4 KACHEL ══════════════════════════════════════════════════════════════════════════════ WANN: ein Symbol in einem Feld — Belohnung, Ware, Missionssymbol, Truheninhalt. WANN NICHT: fuer eine Spielkarte (die hat ein Seitenverhaeltnis, siehe .ap-karte). Zwei Groessen, EIN Radius. Gemessen waren es 13 Masse und 5 Radien; zwei Missionskacheln nebeneinander sind beide 46x46, aber die eine hat Radius 0 und die andere Radius 11. ════ */ .ap-kachel{ width:var(--ap-lohn-klein); height:var(--ap-lohn-klein); border-radius:var(--ap-r-kachel); border:2px solid var(--ap-kontur); background:linear-gradient(180deg,var(--ap-platte-hell),var(--ap-platte)); box-shadow:var(--ap-innenlicht); /* s1: EINE Lichtkante, war .18/1px */ display:grid; place-items:center; position:relative; overflow:hidden; } .ap-kachel.gross{ width:var(--ap-lohn-gross); height:calc(var(--ap-lohn-gross) * 1.04); } .ap-kachel>img{ width:78%; height:78%; object-fit:contain } /* Die Zahl auf der Kachel — Menge, Stueckzahl, Preis. Immer unten rechts, immer 11 px. */ .ap-kachel>.zahl{ position:absolute; right:2px; bottom:1px; font-family:var(--ap-schrift); font-size:var(--ap-t-klein); font-weight:var(--ap-fw-stark); color:var(--ap-tinte); text-shadow:var(--ap-textschatten) } /* DIE HELLE KACHEL — ⛑ 10.09.2026 (u6). Das Gegenstueck zu .ap-fenster.hell, und es hat bisher gefehlt: .ap-fenster kannte die helle Platte, .ap-kachel nicht. Deshalb konnten die Freischaltkacheln der Trophaeenstrasse (.utile, 73x72 aus arena_freischaltung.png) beim Umzug nicht mit — u4 hat sie ausdruecklich liegen gelassen und den Mangel gemeldet. WANN: eine Kachel, die einen INHALT ZEIGT statt einen Besitz — Freischaltung, Vorschau, Belohnung auf hellem Traeger. WANN NICHT: fuer eine Ware im Besitz; die bleibt dunkel. ⚠ Die Zahl darauf wird DUNKEL. Weisse Schrift mit weissem Schatten auf heller Flaeche ist der haeufigste Lesefehler der ganzen Tafel — deshalb steht er hier abgeraeumt und nicht als Aufgabe fuer den naechsten Einbau. */ .ap-kachel.hell{ background:linear-gradient(180deg,var(--ap-hellplatte-1),var(--ap-hellplatte-2)); border-color:var(--ap-filigran-silber); color:var(--ap-grund); box-shadow:var(--ap-innenlicht); /* s1: EINE Lichtkante, war .55/1px */ } .ap-kachel.hell>.zahl{ color:var(--ap-grund); text-shadow:none } /* ═══ 5 SPIELKARTE ══════════════════════════════════════════════════════════════════════════ WANN: eine Karte des Spielers — Turm, Zauber, Support, Held. WANN NICHT: fuer eine Belohnung oder Ware (das ist .ap-kachel). DREI Groessen statt 17: Deckplatz, Liste, Detail. Die Seltenheit faerbt NUR den Rand — die neun Stufenfarben sind Spielsprache und bleiben, aber sie duerfen nie die Flaeche tragen, sonst stehen neun Kartenfarben gegen eine Knopffamilie. ═════════════════════════ */ .ap-karte{ width:var(--ap-karte-liste-w); height:var(--ap-karte-liste-h); border-radius:var(--ap-r-kachel); border:2px solid var(--ap-selten-common); background:linear-gradient(180deg,var(--ap-platte-hell),var(--ap-platte)); box-shadow:var(--ap-sockel); position:relative; overflow:hidden; display:grid; place-items:center; } .ap-karte.deck { width:var(--ap-karte-deck-w); height:var(--ap-karte-deck-h) } .ap-karte.detail{ width:var(--ap-karte-detail-w); height:var(--ap-karte-detail-h) } .ap-karte>img{ width:100%; height:100%; object-fit:cover } /* Die neun Seltenheitsstufen — nur der Rand. */ .ap-karte.common {border-color:var(--ap-selten-common)} .ap-karte.uncommon {border-color:var(--ap-selten-uncommon)} .ap-karte.rare {border-color:var(--ap-selten-rare)} .ap-karte.elite {border-color:var(--ap-selten-elite)} .ap-karte.epic {border-color:var(--ap-selten-epic)} .ap-karte.legendary{border-color:var(--ap-selten-legendary)} .ap-karte.mythic {border-color:var(--ap-selten-mythic)} .ap-karte.relic {border-color:var(--ap-selten-relic)} .ap-karte.prismatic{border-color:var(--ap-selten-prismatic)} /* ═══ 6 FENSTER ═════════════════════════════════════════════════════════════════════════════ WANN: die dunkle Platte, auf der Inhalt sitzt — Popup, Abschnitt, Traeger einer Liste. WANN NICHT: als Hintergrund einer ganzen Ansicht (das ist der Grund selbst, kein Fenster). ⚠ HELLER GRUND IM KARTENDETAIL BLEIBT. Das ist KEIN Ausrutscher — AA macht es in karte_detail_turm/zauber/support genauso: helle Platte auf dunklem Hintergrund. Dafuer gibt es .ap-fenster.hell. ═══════════════════════════════════════════════════════════════ */ .ap-fenster{ background:linear-gradient(180deg,var(--ap-platte),var(--ap-grund)); border:1px solid var(--ap-linie); border-radius:var(--ap-r-knopf); box-shadow:var(--ap-innenlicht),var(--ap-plattenschatten); /* s1: war .14/1px */ padding:var(--ap-a4); } .ap-fenster.hell{ background:linear-gradient(180deg,var(--ap-hellplatte-1),var(--ap-hellplatte-2)); color:var(--ap-grund); border-color:var(--ap-filigran-silber); } /* DIE ROSE PLATTE — ⛑ 10.09.2026 (u6), und sie ist ein ZURUECKDREHEN. Beim Umzug am 10.09. ist der blassrosa Koerper der Festungs-Knotenkarte auf die kuehle Platte gewandert, weil es nur EINE helle gab. Gemessen im Gegenueberbild GEGEN_FESTUNG: vorher #FCECEE, nachher #F1F5FC, AA #FCECEE — der Umzug hat die Ansicht also von AA WEG gefuehrt, und zwar exakt um den Betrag, um den sie vorher richtig war. AA hat an dieser Stelle wirklich zwei helle Traeger: kuehl im Kartendetail (karte_detail_turm.png, #DCE9F1/#B1C7E4), rosé auf der Knotenkarte der Festung (festung_ausbaupfad.png, #FCECEE mit Wertzeilen #FDEEF0). ⚠ ES IST EIN FLACHER TON, KEIN VERLAUF. AAs Koerper und seine Wertzeilen liegen zwei von 255 auseinander; ein Verlauf darueber waere erfunden und kostet ein gezaehltes Rezept. Die Wertzeilen bleiben deshalb eine leichte ABDUNKLUNG des Traegers (rgba schwarz), keine eigene Farbe. ⚠ NUR DIE FESTUNGS-KNOTENKARTE. Rosé ist bei AA kein Allzweckhell. */ .ap-fenster.hell.rose{ background:var(--ap-platte-rose) } /* ═══ 7 LISTENZEILE ═════════════════════════════════════════════════════════════════════════ WANN: eine Zeile in einer Liste — Post, Freunde, Klanmitglieder, Einstellungen. WANN NICHT: wenn die Zeile eine echte Hauptaktion ist; dann steht rechts ein .ap-knopf drin. Bei AA sind die acht Zeilen in den Einstellungen PIXELGLEICH. 8 von 8. Das ist der Massstab. */ .ap-zeile{ display:flex; align-items:center; gap:var(--ap-a3); min-height:var(--ap-knopf-h); padding:var(--ap-a2) var(--ap-a3); border-radius:var(--ap-r-knopf); border:2px solid var(--ap-kontur); background:linear-gradient(180deg,var(--ap-platte-hell),var(--ap-platte)); box-shadow:var(--ap-innenlicht); /* s1: EINE Lichtkante, war .18/1px */ font-family:var(--ap-schrift); font-size:var(--ap-t-text); color:var(--ap-tinte); } .ap-zeile>.wachs{flex:1; min-width:0} /* der Teil, der die Breite frisst */ /* DIE INDIGOZEILE — ⛑ 10.09.2026 (u6), ebenfalls ein ZURUECKDREHEN. AAs Missions- und Questzeilen sind NICHT die dunkle Systemplatte, sondern kraeftiges Blauviolett (Quelle 1.4d, gemessen #4D5BFF -> #3F49D8, Rand #7F92FF). Beim Umzug am 10.09. sind die Missionszeilen auf die Systemplatte gefallen und damit von AAs #5057FF auf #153763 gerutscht — im Gegenueberbild GEGEN_MISSIONEN sofort sichtbar: die Liste verschwindet im Grund, wo sie bei AA der ganze Bildschirm ist. WANN: eine Liste, in der jede Zeile eine AUFGABE ist — Missionen, Clanquests, Ereignisziele. WANN NICHT: fuer eine Verwaltungszeile (Post, Freunde, Einstellungen). Die bleibt dunkel; sonst schreit der ganze Hub. ⚠ SIE IST KEINE KNOPFFARBE. Auf ihr steht ein Knopf, sie ist keiner — der k1-Einwand gegen blaue KNOEPFE (Quelle 1.3) bleibt unberuehrt. */ .ap-zeile.indigo{ background:linear-gradient(180deg,var(--ap-zeile-indigo-1),var(--ap-zeile-indigo-2)); border-color:var(--ap-zeile-indigo-k); box-shadow:var(--ap-innenlicht),var(--ap-sockel); /* s1: war .28/2px */ } /* ═══ 8 WAEHRUNGSLEISTE ═════════════════════════════════════════════════════════════════════ WANN: am oberen Rand jeder Ansicht, in der der Spieler etwas ausgeben kann. WANN NICHT: im Match — dort steht die Matchwaehrung, nicht die Kontowaehrung. Gemessen ist die Leiste heute 44 px hoch in 19 Ansichten, 35,6 px auf Home und Settings und 0 px im Guide. Eine Hoehe: --ap-knopf-h. ═══════════════════════════════════════════ */ .ap-geld{ display:flex; align-items:center; gap:var(--ap-a4); min-height:var(--ap-knopf-h); padding:0 var(--ap-a2); font-family:var(--ap-schrift); font-size:var(--ap-t-text); font-weight:var(--ap-fw-stark); color:var(--ap-tinte); } .ap-geld>.posten{display:flex; align-items:center; gap:var(--ap-a1)} .ap-geld>.posten>i{width:20px; height:20px; border-radius:var(--ap-r-rund); display:block} .ap-geld>.posten.kristall>i{background:radial-gradient(circle at 35% 30%, var(--ap-kristall-hell),var(--ap-kristall) 55%,var(--ap-kristall-dunkel))} .ap-geld>.posten.muenze>i{background:radial-gradient(circle at 35% 30%, #FFF0A8,var(--ap-muenze) 55%,#A96C05)} /* Der Plus-Knopf am Ende eines Postens — der einzige Ort, an dem Limette klein sein darf. */ .ap-geld .plus{width:20px; height:20px; min-height:0; padding:0; font-size:var(--ap-t-klein); border-radius:var(--ap-r-kachel)} /* ═══ 9 FORTSCHRITTSBALKEN ══════════════════════════════════════════════════════════════════ WANN: Erfahrung, Passfortschritt, Sammelfortschritt, Burg-Lebenspunkte. WANN NICHT: als Zeitanzeige mit Sekunden — dafuer eine Zahl, ein schrumpfender Balken liest sich in einem Match als Lebensanzeige. ═══════════════════════════════════════════ */ .ap-balken{ height:var(--ap-a5); border-radius:var(--ap-r-rund); background:linear-gradient(180deg,var(--ap-grund-2),var(--ap-grund)); border:2px solid var(--ap-linie); display:flex; align-items:center; padding:0 var(--ap-a1); gap:var(--ap-a1); font-family:var(--ap-schrift); font-size:var(--ap-t-klein); font-weight:var(--ap-fw-stark); color:var(--ap-tinte); } .ap-balken>.bahn{flex:1; height:9px; border-radius:var(--ap-r-rund); background:rgba(0,0,0,.45); overflow:hidden} .ap-balken>.bahn>i{display:block; height:100%; background:linear-gradient(90deg,var(--ap-knopf-cyan-1),var(--ap-knopf-cyan-2)); transition:width var(--ap-zeit-lang) var(--ap-kurve)} /* Ein voller Balken wird limette — "etwas ist fuer dich bereit" ist dieselbe Aussage wie Claim. */ /* ⛑ 10.09.2026 (u6) UND EIN SAMMELBALKEN IST ES VON ANFANG AN. Beim Umzug am 10.09. sind AAs gruene Missionsbalken cyan geworden, weil Cyan die Voreinstellung der Bahn ist — gemessen im Gegenueberbild GEGEN_MISSIONEN: vorher gruen, nachher #15CFF3, AA #00E000. Der Unterschied zu `.voll` ist die AUSSAGE, nicht die Farbe: `.voll` sagt "jetzt sofort abholbar", `.limette` sagt "das hier fuellt sich auf eine Belohnung zu". AA faerbt beide gruen, weil beide dasselbe versprechen. Cyan bleibt fuer alles, was sich NICHT auf eine Belohnung zubewegt — Ladebalken, Zeitanteile, Vergleichswerte. Ein Rezept fuer beide Faelle: derselbe Verlauf, zwei Wege hinein. */ .ap-balken.voll>.bahn>i,.ap-balken.limette>.bahn>i{background:linear-gradient(90deg, var(--ap-knopf-limette-1),var(--ap-knopf-limette-2))} /* ═══ 10b EINGABEFELD ═══════════════════════════════════════════════════════════════════════ ⛑ 10.09.2026 (u1). Beim Umzug der Einstellungen fiel auf, dass die zehn Bauformen KEIN Schreibfeld kennen — und der Hub hat zwei (Code einloesen, Spielstand-JSON) mit zwei verschiedenen Rahmen, zwei Radien und zwei Fuellungen. Es ist bewusst kein elftes Bauteil mit eigener Optik, sondern die INNENSEITE des Fensters: dunkler als die Platte, dieselbe Linie, derselbe Radius. Ein Feld, in das man schreibt, muss vertieft aussehen — das ist der einzige Unterschied zum Fenster (Schatten nach innen statt nach aussen). WANN: jedes Feld, in das der Spieler tippt. WANN NICHT: fuer eine Anzeige — das ist Text. */ .ap-feld{ box-sizing:border-box; width:100%; min-height:var(--ap-knopf-h-klein); padding:var(--ap-a2) var(--ap-a3); border-radius:var(--ap-r-kachel); border:2px solid var(--ap-linie); background:var(--ap-grund-2); color:var(--ap-tinte); font-family:var(--ap-schrift); font-size:var(--ap-t-text); font-weight:var(--ap-fw-stark); box-shadow:inset 0 2px 2px rgba(0,0,0,.45); /* s1: die eine erlaubte Unschaerfe, war 4 */ resize:vertical; } .ap-feld::placeholder{ color:var(--ap-tinte-3); font-weight:var(--ap-fw-text) } /* DAS AUSWAHLFELD — ⛑ 10.09.2026 (u6). .ap-feld war fuer und