/* ---------------------------------------------------------------------- *
 * GigAdmin – allgemeine Seiten: gemeinsame Grundlage (ab 4.106.0)
 *
 * Gegenstück zu css/settings/basis.css für die Seiten außerhalb der
 * Einstellungen (Statistik, Einsätze, …). Gleiche Sprache, eigener Rahmen:
 * keine Seitenleiste, dafür eine zentrierte Inhaltsfläche.
 *
 * Farben NUR über die Tokens unten – Seiten-CSS (css/app/<seite>.css)
 * bringt keine eigenen Farbwerte mit. Für Diagramme gibt es bewusst nur
 * wenige: Akzent (aus dem Farbschema) in drei Stufen, Grau, Grün/Rot für
 * Geld. Dunkelmodus steht in derselben Datei unter body.darkmode.
 *
 * Eingebunden über ga_app_css('<seite>') (core/functions.php) – das gibt
 * auch die Meldungen (ga_toast / window.gaToast) mit aus.
 * ---------------------------------------------------------------------- */

/* ======================= Tokens ======================= */
:root {
    --ap-accent:      var(--primary, #af121d);
    --ap-accent-text: var(--primary-text, var(--ap-accent));   /* ab 4.138.0: als Schrift/Symbol - immer lesbar */
    --ap-accent-10:   var(--primary-10, rgba(175, 18, 29, .10));
    --ap-on-accent:   var(--on-primary, #ffffff);

    --ap-flaeche:     #ffffff;      /* große Inhaltsfläche */
    --ap-card-bg:     #ffffff;
    --ap-border:      #e5e7eb;
    --ap-text:        #23262b;
    --ap-muted:       #6b7280;
    --ap-soft:        #f3f4f6;
    --ap-soft-hover:  #e5e7eb;
    --ap-input-bg:    #ffffff;
    --ap-input-border:#d1d5db;
    /* Gesperrt / nur lesen (ab 4.117.0): bewusst grau statt Vereinsfarbe */
    --ap-gesperrt-bg:     #eef0f3;
    --ap-gesperrt-rand:   #dcdfe4;
    --ap-gesperrt-text:   #858b94;
    --ap-gesperrt-fuell:  #a3a9b2;
    --ap-gesperrt-stil:   solid;     /* Rahmen gesperrter Felder (dunkel: gestrichelt, ab 4.134.0) */

    --ap-ok:          #198754;
    --ap-err:         #c0392b;
    --ap-warn:        #b58100;
    --ap-info:        #2563eb;
    --ap-ok-bg:       rgba(25, 135, 84, .12);
    --ap-err-bg:      rgba(192, 57, 43, .12);
    --ap-warn-bg:     rgba(224, 168, 0, .14);
    --ap-info-bg:     rgba(37, 99, 235, .10);
    --ap-tuerkis:     #0f766e;      /* Gäste */
    --ap-telegram:    #229ed9;      /* Telegram (ab 4.134.0) */
    --ap-telegram-knopf: #1d87ba;   /* Knopf mit weißer Schrift */

    /* Ab 5.4.0: Kategorie-Farben - fuer Bereiche, die man auf einen Blick
     * unterscheiden soll (Abschnitte im Event-Editor). Nur als Symbol- bzw.
     * Linienfarbe und als zarte Tönung (color-mix … 12-16 %), nie als
     * Schriftfarbe für Fließtext. Dunkel: hellere Stufen weiter unten. */
    --ap-kat-blau:    #2563eb;
    --ap-kat-indigo:  #4f46e5;
    --ap-kat-amber:   #d97706;
    --ap-kat-lila:    #9333ea;
    --ap-kat-rosa:    #db2777;
    --ap-kat-slate:   #64748b;
    --ap-kat-cyan:    #0891b2;
    --ap-kat-gruen:   #16a34a;
    --ap-kat-orange:  #ea580c;
    --ap-kat-smaragd: #059669;
    --ap-kat-sky:     #0284c7;
    --ap-kat-teal:    #0d9488;
    --ap-kat-violett: #7c3aed;

    /* Diagramme: Akzent in drei Stufen + Grau - mehr nicht */
    --ap-chart-1:     var(--ap-accent);
    --ap-chart-2:     color-mix(in srgb, var(--ap-accent) 55%, #ffffff);
    --ap-chart-3:     color-mix(in srgb, var(--ap-accent) 70%, #000000);
    --ap-chart-4:     #9ca3af;
    --ap-chart-raster:rgba(0, 0, 0, .07);

    --ap-radius:      12px;
    --ap-radius-klein:8px;
    --ap-shadow:      0 2px 8px rgba(0, 0, 0, .06);
    --ap-shadow-hoch: 0 6px 20px rgba(0, 0, 0, .10);
}

body.darkmode {
    color-scheme: dark;   /* ab 4.138.1: Bildlaufleisten und Formular-Grundelemente dunkel */
    --ap-accent-text: var(--primary-text, var(--ap-accent));   /* ab 4.138.0: dunkle Stufe neu auflösen */
    --ap-flaeche:     #1a1a1a;
    --ap-card-bg:     #222222;
    --ap-border:      #333333;
    --ap-text:        #e5e7eb;
    --ap-muted:       #9aa0a6;
    --ap-soft:        #2a2a2a;
    --ap-soft-hover:  #333333;
    --ap-input-bg:    #121212;
    --ap-input-border:#444444;
    /* Ab 4.134.0: gesperrt = flach wie die Karte, gestrichelter Rahmen -
       aktive Felder sind dunkle „Mulden“, so ist der Unterschied klar */
    --ap-gesperrt-bg:     var(--ap-card-bg);
    --ap-gesperrt-rand:   #474747;
    --ap-gesperrt-stil:   dashed;
    --ap-gesperrt-text:   #7b8087;
    --ap-gesperrt-fuell:  #5c626b;
    --ap-ok:          #4ade80;
    --ap-err:         #f87171;
    --ap-warn:        #f0c060;
    --ap-info:        #60a5fa;
    --ap-ok-bg:       rgba(74, 222, 128, .14);
    --ap-err-bg:      rgba(248, 113, 113, .14);
    --ap-warn-bg:     rgba(240, 192, 96, .14);
    --ap-info-bg:     rgba(96, 165, 250, .14);
    --ap-tuerkis:     #14b8a6;
    --ap-telegram:    #4cb6ea;
    --ap-telegram-knopf: #1d87ba;
    --ap-chart-2:     color-mix(in srgb, var(--ap-accent) 60%, #ffffff);
    --ap-chart-3:     color-mix(in srgb, var(--ap-accent) 55%, #000000);
    --ap-chart-4:     #6b7280;
    --ap-chart-raster:rgba(255, 255, 255, .08);
    --ap-kat-blau:    #60a5fa;
    --ap-kat-indigo:  #818cf8;
    --ap-kat-amber:   #fbbf24;
    --ap-kat-lila:    #c084fc;
    --ap-kat-rosa:    #f472b6;
    --ap-kat-slate:   #94a3b8;
    --ap-kat-cyan:    #22d3ee;
    --ap-kat-gruen:   #4ade80;
    --ap-kat-orange:  #fb923c;
    --ap-kat-smaragd: #34d399;
    --ap-kat-sky:     #38bdf8;
    --ap-kat-teal:    #2dd4bf;
    --ap-kat-violett: #a78bfa;
    --ap-shadow:      0 2px 8px rgba(0, 0, 0, .35);
    --ap-shadow-hoch: 0 6px 20px rgba(0, 0, 0, .45);
    --pf-card-bg: var(--ap-card-bg); --pf-border: var(--ap-border); --pf-text: var(--ap-text);
    --pf-muted: var(--ap-muted); --pf-soft: var(--ap-soft);
}

/* ======================= Rahmen ======================= */
.ap-seite {
    /* Ab 4.108.3 breiter und mit weniger Rand: auf großen Bildschirmen blieb
       links und rechts viel ungenutzte Fläche. */
    box-sizing: border-box; max-width: 2400px; margin: 0 auto; padding: 24px clamp(16px, 1.6vw, 36px) 40px;   /* ab 4.132.0 breiter: auf großen Bildschirmen blieb außen zu viel Rand */   /* ab 4.128.0: Platz für die Kopfleiste macht .ga-kopf-platz (misst die Leiste) */
    color: var(--ap-text);
}
.ap-seite *, .ap-seite *::before, .ap-seite *::after { box-sizing: border-box; }
.ap-seite a { color: var(--ap-accent-text); }
.ap-flaeche {
    background: var(--ap-flaeche); border-radius: 16px; padding: 20px; box-shadow: var(--ap-shadow);
}
.ap-seite [hidden] { display: none !important; }

/* ---------- Kopf ---------- */
.ap-kopf {
    display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin: 0 0 20px;
    padding: 20px 22px; background: var(--ap-card-bg); border: 1px solid var(--ap-border);
    border-top: 4px solid var(--ap-accent); border-radius: var(--ap-radius); box-shadow: var(--ap-shadow);
}
.ap-kopf-icon {
    flex: 0 0 auto; width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    background: var(--ap-accent-10); color: var(--ap-accent-text); font-size: 1.45rem;
}
.ap-kopf-info { flex: 1 1 260px; min-width: 0; }
.ap-kopf-info h1 { margin: 0; font-size: 1.5rem; font-weight: 600; color: var(--ap-text); border: 0; padding: 0; }
.ap-kopf-info p { margin: 2px 0 0; color: var(--ap-muted); font-size: .9rem; line-height: 1.5; }
.ap-kopf-aktionen { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* ---------- Reiter (Seiten einer Gruppe, z. B. Statistik / Einsätze) ---------- */
.ap-reiter { display: inline-flex; gap: 4px; padding: 4px; margin: 0 0 16px; border-radius: 999px; background: var(--ap-soft); border: 1px solid var(--ap-border); flex-wrap: wrap; }
.ap-reiter a {
    display: inline-flex; align-items: center; gap: 7px; padding: 7px 16px; border-radius: 999px;
    font-size: .9rem; font-weight: 600; color: var(--ap-muted) !important; text-decoration: none;
}
.ap-reiter a:hover { color: var(--ap-text) !important; }
.ap-reiter a.aktiv { background: var(--ap-card-bg); color: var(--ap-accent-text) !important; box-shadow: var(--ap-shadow); }

/* ---------- Karten ---------- */
.ap-karte {
    background: var(--ap-card-bg); border: 1px solid var(--ap-border); border-radius: var(--ap-radius);
    box-shadow: var(--ap-shadow); padding: 20px 22px; min-width: 0; margin: 0 0 20px;
}
.ap-karte > h2, .ap-karte > h3 {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 16px; padding: 0 0 10px;
    font-size: 1.1rem; font-weight: 600; color: var(--ap-text);
    /* ab 4.139.2: Linie in der Vereinsfarbe - zarte Linie, vorn ein kräftiger Strich */
    border-bottom: 1px solid color-mix(in srgb, var(--ap-accent) 28%, var(--ap-border));
    background-image: linear-gradient(var(--ap-accent), var(--ap-accent)); background-repeat: no-repeat; background-size: 44px 2px; background-position: left bottom;
}
.ap-karte > h2 i, .ap-karte > h3 i { color: var(--ap-accent-text); width: 1.1em; text-align: center; }
.ap-karte h4 { margin: 0 0 10px; font-size: .92rem; font-weight: 600; color: var(--ap-muted); }
.ap-zusatz { margin-left: auto; font-size: .82rem; font-weight: 400; color: var(--ap-muted); }
.ap-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; }
.ap-raster-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.ap-teil { min-width: 0; padding: 14px 16px; border: 1px solid var(--ap-border); border-radius: var(--ap-radius-klein); background: var(--ap-card-bg); }
.ap-teil-breit { grid-column: 1 / -1; }

/* ---------- Kennzahlen ---------- */
.ap-zahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin: 0 0 18px; }
.ap-zahl {
    position: relative; display: flex; flex-direction: column; gap: 3px; min-width: 0; padding: 14px 16px;
    background: var(--ap-card-bg); border: 1px solid var(--ap-border); border-left: 4px solid var(--ap-accent);
    border-radius: var(--ap-radius); box-shadow: var(--ap-shadow);
}
.ap-zahl > span { font-size: .74rem; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: var(--ap-muted); }
.ap-zahl > strong { font-size: 1.55rem; line-height: 1.15; color: var(--ap-text); overflow-wrap: anywhere; }
.ap-zahl > small { font-size: .8rem; color: var(--ap-muted); }
.ap-zahl-neutral { border-left-color: var(--ap-chart-4); }
.ap-zahl-gut     { border-left-color: var(--ap-ok); }
.ap-zahl-schlecht{ border-left-color: var(--ap-err); }
.ap-zahl-klein > strong { font-size: 1.2rem; }

/* Veränderung gegenüber Vorzeitraum */
.ap-trend { display: inline-flex; align-items: center; gap: 4px; font-size: .78rem; font-weight: 700; padding: 1px 7px; border-radius: 999px; width: max-content; }
.ap-trend-hoch   { color: var(--ap-ok);  background: var(--ap-ok-bg); }
.ap-trend-runter { color: var(--ap-err); background: var(--ap-err-bg); }
.ap-trend-gleich { color: var(--ap-muted); background: var(--ap-soft); }

/* ---------- Knöpfe ---------- */
.ap-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 8px 15px; margin: 0;
    border-radius: var(--ap-radius-klein); border: 1px solid var(--ap-border); background: var(--ap-soft);
    color: var(--ap-text) !important; font: inherit; font-size: .88rem; font-weight: 600; line-height: 1.2;
    cursor: pointer; text-decoration: none !important; white-space: nowrap;
}
.ap-btn:hover { background: var(--ap-soft-hover); }
.ap-btn-haupt { background: var(--ap-accent); border-color: var(--ap-accent); color: var(--ap-on-accent) !important; }
.ap-btn-haupt:hover { background: var(--ap-accent); filter: brightness(1.08); }
.ap-btn-klein { padding: 6px 11px; font-size: .82rem; }
.ap-btn:disabled:not(.pf-gesperrt) {
    background: var(--ap-gesperrt-bg) !important; border-color: var(--ap-gesperrt-rand) !important;
    color: var(--ap-gesperrt-text) !important; filter: none; opacity: 1; box-shadow: none; cursor: not-allowed;
}

/* ---------- Filterleiste ---------- */
.ap-filter {
    display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 14px; margin: 0 0 18px; padding: 14px 16px;
    background: var(--ap-card-bg); border: 1px solid var(--ap-border); border-radius: var(--ap-radius); box-shadow: var(--ap-shadow);
}
.ap-filter label { display: flex; flex-direction: column; gap: 4px; margin: 0; font-size: .78rem; font-weight: 600; color: var(--ap-muted); }
.ap-filter input, .ap-filter select {
    height: 36px; padding: 0 10px; margin: 0; font: inherit; font-size: .9rem; color: var(--ap-text);
    background: var(--ap-input-bg); border: 1px solid var(--ap-input-border); border-radius: var(--ap-radius-klein);
}
.ap-filter input:focus, .ap-filter select:focus { outline: none; border-color: var(--ap-accent); box-shadow: 0 0 0 3px var(--ap-accent-10); }
.ap-filter-trenner { align-self: center; color: var(--ap-muted); font-size: .82rem; }
.ap-filter-rechts { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }

/* Schnellwahl als Chips */
.ap-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ap-chip {
    display: inline-flex; align-items: center; gap: 6px; padding: 6px 13px; border-radius: 999px; cursor: pointer;
    font: inherit; font-size: .84rem; font-weight: 600; color: var(--ap-text) !important; text-decoration: none !important;
    background: var(--ap-soft); border: 1px solid transparent;
}
.ap-chip:hover { background: var(--ap-soft-hover); }
.ap-chip.aktiv { background: var(--ap-accent-10); border-color: var(--ap-accent); color: var(--ap-accent-text) !important; }

/* Sprungleiste zu den Abschnitten */
.ap-sprung {
    position: sticky; top: calc(var(--ga-kopf-hoehe, 60px) + 12px); z-index: 50; display: flex; gap: 6px; overflow-x: auto; margin: 0 0 18px; padding: 8px;
    background: var(--ap-card-bg); border: 1px solid var(--ap-border); border-radius: var(--ap-radius); box-shadow: var(--ap-shadow-hoch);
    scrollbar-width: none;
}
.ap-sprung::-webkit-scrollbar { display: none; }
.ap-sprung a {
    flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px;
    font-size: .84rem; font-weight: 600; color: var(--ap-muted) !important; text-decoration: none;
}
.ap-sprung a:hover { background: var(--ap-soft); color: var(--ap-text) !important; }
.ap-sprung a.aktiv { background: var(--ap-accent-10); color: var(--ap-accent-text) !important; }
.ap-anker { scroll-margin-top: 160px; }

/* ---------- Diagramme ---------- */
.ap-diagramm { position: relative; height: 280px; }
.ap-diagramm-hoch { height: 360px; }
.ap-diagramm-flach { height: 220px; }
.ap-diagramm canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; }

/* ---------- Ranglisten mit Balken ---------- */
.ap-rang { list-style: none; margin: 0; padding: 0; counter-reset: rang; }
.ap-rang li { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; align-items: center; gap: 4px 10px; padding: 7px 0; border-bottom: 1px solid var(--ap-border); }
.ap-rang li:last-child { border-bottom: 0; }
.ap-rang li::before { counter-increment: rang; content: counter(rang) "."; font-size: .82rem; font-weight: 700; color: var(--ap-muted); text-align: right; }
.ap-rang-name { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: .9rem; color: var(--ap-text); }
.ap-rang-name > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ap-rang-wert { font-size: .88rem; font-weight: 700; color: var(--ap-text); white-space: nowrap; }
.ap-rang-balken { grid-column: 2 / -1; height: 5px; border-radius: 999px; background: var(--ap-soft); overflow: hidden; }
.ap-rang-balken > span { display: block; height: 100%; border-radius: inherit; background: var(--ap-accent); }

/* Personenbilder in Ranglisten (ga_verantwortlicher_avatar) */
.ap-rang .v-avatar { width: 26px; height: 26px; min-width: 26px; border-radius: 50%; object-fit: cover; display: block; border: 1px solid var(--ap-border); }
.ap-rang .v-avatar-initialen { display: inline-flex; align-items: center; justify-content: center; background: var(--ap-accent); color: var(--ap-on-accent); font-size: 10px; font-weight: 700; line-height: 1; border: 0; }
.ap-rang .v-avatar-ohne-konto { background: transparent; color: var(--ap-muted); border: 1px dashed var(--ap-muted); }
.ap-rang .v-avatar-initialen.v-avatar-gast { background: var(--ap-tuerkis) !important; color: #fff !important; }
.ap-rang .v-avatar.v-avatar-gast:not(.v-avatar-initialen) { box-shadow: 0 0 0 2px var(--ap-tuerkis); }
.ap-rang li.ga-avatar-link { cursor: pointer; border-radius: 8px; }
.ap-rang li.ga-avatar-link:hover { background: var(--ap-soft); }

/* ---------- Tabellen ---------- */
.ap-tabelle-rahmen { overflow-x: auto; }
.ap-tabelle { width: 100%; border-collapse: collapse; font-size: .9rem; color: var(--ap-text); }
.ap-tabelle th {
    padding: 9px 10px; text-align: left; font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
    color: var(--ap-muted); border-bottom: 1px solid var(--ap-border); white-space: nowrap; background: transparent;
}
.ap-tabelle td { padding: 9px 10px; border-bottom: 1px solid var(--ap-border); vertical-align: top; background: transparent; color: var(--ap-text); }
.ap-tabelle tbody tr:last-child td { border-bottom: 0; }
.ap-tabelle tbody tr:hover td { background: var(--ap-soft); }
.ap-tabelle .ap-zahl-zelle { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ap-tabelle th.ap-zahl-zelle { text-align: right; }
.ap-leer-wert { color: var(--ap-muted); }

/* ---------- Hinweise und Pillen ---------- */
.ap-hinweis { margin: 10px 0 0; font-size: .82rem; line-height: 1.5; color: var(--ap-muted); }
.ap-box { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 16px; padding: 12px 16px; border-radius: var(--ap-radius); font-size: .9rem; line-height: 1.5; border: 1px solid var(--ap-border); background: var(--ap-card-bg); color: var(--ap-text); }
.ap-box > i { margin-top: 3px; color: var(--ap-info); }
.ap-box-info { background: var(--ap-info-bg); border-color: transparent; }
.ap-leer { padding: 28px 16px; text-align: center; color: var(--ap-muted); }
.ap-leer > i { display: block; margin: 0 auto 8px; font-size: 1.6rem; color: var(--ap-accent-text); opacity: .7; }
.ap-pill { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: 999px; font-size: .74rem; font-weight: 600; background: var(--ap-soft); color: var(--ap-muted); white-space: nowrap; }
.ap-pill-akzent { background: var(--ap-accent-10); color: var(--ap-accent-text); }
.ap-pill-gut { background: var(--ap-ok-bg); color: var(--ap-ok); }

/* ---------- Ergänzungen ab 4.107.0 (Quittungen) ---------- */
.ap-box-ok { background: var(--ap-ok-bg); border-color: transparent; align-items: center; flex-wrap: wrap; }
.ap-box-ok > i { color: var(--ap-ok); margin-top: 0; }
.ap-box-ok > span { flex: 1 1 260px; }
.ap-box-info > span { flex: 1 1 auto; }
.ap-pill-schlecht { background: var(--ap-err-bg); color: var(--ap-err); }
.ap-pill-warn { background: var(--ap-warn-bg); color: var(--ap-warn); }   /* ab 5.86.0 */
.ap-btn-gefahr { color: var(--ap-err) !important; }
.ap-btn-gefahr-voll { background: var(--ap-err); border-color: var(--ap-err); color: #fff !important; }
.ap-btn-gefahr-voll:hover { background: var(--ap-err); filter: brightness(1.08); }

/* Schwebende Speichern-Leiste: bleibt am unteren Rand, bis ihr Platz im
   Formular erreicht ist (wie .pf-speichern in den Einstellungen). */
.ap-speichern {
    position: sticky; bottom: 12px; z-index: 5; display: flex; align-items: center; justify-content: flex-end;
    gap: 10px 12px; flex-wrap: wrap; margin: 18px 0 0; padding: 12px 16px;
    background: var(--ap-card-bg); border: 1px solid var(--ap-border); border-radius: var(--ap-radius); box-shadow: var(--ap-shadow-hoch);
}
.ap-speichern > .ap-hinweis { margin: 0 auto 0 0; }

/* Nachfrage-Fenster (<dialog>) statt confirm()/prompt() */
.ap-dialog {
    width: min(460px, calc(100vw - 32px)); padding: 0; border: 1px solid var(--ap-border); border-radius: var(--ap-radius);
    background: var(--ap-card-bg); color: var(--ap-text); box-shadow: 0 20px 50px rgba(0, 0, 0, .3);
}
.ap-dialog::backdrop { background: rgba(0, 0, 0, .45); }
.ap-dialog > form { margin: 0; padding: 20px 22px; }
.ap-dialog h3 { margin: 0 0 8px; font-size: 1.1rem; font-weight: 600; color: var(--ap-text); }
.ap-dialog p { margin: 0 0 14px; font-size: .92rem; line-height: 1.5; color: var(--ap-muted); }
.ap-dialog-feld { display: flex; flex-direction: column; gap: 5px; margin: 0 0 14px; font-size: .82rem; font-weight: 600; color: var(--ap-muted); }
.ap-dialog-feld em { font-style: normal; font-weight: 400; }
.ap-dialog textarea {
    width: 100%; padding: 8px 10px; font: inherit; font-size: .92rem; color: var(--ap-text); resize: vertical;
    background: var(--ap-input-bg); border: 1px solid var(--ap-input-border); border-radius: var(--ap-radius-klein);
}
.ap-dialog textarea:focus { outline: none; border-color: var(--ap-accent); box-shadow: 0 0 0 3px var(--ap-accent-10); }
.ap-dialog-knoepfe { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }

/* ---------- Ergänzungen ab 4.108.0 (Passwortsafe) ---------- */
.ap-box-warn { background: var(--ap-warn-bg); border-color: transparent; }
.ap-box-warn > i { color: var(--ap-warn); }
.ap-box code { font-size: .85em; }

/* Formular-Raster: Beschriftung über dem Feld, zwei Spalten (Handy: eine) */
.ap-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; margin: 0; }
.ap-form-1 { grid-template-columns: minmax(0, 1fr); }
.ap-form > label, .ap-form .ap-feld { display: flex; flex-direction: column; gap: 5px; margin: 0; min-width: 0; font-size: .8rem; font-weight: 600; color: var(--ap-muted); }
.ap-form em { font-style: normal; font-weight: 400; opacity: .85; }
.ap-form > label > span { display: block; }
.ap-form .ap-breit { grid-column: 1 / -1; }
.ap-form input[type="text"], .ap-form input[type="url"], .ap-form input[type="email"], .ap-form input[type="password"],
.ap-form input[type="search"], .ap-form input[type="date"], .ap-form input[type="number"], .ap-form input[type="tel"], .ap-form select, .ap-form textarea {
    width: 100%; height: 38px; padding: 0 11px; margin: 0; font: inherit; font-size: .92rem; font-weight: 400; color: var(--ap-text);
    background: var(--ap-input-bg); border: 1px solid var(--ap-input-border); border-radius: var(--ap-radius-klein);
}
.ap-form textarea { height: auto; padding: 8px 11px; resize: vertical; line-height: 1.45; }
.ap-form input:focus, .ap-form select:focus, .ap-form textarea:focus { outline: none; border-color: var(--ap-accent); box-shadow: 0 0 0 3px var(--ap-accent-10); }
.ap-form .ap-hinweis { margin: 0; font-weight: 400; }

/* Fenster über der Seite (serverseitig ausgegeben, Zustand in der Adresse) */
.ap-modal { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center; padding: 16px; }
.ap-modal-hinter { position: absolute; inset: 0; background: rgba(0, 0, 0, .45); cursor: default; }
.ap-modal-kasten {
    position: relative; display: flex; flex-direction: column; width: min(560px, 100%); max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px);
    background: var(--ap-card-bg); color: var(--ap-text); border: 1px solid var(--ap-border); border-radius: 16px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .3); animation: ap-modal-rein .18s ease;
}
.ap-modal-breit { width: min(820px, 100%); }
.ap-modal-kopf { display: flex; align-items: flex-start; gap: 12px; padding: 18px 20px 14px; border-bottom: 1px solid var(--ap-border); }
.ap-modal-kopf > div { min-width: 0; flex: 1 1 auto; }
.ap-modal-kopf h3 { display: flex; align-items: center; gap: 9px; margin: 0; font-size: 1.12rem; font-weight: 600; color: var(--ap-text); overflow-wrap: anywhere; }
.ap-modal-kopf h3 > i { color: var(--ap-accent-text); }
.ap-modal-unter { display: block; margin-top: 3px; font-size: .84rem; color: var(--ap-muted); }
.ap-modal-zu {
    flex: 0 0 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; margin: -4px -6px 0 0;
    border-radius: 9px; color: var(--ap-muted) !important; text-decoration: none !important; font-size: 1.05rem;
}
.ap-modal-zu:hover { background: var(--ap-soft); color: var(--ap-text) !important; }
.ap-modal-inhalt { flex: 1 1 auto; overflow: auto; padding: 18px 20px; margin: 0; overscroll-behavior: contain; }
.ap-modal-fuss { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px; padding: 12px 20px; border-top: 1px solid var(--ap-border); }
.ap-modal-fuss form { margin: 0; display: flex; }
.ap-links { margin-right: auto !important; }
body:has(.ap-modal) { overflow: hidden; }
@keyframes ap-modal-rein { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }

/* ---------- Meldungen (Toast) – wie in css/settings/basis.css ---------- */
.pf-toast {
    position: fixed; left: 50%; bottom: 24px; z-index: 10000; transform: translateX(-50%);
    display: flex; align-items: center; gap: 10px; width: max-content; max-width: min(560px, calc(100vw - 32px));
    padding: 12px 10px 12px 16px; border-radius: 12px; border: 1px solid var(--ap-border); border-left: 5px solid var(--ap-ok);
    background: var(--ap-card-bg); color: var(--ap-text); box-shadow: 0 10px 30px rgba(0, 0, 0, .22);
    font-size: .92rem; line-height: 1.4; transition: opacity .4s, transform .4s, bottom .25s; animation: ap-toast-rein .3s ease;
}
.pf-toast > i { font-size: 1.1rem; color: var(--ap-ok); flex: 0 0 auto; }
.pf-toast > span { flex: 1 1 auto; }
.pf-toast-fehler { border-left-color: var(--ap-err); } .pf-toast-fehler > i { color: var(--ap-err); }
.pf-toast-warn { border-left-color: var(--ap-warn); }  .pf-toast-warn > i { color: var(--ap-warn); }
.pf-toast-info { border-left-color: var(--ap-info); }  .pf-toast-info > i { color: var(--ap-info); }
.pf-toast-x { flex: 0 0 auto; width: 28px; height: 28px; padding: 0; margin: 0; border: none; border-radius: 7px; cursor: pointer; background: transparent; color: var(--ap-muted); }
.pf-toast-x:hover { background: var(--ap-soft); color: var(--ap-text); }
.pf-toast-weg { opacity: 0; transform: translate(-50%, 12px); pointer-events: none; }
@keyframes ap-toast-rein { from { opacity: 0; transform: translate(-50%, 12px); } to { opacity: 1; transform: translate(-50%, 0); } }
.pf-gesperrt { cursor: progress !important; }

/* ======================= Handy ======================= */
@media (max-width: 900px) {
    .ap-raster-2 { grid-template-columns: minmax(0, 1fr); }
    .ap-raster { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
    .ap-seite { padding: 12px 8px 24px; }
    .ap-flaeche { padding: 12px; border-radius: 12px; }
    .ap-kopf { padding: 16px; gap: 12px; }
    .ap-kopf-icon { width: 44px; height: 44px; font-size: 1.15rem; }
    .ap-kopf-info h1 { font-size: 1.25rem; }
    .ap-karte { padding: 16px 14px; }
    .ap-zahlen { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    /* Ungerade Anzahl: die letzte Kachel über die ganze Breite - sonst bleibt ein Loch */
    .ap-zahlen > .ap-zahl:last-child:nth-child(odd) { grid-column: 1 / -1; }
    .ap-zahl { padding: 11px 12px; }
    .ap-zahl > strong { font-size: 1.25rem; }
    .ap-filter { padding: 12px; }
    .ap-filter label, .ap-filter input, .ap-filter select { width: 100%; }
    .ap-filter label { flex: 1 1 130px; }
    .ap-filter-rechts { margin-left: 0; width: 100%; }
    .ap-filter-rechts .ap-btn { flex: 1 1 auto; }
    .ap-sprung { top: calc(var(--ga-kopf-hoehe, 60px) + 8px); }
    .ap-diagramm { height: 240px; }
    .ap-diagramm-hoch { height: 300px; }
    /* Ab 5.93.2: am Handy eine runde Leiste wie überall, die sich seitlich wischen lässt – bis dahin brach sie bei vielen
       Reitern um und wurde zum Oval, was am Handy ungewohnt aussah. Der offene Reiter wird in die Mitte geschoben (js/kopfleiste.js). */
    .ap-reiter { display: flex; flex-wrap: nowrap; max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
    .ap-reiter::-webkit-scrollbar { display: none; }
    /* Weiche Kante, wo es weitergeht (Klassen setzt js/kopfleiste.js) – damit klar ist, dass man wischen kann */
    .ap-reiter.ap-reiter-rechts { -webkit-mask-image: linear-gradient(to right, #000 82%, transparent); mask-image: linear-gradient(to right, #000 82%, transparent); }
    .ap-reiter.ap-reiter-links { -webkit-mask-image: linear-gradient(to left, #000 82%, transparent); mask-image: linear-gradient(to left, #000 82%, transparent); }
    .ap-reiter.ap-reiter-links.ap-reiter-rechts { -webkit-mask-image: linear-gradient(to right, transparent, #000 18%, #000 82%, transparent); mask-image: linear-gradient(to right, transparent, #000 18%, #000 82%, transparent); }
    .ap-reiter a { flex: 1 0 auto; justify-content: center; white-space: nowrap; }
    .ap-speichern { bottom: 6px; padding: 10px 12px; }
    .ap-form { grid-template-columns: minmax(0, 1fr); }
    .ap-modal { align-items: flex-end; padding: 0; }
    .ap-modal-kasten, .ap-modal-breit { width: 100%; max-height: 92vh; max-height: 92dvh; border-radius: 16px 16px 0 0; }
    .ap-modal-kopf, .ap-modal-inhalt, .ap-modal-fuss { padding-left: 14px; padding-right: 14px; }
    .ap-modal-fuss { padding-bottom: max(12px, env(safe-area-inset-bottom)); }
    .ap-speichern > .ap-hinweis { display: none; }
}

/* ======================================================================
   Gesperrt / nur lesen (ab 4.117.0) - grau statt Vereinsfarbe.
   Auf die Seiten im neuen Design beschränkt (.ap-seite und Dialoge).
   ====================================================================== */
:is(.ap-seite, .ap-dialog, .ap-modal) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="range"]):not([type="color"]):not([type="file"]), select, textarea):is(:disabled, [readonly]) {
    background-color: var(--ap-gesperrt-bg) !important;
    border-color: var(--ap-gesperrt-rand) !important;
    border-style: var(--ap-gesperrt-stil) !important;
    color: var(--ap-gesperrt-text) !important;
    -webkit-text-fill-color: var(--ap-gesperrt-text);
    box-shadow: none !important;
    opacity: 1;
    cursor: not-allowed;
}
:is(.ap-seite, .ap-dialog, .ap-modal) :is(input, select, textarea)[readonly] { cursor: default; }
:is(.ap-seite, .ap-dialog, .ap-modal) input:is([type="checkbox"], [type="radio"]):disabled { accent-color: var(--ap-gesperrt-fuell); cursor: not-allowed; }   /* ab 4.121.1 ohne opacity:1 (versteckte Eingaben blieben sonst sichtbar) */
:is(.ap-seite, .ap-dialog, .ap-modal) label:has(> input:is([type="checkbox"], [type="radio"]):disabled) {
    cursor: not-allowed; filter: grayscale(1); opacity: .72;
}


/* ---------- Ab 4.122.0: Nachfrage/Hinweis (js/ga_frage.js) ---------- */
.ga-frage .ga-frage-liste { margin: -6px 0 14px; padding-left: 18px; font-size: .9rem; line-height: 1.5; color: var(--ap-text); }
.ga-frage .ga-frage-liste li + li { margin-top: 3px; }
.ga-frage .ga-frage-text { white-space: pre-line; }
.ga-frage [hidden] { display: none !important; }
.ga-frage .ga-frage-feld {
    display: block; width: 100%; box-sizing: border-box; margin: 0 0 16px; padding: 9px 11px; font: inherit; font-size: .92rem;
    color: var(--ap-text); background: var(--ap-input-bg); border: 1px solid var(--ap-input-border); border-radius: var(--ap-radius-klein);
}
.ga-frage .ga-frage-feld:focus { outline: none; border-color: var(--ap-accent); box-shadow: 0 0 0 3px var(--ap-accent-10); }

/* CKEditor bringt eine nur für Screenreader gedachte Beschriftung
   („Rich Text Editor") mit. Allgemeine label-Regeln machten sie sichtbar. */
.ck.ck-voice-label { display: none !important; }

/* ---------------------------------------------------------------------- *
 * Ab 5.26.0: Farbe je Dateiart (ga_datei_farbe, core/includes/datei_vorschau.php)
 * und Vorschau-Fenster für Dateien (js/datei_vorschau.js) – Ablage und Event-Editor.
 * ---------------------------------------------------------------------- */
.ga-f-rosa { --ga-f: var(--ap-kat-rosa); }
.ga-f-blau { --ga-f: var(--ap-kat-blau); }
.ga-f-gruen { --ga-f: var(--ap-kat-gruen); }
.ga-f-orange { --ga-f: var(--ap-kat-orange); }
.ga-f-violett { --ga-f: var(--ap-kat-violett); }
.ga-f-indigo { --ga-f: var(--ap-kat-indigo); }
.ga-f-teal { --ga-f: var(--ap-kat-teal); }
.ga-f-amber { --ga-f: var(--ap-kat-amber); }
.ga-f-cyan { --ga-f: var(--ap-kat-cyan); }
.ga-f-sky { --ga-f: var(--ap-kat-sky); }
.ga-f-smaragd { --ga-f: var(--ap-kat-smaragd); }
.ga-f-slate { --ga-f: var(--ap-kat-slate); }
i[class*="ga-f-"], .ap-modal-kopf h3 > i[class*="ga-f-"] { color: var(--ga-f); }

.ga-vf-kasten { width: min(1100px, 100%); height: min(92vh, 1400px); height: min(92dvh, 1400px); }
.ga-vf .ap-modal-kopf h3 > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ga-vf-flaeche { flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; background: var(--ap-soft); }
.ga-vf-bild { display: flex; align-items: center; justify-content: center; padding: 12px; }
/* ab 5.35.0: Mail aus dem Postfach - fremdes HTML, deshalb hell wie in jedem Mail-Programm */
.ga-vf-mail { display: block; width: 100%; height: 100%; min-height: 60vh; border: 0; background: #fff; /* Ausnahme: Mails sind für Weiß gestaltet */ }
.ga-vf-bild img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 4px; box-shadow: 0 2px 12px rgba(0, 0, 0, .18); }
.ga-vf-pdf { padding: 12px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
/* flex: 0 0 auto (ab 5.28.1) - sonst schrumpften mehrseitige PDFs im festen Fenster und lagen übereinander */
.ga-vf-seite { flex: 0 0 auto; width: 100%; max-width: 900px; min-height: 200px; aspect-ratio: var(--ga-vf-form, 0.7071); background: #fff; box-shadow: 0 2px 10px rgba(0, 0, 0, .15); border-radius: 2px; } /* Papier bleibt weiß, auch dunkel */
.ga-vf-seite:has(canvas) { aspect-ratio: auto; min-height: 0; }
.ga-vf-seite canvas { display: block; }
.ga-vf-video, .ga-vf-audio { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 12px; }
.ga-vf-video video { max-width: 100%; max-height: 100%; border-radius: 6px; background: #000; } /* Video-Hintergrund bleibt schwarz */
.ga-vf-audio audio { width: min(560px, 100%); }
.ga-vf-audio-bild { width: 120px; height: 120px; display: flex; align-items: center; justify-content: center; border-radius: 28px; font-size: 3.2rem;
    background: color-mix(in srgb, var(--ga-f, var(--ap-accent)) 14%, transparent); color: var(--ga-f, var(--ap-accent-text)); }
/* Ab 5.79.0: Word und Tabellen (nur lesen) – Papier bleibt weiß wie beim PDF */
.ga-vf-word { padding: 0; }
.ga-vf-word .docx-wrapper { background: transparent; padding: 12px; gap: 12px; }
.ga-vf-word section.docx { box-shadow: 0 2px 10px rgba(0, 0, 0, .15); margin-bottom: 0; }
.ga-vf-tabelle { display: flex; flex-direction: column; overflow: hidden; }
.ga-vf-blaetter { display: flex; gap: 4px; padding: 8px 10px 0; overflow-x: auto; flex: 0 0 auto; border-bottom: 1px solid var(--ap-border); background: var(--ap-card-bg); }
.ga-vf-blatt { border: 1px solid transparent; border-bottom: 0; border-radius: 8px 8px 0 0; padding: 6px 12px; background: transparent; color: var(--ap-muted); font: inherit; font-size: .85rem; cursor: pointer; white-space: nowrap; }
.ga-vf-blatt:hover { color: var(--ap-text); }
.ga-vf-blatt.aktiv { background: var(--ap-soft); border-color: var(--ap-border); color: var(--ap-text); font-weight: 600; }
.ga-vf-tabelle-platz { flex: 1 1 auto; min-height: 0; overflow: auto; }
table.ga-vf-tab { border-collapse: collapse; font-size: .82rem; background: var(--ap-card-bg); color: var(--ap-text); }
table.ga-vf-tab th, table.ga-vf-tab td { border: 1px solid var(--ap-border); padding: 3px 8px; white-space: pre; max-width: 420px; overflow: hidden; text-overflow: ellipsis; text-align: left; vertical-align: top; }
table.ga-vf-tab thead th { position: sticky; top: 0; z-index: 1; background: var(--ap-soft); color: var(--ap-muted); font-weight: 600; text-align: center; }
table.ga-vf-tab tbody th { position: sticky; left: 0; background: var(--ap-soft); color: var(--ap-muted); font-weight: 600; text-align: right; }
.ga-vf-hinweis { margin: 10px 12px; color: var(--ap-muted); font-size: .85rem; }
.ga-vf-warte { margin: auto; padding: 40px; color: var(--ap-muted); font-size: .92rem; }
.ga-vf-fuss { justify-content: flex-start; }
.ga-vf-luecke { flex: 1 1 auto; }
.ga-vf-fuss [hidden] { display: none; }
@media (max-width: 700px) { .ga-vf-kasten { height: 92vh; height: 92dvh; } .ga-vf-fuss { flex-wrap: nowrap; } }
@media (max-width: 420px) { .ga-vf-fuss [data-vf-stift] .ga-vf-text, .ga-vf-fuss [data-vf-lokal] .ga-vf-text { display: none; } }

/* Ab 5.32.0: Fußzeile (core/includes/fusszeile.php) – Version, Verein, Impressum, Datenschutz, Hersteller.
   Am Seitenende, nicht am Bildschirm klebend. Farbe erbt vom Hintergrund (hell/dunkel, Einstellungen und App). */
.ga-fuss {
    display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 10px;
    margin: 28px auto 0; padding: 14px 16px 18px; max-width: 1100px; clear: both;
    font-size: .78rem; line-height: 1.5; text-align: center; color: inherit; opacity: .72;
}
body .ga-fuss a { color: inherit; text-decoration: none; white-space: nowrap; } /* body: gegen Link-Farben der Seiten (z. B. .pf-scope a) */
body .ga-fuss a:hover, body .ga-fuss a:focus-visible { text-decoration: underline; opacity: 1; }
.ga-fuss i { font-size: .9em; }
.ga-fuss-trenner { opacity: .6; }
.ga-fuss-extern { margin-top: 18px; padding-bottom: 0; }
/* Anmelde-Seiten: farbiger Hintergrund je Farbschema - eigene, ruhige Fläche, damit es immer lesbar ist */
.an-body .ga-fuss { width: fit-content; max-width: min(760px, 100%); padding: 8px 16px; border-radius: 12px; opacity: 1;
    background: color-mix(in srgb, var(--ap-card-bg) 88%, transparent); color: var(--ap-muted); box-shadow: 0 2px 10px rgba(0, 0, 0, .12); }
@media print { .ga-fuss { display: none; } }

/* Ab 5.42.0: Rechtsklick-Menü auf allen Seiten (js/ga_kontext.js, PHP ga_menue_attr()) */
.ga-kontext {
    position: fixed; z-index: 3000; min-width: 220px; max-width: min(320px, calc(100vw - 16px)); max-height: calc(100vh - 16px); overflow: auto; padding: 6px;
    background: var(--ap-card-bg); color: var(--ap-text); border: 1px solid var(--ap-border); border-radius: 12px; box-shadow: var(--ap-shadow-hoch);
    font-family: inherit; text-align: left;
}
.ga-kontext button {
    display: flex; align-items: center; gap: 10px; width: 100%; margin: 0; padding: 8px 10px; border: 0; border-radius: 8px;
    background: transparent; color: var(--ap-text); font: inherit; font-size: .9rem; font-weight: 500; line-height: 1.3; text-align: left; cursor: pointer; box-shadow: none;
}
.ga-kontext button > span { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ga-kontext button i { width: 18px; text-align: center; color: var(--ap-muted); }
.ga-kontext button:hover, .ga-kontext button:focus-visible { background: var(--ap-soft); color: var(--ap-text); outline: none; }
.ga-kontext button:focus-visible { box-shadow: 0 0 0 2px var(--ap-accent) inset; }
.ga-kontext .ga-kontext-gefahr, .ga-kontext .ga-kontext-gefahr i { color: var(--ap-err); }
.ga-kontext .ga-kontext-pfeil { margin-left: auto; font-size: .75rem; }
.ga-kontext .ga-kontext-kopf { font-weight: 650; border-bottom: 1px solid var(--ap-border); border-radius: 8px 8px 0 0; margin-bottom: 4px; }
.ga-kontext-linie { height: 1px; margin: 5px 6px; background: var(--ap-border); }
[data-ga-menue], [data-ga-menue-knoepfe] { -webkit-touch-callout: none; }

/* Ab 5.81.0: „Lokal bearbeiten“ (js/lokal_bearbeiten.js) – Ablage, Vorschau-Fenster, Event-Editor */
.ap-dialog.ga-lokal { width: min(540px, calc(100vw - 32px)); padding: 20px 22px; }   /* ab 5.84.0: Inhalt ohne <form> – Abstand am Fenster selbst */
.ga-lokal h3 { display: flex; align-items: flex-start; gap: 8px; }
.ga-lokal h3 i { margin-top: 3px; color: var(--ap-accent-text); }
.ga-lokal .ap-dialog-knoepfe [data-l="fertig"] { margin-right: auto; }
.ga-lokal h3 span { overflow-wrap: anywhere; }
.ga-lokal-text { margin: 0 0 8px; color: var(--ap-muted); line-height: 1.5; }
.ga-lokal-stand { margin: 0 0 10px; font-weight: 600; }
.ga-lokal-stand:empty { display: none; }
.ga-lokal-ok { color: var(--ap-ok); }
.ga-lokal-fehler { color: var(--ap-err); }
.ga-lokal .ap-dialog-knoepfe { flex-wrap: wrap; }
.ga-lokal [hidden] { display: none; }
.ga-lokal-in-arbeit { border-color: var(--ap-accent) !important; color: var(--ap-accent-text) !important; }