/* ═══════════════════════════════════════════════════════════════════════════════════════════ * ARCANE PRISM TD — UI-BAUKASTEN * Angelegt 28.08.2026. EINE Quelle fuer Farben, Groessen und Bausteine des Hubs. * * WARUM ES DIESE DATEI GIBT * Der Hub-Vergleich gegen Arcane Arena vom 28.08. hat gemessen, woran es liegt, dass unser Hub * nicht "aus einem Guss" wirkt — und es war nie die Qualitaet der Bilder: * 24 verschiedene Abstandswerte, 16 davon kein Vielfaches von 4 * 26 verschiedene harte Schriftgroessen, davon 12 auf EINEM Bildschirm (AA: 3 bis 4) * 8 verschiedene Eckradien auf einem Bildschirm * 785 harte Hexfarben in 3276 Vorkommen neben 67 vorhandenen Farbtoken * 209 Bedienelemente mit 1-px-Haarlinie gegen 46 mit 2 px — deshalb "schwimmt" alles * 64 % aller Bedienelemente kleiner als 44 px * Einzeln faellt keiner dieser Punkte auf. Zusammen ergeben sie den Eindruck, dass jede Ansicht * von jemand anderem gebaut wurde. Diese Datei nimmt genau diese Freiheit weg. * * DIE FARBREGEL, aus dem AA-Screenshot der Startseite abgenommen — sie ist der Kern: * Tiefblauer Verlauf als Grund, ein hellerer Schein hinter dem Hauptmotiv * HELLBLAU fuer JEDES Bedienelement * GOLD ausschliesslich fuer die EINE Hauptaktion des Bildschirms * GRUEN ausschliesslich fuer Plus-/Kauf-Knoepfe * ROT ausschliesslich fuer "hier ist etwas abzuholen" * Nicht mehr Farben als AA, sondern jede Farbe mit genau EINER Bedeutung. Das erzeugt den * Zusammenhalt, nicht die Bildqualitaet. * * DIE DREI REGELN, die jeder Bildschirm einhalten muss: * 1. EIN Hauptdarsteller mit mindestens 30 % der Bildflaeche (gemessen: wir 8 %, AA 46 %) * 2. Hoechstens FUENF Schriftgroessen, und keine unter 11 px * 3. Jedes Bedienelement mindestens 44x44 px, mit dunkler Aussenkontur und heller Innenkante * ═══════════════════════════════════════════════════════════════════════════════════════════ */ :root{ /* ── Grund ── */ --uk-bg-top:#123a6e; --uk-bg-mid:#0e2b57; --uk-bg-bot:#081a38; --uk-glow:rgba(70,150,230,.42); --uk-panel-1:#0d2244; --uk-panel-2:#081a37; --uk-panel-line:#2a5488; /* ── Bedienelemente: IMMER hellblau ── */ /* ⛑ 08-28 DUNKLER GEZOGEN (Founder-Entscheid nach Vorher-Nachher-Vergleich, Bilder: Desktop/_Arena Tests/KONTRAST/vergleich.png). GEMESSEN gegen weisse Schrift: der alte helle Ton #3f9de0 kam auf 2,95:1 und lag damit deutlich unter der Lesbarkeitsmarke von 4,5 — und er sass auf JEDEM blauen Knopf, jedem Abschnittsband und jeder Reiterleiste des Hubs, die Reiter der Sammlung mit 2,92 am schlechtesten. Das war die Farbregel dieses Blattes selbst, kein Fehler einer Ansicht. Ton und Saettigung sind unveraendert, nur die Helligkeit ist gesenkt: #3f9de0 (2,95) -> #1f7cbe (4,48) #2374b8 (4,93) -> #1a6099 (6,61) PREIS, ehrlich benannt: der Verlauf wird flacher, der Knopf glaenzt etwas weniger. Der zweite Weg waere eine dunkle Schriftkontur gewesen — verworfen, weil sie die Schrift schwer macht und das Problem nur optisch loest statt messbar. */ --uk-tile-1:#1f7cbe; --uk-tile-2:#1a6099; --uk-tile-in-1:#123763; --uk-tile-in-2:#0a1f3d; --uk-edge:#062043; /* dunkle Aussenkontur, ueberall dieselbe */ --uk-rim:rgba(255,255,255,.45); /* helle Innenkante, ueberall dieselbe */ /* ── Die drei Sonderfarben, je EINE Bedeutung ── */ --uk-gold-1:#ffe97a; --uk-gold-2:#f7c22a; --uk-gold-3:#d38a06; --uk-gold-edge:#7a4a02; --uk-green-1:#63d94f; --uk-green-2:#2f9424; --uk-green-edge:#14400d; --uk-red:#e8362c; --uk-red-edge:#4b0a05; /* ── Schrift: GENAU fuenf Stufen ── */ --uk-t1:30px; /* nur die eine Hauptaktion und Bildschirmtitel */ --uk-t2:22px; /* Abschnittstitel */ --uk-t3:16px; /* Bannertext */ --uk-t4:13px; /* Fliesstext, Zahlen, Reiterbeschriftung */ --uk-t5:11px; /* Kleinstschrift — HARTE UNTERGRENZE, nichts darunter */ --uk-ink:#ffffff; --uk-ink-2:#bcd6f2; /* ── Abstaende: GENAU sechs, alle Vielfache von 4 ── */ --uk-s1:4px; --uk-s2:8px; --uk-s3:12px; --uk-s4:16px; --uk-s5:24px; --uk-s6:32px; --uk-gutter:16px; /* Seitenrand JEDER Ansicht, ohne Ausnahme */ /* ── Eckradien: GENAU vier plus Pille ── */ /* ⚑ 29.08.2026 --uk-r-btn 10px -> 15px. GEMESSEN am AA-Dialogknopf (settings.jpg, „Languages", aa_setbtn_raster.png): Aussenkante 304x78 AA px = 136,2x34,9 CSS px. Das Einrueckungsprofil der oberen linken Ecke, Zeile fuer Zeile in AA-Pixeln: 38, 22, 17, 14, 13, 11, 9, 8, 7, 7, 6, 5, 5, 4, 4, 4, 3, 3, 3, 3, 3, 2, 2, 2, 2, 2, 1, 1, 1, 1 — der Bogen laeuft erst bei 26–32 AA px aus, also 11,6–14,3 CSS px Radius auf 34,9 CSS px Hoehe = 33–41 % der Hoehe. Wir hatten 10 px auf 44 px = 23 %. Auf AAs Verhaeltnis waeren es 15–18 px; 15 ist der untere Rand, weil unsere Knoepfe oft breiter als AAs sind und ein Radius nahe 18 aus einem breiten Knopf eine Pille macht. ⚠ NICHT MITGEZOGEN wurde die Hauptaktion: dort sind wir mit 14 px auf 60,7 px = 23 % bereits RUNDER als AA (11–13 CSS px auf 76,1 = 15–17 %). Der Formbericht hat genau das gemessen — die Vermutung „unsere Radien sind zu klein" stimmt fuer die kleinen Knoepfe und ist fuer den grossen falsch. --uk-r-chip bleibt bei 6px: er sitzt unter anderem auf dem 24 px grossen Plus-Knopf, wo 10 px (42 %) aus dem Quadrat einen Kreis machen wuerden. */ /* ⛑ 10.09.2026 (u3-Befund, Hub) ZWEI RADIEN AUF DIE LEITER GEZOGEN: chip 6 -> 8, panel 14 -> 15. Damit fallen zwei der drei Radienleitern des Hubs in EINER Zeile zusammen, fuer alle 36 Ansichten. Die Zielleiter steht in ui_mod/ui_quelle.css: 8 fuer Kacheln und Karten, 15 fuer Knoepfe und Platten, 999 rund — der Founder hat 15 am 10.09. entschieden (AA liegt bei 33 bis 41 Prozent der Knopfhoehe). 14 und 6 waren keine Entscheidung, sondern zwei Zahlen, die nie jemand angeglichen hat. */ --uk-r-chip:8px; --uk-r-btn:15px; --uk-r-panel:15px; --uk-r-scene:20px; --uk-r-pill:999px; /* ── Trefferflaeche ── */ --uk-hit:44px; /* absolute Untergrenze fuer alles Antippbare */ /* ══ DER GLANZ (29.08.2026) ═════════════════════════════════════════════════════════════ VORHER gab es ihn nur als `inset 0 2px 0 var(--uk-rim)` — eine 2 px hohe weisse Linie. Eine 2-px-Linie liest sich als Fase am Blechrand; AAs Knopf liest sich als gemalter Koerper. Der Unterschied ist NACHGEMESSEN, nicht geschaetzt. AA, settings.jpg, Knopf „Audio", Spalte x=200, Helligkeit (Luma) Zeile fuer Zeile: y1248 115 y1252 154 (hellste Stelle, 8 von 72 px = 11 % der Hoehe) y1256 142 y1260 129 y1264 115 y1268 100 y1272 96 y1276 92 y1280 80 <- ab hier flach: 80, 80, 80, 80 … bis y1304 Der Glanz laeuft also von der Oberkante bis y1280 aus. Knopfhoehe 1246..1314 = 68 px, Auslauf bei 34 px = GENAU 50 % der Hoehe (der Bericht schaetzte 45 %). Grundton (27,91,163), hellste Stelle (49,194,223). UMRECHNUNG AUF UNSERE FARBEN, damit der Wert nicht abgeschrieben, sondern uebertragen ist: AA hebt die Helligkeit um den Faktor 154/80 = 1,93 an. Unser Grundton unten #1a6099 hat Luma 82, oben #1f7cbe hat 104. 82 x 1,93 = 158. Aus 104 auf 158 mit einer Auflage der Farbe (235,250,255) (Luma 246): 104 + (246-104) x a = 158 -> a = 0,38. Deshalb .38 an der Oberkante, und nicht „ungefaehr die Haelfte". WARUM RADIAL UND NICHT LINEAR: AAs Glanzunterkante ist GEBOGEN — in der Mitte tiefer als an den Seiten. Ein linearer Verlauf kann das nicht, eine Ellipse schon. Mittelpunkt 8 % ueber der Oberkante, senkrechter Halbmesser 86 % der Hoehe: der Glanz endet in der Mitte bei rund 55 % der Hoehe und an den Seiten hoeher — im Mittel die gemessenen 50 %. DIE 2-PX-LINIE BLEIBT ZUSAETZLICH STEHEN. Sie ist kein Fehler: in AAs Profil ist die oberste Zeile (y1248) mit 115 heller als die zweite, es gibt dort also sehr wohl eine helle Oberkante. Falsch war nur, dass sie ALLEIN dastand. ══════════════════════════════ */ /* ⚑ Senkrechter Halbmesser 86 % -> 74 % nach einer Kontrastmessung am gerenderten Knopf (s4_settings_lupe.png, weisse Schrift gegen den Grund darunter): 86 %: Oberkante der Versalien 4,21:1 — unter der Marke von 4,5 74 %: Oberkante der Versalien 4,62:1 — nachgemessen an s4b_settings_lupe.png Der Glanz laeuft damit in der Mitte bei 44 % der Hoehe aus statt bei 55 %. Gemessen hat AA 50 %, der Formbericht schaetzte 45 % — 44 % liegt am unteren Rand dieses Bandes. Das ist bewusst: die Farbentscheidung vom 28.08. hat den Knopfton eigens gesenkt, um 4,48:1 zu erreichen, und ein Glanz, der die Schrift wieder unter 4,5 druekt, nimmt genau diese Arbeit zurueck. */ --uk-gloss: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 Gold waere ein kuehler Glanz ein Fremdkoerper — dieselbe Geometrie, warmer Ton. */ /* ⚑ Alpha .55 -> .30 nach dem ersten Bildabgleich (s2_battle_lupe.png): auf der bereits hellen Goldflaeche las sich .55 als aufgesetzter weisser Streifen mit sichtbarer Kante, nicht als Licht. Auf Blau traegt der Grund die .38, auf Gold nicht — die Auflage muss dort so viel schwaecher sein, wie der Grund heller ist. */ --uk-gloss-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%); } /* ═══ GRUND ═══ */ .uk-screen{position:relative;min-height:100%;color:var(--uk-ink); font-family:"Baloo 2",Inter,system-ui,sans-serif; background:linear-gradient(180deg,var(--uk-bg-top) 0%,var(--uk-bg-mid) 38%,var(--uk-bg-bot) 100%); padding-left:var(--uk-gutter);padding-right:var(--uk-gutter)} /* Der Schein hinter dem Hauptmotiv. Er ist der Grund, warum AAs Bildschirme Tiefe haben, ohne dass ein einziges zusaetzliches Bild geladen wird. */ .uk-screen::before{content:"";position:absolute;left:50%;top:34%;width:120%;aspect-ratio:1; transform:translate(-50%,-50%);pointer-events:none; background:radial-gradient(circle,var(--uk-glow),rgba(70,150,230,0) 62%)} .uk-screen>*{position:relative} /* ═══ PANEL — der dunkle Traeger fuer Kopfzeilen und Listen ═══ */ .uk-panel{background:linear-gradient(180deg,var(--uk-panel-1),var(--uk-panel-2)); border:1px solid var(--uk-panel-line);border-radius:var(--uk-r-panel); box-shadow:inset 0 1px 0 rgba(255,255,255,.14)} /* ═══ KACHEL / KNOPF — die Grundform JEDES Bedienelements ═══ */ .uk-tile,.uk-btn{min-width:var(--uk-hit);min-height:var(--uk-hit); border-radius:var(--uk-r-btn);border:2px solid var(--uk-edge); /* ⚑ 29.08.2026 Glanzauflage vor dem Grundverlauf — Herleitung bei --uk-gloss. */ background:var(--uk-gloss),linear-gradient(180deg,var(--uk-tile-1),var(--uk-tile-2)); box-shadow:inset 0 2px 0 var(--uk-rim),0 3px 0 rgba(0,0,0,.4); display:grid;place-items:center;position:relative;cursor:pointer; font-family:inherit;color:var(--uk-ink);font-size:var(--uk-t4);font-weight:700; transition:transform .06s,box-shadow .06s} .uk-tile:active,.uk-btn:active{transform:translateY(2px);box-shadow:inset 0 2px 0 var(--uk-rim),0 1px 0 rgba(0,0,0,.4)} /* Das dunkle Innenfeld, in dem das Icon sitzt — ohne es wirkt die Kachel flach */ .uk-tile>.uk-in{position:absolute;inset:5px;border-radius:var(--uk-r-chip); background:linear-gradient(180deg,var(--uk-tile-in-1),var(--uk-tile-in-2)); display:grid;place-items:center;overflow:hidden} .uk-tile>.uk-in img{width:78%;height:78%;object-fit:contain} /* ═══ DIE EINE HAUPTAKTION ═══ */ .uk-btn-gold{min-height:64px;border-radius:var(--uk-r-panel);border:2px solid var(--uk-gold-edge); background:var(--uk-gloss-warm),linear-gradient(180deg,#fff29a 0%,var(--uk-gold-1) 18%,var(--uk-gold-2) 55%,var(--uk-gold-3) 100%); box-shadow:inset 0 3px 0 rgba(255,255,255,.9),inset 0 -5px 0 rgba(140,80,0,.35),0 5px 0 rgba(0,0,0,.45); display:grid;place-items:center;cursor:pointer;font-family:inherit} .uk-btn-gold>span{font-size:var(--uk-t1);font-weight:800;letter-spacing:.02em;color:#fff; text-shadow:0 2px 0 #9a5c04,0 -1px 0 #9a5c04,2px 0 0 #9a5c04,-2px 0 0 #9a5c04} /* Pro Bildschirm darf es GENAU EINEN geben. Wer einen zweiten setzt, nimmt dem ersten die Wirkung. */ /* ═══ PLUS / KAUFEN — die einzige gruene Flaeche ═══ */ .uk-plus{width:24px;height:24px;border-radius:var(--uk-r-chip); background:linear-gradient(180deg,var(--uk-green-1),var(--uk-green-2)); border:1px solid var(--uk-green-edge);box-shadow:inset 0 1px 0 rgba(255,255,255,.5); display:grid;place-items:center;color:#fff;font-size:var(--uk-t4);font-weight:800;line-height:1;cursor:pointer} /* ═══ HINWEIS-PLAKETTE — die einzige rote Flaeche ═══ */ .uk-bang{position:absolute;top:-6px;right:-6px;min-width:20px;height:20px;padding:0 4px; border-radius:var(--uk-r-pill);background:var(--uk-red);border:2px solid var(--uk-red-edge); color:#fff;font-size:var(--uk-t5);font-weight:800;display:grid;place-items:center;z-index:3} /* ═══ SECHSECK-PLAKETTE fuer Zahlen und Truhenplaetze ═══ */ .uk-hex{background:linear-gradient(180deg,var(--uk-gold-1),var(--uk-gold-3)); clip-path:polygon(50% 0,93% 25%,93% 75%,50% 100%,7% 75%,7% 25%); display:grid;place-items:center;font-size:var(--uk-t5);font-weight:800;color:#4a2a02} .uk-hex-blue{background:linear-gradient(180deg,#2a63a8,#153f76);color:var(--uk-ink)} /* ═══ ZEIT-PLAKETTE ═══ */ .uk-timer{position:absolute;left:50%;bottom:-3px;transform:translateX(-50%); background:var(--uk-panel-2);border:1px solid var(--uk-panel-line);border-radius:var(--uk-r-chip); padding:1px 5px;font-size:var(--uk-t5);font-weight:700;color:var(--uk-gold-1);white-space:nowrap;z-index:3} /* ═══ WAEHRUNGSLEISTE ═══ */ .uk-money{display:flex;align-items:center;gap:var(--uk-s2);min-height:var(--uk-hit);padding:0 var(--uk-s2)} .uk-money .m{display:flex;align-items:center;gap:var(--uk-s1);font-size:var(--uk-t4);font-weight:700} .uk-money .m img{width:20px;height:20px;object-fit:contain} /* ═══ FORTSCHRITTSBAND ═══ */ .uk-bar{height:24px;border-radius:var(--uk-r-pill);background:linear-gradient(180deg,#0b2145,var(--uk-panel-2)); border:2px solid var(--uk-panel-line);display:flex;align-items:center;padding:0 var(--uk-s1);gap:var(--uk-s1)} .uk-bar>.t{flex:1;height:9px;border-radius:var(--uk-r-pill);background:#071834;overflow:hidden} .uk-bar>.t>i{display:block;height:100%;background:linear-gradient(90deg,#ff8ae0,#c81fb0)} /* ═══ BUEHNE — der Hauptdarsteller, mindestens 30 % der Bildflaeche ═══ */ .uk-scene{border-radius:var(--uk-r-scene);overflow:hidden;position:relative;min-height:30vh} .uk-scene>img{width:100%;height:100%;object-fit:contain; filter:drop-shadow(0 14px 18px rgba(0,0,0,.55))} /* Bei AA steht das Diorama OHNE Rahmen frei auf dem Grund. Kein Kasten drumherum. */ /* ═══ REITERLEISTE — nur der aktive traegt Text und ist erhoeht ═══ */ .uk-nav{position:fixed;left:0;right:0;bottom:0;height:76px;z-index:40; background:linear-gradient(180deg,#1b4d8a,#0f2e5c);border-top:2px solid var(--uk-edge); display:flex;align-items:flex-end;padding:0 var(--uk-s1)} .uk-nav>.tab{flex:1;height:58px;margin:0 3px 5px;border-radius:var(--uk-r-btn); background:var(--uk-gloss),linear-gradient(180deg,#2d6cb0,#1a4780);border:2px solid var(--uk-edge); box-shadow:inset 0 2px 0 rgba(255,255,255,.28); display:grid;place-items:center;position:relative;cursor:pointer} .uk-nav>.tab>img{width:32px;height:32px;object-fit:contain} .uk-nav>.tab>b{display:none} .uk-nav>.tab.on{height:88px;margin-bottom:0;border-radius:var(--uk-r-panel) var(--uk-r-panel) 0 0; border-bottom:0;background:linear-gradient(180deg,#67b9f2,#2f81cc); box-shadow:inset 0 3px 0 rgba(255,255,255,.6);align-content:center;gap:2px} .uk-nav>.tab.on>b{display:block;font-size:var(--uk-t4);font-weight:800;color:#fff; text-shadow:0 1px 0 rgba(0,0,0,.45)} .uk-nav>.tab.on>img{width:38px;height:38px} /* Genau EIN Reiter traegt .on. Die uebrigen vier zeigen NUR ihr Symbol — kein Text. Das ist der auffaelligste Einzelunterschied zu unserer bisherigen Leiste mit fuenf gleichwertigen beschrifteten Kacheln. */ /* ═══ BAND / RIBBON fuer Abschnittstitel ═══ */ .uk-ribbon{position:relative;min-height:40px;display:grid;place-items:center; padding:0 var(--uk-s5);border:2px solid var(--uk-edge);border-radius:var(--uk-r-chip); background:var(--uk-gloss),linear-gradient(180deg,#4aa6ea,#1f6cb4); box-shadow:inset 0 2px 0 rgba(255,255,255,.4),0 3px 0 rgba(0,0,0,.35); font-size:var(--uk-t3);font-weight:800;letter-spacing:.02em; text-shadow:0 2px 0 rgba(0,0,0,.45)} .uk-ribbon.gold{background:linear-gradient(180deg,var(--uk-gold-2),var(--uk-gold-3));color:#3d2404; text-shadow:0 1px 0 rgba(255,255,255,.5);border-color:var(--uk-gold-edge)} /* ═══ LISTENZEILE ═══ */ .uk-row{display:flex;align-items:center;gap:var(--uk-s3);min-height:var(--uk-hit); padding:var(--uk-s2) var(--uk-s3);border-radius:var(--uk-r-btn); background:linear-gradient(180deg,#173a68,#102a4e);border:2px solid var(--uk-edge); box-shadow:inset 0 1px 0 rgba(255,255,255,.18)} /* ═══ AKTIONSLEISTE am unteren Rand einer Unterseite ═══ */ .uk-actionbar{position:sticky;bottom:0;display:grid;place-items:center; padding:var(--uk-s3) 0;background:linear-gradient(180deg,rgba(8,26,55,0),var(--uk-bg-bot) 40%)}