Maskable-Symbole: das ganze Symbol verkleinern, nicht nur das Logo

Gemeldet von Filipe: "die symbole sehen aber auf meinem pc nicht aus
wie auf dem browser mit diesen geilen farben." Er hatte recht -- die
maskable-Fassungen sahen aus wie eine schlechte Kopie: blass, das
Medaillon riesig, der Doppelring ueber den Rand hinaus. Und genau die
nimmt das Betriebssystem fuer installierte Apps.

Der erste Entwurf verkleinerte nur das LOGO (52 statt 68 Prozent) und
liess den Hintergrund unveraendert. Das geht bei einer glatten Flaeche
gut und bei allem anderen schief: Medaillon, Doppelring, Raster und
Eckband rechnen ihre Kreise in Prozent der FLAECHE. Wird aussen ein
Fuenftel weggeschnitten, sitzt der Ring nicht mehr, wo er hingehoert.

Jetzt wird das fertige Symbol als Ganzes auf 78 Prozent verkleinert und
in eine Huelle aus dem dunkelsten Ton der App gesetzt. Damit bleibt
jedes Verhaeltnis erhalten -- Ring zu Flaeche, Logo zu Ring, Verlauf zu
Kante. Weggeschnitten wird nur ruhige Randfarbe.

Nachgeprueft mit einer Vorschau, die den Zuschnitt nachstellt: rund
(Android) und abgerundetes Quadrat (Windows/iOS). Beide sehen jetzt
praktisch aus wie die Fassung im Browser.

Co-Authored-By: Claude Opus 5 <[email protected]>

tools/app-symbole.mjs

@@ -320,19 +320,51 @@ export const STIL_JE_APP = {
 export function symbolTeil(f, stilName, n, { maskable = false, logoDaten } = {}) {
   const stil = STILE[stilName];
   const logoFilter = typeof stil.logo === "function" ? stil.logo(f) : stil.logo;
-  /* Maskable: Android schneidet bis zu 20 % ringsum weg. Das Logo muss
+
-     deshalb kleiner sitzen, sonst fehlen ihm die Ohren. */
+  /* MASKABLE: DAS GANZE SYMBOL VERKLEINERN, nicht nur das Logo.
-  const logoBreite = maskable ? 52 : 68;
+
+     BEFUND 05.09.2026, von Filipe gemeldet: *"die symbole sehen aber auf
+     meinem pc nicht aus wie auf dem browser mit diesen geilen farben."*
+     Und er hatte recht -- die maskable-Fassungen sahen aus wie eine
+     schlechte Kopie: blass, das Medaillon riesig, der Doppelring über
+     den Rand hinaus.
+
+     Der erste Entwurf verkleinerte nur das LOGO (52 % statt 68 %) und
+     liess den Hintergrund unveraendert. Das geht bei einer glatten
+     Flaeche gut und bei allem anderen schief: Medaillon, Doppelring,
+     Raster und Eckband rechnen ihre Kreise und Kanten in PROZENT DER
+     FLAECHE. Wird aussen ein Fünftel weggeschnitten, sitzt der Ring
+     nicht mehr da, wo er hingehoert -- und das Logo schwimmt verloren
+     in der Mitte.
+
+     Richtig ist, das FERTIGE Symbol als Ganzes auf den sicheren Bereich
+     zu verkleinern und den Rest mit dem dunkelsten Ton der App zu
+     fuellen. Dann bleibt jedes Verhaeltnis erhalten: Ring zu Flaeche,
+     Logo zu Ring, Verlauf zu Kante. Was das System wegschneidet, ist
+     nur ruhige Randfarbe.
+
+     78 % ist der Anteil, der bei jeder gaengigen Maske heil bleibt
+     (Kreis, Quadrat mit runden Ecken, Tropfen). */
   const radius = maskable ? 0 : 22.4;      // 22,4 % ist die Apple-Rundung
   const k = `s-${stilName}-${f.schluessel}${maskable ? "-m" : ""}`;
 
+  /* Das eigentliche Symbol ist bei maskable kleiner als die Datei. */
+  const innen = maskable ? Math.round(n * 0.78) : n;
+  const logoBreite = 68;                   // immer gleich -- siehe oben
+
   const css = `
+    ${maskable ? `
+    .${k}-huelle {
+      width: ${n}px; height: ${n}px; flex: none;
+      display: flex; align-items: center; justify-content: center;
+      background: ${f.dunkel};
+    }` : ""}
     .${k} {
-      position: relative; width: ${n}px; height: ${n}px; overflow: hidden;
+      position: relative; width: ${innen}px; height: ${innen}px; overflow: hidden;
-      border-radius: ${radius}%; flex: none;
+      border-radius: ${maskable ? 18 : radius}%; flex: none;
-      --r2: ${n * 0.006}px; --r3: ${n * 0.012}px; --r4: ${n * 0.016}px;
+      --r2: ${innen * 0.006}px; --r3: ${innen * 0.012}px; --r4: ${innen * 0.016}px;
-      --r5: ${n * 0.022}px; --r6: ${n * 0.03}px;  --r8: ${n * 0.05}px;
+      --r5: ${innen * 0.022}px; --r6: ${innen * 0.03}px;  --r8: ${innen * 0.05}px;
-      --r10: ${n * 0.07}px;
+      --r10: ${innen * 0.07}px;
       background: ${stil.grund(f)};
     }
     .${k} > .rand, .${k} > .glanz, .${k} > .unterlage {
@@ -359,13 +391,16 @@ export function symbolTeil(f, stilName, n, { maskable = false, logoDaten } = {})
      `glanz` und damit ÜBER dem Kopf. Ergebnis: Das Logo war fast
      unsichtbar. Genau so verschwindet ein Fehler in einem Bild, das
      "irgendwie dunkel" aussieht. */
-  const markup = `<div class="${k}">
+  const kern = `<div class="${k}">
       <div class="unterlage"></div>
       <img class="logo" src="${logoDaten}" alt="">
       <div class="glanz"></div>
       <div class="rand"></div>
     </div>`;
-  return { css, markup, klasse: k };
+  /* Bei maskable liegt das Symbol in einer Huelle aus der Grundfarbe --
+     die faengt ab, was das System wegschneidet. */
+  const markup = maskable ? `<div class="${k}-huelle">${kern}</div>` : kern;
+  return { css, markup, klasse: maskable ? `${k}-huelle` : k };
 }
 
 /** Ein vollständiges Dokument für genau ein Symbol -- für den Bau. */