AP2 Header-Icons vereinheitlicht (42x42, Radius 10, Glyphe 20x20, Outline)

- theme.css: .mf-iconbtn und .mf-theme auf 42x42 / Radius 10px (Ellipse weg),
  Glyphen 20x20; .mf-theme behaelt Akzentfarbe+Glow. .mf-search min-height 42px.
- accessibility-placement.css: .mf-a11y-trigger 42x42, svg 20x20, gefuellter
  Gradient -> Outline (Surface-Fill, Akzent ueber color/border-color).
- accessibility.css: Legacy-56px-Kreis-Trigger durch sauberen .mf-iconbtn-Look
  ersetzt (Fokus-Outline erhalten).
- fluxtimer.css: !important am .ft-trigger-icon entfernt, 20x20 / stroke 1.5.
- STYLEGUIDE.md: Icon-Button-Spezifikation ergaenzt; Light-Tokens (AP1) und
  neues --warn nachgezogen.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01WFxcjtc9HNP4VECT6Ur1tE

STYLEGUIDE.md

@@ -36,17 +36,18 @@ Theme-Umschaltung: über das Attribut `<html data-theme="dark|light">` (gesetzt/
 | `--surface-2` | `#1b1610` | `#fbf4e6` | erhöhte Fläche, Hover, Felder |
 | `--border` | `#2a2117` | `#ece1cf` | Standard-Rahmen |
 | `--line` | `#221b12` | `#f1e8d8` | feine Linien, Scrollbar, Chart-Achsen |
-| `--border-accent` | `rgba(240,168,26,.45)` | `rgba(214,81,22,.40)` | akzentuierte Rahmen |
-| `--accent` | `#f0a81a` | `#d65116` | **Primärakzent**: Buttons, aktive Nav, Icons, Headline-Akzent |
-| `--accent-2` | `#f7dc11` | `#e4801d` | Sekundär-Akzent für Verläufe (Gelb-Glow) |
+| `--border-accent` | `rgba(240,168,26,.45)` | `rgba(194,65,12,.40)` | akzentuierte Rahmen |
+| `--accent` | `#f0a81a` | `#c2410c` | **Primärakzent**: Buttons, aktive Nav, Icons, Headline-Akzent |
+| `--accent-2` | `#f7dc11` | `#b45309` | Sekundär-Akzent für Verläufe (Gelb-Glow) |
 | `--accent-ink` | `#1c1100` | `#ffffff` | Textfarbe **auf** Akzentflächen |
-| `--secondary` | `#2d9cce` | `#1f86b8` | **Flux-Blau**: Links + „richtig" |
-| `--secondary-2` | `#5cc4e8` | `#2d9cce` | helleres Blau (Hover/Variante) |
+| `--secondary` | `#2d9cce` | `#146b96` | **Flux-Blau**: Links + „richtig" |
+| `--secondary-2` | `#5cc4e8` | `#0f5a80` | helleres Blau (Hover/Variante) |
 | `--text` | `#ece3d2` | `#33271c` | Fließtext |
-| `--muted` | `#8c8170` | `#8a7d6c` | gedämpfter Text, Labels, Captions |
+| `--muted` | `#8c8170` | `#6b5f4c` | gedämpfter Text, Labels, Captions |
 | `--heading` | `#ffffff` | `#241a12` | Überschriften |
-| `--success` | `#2d9cce` | `#1f86b8` | **„richtig"** (= Flux-Blau, bewusst kein Grün) |
+| `--success` | `#2d9cce` | `#146b96` | **„richtig"** (= Flux-Blau, bewusst kein Grün) |
 | `--danger` | `#ff4d6d` | `#be123c` | **„falsch"** / Fehler / Löschen (kühles Crimson) |
+| `--warn` | `#edcb4c` | `#8a6a06` | **„eingeschränkt"** / Warnstatus (Light-Wert WCAG-AA) |
 | `--glow-s` | `rgba(240,168,26,.55)` | `rgba(214,81,22,.40)` | **starker** Glow (Text-/Drop-Shadow auf Akzent) |
 | `--glow-w` | `rgba(240,168,26,.16)` | `rgba(214,81,22,.12)` | **weicher** Ambient-Glow |
 | `--g-soft` | `0 0 18px var(--glow-w)` | `0 6px 18px var(--glow-w)` | Standard-Panel-Schatten |
@@ -94,6 +95,10 @@ Muster (siehe z. B. `syntaxsaga.css` / `techtacular.css`):
 - **Panel-Schatten:** `box-shadow: var(--g-soft)`.
 - **Radien (Konvention):** Badges/Buttons ~`7–9px`, Inputs/Icon-Buttons `10px`, Nav `11px`,
   Panels `13–14px`, Standalone-Karten `16–18px`, Pills/Bars `99px`.
+- **Header-Icon-Buttons** (`.mf-iconbtn`, `.mf-theme`, `.mf-a11y-trigger`, `.ft-trigger`):
+  einheitlich **`42×42px`**, Radius `10px`, **Outline-Stil** (Surface-Fill, 1px Border,
+  Akzent nur über `color`/`border-color`), Glyphe **`20×20px`**. Der `.mf-theme`-Toggle behält
+  Akzentfarbe + Glow als Erkennungsmerkmal.
 - **Spielkarten** (`.mf-card`) haben eine **abgeschrägte Ecke** via `clip-path` (`--n:18px`) statt
   rundem Radius – ein bewusstes „HUD"-Detail.
 

src/main/resources/static/css/accessibility-placement.css

@@ -1,6 +1,6 @@
 body{padding-left:0!important;padding-bottom:0!important}
-.mf-a11y-trigger{position:static!important;width:38px;height:38px;z-index:auto;flex:0 0 38px;box-shadow:0 0 14px var(--glow-w);border-radius:10px}
-.mf-a11y-trigger svg{width:18px;height:18px}
+.mf-a11y-trigger{position:static!important;width:42px;height:42px;z-index:auto;flex:0 0 42px;box-shadow:0 0 14px var(--glow-w);border-radius:10px}
+.mf-a11y-trigger svg{width:20px;height:20px}
 .mf-a11y-panel{inset:76px 16px auto auto!important;width:min(450px,calc(100vw - 32px));max-height:calc(100dvh - 92px)}
 .mf-a11y-utility{position:sticky;top:0;z-index:1700;min-height:60px;display:flex;align-items:center;justify-content:flex-end;padding:.5rem 1rem;background:var(--panel);border-bottom:1px solid var(--border)}
 .mf-theme-float{display:flex;align-items:center;gap:.55rem}
@@ -13,7 +13,7 @@ body.mf-a11y-skin-finalflux{--mf-a11y-accent:var(--ff-accent);--mf-a11y-glow:var
 body.mf-a11y-skin-bughunter{--mf-a11y-accent:var(--bh-accent);--mf-a11y-glow:var(--bh-glow);--mf-a11y-ink:#210c12}
 body.mf-a11y-skin-networker{--mf-a11y-accent:var(--nw-accent);--mf-a11y-glow:var(--nw-glow);--mf-a11y-ink:#061321}
 body.mf-a11y-skin-serviceclash{--mf-a11y-accent:var(--sc-accent);--mf-a11y-glow:var(--sc-glow);--mf-a11y-ink:#06171c}
-body[class*="mf-a11y-skin-"] .mf-a11y-trigger{border-color:color-mix(in srgb,var(--mf-a11y-accent) 65%,var(--border));background:linear-gradient(135deg,var(--mf-a11y-accent),color-mix(in srgb,var(--mf-a11y-accent) 72%,#fff));color:var(--mf-a11y-ink);box-shadow:0 0 16px var(--mf-a11y-glow)}
+body[class*="mf-a11y-skin-"] .mf-a11y-trigger{border-color:color-mix(in srgb,var(--mf-a11y-accent) 65%,var(--border));background:var(--surface);color:var(--mf-a11y-accent);box-shadow:0 0 16px var(--mf-a11y-glow)}
 body[class*="mf-a11y-skin-"] .mf-a11y-panel{border-color:color-mix(in srgb,var(--mf-a11y-accent) 56%,var(--border));box-shadow:0 12px 45px rgba(0,0,0,.55),0 0 22px var(--mf-a11y-glow)}
 body[class*="mf-a11y-skin-"] .mf-a11y-head{background:color-mix(in srgb,var(--mf-a11y-accent) 28%,#07121f)}
 body[class*="mf-a11y-skin-"] .mf-a11y-close{background:var(--mf-a11y-accent);color:var(--mf-a11y-ink)}

src/main/resources/static/css/accessibility.css

@@ -23,5 +23,5 @@ html[data-mf-mono="true"] body{filter:grayscale(1)}html[data-mf-links="true"] a{
 html[data-mf-motion="false"] *,html[data-mf-motion="false"] *::before,html[data-mf-motion="false"] *::after{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.001ms!important}
 html[data-mf-cursor="true"],html[data-mf-cursor="true"] *{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath d='M2 1v25l7-7 5 11 5-2-5-10h10z' fill='white' stroke='black' stroke-width='2'/%3E%3C/svg%3E") 2 1,auto!important}
 body{padding-left:72px}.mf-a11y-dock{position:fixed;inset:0 auto 0 0;z-index:1799;width:72px;display:flex;align-items:flex-end;justify-content:center;padding:0 0 18px;background:color-mix(in srgb,var(--panel) 94%,transparent);border-right:1px solid var(--border);box-shadow:5px 0 18px rgba(0,0,0,.16)}
-.mf-a11y-trigger{position:fixed;left:8px;bottom:18px;z-index:1800;width:56px;height:56px;flex:0 0 auto;border:1px solid var(--border-accent);border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,var(--accent),var(--accent-2));color:var(--accent-ink);box-shadow:0 0 22px var(--glow-s),0 7px 24px rgba(0,0,0,.38);cursor:pointer}.mf-a11y-trigger svg{width:31px;height:31px}.mf-a11y-trigger:focus-visible,.mf-a11y-panel button:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
+.mf-a11y-trigger{width:42px;height:42px;border:1px solid var(--border);border-radius:10px;display:inline-flex;align-items:center;justify-content:center;background:var(--surface);color:var(--muted);cursor:pointer;transition:all .18s}.mf-a11y-trigger:hover{color:var(--accent);border-color:var(--border-accent);box-shadow:0 0 14px var(--glow-w)}.mf-a11y-trigger svg{width:20px;height:20px}.mf-a11y-trigger:focus-visible,.mf-a11y-panel button:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
 .mf-a11y-panel{position:fixed;left:82px;bottom:18px;z-index:1801;width:min(450px,calc(100vw - 100px));max-height:calc(100dvh - 36px);overflow:auto;border:1px solid var(--border);border-radius:10px;background:var(--panel);color:var(--text);box-shadow:0 12px 45px rgba(0,0,0,.55)}.mf-a11y-panel[hidden]{display:none}.mf-a11y-head{position:sticky;top:0;display:flex;align-items:center;gap:1rem;padding:.65rem;background:#07121f;color:#fff;z-index:1}.mf-a11y-head h2{font:800 1.05rem Arial,sans-serif;margin:0 auto}.mf-a11y-close{width:44px;height:44px;border:0;border-radius:6px;background:#fff;color:#07121f;font-size:1.8rem;cursor:pointer}.mf-a11y-grid{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:10px;background:var(--surface)}.mf-a11y-option{min-height:88px;border:1px solid var(--border);border-radius:6px;background:var(--surface-2);color:var(--text);padding:.65rem;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.35rem;font:inherit;cursor:pointer}.mf-a11y-option strong{font-size:1.35rem}.mf-a11y-option[aria-pressed="true"]{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 18%,var(--surface));box-shadow:inset 0 0 0 2px var(--accent)}.mf-a11y-option small{color:var(--muted)}@media(max-width:700px){body{padding-left:0;padding-bottom:68px}.mf-a11y-dock{inset:auto 0 0 0;width:auto;height:68px;padding:0 10px;justify-content:flex-start;align-items:center;border-right:0;border-top:1px solid var(--border);box-shadow:0 -5px 18px rgba(0,0,0,.18)}.mf-a11y-trigger{width:52px;height:52px}.mf-a11y-panel{left:6px;bottom:74px;width:calc(100vw - 12px);max-height:calc(100dvh - 86px)}.mf-a11y-grid{grid-template-columns:1fr 1fr}.mf-a11y-option{min-height:78px;font-size:.82rem}}

src/main/resources/static/css/fluxtimer.css

@@ -1,6 +1,6 @@
 /* FluxTimer – Zeitschaltkreis-Optik, rein clientseitig. */
 .ft-trigger { position:relative; color:var(--fluxtimer-secondary); }
-.ft-trigger-icon { width:22px!important; height:22px!important; fill:none; stroke:currentColor; stroke-width:1.35; }
+.ft-trigger-icon { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.5; }
 .ft-trigger-bolt { fill:color-mix(in srgb,currentColor 24%,transparent); stroke-width:1.5; stroke-linejoin:round; }
 .ft-trigger-dot { position:absolute; right:4px; top:4px; width:6px; height:6px; border-radius:50%; background:var(--muted); border:1px solid var(--surface); opacity:.5; }
 .ft-trigger.ft-active { color:var(--fluxtimer-primary); border-color:color-mix(in srgb,var(--fluxtimer-primary) 65%,var(--border)); box-shadow:0 0 14px color-mix(in srgb,var(--fluxtimer-primary) 35%,transparent); }

src/main/resources/static/css/theme.css

@@ -109,16 +109,16 @@ a { color:var(--secondary); }
 .mf-hello h1 .nm { color:var(--accent); text-shadow:0 0 16px var(--glow-s); }
 .mf-hello p { color:var(--muted); margin-top:.35rem; font-size:.95rem; }
 .mf-tools { display:flex; align-items:center; gap:.6rem; margin-left:auto; }
-.mf-iconbtn { width:38px; height:38px; border-radius:10px; border:1px solid var(--border); background:var(--surface); color:var(--muted); display:inline-flex; align-items:center; justify-content:center; cursor:pointer; text-decoration:none; transition:all .18s; }
+.mf-iconbtn { width:42px; height:42px; border-radius:10px; border:1px solid var(--border); background:var(--surface); color:var(--muted); display:inline-flex; align-items:center; justify-content:center; cursor:pointer; text-decoration:none; transition:all .18s; }
 .mf-iconbtn:hover { color:var(--accent); border-color:var(--border-accent); box-shadow:0 0 14px var(--glow-w); }
-.mf-iconbtn svg { width:18px; height:18px; }
-.mf-search { display:flex; align-items:center; gap:.5rem; background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:.5rem .8rem; color:var(--muted); }
+.mf-iconbtn svg { width:20px; height:20px; }
+.mf-search { display:flex; align-items:center; gap:.5rem; min-height:42px; background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:.5rem .8rem; color:var(--muted); }
 .mf-search input { background:none; border:0; outline:none; color:var(--text); font-size:.86rem; width:130px; }
 .mf-search svg { width:15px; height:15px; }
 
 /* ===== Theme-Umschalter ===== */
-.mf-theme { width:42px; height:38px; border-radius:50%; border:1px solid var(--border-accent); background:var(--surface); cursor:pointer; display:inline-flex; align-items:center; justify-content:center; color:var(--accent); box-shadow:0 0 14px var(--glow-w); }
-.mf-theme svg { width:18px; height:18px; }
+.mf-theme { width:42px; height:42px; border-radius:10px; border:1px solid var(--border-accent); background:var(--surface); cursor:pointer; display:inline-flex; align-items:center; justify-content:center; color:var(--accent); box-shadow:0 0 14px var(--glow-w); }
+.mf-theme svg { width:20px; height:20px; }
 
 /* ===== HUD-Spielkarten ===== */
 .mf-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.1rem; }