diff --git a/.projektstructure.txt b/.projektstructure.txt
index c6ea3af..56fd89a 100755
--- a/.projektstructure.txt
+++ b/.projektstructure.txt
@@ -7,6 +7,7 @@ Aktueller Projektstand
 - Die Avatar-Konfiguration liegt in `config/avatar.php`.
 - Der Avatar-Proxy liegt unter `public/api/avatar.php`.
 - Die visuelle Avatar-Konfiguration liegt im Dashboard-Modal unter `partials/landing/account/dashboard.php` und rendert Komponenten-Vorschauen live nach.
+- Das Avatar-Modal ist auf Browserhoehe optimiert: kompakter Kopfbereich, fixe Komponenten-Navigation, scrollende Variantenliste und kleine Farbfelder mit `Standard`-Reset pro Komponente.
 - Der Generator speichert `avatar_style`, `avatar_seed` und `avatar_config_json` generisch im Profil.
 - Der Generator zeigt pro Style die von DiceBear unterstützten Farbfelder direkt in den passenden Komponentenabschnitten und speichert diese im gleichen Config-JSON.
 - Gespeicherte Benutzer-Avatare werden lokal unter `public/assets/avatars/users/ptk-<userId>.svg` abgelegt und bei Änderungen überschrieben.
diff --git a/PROJECT_CONTEXT.md b/PROJECT_CONTEXT.md
index b8a06fb..6996326 100644
--- a/PROJECT_CONTEXT.md
+++ b/PROJECT_CONTEXT.md
@@ -26,7 +26,7 @@ Papa-Kind-Treff ist eine PHP-basierte Plattform für Väter. Kernbereiche sind l
 - Standortfunktionen sind relevant für lokale Treffen und werden künftig weiter ausgebaut.
 - Profilbilder werden aktuell über die Mehr-Style-Architektur serverseitig erzeugt; aktiv sind derzeit `lorelei` und `croodles`.
 - Stil, Seed und Varianten werden generisch im Profil gespeichert; das fertige SVG wird lokal pro Benutzer unter `ptk-<userId>.svg` abgelegt.
-- Der Avatar-Editor bietet visuelle Komponenten-Vorschauen statt reiner Text-Dropdowns, laedt nur den aktiven Style/Tab nach und zeigt die Farbfelder direkt im passenden Komponentenabschnitt an.
+- Der Avatar-Editor bietet visuelle Komponenten-Vorschauen statt reiner Text-Dropdowns, laedt nur den aktiven Style/Tab nach, zeigt die Farbfelder direkt im passenden Komponentenabschnitt an und haelt Kopfbereich sowie Komponentenleiste im Modal fixiert.
 
 ## Navigation / Konto
 - Eingeloggte Nutzer sehen rechts ein Profil-Menü statt einzelner `Dashboard`-/`Logout`-Buttons.
diff --git a/README.md b/README.md
index bb47b62..54cfd2f 100644
--- a/README.md
+++ b/README.md
@@ -19,7 +19,7 @@ Papa-Kind-Treff ist eine PHP-basierte Plattform für Väter mit Fokus auf lokale
 - eigener Einstellungsbereich für Standortfreigabe, Browser-Hinweise und Consent-Verwaltung
 - modernes Avatar-System mit zentraler Mehr-Style-Architektur auf Basis von DiceBear
 - aktive Avatar-Styles aktuell: `lorelei` und `croodles`; weitere Styles können über `config/avatar.php` freigeschaltet werden
-- Profilbild-Generator mit visueller Komponenten-Auswahl, generischem Style-/Seed-/Config-Speichermodell, Style-Wechsel und komponentenbezogenen Farbfeldern pro Style
+- Profilbild-Generator mit visueller Komponenten-Auswahl, generischem Style-/Seed-/Config-Speichermodell, Style-Wechsel und komponentenbezogenen Farbfeldern pro Style; im Modal bleiben Kopfbereich und Komponentenleiste fixiert, waehrend nur die Variantenliste scrollt
 - jedes gespeicherte Profilbild wird als lokale Benutzer-SVG unter `public/assets/avatars/users/ptk-<userId>.svg` abgelegt
 - `config/avatar.php` enthaelt jetzt pro Style auch explizite Beispielpaletten, Farbgruppen pro Komponente und Beispielprofile als Einbindungsreferenz
 - Consent-Manager für Analyse und externe Dienste
