/* ═══════════════════════════════════════════════════════════════ 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); } /* ═══════════════════════════════════════════════════════════════ FORMATIERUNGS-TOOLBAR (Rich-Text-Editor) ═══════════════════════════════════════════════════════════════ */ .admin-format-toolbar { position: fixed; top: 48px; left: 0; right: 0; z-index: 9998; background: #fff; border-bottom: 1px solid #e5e7eb; padding: 0.4rem 0.75rem; height: 44px; display: flex; align-items: center; gap: 0.25rem; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); font-family: var(--font-body, system-ui); overflow-x: auto; overflow-y: visible; scrollbar-width: thin; transform: translateY(-100%); transition: transform 0.3s ease; opacity: 0; } .admin-format-toolbar.visible { transform: translateY(0); opacity: 1; } /* Scrollbar Styling */ .admin-format-toolbar::-webkit-scrollbar { height: 4px; } .admin-format-toolbar::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 2px; } /* Trennlinie zwischen Button-Gruppen */ .admin-format-divider { width: 1px; height: 24px; background: #e5e7eb; margin: 0 0.375rem; flex-shrink: 0; } /* Format-Buttons */ .admin-format-btn { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: 1px solid transparent; background: transparent; border-radius: 6px; cursor: pointer; color: #475569; transition: all 0.15s ease; font-family: inherit; font-size: 0.875rem; font-weight: 600; flex-shrink: 0; position: relative; } .admin-format-btn:hover { background: #f1f5f9; color: #0f172a; } .admin-format-btn:active { transform: scale(0.95); } /* Active State (Cursor in fettem Text -> B leuchtet) */ .admin-format-btn.is-active { background: var(--color-secondary-light, #e8ecf5); color: var(--color-secondary, #172983); border-color: var(--color-secondary, #172983); } .admin-format-btn:disabled { opacity: 0.4; cursor: not-allowed; } .admin-format-btn svg { width: 18px; height: 18px; pointer-events: none; } /* Spezielle Text-Buttons (B I U S) */ .admin-format-btn.is-text { font-size: 0.9375rem; font-family: Georgia, serif; } .admin-format-btn.is-text.btn-bold { font-weight: 900; } .admin-format-btn.is-text.btn-italic { font-style: italic; } .admin-format-btn.is-text.btn-underline { text-decoration: underline; } .admin-format-btn.is-text.btn-strike { text-decoration: line-through; } /* Größen-Dropdown */ .admin-format-select { height: 32px; padding: 0 0.5rem; background: #f8fafc; border: 1px solid #e5e7eb; border-radius: 6px; color: #475569; font-family: inherit; font-size: 0.8125rem; font-weight: 500; cursor: pointer; flex-shrink: 0; min-width: 95px; } .admin-format-select:hover { background: #f1f5f9; } .admin-format-select:focus { outline: none; border-color: var(--color-secondary, #172983); } /* Farb-Button mit kleinem Farbstrich unten */ .admin-format-btn.btn-color { flex-direction: column; gap: 0; height: 32px; padding-bottom: 2px; } .admin-format-btn.btn-color svg { width: 16px; height: 16px; } .admin-format-btn.btn-color::after { content: ""; display: block; width: 18px; height: 3px; background: currentColor; border-radius: 1px; margin-top: 2px; } /* ── Farb-Popup ── */ .admin-color-popup { position: absolute; top: 100%; margin-top: 6px; background: #fff; border: 1px solid #e5e7eb; border-radius: 10px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12); padding: 0.75rem; min-width: 200px; z-index: 10002; font-family: inherit; } .admin-color-popup-title { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: #64748b; margin-bottom: 0.5rem; } .admin-color-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.375rem; margin-bottom: 0.75rem; } .admin-color-swatch { width: 28px; height: 28px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px #e5e7eb; cursor: pointer; transition: transform 0.15s ease; padding: 0; } .admin-color-swatch:hover { transform: scale(1.15); box-shadow: 0 0 0 2px #475569; } .admin-color-swatch.is-default { background: #1f2937; } .admin-color-custom-row { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; font-size: 0.8125rem; color: #475569; } .admin-color-custom-row input[type="color"] { width: 32px; height: 32px; border: none; border-radius: 6px; cursor: pointer; padding: 0; background: none; } .admin-color-remove { width: 100%; padding: 0.5rem; background: #f1f5f9; border: none; border-radius: 6px; color: #475569; cursor: pointer; font-size: 0.8125rem; font-family: inherit; font-weight: 500; } .admin-color-remove:hover { background: #e2e8f0; } /* ── Link-Dialog (Modal) ── */ .admin-link-modal { background: #fff; border-radius: 16px; padding: 1.5rem; max-width: 420px; 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-link-modal { transform: translateY(0); } .admin-link-modal h3 { font-family: var(--font-heading, system-ui); font-size: 1.125rem; font-weight: 700; color: #1e293b; margin-bottom: 1rem; } .admin-link-field { margin-bottom: 0.875rem; } .admin-link-field label { display: block; font-size: 0.8125rem; font-weight: 600; color: #475569; margin-bottom: 0.375rem; } .admin-link-field input { width: 100%; padding: 0.625rem 0.75rem; font-size: 0.9375rem; border: 2px solid #e5e7eb; border-radius: 8px; font-family: inherit; outline: none; transition: border-color 0.15s ease; } .admin-link-field input:focus { border-color: var(--color-secondary, #172983); box-shadow: 0 0 0 3px rgba(23, 41, 131, 0.1); } /* ── Schriftgrößen-Klassen (Inhalts-Texte) ── */ .fs-small { font-size: 0.875em; } .fs-normal { /* Standard */ } .fs-large { font-size: 1.25em; } .fs-xlarge { font-size: 1.5em; } /* ── Text-Ausrichtungen ── */ .admin-edit-mode [contenteditable="true"] { text-align: inherit; } /* ── Anpassung Top-Offsets (zweite Toolbar) ── */ .admin-edit-mode .nav { top: calc(48px + 44px); } .admin-edit-mode .mobile-menu { top: calc(48px + 44px); } .admin-edit-mode .hero { padding-top: calc(var(--nav-height) + 48px + 44px + 2rem); } /* ── 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; } .admin-format-toolbar { padding: 0.4rem 0.5rem; gap: 0.125rem; } .admin-format-btn { width: 30px; height: 30px; } .admin-format-divider { margin: 0 0.25rem; } .admin-format-select { min-width: 80px; font-size: 0.75rem; } }