/* * appConfirm — Bestätigungs-Modal als Ersatz für confirm() * * Vorteile gegenüber dem nativen confirm(): * - kann nicht über "Diese Seite blockieren" abgeschaltet werden * - touch-freundliche Buttons (mind. 44 px hoch) * - konsistente Optik im Branding (LIA-Blau / Danger-Rot) * - ESC = Cancel, Enter = Confirm, Tab = Focus-Trap * * Das Markup wird vom JS bei Bedarf einmalig in injiziert * (Lazy-Init), daher hier keine Abhängigkeit auf konkrete IDs/Markup. */ .acm[hidden] { display: none !important; } .acm { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; padding: 20px; /* Schriftart vom Layout erben — wirkt sonst lokal abweichend */ font-family: inherit; } .acm-bg { position: absolute; inset: 0; background: rgba(15, 23, 42, 0.55); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); } .acm-panel { position: relative; background: #ffffff; border: 1px solid var(--gray-200, #e9ecef); border-radius: 10px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25); max-width: 460px; width: 100%; padding: 22px 24px 18px; color: var(--gray-900, #212529); animation: acm-in 0.12s ease-out; } @keyframes acm-in { from { opacity: 0; transform: translateY(-8px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } } .acm-title { font-size: 18px; font-weight: 600; margin-bottom: 8px; color: var(--gray-900, #212529); } .acm-msg { font-size: 15px; line-height: 1.5; color: var(--gray-700, #495057); margin-bottom: 22px; /* Mehrzeilige Texte bewahren ihre Zeilenumbrüche (\n bleibt sichtbar) */ white-space: pre-line; } /* Input für appPrompt — sitzt zwischen msg und buttons. msg hat margin-bottom:22px; wenn Input sichtbar ist, schiebt der den Abstand auf das Input-Feld. */ .acm-input[hidden] { display: none !important; } .acm-input { display: block; width: 100%; margin-top: -8px; /* msg's bottom-margin teilweise zurücknehmen */ margin-bottom: 22px; padding: 9px 12px; font-size: 15px; font-family: inherit; border: 1px solid var(--gray-300, #dee2e6); border-radius: 6px; background: #ffffff; color: var(--gray-900, #212529); box-sizing: border-box; transition: border-color 0.12s, box-shadow 0.12s; } .acm-input:focus { outline: none; border-color: var(--primary-blue, #0066b3); box-shadow: 0 0 0 3px rgba(0, 102, 179, 0.15); } /* Cancel-Button bei alert ausblenden */ .acm-btn-cancel[hidden] { display: none !important; } .acm-btns { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; } .acm-btn { min-height: 44px; min-width: 110px; padding: 9px 22px; border-radius: 6px; border: 1px solid transparent; font-size: 15px; font-weight: 500; font-family: inherit; cursor: pointer; transition: background 0.12s, border-color 0.12s, transform 0.05s, box-shadow 0.12s; -webkit-tap-highlight-color: transparent; } .acm-btn:active { transform: scale(0.98); } .acm-btn:focus-visible { outline: 2px solid var(--primary-blue, #0066b3); outline-offset: 2px; } .acm-btn-cancel { background: #ffffff; color: var(--gray-700, #495057); border-color: var(--gray-300, #dee2e6); } .acm-btn-cancel:hover { background: var(--gray-50, #f8f9fa); border-color: var(--gray-400, #ced4da); } .acm-btn-ok { background: var(--primary-blue, #0066b3); color: #ffffff; border-color: var(--primary-blue, #0066b3); } .acm-btn-ok:hover { background: var(--primary-dark, #004680); border-color: var(--primary-dark, #004680); } .acm-btn-ok.acm-danger { background: var(--danger, #dc3545); border-color: var(--danger, #dc3545); } .acm-btn-ok.acm-danger:hover { background: #b02a37; border-color: #b02a37; } /* Schmale Screens: Buttons gestapelt, Bestätigen oben (primäre Aktion) */ @media (max-width: 480px) { .acm-panel { padding: 18px 18px 14px; } .acm-btns { flex-direction: column-reverse; } .acm-btn { width: 100%; min-width: 0; } }