diff --git a/partials/landing/account/dashboard.php b/partials/landing/account/dashboard.php
index ef0097d..826d0b9 100755
--- a/partials/landing/account/dashboard.php
+++ b/partials/landing/account/dashboard.php
@@ -359,6 +359,61 @@ $sectionLinks = [
                         <strong><?= htmlspecialchars((string)($component['label'] ?? $field), ENT_QUOTES) ?></strong>
                         <span class="muted small">Gesamtes Profilbild zur sicheren Vorschau</span>
                       </div>
+                      <?php $componentColors = $component['colors'] ?? []; ?>
+                      <?php if ($componentColors): ?>
+                        <div class="avatar-component-colors">
+                          <?php foreach ($componentColors as $colorField => $colorMeta): ?>
+                            <?php
+                              $colorValue = (string)($colorMeta['value'] ?? '');
+                              $colorDefault = '#000000';
+                              $samples = is_array($colorMeta['samples'] ?? null) ? $colorMeta['samples'] : [];
+                            ?>
+                            <div class="avatar-color-control">
+                              <label class="avatar-color-control__label" for="avatarColor<?= htmlspecialchars($styleKey . $colorField, ENT_QUOTES) ?>"><?= htmlspecialchars((string)($colorMeta['label'] ?? $colorField), ENT_QUOTES) ?></label>
+                              <input
+                                type="hidden"
+                                name="avatar_config[<?= htmlspecialchars($styleKey, ENT_QUOTES) ?>][<?= htmlspecialchars((string)$colorField, ENT_QUOTES) ?>]"
+                                value="<?= htmlspecialchars($colorValue, ENT_QUOTES) ?>"
+                                data-avatar-style="<?= htmlspecialchars($styleKey, ENT_QUOTES) ?>"
+                                data-avatar-color-input="<?= htmlspecialchars((string)$colorField, ENT_QUOTES) ?>"
+                              >
+                              <div class="avatar-color-control__row">
+                                <input
+                                  id="avatarColor<?= htmlspecialchars($styleKey . $colorField, ENT_QUOTES) ?>"
+                                  type="color"
+                                  value="<?= htmlspecialchars($colorValue !== '' ? $colorValue : $colorDefault, ENT_QUOTES) ?>"
+                                  data-avatar-style="<?= htmlspecialchars($styleKey, ENT_QUOTES) ?>"
+                                  data-avatar-color-picker="<?= htmlspecialchars((string)$colorField, ENT_QUOTES) ?>"
+                                  data-avatar-color-default="<?= htmlspecialchars($colorDefault, ENT_QUOTES) ?>"
+                                  class="avatar-color-control__picker"
+                                >
+                                <button
+                                  class="btn ghost avatar-color-control__reset"
+                                  type="button"
+                                  data-avatar-style="<?= htmlspecialchars($styleKey, ENT_QUOTES) ?>"
+                                  data-avatar-color-reset="<?= htmlspecialchars((string)$colorField, ENT_QUOTES) ?>"
+                                >Standard</button>
+                              </div>
+                              <?php if ($samples): ?>
+                                <div class="avatar-color-control__samples">
+                                  <?php foreach ($samples as $sampleColor): ?>
+                                    <button
+                                      type="button"
+                                      class="avatar-color-sample"
+                                      title="<?= htmlspecialchars((string)$sampleColor, ENT_QUOTES) ?>"
+                                      aria-label="<?= htmlspecialchars((string)$sampleColor, ENT_QUOTES) ?>"
+                                      data-avatar-style="<?= htmlspecialchars($styleKey, ENT_QUOTES) ?>"
+                                      data-avatar-color-sample-field="<?= htmlspecialchars((string)$colorField, ENT_QUOTES) ?>"
+                                      data-avatar-color-sample-value="<?= htmlspecialchars((string)$sampleColor, ENT_QUOTES) ?>"
+                                      style="background: <?= htmlspecialchars((string)$sampleColor, ENT_QUOTES) ?>;"
+                                    ></button>
+                                  <?php endforeach; ?>
+                                </div>
+                              <?php endif; ?>
+                            </div>
+                          <?php endforeach; ?>
+                        </div>
+                      <?php endif; ?>
                       <div class="avatar-component-grid">
                         <?php foreach (($component['options'] ?? []) as $choice): ?>
                           <label class="avatar-component-card">
@@ -384,61 +439,6 @@ $sectionLinks = [
                           </label>
                         <?php endforeach; ?>
                       </div>
-                      <?php $componentColors = $component['colors'] ?? []; ?>
-                      <?php if ($componentColors): ?>
-                        <div class="form-grid" style="margin-top:18px;">
-                          <?php foreach ($componentColors as $colorField => $colorMeta): ?>
-                            <?php
-                              $colorValue = (string)($colorMeta['value'] ?? '');
-                              $colorDefault = (string)($colorMeta['default'] ?? '#c4a484');
-                              $samples = is_array($colorMeta['samples'] ?? null) ? $colorMeta['samples'] : [];
-                            ?>
-                            <div class="stack gap-6">
-                              <label class="label" for="avatarColor<?= htmlspecialchars($styleKey . $colorField, ENT_QUOTES) ?>"><?= htmlspecialchars((string)($colorMeta['label'] ?? $colorField), ENT_QUOTES) ?></label>
-                              <input
-                                type="hidden"
-                                name="avatar_config[<?= htmlspecialchars($styleKey, ENT_QUOTES) ?>][<?= htmlspecialchars((string)$colorField, ENT_QUOTES) ?>]"
-                                value="<?= htmlspecialchars($colorValue, ENT_QUOTES) ?>"
-                                data-avatar-style="<?= htmlspecialchars($styleKey, ENT_QUOTES) ?>"
-                                data-avatar-color-input="<?= htmlspecialchars((string)$colorField, ENT_QUOTES) ?>"
-                              >
-                              <div class="flex gap-12 center-y" style="flex-wrap:wrap;">
-                                <input
-                                  id="avatarColor<?= htmlspecialchars($styleKey . $colorField, ENT_QUOTES) ?>"
-                                  type="color"
-                                  value="<?= htmlspecialchars($colorValue !== '' ? $colorValue : $colorDefault, ENT_QUOTES) ?>"
-                                  data-avatar-style="<?= htmlspecialchars($styleKey, ENT_QUOTES) ?>"
-                                  data-avatar-color-picker="<?= htmlspecialchars((string)$colorField, ENT_QUOTES) ?>"
-                                  data-avatar-color-default="<?= htmlspecialchars($colorDefault, ENT_QUOTES) ?>"
-                                  style="width:64px; height:44px; padding:4px;"
-                                >
-                                <button
-                                  class="btn ghost"
-                                  type="button"
-                                  data-avatar-style="<?= htmlspecialchars($styleKey, ENT_QUOTES) ?>"
-                                  data-avatar-color-reset="<?= htmlspecialchars((string)$colorField, ENT_QUOTES) ?>"
-                                >Standard</button>
-                              </div>
-                              <?php if ($samples): ?>
-                                <div class="flex gap-8 center-y" style="flex-wrap:wrap;">
-                                  <?php foreach ($samples as $sampleColor): ?>
-                                    <button
-                                      type="button"
-                                      class="avatar-color-sample"
-                                      title="<?= htmlspecialchars((string)$sampleColor, ENT_QUOTES) ?>"
-                                      aria-label="<?= htmlspecialchars((string)$sampleColor, ENT_QUOTES) ?>"
-                                      data-avatar-style="<?= htmlspecialchars($styleKey, ENT_QUOTES) ?>"
-                                      data-avatar-color-sample-field="<?= htmlspecialchars((string)$colorField, ENT_QUOTES) ?>"
-                                      data-avatar-color-sample-value="<?= htmlspecialchars((string)$sampleColor, ENT_QUOTES) ?>"
-                                      style="width:32px; height:32px; border-radius:10px; border:1px solid var(--color-border); background: <?= htmlspecialchars((string)$sampleColor, ENT_QUOTES) ?>;"
-                                    ></button>
-                                  <?php endforeach; ?>
-                                </div>
-                              <?php endif; ?>
-                            </div>
-                          <?php endforeach; ?>
-                        </div>
-                      <?php endif; ?>
                     </section>
                   <?php endforeach; ?>
                 </div>
diff --git a/public/assets/css/app.css b/public/assets/css/app.css
index 8ca606b..b150b80 100755
--- a/public/assets/css/app.css
+++ b/public/assets/css/app.css
@@ -248,25 +248,38 @@ body {
 .profile-avatar-panel__content h3 { margin: 0 0 8px; }
 .profile-avatar-panel__content p { margin: 0 0 14px; }
 .avatar-builder { height: 100%; min-height: 0; }
-.avatar-builder__shell { height: 100%; min-height: 0; display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 18px; }
-.avatar-builder__top { display: grid; gap: 16px; padding: 18px; background: linear-gradient(180deg, #fffdfa, #f8f4ec); border: 1px solid var(--color-border); border-radius: 18px; }
+.avatar-builder__shell { height: 100%; min-height: 0; display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 14px; }
+.avatar-builder__top { display: grid; gap: 14px; padding: 14px; background: linear-gradient(180deg, #fffdfa, #f8f4ec); border: 1px solid var(--color-border); border-radius: 18px; }
 .avatar-builder__hero { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 22px; align-items: center; }
 .avatar-builder__hero-preview { display: flex; align-items: center; justify-content: center; }
 .avatar-builder__hero-content { display: grid; gap: 14px; min-width: 0; }
 .avatar-builder__actions { justify-content: flex-start; }
-.avatar-builder__body { min-height: 0; overflow: auto; padding-right: 6px; display: grid; gap: 16px; }
-.avatar-component-nav { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
+.avatar-builder__body { min-height: 0; overflow: hidden; display: grid; }
+.avatar-style-group { min-height: 0; display: none; grid-template-rows: auto minmax(0, 1fr); gap: 12px; }
+.avatar-style-group.is-active { display: grid; }
+.avatar-component-nav { position: sticky; top: 0; z-index: 4; display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; padding: 2px 0 10px; background: linear-gradient(180deg, rgba(246, 240, 228, 0.98), rgba(246, 240, 228, 0.92)); border-bottom: 1px solid rgba(196, 169, 120, 0.25); }
 .avatar-component-nav__button { border: 1px solid var(--color-border); background: #fff; color: var(--color-text); border-radius: 999px; padding: 8px 12px; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
 .avatar-component-nav__button.is-active { background: var(--color-primary); color: var(--color-primary-contrast); border-color: var(--color-primary); }
 .avatar-loader { width: 100%; display: grid; gap: 8px; padding: 12px 14px; background: rgba(255,255,255,0.72); border: 1px solid var(--color-border); border-radius: 14px; }
 .avatar-loader__bar { width: 100%; height: 10px; overflow: hidden; border-radius: 999px; background: #ece2d4; }
 .avatar-loader__fill { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #37485a, #68819a); transition: width 180ms ease; }
 .avatar-loader__meta { display: flex; justify-content: space-between; gap: 10px; align-items: center; }
-.avatar-component-panels { width: 100%; display: grid; }
-.avatar-component-panel { display: none; width: 100%; gap: 10px; }
+.avatar-component-panels { width: 100%; min-height: 0; display: grid; }
+.avatar-component-panel { display: none; width: 100%; min-height: 0; gap: 12px; grid-template-rows: auto auto minmax(0, 1fr); }
 .avatar-component-panel.is-active { display: grid; }
 .avatar-component-panel__head { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
-.avatar-component-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
+.avatar-component-colors { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; padding: 10px 12px; background: rgba(255,255,255,0.72); border: 1px solid rgba(196, 169, 120, 0.35); border-radius: 16px; }
+.avatar-color-control { display: grid; gap: 6px; align-content: start; }
+.avatar-color-control__label { font-size: 12px; font-weight: 700; color: var(--color-text); }
+.avatar-color-control__row { display: flex; align-items: center; gap: 8px; }
+.avatar-color-control__picker { width: 38px; min-width: 38px; height: 38px; padding: 0; border: 1px solid var(--color-border); border-radius: 10px; background: #fff; cursor: pointer; }
+.avatar-color-control__picker::-webkit-color-swatch-wrapper { padding: 4px; }
+.avatar-color-control__picker::-webkit-color-swatch { border: 0; border-radius: 7px; }
+.avatar-color-control__picker::-moz-color-swatch { border: 0; border-radius: 7px; }
+.avatar-color-control__reset { min-height: 38px; padding: 8px 12px; font-size: 12px; }
+.avatar-color-control__samples { display: flex; flex-wrap: wrap; gap: 6px; }
+.avatar-color-sample { width: 24px; height: 24px; border: 1px solid rgba(0,0,0,0.12); border-radius: 8px; cursor: pointer; padding: 0; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.18); }
+.avatar-component-grid { min-height: 0; overflow: auto; padding-right: 4px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; align-content: start; }
 .avatar-component-card { position: relative; display: grid; gap: 6px; padding: 8px; background: #fff; border: 1px solid var(--color-border); border-radius: 16px; cursor: pointer; }
 .avatar-component-card input { position: absolute; opacity: 0; pointer-events: none; }
 .avatar-component-card__thumb { display: block; aspect-ratio: 1; border-radius: 14px; overflow: hidden; background: linear-gradient(180deg, #f7efe6, #f0e4d7); border: 1px solid rgba(74, 52, 38, 0.08); }
@@ -274,7 +287,7 @@ body {
 .avatar-component-card__label { font-size: 12px; font-weight: 700; color: var(--color-text); text-align: center; }
 .avatar-component-card:has(input:checked) { border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(52,72,90,0.14); }
 @media (max-width: 980px){ .avatar-component-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
-@media (max-width: 860px){ .avatar-builder__hero { grid-template-columns: 1fr; } .avatar-builder__actions { justify-content: center; } .avatar-component-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
+@media (max-width: 860px){ .avatar-builder__hero { grid-template-columns: 1fr; } .avatar-builder__actions { justify-content: center; } .avatar-component-colors { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); } .avatar-component-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
 .avatar-swatch-group { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; }
 .avatar-swatch { display: grid; grid-template-columns: 20px 18px minmax(0, 1fr); gap: 10px; align-items: center; padding: 10px 12px; border: 1px solid var(--color-border); border-radius: 14px; background: #fff; cursor: pointer; }
 .avatar-swatch__color { width: 18px; height: 18px; border-radius: 999px; background: var(--swatch-color); border: 1px solid rgba(0,0,0,0.12); }
@@ -393,10 +406,10 @@ body {
 .form-grid.single { grid-template-columns: 1fr; }
 @media (max-width: 900px){ .auth-grid { grid-template-columns: 1fr; } .form-grid { grid-template-columns: 1fr; } }
 
-.modal { position: fixed; inset: 0; display: none; align-items: flex-start; justify-content: center; padding: 70px 16px 24px; background: rgba(0,0,0,0.4); z-index: 200; overflow: auto; }
+.modal { position: fixed; inset: 0; display: none; align-items: flex-start; justify-content: center; padding: 16px 8px; background: rgba(0,0,0,0.4); z-index: 200; overflow: auto; }
 .modal.open { display: flex; }
 .modal .panel { background:#fff; border-radius: var(--radius-md); padding: 16px; box-shadow: 0 18px 50px rgba(0,0,0,0.25); width: min(960px, 100%); }
-.modal .panel--avatar { width: min(1120px, 100%); height: calc(100vh - 96px); max-height: calc(100vh - 96px); overflow: hidden; display: grid; grid-template-rows: auto minmax(0, 1fr); }
+.modal .panel--avatar { width: min(1240px, 100%); height: calc(100vh - 32px); max-height: calc(100vh - 32px); padding: 12px; overflow: hidden; display: grid; grid-template-rows: auto minmax(0, 1fr); }
 
 .dash-grid { display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; }
 .dash-grid-2 { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; }
diff --git a/public/assets/js/app.js b/public/assets/js/app.js
index 1c51b33..33ccbab 100755
--- a/public/assets/js/app.js
+++ b/public/assets/js/app.js
@@ -938,7 +938,7 @@ document.addEventListener('DOMContentLoaded', () => {
         if (!panel || !field) return;
         const hidden = panel.querySelector(`[data-avatar-color-input="${field}"]`);
         const picker = panel.querySelector(`[data-avatar-color-picker="${field}"]`);
-        const defaultValue = picker?.getAttribute('data-avatar-color-default') || '#c4a484';
+        const defaultValue = picker?.getAttribute('data-avatar-color-default') || '#000000';
         if (hidden) {
           hidden.value = '';
         }