/* ═══════════════════════════════════════════════════════════════ KiJu Praxis Noel — Inline CMS Styles Nur aktiv wenn .admin-edit-mode auf gesetzt ist ═══════════════════════════════════════════════════════════════ */ /* ── Lock-Button im Footer ── */ .admin-lock { display: inline-flex; align-items: center; justify-content: center; background: none; border: none; cursor: pointer; color: rgba(255, 255, 255, 0.25); padding: 0.25rem; margin-left: 0.5rem; transition: color 0.2s ease; vertical-align: middle; } .admin-lock:hover { color: rgba(255, 255, 255, 0.6); } .admin-lock svg { width: 14px; height: 14px; } /* ── Passwort-Modal ── */ .admin-modal-overlay { position: fixed; inset: 0; z-index: 10000; background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.3s ease; padding: 1rem; } .admin-modal-overlay.visible { opacity: 1; } .admin-modal { background: #fff; border-radius: 16px; padding: 2rem; max-width: 380px; width: 100%; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3); transform: translateY(10px); transition: transform 0.3s ease; } .admin-modal-overlay.visible .admin-modal { transform: translateY(0); } .admin-modal h3 { font-family: var(--font-heading, system-ui); font-size: 1.25rem; font-weight: 700; color: #2d3436; margin-bottom: 0.5rem; } .admin-modal > p { font-size: 0.9rem; color: #636e72; margin-bottom: 1.25rem; line-height: 1.5; } .admin-modal input[type="password"] { width: 100%; padding: 0.75rem 1rem; font-size: 16px; border: 2px solid #e5e7eb; border-radius: 10px; outline: none; transition: border-color 0.2s ease; margin-bottom: 1rem; font-family: inherit; } .admin-modal input[type="password"]:focus { border-color: var(--color-secondary, #172983); box-shadow: 0 0 0 3px rgba(23, 41, 131, 0.1); } .admin-modal-buttons { display: flex; gap: 0.75rem; } .admin-btn { flex: 1; padding: 0.7rem 1rem; border: none; border-radius: 10px; font-size: 0.9375rem; font-weight: 600; cursor: pointer; font-family: inherit; transition: all 0.2s ease; } .admin-btn-cancel { background: #f3f4f6; color: #636e72; } .admin-btn-cancel:hover { background: #e5e7eb; } .admin-btn-login { background: var(--color-secondary, #172983); color: #fff; } .admin-btn-login:hover { background: var(--color-secondary-dark, #0f1c5c); } .admin-error { color: #dc2626; font-size: 0.85rem; margin-top: 0.75rem; text-align: center; } /* ── Edit-Mode Toolbar ── */ .admin-toolbar { position: fixed; top: 0; left: 0; right: 0; z-index: 9999; background: linear-gradient(135deg, #1e293b 0%, #334155 100%); color: #fff; padding: 0 1.5rem; height: 48px; display: flex; align-items: center; justify-content: space-between; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); font-family: var(--font-body, system-ui); transform: translateY(-100%); transition: transform 0.3s ease; } .admin-toolbar.visible { transform: translateY(0); } .admin-toolbar-left { display: flex; align-items: center; gap: 0.75rem; font-size: 0.875rem; font-weight: 500; } .admin-toolbar-dot { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; animation: admin-pulse 2s ease infinite; } @keyframes admin-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } } .admin-toolbar-right { display: flex; align-items: center; gap: 0.5rem; } .admin-toolbar-btn { padding: 0.4rem 1rem; border: none; border-radius: 8px; font-size: 0.8125rem; font-weight: 600; cursor: pointer; font-family: inherit; transition: all 0.15s ease; } .admin-toolbar-cancel { background: rgba(255, 255, 255, 0.15); color: #fff; } .admin-toolbar-cancel:hover { background: rgba(255, 255, 255, 0.25); } .admin-toolbar-save { background: #22c55e; color: #fff; } .admin-toolbar-save:hover { background: #16a34a; } .admin-toolbar-save:disabled { opacity: 0.5; cursor: not-allowed; } /* ── Editierbare Elemente ── */ .admin-edit-mode [contenteditable="true"] { outline: 2px dashed rgba(23, 41, 131, 0.3); outline-offset: 2px; border-radius: 4px; transition: outline-color 0.2s ease, background-color 0.2s ease; cursor: text; min-height: 1em; } .admin-edit-mode [contenteditable="true"]:hover { outline-color: rgba(23, 41, 131, 0.5); background-color: rgba(23, 41, 131, 0.03); } .admin-edit-mode [contenteditable="true"]:focus { outline: 2px solid var(--color-secondary, #172983); outline-offset: 2px; background-color: rgba(23, 41, 131, 0.05); } /* ── Bild-Overlay ── */ .admin-image-container { position: relative; } .admin-image-overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.5); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.5rem; opacity: 0; transition: opacity 0.2s ease; cursor: pointer; border-radius: inherit; z-index: 5; } .admin-image-container:hover .admin-image-overlay { opacity: 1; } .admin-image-overlay svg { width: 32px; height: 32px; color: #fff; } .admin-image-overlay span { color: #fff; font-size: 0.8125rem; font-weight: 600; } /* ── E-Mail-Konfiguration ── */ .admin-email-config { background: linear-gradient(135deg, #fef5e7 0%, #fff 100%); border: 2px dashed var(--color-primary, #f29400); border-radius: 12px; padding: 1.25rem; margin-bottom: 1.5rem; display: none; } .admin-edit-mode .admin-email-config { display: block; } .admin-email-config label { display: block; font-size: 0.8125rem; font-weight: 600; color: var(--color-primary-dark, #c97a00); margin-bottom: 0.5rem; text-transform: uppercase; letter-spacing: 0.03em; } .admin-email-config input { width: 100%; padding: 0.6rem 0.75rem; font-size: 0.9375rem; border: 1px solid #e5e7eb; border-radius: 8px; font-family: inherit; outline: none; } .admin-email-config input:focus { border-color: var(--color-primary, #f29400); box-shadow: 0 0 0 3px rgba(242, 148, 0, 0.15); } .admin-email-hint { font-size: 0.75rem; color: #9ca3af; margin-top: 0.375rem; } /* ── Toast-Benachrichtigungen ── */ .admin-toast { position: fixed; bottom: 2rem; left: 50%; transform: translateX(-50%) translateY(20px); z-index: 10001; padding: 0.875rem 1.5rem; border-radius: 12px; font-size: 0.9375rem; font-weight: 500; font-family: var(--font-body, system-ui); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15); opacity: 0; transition: all 0.3s ease; white-space: nowrap; } .admin-toast.visible { opacity: 1; transform: translateX(-50%) translateY(0); } .admin-toast.success { background: #059669; color: #fff; } .admin-toast.error { background: #dc2626; color: #fff; } .admin-toast.info { background: #1e293b; color: #fff; } /* ── Anpassung: Nav nach unten schieben im Edit-Mode ── */ .admin-edit-mode .nav { top: 48px; } .admin-edit-mode .mobile-menu { top: 48px; } .admin-edit-mode .hero { padding-top: calc(var(--nav-height) + 48px + 2rem); } /* ── Anpassung: Formular-Status-Karten nicht editierbar ── */ .admin-edit-mode .form-status-card [contenteditable] { outline: none !important; } /* ── Speichern-Animation ── */ .admin-saving { pointer-events: none; } .admin-saving::after { content: ""; position: fixed; inset: 0; z-index: 9998; background: rgba(255, 255, 255, 0.4); } /* ── Responsive ── */ @media (max-width: 640px) { .admin-toolbar { padding: 0 0.75rem; font-size: 0.8125rem; } .admin-toolbar-left span:last-child { display: none; } .admin-toolbar-btn { padding: 0.35rem 0.75rem; font-size: 0.75rem; } }