/* W11 aus Design V2.1 (design.css), wörtlich übernommen und auf .v21-ui begrenzt: Avatar-Auswahl im Profil und Atmen.
   Technische Ergänzungen: --gap wie in .v21-projekt; app.css gibt .avatar-picker ein Raster für die alte Auswahl, das hier aufgehoben wird.
   Erzeugt mit scratchpad/v23/scope-avatar.py. */
.v21-ui{--gap:clamp(24px,4vw,64px)}
.v21-ui .avatar-picker{display:block}
.v21-ui .avatar-picker{padding:35px var(--gap);background:var(--paper)}
.v21-ui .avatar-picker h2{font-size:35px;margin-bottom:15px}
.v21-ui .avatar-picker>div{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}
.v21-ui .avatar-picker button{border:var(--line);border-radius:12px;background:var(--milk);padding:4px;width:85px;height:85px}
.v21-ui .avatar-picker button img{width:100%}
.v21-ui .avatar-picker fieldset{border:0;border-top:1px solid #18171b50;margin:25px 0;padding:20px 0 0}
.v21-ui .avatar-picker legend{font-weight:700;font-size:13px;padding:0 12px 0 0}
.v21-ui .avatar-picker fieldset>div{display:flex;flex-wrap:wrap;gap:12px}
.v21-ui .avatar-picker #avatar-options button{width:84px;height:84px;border:2px solid var(--ink);background:var(--milk);border-radius:12px;padding:4px}
.v21-ui .avatar-picker #avatar-options img{width:100%;height:100%}
.v21-ui .avatar-picker button[aria-pressed=true]{outline:3px solid var(--violet);outline-offset:4px}
.v21-ui .avatar-picker .avatar-palettes button{width:auto;height:auto;min-height:48px;padding:12px 18px;background:var(--choice,var(--lime));font-weight:700;font-size:12px;border:var(--line);border-radius:8px}
.v21-ui .avatar-selects{display:flex;gap:25px;flex-wrap:wrap}
.v21-ui .avatar-selects label{display:flex;flex-direction:column;gap:8px;font-size:13px;font-weight:700;min-width:220px}
.v21-ui .avatar-selects select{font:inherit;color:var(--ink);background:var(--milk);padding:12px 15px;min-height:48px;border:var(--line);border-radius:8px}
.v21-ui .avatar-picker>.micro{margin-top:20px}
.v21-ui img[data-motion=breathe]{animation:avatar-breathe 4s ease-in-out infinite}
@keyframes avatar-breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.025)}}
@media(max-width:720px){.v21-ui .avatar-picker{padding:35px 24px}.v21-ui .avatar-picker h2{font-size:36px}.v21-ui .avatar-selects{gap:18px}.v21-ui .avatar-selects label{width:100%;min-width:0}}
@media(prefers-reduced-motion:reduce){.v21-ui img[data-motion=breathe]{animation:none}}