/* ---------------------------------------------------------------------- *
 * GigAdmin – Anmeldeseiten (neues Design ab 4.114.0)
 * Login, Passwort vergessen / zurücksetzen / ändern, Gastzugang.
 * Grundlage: css/app/basis.css (Tokens, hell + body.darkmode).
 * Dunkel wird hier automatisch, wenn das Gerät dunkel eingestellt ist
 * (ga_anmelde_body() in core/functions.php) – nach der Anmeldung gilt
 * wieder die eigene Einstellung. Ersetzt css/login.css.
 * ---------------------------------------------------------------------- */

html { height: 100%; }
/* Hintergrund in den Vereinsfarben (Akzent aus dem Farbschema): ein tiefer
 * Verlauf plus zwei weiche, langsam wandernde Lichtflecken. Hell ist er
 * kräftiger, dunkel gedämpft - die Karte selbst folgt hell/dunkel.
 *
 * Der Verlauf liegt auf <html> (fixiert), nicht nur auf <body>: Sonst zeigt
 * das Nachfedern beim Scrollen oben/unten einen Streifen ohne Verlauf.
 * Ohne :has() (sehr alte Browser) trägt <body> ihn wie bisher. */
html:has(> body.an-body), body.an-body {
    --an-tief:  color-mix(in srgb, var(--ap-accent) 42%, #0b0b12);
    --an-mitte: color-mix(in srgb, var(--ap-accent) 78%, #0b0b12);
    --an-licht: color-mix(in srgb, var(--ap-accent) 70%, #ffffff);
}
html:has(> body.an-body.darkmode), body.an-body.darkmode {
    --an-tief:  color-mix(in srgb, var(--ap-accent) 14%, #08080c);
    --an-mitte: color-mix(in srgb, var(--ap-accent) 34%, #0b0b10);
    --an-licht: color-mix(in srgb, var(--ap-accent) 60%, #000000);
}
html:has(> body.an-body) {
    background: var(--an-tief) linear-gradient(140deg, var(--an-tief) 0%, var(--an-mitte) 55%, var(--an-tief) 100%) fixed;
    overscroll-behavior-y: none;
}
body.an-body {
    min-height: 100%; margin: 0; padding: 0;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-size: 16px; line-height: 1.5;
    color: var(--ap-text);
    background: var(--an-tief) linear-gradient(140deg, var(--an-tief) 0%, var(--an-mitte) 55%, var(--an-tief) 100%) fixed;
    overflow-x: hidden;
}
@supports selector(:has(a)) {
    body.an-body { background: transparent; }
}
body.an-body::before, body.an-body::after {
    content: ""; position: fixed; z-index: 0; pointer-events: none; border-radius: 50%;
    filter: blur(80px); opacity: .55; will-change: transform;
}
body.an-body::before {
    width: 60vmax; height: 60vmax; left: -18vmax; top: -22vmax;
    background: radial-gradient(circle, var(--an-licht) 0%, transparent 65%);
    animation: an-wandern 26s ease-in-out infinite alternate;
}
body.an-body::after {
    width: 55vmax; height: 55vmax; right: -20vmax; bottom: -24vmax;
    background: radial-gradient(circle, color-mix(in srgb, var(--an-licht) 70%, #ffb46b) 0%, transparent 65%);
    opacity: .35;
    animation: an-wandern 32s ease-in-out infinite alternate-reverse;
}
body.an-body.darkmode::before { opacity: .45; }
body.an-body.darkmode::after { opacity: .2; }
@keyframes an-wandern {
    from { transform: translate(0, 0) scale(1); }
    to   { transform: translate(12vmax, 8vmax) scale(1.12); }
}
@media (prefers-reduced-motion: reduce) {
    body.an-body::before, body.an-body::after { animation: none; }
}
body.an-body *, body.an-body *::before, body.an-body *::after { box-sizing: border-box; }

#bgCanvas { position: fixed; inset: 0; z-index: 0; pointer-events: none; }

/* Bühne: Karte mittig, auf kleinen Bildschirmen von oben */
.an-buehne {
    position: relative; z-index: 1; min-height: 100vh; min-height: 100dvh;
    display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 32px 16px;
}

/* ---------- Karte ---------- */
.login-container, .an-karte {
    position: relative; width: min(420px, 100%); padding: 34px 32px 22px; text-align: left;
    background: var(--ap-card-bg); color: var(--ap-text);
    border: 1px solid color-mix(in srgb, var(--ap-border) 60%, transparent); border-radius: 20px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, .35), 0 2px 10px rgba(0, 0, 0, .12);
}
body.darkmode .an-karte { box-shadow: 0 30px 80px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 255, 255, .04); }
.an-breit { width: min(520px, 100%); }
/* Ab 5.32.0: Impressum / Datenschutz (pages/rechtliches.php) – breiter, gut lesbar */
.an-recht { width: min(760px, 100%); }
.an-recht-text { line-height: 1.6; overflow-wrap: anywhere; }
.an-recht-text h2 { margin: 1.4em 0 .4em; font-size: 1.05rem; }
.an-recht-text p { margin: 0 0 .9em; }
.an-recht-text a, .an-recht-zurueck a { color: var(--ap-accent-text); }
.an-recht-leer { color: var(--ap-muted); text-align: center; }
.an-recht-zurueck { margin: 18px 0 0; font-size: .9rem; }

.an-marke { text-align: center; margin: 0 0 22px; }
.login-logo { display: block; max-width: 150px; max-height: 84px; margin: 0 auto 16px; object-fit: contain; }
.an-marke h1 { margin: 0; font-size: 1.45rem; font-weight: 700; letter-spacing: -.01em; color: var(--ap-text); }
.an-marke p { margin: 4px 0 0; font-size: .92rem; color: var(--ap-muted); }

/* ---------- Formular ---------- */
.an-karte form { margin: 0; }
.an-feld { display: block; margin: 0 0 14px; }
.an-feld > span:first-child { display: block; margin: 0 0 6px; font-size: .82rem; font-weight: 600; color: var(--ap-muted); }
.an-karte input[type="text"], .an-karte input[type="password"], .an-karte input[type="email"],
.an-karte input[type="tel"], .an-karte input[type="number"], .an-karte input:not([type]) {
    display: block; width: 100%; height: 46px; margin: 0 0 14px; padding: 0 14px;
    font: inherit; font-size: 16px; color: var(--ap-text);
    background: var(--ap-input-bg); border: 1px solid var(--ap-input-border); border-radius: 10px;
    transition: border-color .15s, box-shadow .15s;
}
.an-feld input { margin-bottom: 0 !important; }
.an-karte input::placeholder { color: var(--ap-muted); opacity: .8; }
.an-karte input:focus { outline: none; border-color: var(--ap-accent); box-shadow: 0 0 0 4px var(--ap-accent-10); }
.an-karte input[readonly] { opacity: .7; }
.an-karte input[type="file"] { width: 100%; font-size: .9rem; color: var(--ap-muted); }

/* Passwort mit Auge */
.an-pw { position: relative; display: block; margin: 0 0 14px; }
.an-pw input { margin: 0 !important; padding-right: 48px !important; }
.an-auge {
    position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 40px; height: 38px; margin: 0; padding: 0;
    display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 8px;
    background: transparent; color: var(--ap-muted); cursor: pointer; font-size: 1rem; box-shadow: none;
}
.an-auge:hover, .an-auge:focus-visible { background: var(--ap-soft); color: var(--ap-text); outline: none; transform: translateY(-50%); }
.an-feld .an-pw { margin: 0; }
.an-caps { display: flex; align-items: center; gap: 6px; margin: -8px 0 12px; font-size: .8rem; font-weight: 600; color: var(--ap-warn); }
.an-feld .an-caps { margin: 6px 0 0; }
.an-caps[hidden] { display: none; }

/* Knöpfe */
.an-karte button[type="submit"], .an-knopf, .mfa-continue-btn {
    position: relative; display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 48px;
    margin: 6px 0 0; padding: 0 16px; border: 0; border-radius: 10px; cursor: pointer;
    background: var(--ap-accent); color: var(--ap-on-accent) !important;
    font: inherit; font-size: 1rem; font-weight: 700; text-decoration: none !important;
    box-shadow: 0 6px 16px color-mix(in srgb, var(--ap-accent) 30%, transparent);
    transition: filter .15s, transform .15s, box-shadow .15s;
}
.an-karte button[type="submit"]:hover, .an-knopf:hover, .mfa-continue-btn:hover { filter: brightness(1.07); transform: translateY(-1px); }
.an-karte button[type="submit"]:active, .an-knopf:active { transform: none; }
.an-karte button:disabled { opacity: .55; cursor: not-allowed; transform: none; filter: none; }
.an-knopf-zweit {
    background: var(--ap-soft); color: var(--ap-text) !important; box-shadow: none; border: 1px solid var(--ap-border);
}
.an-laeuft { color: transparent !important; opacity: 1 !important; }
.an-laeuft::after {
    content: ""; position: absolute; width: 20px; height: 20px; border-radius: 50%;
    border: 2px solid color-mix(in srgb, var(--ap-on-accent) 35%, transparent); border-top-color: var(--ap-on-accent);
    animation: an-dreh .7s linear infinite;
}
@keyframes an-dreh { to { transform: rotate(360deg); } }

/* Angemeldet bleiben */
.login-merken { display: flex; align-items: flex-start; gap: 10px; margin: 2px 0 14px; cursor: pointer; font-size: .9rem; color: var(--ap-text); }
.login-merken input[type="checkbox"] { width: 18px; height: 18px; margin: 2px 0 0; flex: 0 0 auto; accent-color: var(--ap-accent); }
.login-merken-zusatz { color: var(--ap-muted); }

/* Meldungen */
.error-message, .success-message, .an-meldung {
    display: flex; gap: 10px; align-items: flex-start; margin: 0 0 16px; padding: 11px 14px; border-radius: 10px;
    font-size: .9rem; line-height: 1.45; text-align: left;
}
.error-message { background: var(--ap-err-bg); color: var(--ap-err); }
.success-message { background: var(--ap-ok-bg); color: var(--ap-ok); }
.error-message::before, .success-message::before {
    font-family: "Font Awesome 6 Free"; font-weight: 900; flex: 0 0 auto; margin-top: 1px;
}
.error-message::before { content: "\f071"; }
.success-message::before { content: "\f058"; }
body.darkmode .error-message, body.darkmode .success-message { color: var(--ap-text); }
body.darkmode .error-message::before { color: var(--ap-err); }
body.darkmode .success-message::before { color: var(--ap-ok); }

/* Hinweise (MFA, Gast) */
.mfa-hint, .gz-login-hint, .an-hinweis {
    display: block; margin: 0 0 16px; font-size: .9rem; line-height: 1.5; color: var(--ap-muted); text-align: left;
}
.mfa-hint[hidden] { display: none; }
.gz-login-hint-eng { margin-bottom: 4px; }
.mfa-hint i, .gz-login-hint i, .an-hinweis i { color: var(--ap-accent-text); margin-right: 4px; }
.mfa-hint strong, .gz-login-hint strong { color: var(--ap-text); }

/* MFA-Code */
.mfa-code-input {
    height: 58px !important; text-align: center; font-size: 1.6rem !important; font-weight: 700;
    letter-spacing: .5em; padding-left: calc(14px + .5em) !important; font-variant-numeric: tabular-nums;
}
.mfa-backup-input { letter-spacing: .15em; font-size: 1.15rem !important; padding-left: 14px !important; }
.mfa-qr-box { display: flex; flex-direction: column; align-items: center; gap: 10px; margin: 0 0 16px; padding: 16px; border-radius: 12px; background: var(--ap-soft); }
.mfa-qr-box #mfaQr { padding: 10px; background: #fff; border-radius: 10px; line-height: 0; }
.mfa-qr-box #mfaQr img, .mfa-qr-box #mfaQr canvas { display: block; }
.mfa-secret { font-size: .8rem; color: var(--ap-muted); text-align: center; word-break: break-all; }
.mfa-secret code { display: inline-block; margin-top: 4px; padding: 3px 8px; border-radius: 6px; background: var(--ap-card-bg); color: var(--ap-text); font-size: .85rem; letter-spacing: .05em; }
.mfa-backup-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin: 0 0 12px; }
.mfa-backup-list code {
    padding: 8px 6px; border-radius: 8px; background: var(--ap-soft); border: 1px solid var(--ap-border);
    text-align: center; font-size: .92rem; font-weight: 600; letter-spacing: .06em; color: var(--ap-text);
}
.mfa-copy-btn {
    display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 42px; margin: 0 0 10px;
    border: 1px solid var(--ap-border); border-radius: 10px; background: var(--ap-soft); color: var(--ap-text);
    font: inherit; font-size: .92rem; font-weight: 600; cursor: pointer;
}
.mfa-copy-btn:hover { background: var(--ap-soft-hover); }

/* Passkey */
.login-oder { display: flex; align-items: center; gap: 12px; margin: 18px 0 14px; color: var(--ap-muted); font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; }
.login-oder::before, .login-oder::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--ap-border); }
.login-passkey-btn {
    display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 46px; margin: 0; padding: 0 16px;
    border: 1px solid var(--ap-border); border-radius: 10px; background: var(--ap-card-bg); color: var(--ap-text);
    font: inherit; font-size: .95rem; font-weight: 600; cursor: pointer; transition: border-color .15s, background .15s;
}
.login-passkey-btn:hover:not(:disabled) { border-color: var(--ap-accent); background: var(--ap-accent-10); }
.login-passkey-btn svg { color: var(--ap-accent-text); }
.login-passkey-status { margin: 8px 0 0; font-size: .85rem; color: var(--ap-muted); text-align: center; min-height: 0; }
.login-passkey-status:empty { display: none; }
#pkForm { display: none; }

/* Ab 5.85.0: „Passkey zuerst“ (Gerät, auf dem sich schon ein Konto mit Passkey angemeldet hat): großer Passkey-Knopf oben,
   Benutzername/Passwort bleiben darunter. Sonst bieten iPhone/Mac das gespeicherte Passwort an und der Passkey geht unter. */
.login-passkey-hinweis, .login-oder-pw { display: none; }
.an-pk-zuerst #pkBox > .login-oder:not(.login-oder-pw) { display: none; }
.an-pk-zuerst .login-oder-pw { display: flex; }
.an-pk-zuerst .login-passkey-btn { height: 52px; border-color: var(--ap-accent); background: var(--ap-accent); color: var(--ap-on-accent); font-size: 1rem; }
.an-pk-zuerst .login-passkey-btn:hover:not(:disabled) { background: var(--ap-accent); filter: brightness(1.08); }
.an-pk-zuerst .login-passkey-btn svg { color: currentColor; }
.an-pk-zuerst .login-passkey-hinweis { display: block; margin: 10px 0 0; font-size: .85rem; color: var(--ap-muted); text-align: center; }
.an-pk-zuerst .login-pw-form button[type="submit"] { background: var(--ap-soft); color: var(--ap-text) !important; border: 1px solid var(--ap-border); box-shadow: none; }

/* Passwort-Regeln */
.password-requirements { margin: -2px 0 14px; padding: 12px 14px; border-radius: 10px; background: var(--ap-soft); }
.password-requirements ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.password-requirements li { display: flex; align-items: flex-start; gap: 8px; font-size: .84rem; line-height: 1.4; }
.password-requirements li::before { font-family: "Font Awesome 6 Free"; font-weight: 900; width: 14px; flex: 0 0 auto; text-align: center; }
.password-requirements .invalid { color: var(--ap-muted); }
.password-requirements .invalid::before { content: "\f111"; font-weight: 400; font-size: .7rem; margin-top: 3px; }
.password-requirements .valid { color: var(--ap-ok); }
.password-requirements .valid::before { content: "\f00c"; }

/* Links unter dem Formular */
.an-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; margin: 18px 0 0; }
.forgot-password, .an-link {
    display: inline-flex; align-items: center; gap: 6px; font-size: .88rem; font-weight: 600;
    color: var(--ap-accent-text) !important; text-decoration: none;
}
.forgot-password:hover, .an-link:hover, .forgot-password:focus-visible { text-decoration: underline; outline: none; }
.an-karte > .forgot-password { display: flex; justify-content: center; margin-top: 16px; }

/* Gastzugang */
.gz-login-events { list-style: none; margin: 8px 0 14px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.gz-login-events li { padding: 10px 12px; border: 1px solid var(--ap-border); border-radius: 10px; font-weight: 600; }
.gz-login-events .d { display: block; font-size: .82rem; font-weight: 400; color: var(--ap-muted); }
.gz-login-resend { display: block; margin: 12px auto 0 !important; background: none !important; border: 0 !important; box-shadow: none !important;
    color: var(--ap-accent-text) !important; font: inherit !important; font-size: .88rem !important; font-weight: 600 !important; text-decoration: none !important; height: auto !important; width: auto !important; cursor: pointer; }
.gz-login-resend:hover { text-decoration: underline !important; }

/* Fuß */
.an-fuss { margin: 22px -32px 0; padding: 14px 20px 0; border-top: 1px solid var(--ap-border); text-align: center; font-size: .78rem; color: var(--ap-muted); }

@media (max-width: 520px) {
    .an-buehne { justify-content: flex-start; padding: 20px 12px; }
    .login-container, .an-karte { padding: 26px 20px 18px; border-radius: 16px; }
    .an-fuss { margin-left: -20px; margin-right: -20px; }
    .login-logo { max-height: 64px; margin-bottom: 12px; }
    .an-marke h1 { font-size: 1.3rem; }
}
@media (prefers-reduced-motion: reduce) {
    .an-karte button[type="submit"], .an-knopf { transition: none; }
}
.an-feld em { font-style: normal; font-weight: 400; opacity: .85; }
body.darkmode .forgot-password, body.darkmode .an-link, body.darkmode .gz-login-resend { color: color-mix(in srgb, var(--ap-accent) 70%, #ffffff) !important; }
/* Gastzugang: bereits hinterlegtes Profilbild (ab 4.118.0) */
.an-karte input[type="tel"] { display: block; width: 100%; height: 46px; margin: 0 0 14px; padding: 0 14px; font: inherit; font-size: 16px; color: var(--ap-text); background: var(--ap-input-bg); border: 1px solid var(--ap-input-border); border-radius: 10px; }
.an-karte input[type="tel"]:focus { outline: none; border-color: var(--ap-accent); box-shadow: 0 0 0 4px var(--ap-accent-10); }

/* Profilbild bei der Gast-Registrierung (ab 4.118.1) */
.gz-bild {
    position: relative; display: flex; align-items: center; gap: 18px; margin: 0 0 18px; padding: 16px;
    border: 2px dashed var(--ap-border); border-radius: 16px;
    background: linear-gradient(135deg, var(--ap-accent-10), transparent 70%), var(--ap-soft);
    transition: border-color .15s, background-color .15s, box-shadow .15s;
}
.gz-bild:hover, .gz-bild-drueber { border-color: var(--ap-accent); }
.gz-bild-drueber { box-shadow: 0 0 0 4px var(--ap-accent-10); background-color: var(--ap-accent-10); }
.gz-bild-neu, .gz-bild-hat { border-style: solid; }
.gz-bild-neu { border-color: var(--ap-ok); }
.gz-bild-fehler { border-color: var(--ap-err); }
.gz-bild-fehler .gz-bild-text small { color: var(--ap-err); font-weight: 600; }
.an-karte input.gz-bild-datei { position: absolute; left: 0; top: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.gz-bild:has(.gz-bild-datei:focus-visible) { box-shadow: 0 0 0 4px var(--ap-accent-10); border-color: var(--ap-accent); }

.gz-bild-kreis { position: relative; flex: 0 0 auto; width: 92px; height: 92px; margin: 0; cursor: pointer; }
.gz-bild-vorschau {
    display: flex; align-items: center; justify-content: center; width: 92px; height: 92px; border-radius: 50%; overflow: hidden;
    background: var(--ap-accent); color: var(--ap-on-accent);
    border: 4px solid var(--ap-card-bg); box-shadow: 0 8px 22px rgba(0, 0, 0, .18);
    transition: transform .2s;
}
.gz-bild-kreis:hover .gz-bild-vorschau { transform: scale(1.04); }
.gz-bild-vorschau img { width: 100%; height: 100%; object-fit: cover; animation: gz-bild-rein .25s ease-out; }
.gz-bild-initialen { font-size: 2rem; font-weight: 750; letter-spacing: .02em; line-height: 1; }
.gz-bild-initialen i { font-size: 2.1rem; opacity: .9; }
.gz-bild-kamera {
    position: absolute; right: -2px; bottom: -2px; width: 32px; height: 32px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; font-size: .85rem;
    background: var(--ap-card-bg); color: var(--ap-accent-text); border: 2px solid var(--ap-accent);
    box-shadow: 0 3px 8px rgba(0, 0, 0, .18);
}
.gz-bild-neu .gz-bild-kamera { color: var(--ap-ok); border-color: var(--ap-ok); }

.gz-bild-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.gz-bild-text strong { font-size: .98rem; color: var(--ap-text); }
.gz-bild-text small { font-size: .8rem; line-height: 1.4; color: var(--ap-muted); overflow-wrap: anywhere; }
.gz-bild-knoepfe { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.gz-bild-knopf, .an-karte button.gz-bild-weg {
    display: inline-flex !important; align-items: center; gap: 6px; width: auto !important; height: 32px !important; margin: 0 !important; padding: 0 12px !important;
    border-radius: 999px !important; font: inherit; font-size: .8rem !important; font-weight: 600; cursor: pointer; box-shadow: none !important;
}
.gz-bild-knopf { background: var(--ap-accent); color: var(--ap-on-accent); }
.gz-bild-knopf:hover { filter: brightness(1.08); }
.an-karte button.gz-bild-weg { background: transparent !important; color: var(--ap-muted) !important; border: 1px solid var(--ap-border) !important; }
.an-karte button.gz-bild-weg:hover { color: var(--ap-err) !important; border-color: var(--ap-err) !important; }
.an-karte button.gz-bild-weg[hidden] { display: none !important; }
@keyframes gz-bild-rein { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .gz-bild-vorschau img { animation: none; } .gz-bild-vorschau { transition: none; } }
@media (max-width: 420px) {
    .gz-bild { flex-direction: column; text-align: center; gap: 12px; }
    .gz-bild-knoepfe { justify-content: center; }
}

/* Passkey nach der Anmeldung vorschlagen (ab 5.2.0, pages/auth/passkey_angebot.php) */
.pk-angebot[data-pruefen] #pkFrage { visibility: hidden; }   /* kurz, bis klar ist, ob das Gerät Passkeys kann */
.pk-angebot [hidden] { display: none !important; }   /* Meldungen haben sonst display:flex */
.pk-angebot .an-marke { margin-bottom: 18px; }
.pk-angebot-punkte { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.pk-angebot-punkte li { display: flex; gap: 12px; align-items: flex-start; font-size: .92rem; color: var(--ap-muted); line-height: 1.45; }
.pk-angebot-punkte li i { flex: 0 0 18px; margin-top: 3px; text-align: center; color: var(--ap-accent-text); }
.pk-angebot-punkte strong { color: var(--ap-text); }
.pk-angebot-form { margin-top: 8px !important; }
.pk-angebot-form .an-links { margin-top: 12px; }
/* Als Link aussehen - nicht wie die vollen Absende-Knöpfe der Anmeldekarte */
.an-karte button.pk-angebot-nie[type="submit"] {
    display: inline-flex; width: auto; height: auto; margin: 0; padding: 0; border: 0; border-radius: 0;
    background: none; box-shadow: none; color: var(--ap-accent-text) !important;
    font: inherit; font-size: .88rem; font-weight: 600; cursor: pointer;
}
.an-karte button.pk-angebot-nie[type="submit"]:hover, .an-karte button.pk-angebot-nie[type="submit"]:focus-visible { text-decoration: underline; filter: none; transform: none; outline: none; }
.pk-angebot-klein { margin: 14px 0 0; font-size: .8rem; color: var(--ap-muted); text-align: center; line-height: 1.45; }
.pk-angebot-klein strong { color: var(--ap-text); font-weight: 600; }
#pkFertig .success-message { margin-bottom: 4px; }
#pkFertig form { margin-top: 16px; }
.an-karte button.an-knopf-zweit[type="submit"] {   /* zweitrangiger Absende-Knopf ("Später") */
    background: var(--ap-soft); color: var(--ap-text) !important; box-shadow: none; border: 1px solid var(--ap-border);
}

/* ---------- Demo-Modus (ab 5.110.0): Zugänge zum Anklicken ---------- */
.an-demo {
    margin: 0 0 18px; padding: 14px; border-radius: 12px;
    background: color-mix(in srgb, var(--ap-accent) 7%, transparent);
    border: 1px solid color-mix(in srgb, var(--ap-accent) 28%, transparent);
}
.an-demo-titel { margin: 0 0 10px; font-size: .9rem; font-weight: 700; color: var(--ap-text); }
.an-demo-titel i { color: var(--ap-accent-text); margin-right: 4px; }
.an-demo-liste { display: grid; gap: 8px; }
.an-karte button.an-demo-zugang {
    display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%;
    margin: 0; padding: 10px 12px; text-align: left; cursor: pointer; font: inherit;
    color: var(--ap-text); background: var(--ap-input-bg); border: 1px solid var(--ap-input-border); border-radius: 10px;
    transition: border-color .15s, transform .15s;
}
.an-karte button.an-demo-zugang:hover, .an-karte button.an-demo-zugang:focus-visible {
    border-color: var(--ap-accent); outline: none; transform: translateY(-1px);
}
.an-karte button.an-demo-zugang:active { transform: none; }
.an-demo-zugang strong { font-size: .95rem; }
.an-demo-zugang span { font-size: .82rem; color: var(--ap-muted); }
.an-demo-klein { margin: 10px 0 0; font-size: .8rem; color: var(--ap-muted); }
@media (prefers-reduced-motion: reduce) { .an-karte button.an-demo-zugang { transition: none; } }