/* ============================================================================
   Schale der Mitgliederverwaltung im Stil von Anwesenheit und Kasse
   ============================================================================
   Roy, 19.10.2026: „Passe die Mitgliederverwaltung dem Design von Kasse und
   Anwesenheit an." — zuerst die SCHALE (Roy: „Schale zuerst"): Schrift,
   Hintergrund, Kopf mit Begrüssung und Mannschafts-Chip, runde Knöpfe,
   Karten. Inhalte und Abläufe bleiben unverändert; der Rest zieht nach.

   Liegt NACH style.css und überschreibt nur, was die Schale betrifft. Die
   Farben kommen weiter aus der Vereinspalette (`--sp-*` von client.js) — kein
   festes Blau, kein festes Orange. Quelle der Gestaltung:
   attendance-module/frontend-vorschau/index.html (Kopf, Aurora, .round, .teamchip).
   ========================================================================== */
@import url('schrift/jakarta.css');

body, button, input, select, textarea {
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* ── Hintergrund: Aurora, Schleier, Korn ──────────────────────────────────── */
:root {
    --au1: #6B83FF; --au2: #A87BFF; --au3: #FFB27A;
    --veil-1: rgba(120,130,190,0); --veil-2: rgba(120,130,190,.07); --veil-3: rgba(110,120,180,.16);
}
[data-theme="dark"] {
    --au1: #3B5BFF; --au2: #7A3BFF; --au3: #FF7A2F;
    --veil-1: rgba(9,12,26,.18); --veil-2: rgba(9,12,26,.52); --veil-3: rgba(9,12,26,.72);
}
.aurora { position: fixed; inset: -20%; z-index: 0; pointer-events: none; filter: blur(96px); opacity: .30; }
[data-theme="dark"] .aurora { opacity: .62; }
.aurora b { position: absolute; border-radius: 50%; display: block; mix-blend-mode: multiply; }
[data-theme="dark"] .aurora b { mix-blend-mode: screen; }
.aurora .a1 { width: 52vmax; height: 52vmax; top: -16vmax; left: -12vmax; background: radial-gradient(circle, var(--au1) 0%, transparent 68%); }
.aurora .a2 { width: 44vmax; height: 44vmax; top: 20vmax; right: -16vmax; background: radial-gradient(circle, var(--au2) 0%, transparent 68%); }
.aurora .a3 { width: 40vmax; height: 40vmax; bottom: -14vmax; left: 6vmax; opacity: .55; background: radial-gradient(circle, var(--au3) 0%, transparent 66%); }
.veil { position: fixed; inset: 0; z-index: 1; pointer-events: none;
        background: radial-gradient(120% 80% at 50% 0%, var(--veil-1) 0%, var(--veil-2) 60%, var(--veil-3) 100%); }
@media (prefers-reduced-motion: no-preference) {
    .aurora .a1 { animation: spAu1 24s ease-in-out infinite alternate; }
    .aurora .a2 { animation: spAu2 30s ease-in-out infinite alternate; }
    .aurora .a3 { animation: spAu3 27s ease-in-out infinite alternate; }
}
@keyframes spAu1 { to { transform: translate3d(9vmax, 7vmax, 0) scale(1.15); } }
@keyframes spAu2 { to { transform: translate3d(-11vmax, -6vmax, 0) scale(1.1); } }
@keyframes spAu3 { to { transform: translate3d(7vmax, -9vmax, 0) scale(1.2); } }
#mainApp { position: relative; z-index: 3; }

/* ── Kopf: Wappen, Begrüssung, Mannschafts-Chip, runde Knöpfe ────────────── */
.app-header.top {
    background: transparent; color: var(--text); box-shadow: none; position: static;
    justify-content: flex-start; gap: 12px;
    margin: 0; width: 100%;
    padding: max(24px, calc(env(safe-area-inset-top, 0px) + 16px)) max(12px, calc((100vw - 840px) / 2)) 8px;
}
.top .vwappen { width: 34px; height: 34px; min-width: 34px; border-radius: 9px; object-fit: contain;
                background: var(--surface-2); padding: 3px; }
.top .hi { font-size: 13px; color: var(--muted); line-height: 1.3; min-width: 0; }
.top .hi b { display: block; color: var(--text); font-size: 17px; font-weight: 700; letter-spacing: -.02em;
             white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.top .sp { flex: 1; }
.top .teamchip, .top .team-badge {
    display: inline-flex; align-items: center; gap: 5px; margin-top: 5px;
    padding: 5px 10px; border-radius: 999px; background: var(--glass);
    border: 1px solid var(--border); color: var(--muted);
    font: 600 12px/1 'Plus Jakarta Sans', system-ui, sans-serif; min-height: 28px;
}
.top select.teamchip { padding-right: 8px; cursor: pointer; max-width: 200px; font-size: 16px; min-height: 34px; }
.top .btn-nurbild, .top .sp-konto, .top .sp-logout {
    width: 42px; height: 42px; min-width: 42px; border-radius: 50%; padding: 0 !important;
    background: var(--glass); border: 1px solid var(--border); color: var(--text);
    backdrop-filter: blur(12px); display: grid; place-items: center; cursor: pointer;
}
.top .sp-konto { background: linear-gradient(140deg, var(--brand), var(--brand-dark)); border: 0; color: var(--on-brand);
                 font-weight: 700; font-size: 14px; box-shadow: 0 8px 22px var(--sp-schatten, rgba(11,16,32,.3)); }
.top .btn-nurbild svg, .top .sp-konto svg, .top .sp-logout svg { width: 19px; height: 19px; }
.top .btn-nurbild:hover, .top .sp-logout:hover { background: color-mix(in srgb, #e5544a 16%, transparent);
                                                 border-color: color-mix(in srgb, #e5544a 55%, transparent); }

/* ── Karten: weicher, wie in den anderen Modulen ─────────────────────────── */
.app-main { max-width: 880px; margin-left: auto; margin-right: auto; }
.card, .akte-block, .side-panel, .modal {
    backdrop-filter: blur(14px);
}

@media (min-width: 768px) { .top select.teamchip { font-size: 13px; min-height: 30px; } }

/* ── Die Akte (Person öffnen) im selben Stil ─────────────────────────────────
   akte.js setzt seine Regeln erst beim Öffnen in den Kopf — deshalb stehen die
   Selektoren hier mit `body` davor und gewinnen auch dann. Der Kopf war ein
   Farbband in der vollen Vereinsfarbe; jetzt ein Glasband wie die Köpfe von
   Anwesenheit und Kasse, die Farbe sitzt im Avatar. */
:root { --au-alpha: 26%; }
[data-theme="dark"] { --au-alpha: 44%; }
body .akte-schirm {
    background:
        radial-gradient(60vmax 52vmax at -8% -10%, color-mix(in srgb, var(--au1) var(--au-alpha), transparent), transparent 70%),
        radial-gradient(48vmax 44vmax at 108% 28%, color-mix(in srgb, var(--au2) var(--au-alpha), transparent), transparent 70%),
        radial-gradient(44vmax 40vmax at 18% 112%, color-mix(in srgb, var(--au3) calc(var(--au-alpha) * .8), transparent), transparent 70%),
        var(--bg);
    background-attachment: fixed;
}
body .akte-kopf {
    background: var(--glass); color: var(--text);
    border-bottom: 1px solid var(--border); border-radius: 0 0 22px 22px;
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
body .akte-kopf .zu { border: 1px solid var(--border); background: var(--glass); color: var(--text); backdrop-filter: blur(12px); }
body .akte-kopf .gross { background: linear-gradient(140deg, var(--brand), var(--brand-dark)); color: var(--on-brand);
                         box-shadow: 0 8px 22px var(--sp-schatten, rgba(11,16,32,.3)); }
body .akte-kopf .knipser { background: var(--card); color: var(--acc-text, var(--brand-dark));
                           box-shadow: 0 0 0 2px var(--glass), 0 2px 8px rgba(0,0,0,.25); }
body .akte-kopf .sub { opacity: 1; color: var(--muted); }
body .akte-reiter { background: var(--glass); border: 1px solid var(--border); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
body .akte-block { backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }