Arbeit der parallelen Session gesichert (Profilbilder für Stimmen, Diene-Zugang)

Wie beim vorherigen Mal lag das nur als Arbeitskopie auf dem Server, nicht
in git. Unverändert übernommen, bevor darauf aufgebaut wird:
- Profilbild-Auswahl für die Stimmen (data-stimmen-avatare.js neu,
  stimmen.js, i18n-stimmen.js, stimmen.html, verwaltung.html, main.css)
- Dritte Zugangs-Kachel für Diene (gate.html, server/gate.js)

Co-Authored-By: Claude Opus 5 <[email protected]>
This commit is contained in:
2026-08-21 18:17:47 +02:00
co-authored by Claude Opus 5
parent d0613f86c1
commit e2bd436084
8 changed files with 324 additions and 3 deletions
+55
View File
@@ -4107,6 +4107,61 @@ body.start-seite .music-toggle:focus-visible {
background: linear-gradient(135deg, #ffd0e8, #a8e4f2);
box-shadow: 0 0 16px rgba(255, 154, 208, .3);
}
/* Gewähltes Profilbild statt Anfangsbuchstabe (21.08.2026). Erbt Größe und
runde Form von .stimmen-karte-avatar oben, ersetzt nur Füllung/Farbe. */
.stimmen-karte-avatar-bild {
padding: 0;
overflow: hidden;
background: rgba(255, 255, 255, .05);
box-shadow: 0 0 14px rgba(212, 175, 55, .25);
}
.stimmen-karte-avatar-bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* ---------- Profilbild-Auswahl im Einreichen-Formular (21.08.2026) ----------
Nutzer-Wunsch: "paar geile bilder zum aussuchen ... das soll denen auch
als möglichkeit gegeben sein". Kachelraster, das sich der Breite anpasst;
die getroffene Wahl bekommt einen goldenen Ring statt nur einer leichten
Aufhellung — sonst ist auf dunklem Grund kaum erkennbar, was gewählt ist. */
.stimmen-avatar-titel {
display: block;
font-size: .82rem; font-weight: 700; letter-spacing: .04em;
text-transform: uppercase; color: var(--text-muted);
margin-bottom: .25rem;
}
.stimmen-avatar-hinweis { margin: 0 0 .7rem; }
.stimmen-avatar-wahl {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(58px, 1fr));
gap: .6rem;
}
.stimmen-avatar-kachel {
position: relative;
aspect-ratio: 1;
padding: 0;
border-radius: 50%;
overflow: hidden;
cursor: pointer;
background: rgba(255, 255, 255, .04);
border: 2px solid rgba(255, 255, 255, .12);
transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.stimmen-avatar-kachel img { width: 100%; height: 100%; object-fit: cover; display: block; }
.stimmen-avatar-keins {
display: flex; align-items: center; justify-content: center;
width: 100%; height: 100%;
font-size: 1.15rem; color: var(--text-muted);
}
.stimmen-avatar-kachel:hover { transform: translateY(-2px); border-color: rgba(255, 233, 168, .6); }
.stimmen-avatar-kachel.aktiv {
border-color: #ffe9a8;
box-shadow: 0 0 0 2px rgba(212, 175, 55, .45), 0 0 18px rgba(212, 175, 55, .4);
}
.stimmen-avatar-kachel:focus-visible { outline: 2px solid #ffe9a8; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
.stimmen-avatar-kachel { transition: none; }
.stimmen-avatar-kachel:hover { transform: none; }
}
.stimmen-karte-namen { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.stimmen-karte-name { font-weight: 700; color: var(--text); font-size: .95rem; }
.stimmen-karte-tiktok {