/* ═══════════════════════════════════════════════════════════════
   pp-utils.css — Utility-Klassen (CSP-konform, kein inline style)
   PurePower V1.0 Alpha
   
   Ersetzt ALLE style='...' Attribute im HTML.
   Content-Security-Policy: style-src 'self' — keine Ausnahmen.
   ═══════════════════════════════════════════════════════════════ */

/* ─── Display ──────────────────────────────────────── */
.pp-d-none { display: none; }
.pp-d-block { display: block; }
.pp-d-inline { display: inline; }
.pp-d-inline-block { display: inline-block; }
.pp-d-flex { display: flex; }
.pp-d-inline-flex { display: inline-flex; }
.pp-d-grid { display: grid; }
.pp-overflow-hidden { overflow: hidden; }
.pp-overflow-x-auto { overflow-x: auto; }
.pp-cursor-pointer { cursor: pointer; }
.pp-break-all { word-break: break-all; }

/* ─── Flex ─────────────────────────────────────────── */
.pp-flex-between { display: flex; justify-content: space-between; align-items: center; }
.pp-flex-center { display: flex; align-items: center; }
.pp-flex-center-center { display: flex; align-items: center; justify-content: center; }
.pp-flex-1 { flex: 1; }
.pp-flex-gap-xs { gap: 0.25rem; }
.pp-flex-gap-sm { gap: 0.5rem; }
.pp-flex-gap-md { gap: 0.75rem; }
.pp-flex-gap-lg { gap: 1rem; }
.pp-flex-wrap { flex-wrap: wrap; }
.pp-nowrap { white-space: nowrap; }
.pp-ml-auto { margin-left: auto; }

/* ─── Grid ─────────────────────────────────────────── */
.pp-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.pp-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1rem; }
.pp-grid-4 { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 1rem; }
.pp-grid-2-1 { display: grid; grid-template-columns: 2fr 1fr; gap: 1rem; }
.pp-grid-1-2 { display: grid; grid-template-columns: 1fr 2fr; gap: 1rem; }
.pp-grid-sidebar { display: grid; grid-template-columns: 1fr 320px; gap: 1.5rem; }
@media (max-width: 768px) {
  .pp-grid-2, .pp-grid-3, .pp-grid-4, .pp-grid-2-1, .pp-grid-1-2, .pp-grid-sidebar { grid-template-columns: 1fr; }
}

/* ─── Spacing: Margin ──────────────────────────────── */
.pp-m-0 { margin: 0; }
.pp-mt-0 { margin-top: 0; }
.pp-mt-xs { margin-top: 0.25rem; }
.pp-mt-sm { margin-top: 0.5rem; }
.pp-mt-md { margin-top: 1rem; }
.pp-mt-lg { margin-top: 1.5rem; }
.pp-mt-xl { margin-top: 2rem; }
.pp-mb-0 { margin-bottom: 0; }
.pp-mb-xs { margin-bottom: 0.25rem; }
.pp-mb-sm { margin-bottom: 0.5rem; }
.pp-mb-md { margin-bottom: 1rem; }
.pp-mb-lg { margin-bottom: 1.5rem; }
.pp-mx-sm { margin: 0 0.5rem; }
.pp-mr-xs { margin-right: 0.25rem; }
.pp-mr-sm { margin-right: 0.5rem; }

/* ─── Spacing: Padding ─────────────────────────────── */
.pp-p-0 { padding: 0; }
.pp-p-xs { padding: 0.35rem; }
.pp-p-sm { padding: 0.5rem; }
.pp-p-md { padding: 0.75rem; }
.pp-p-lg { padding: 1rem; }
.pp-p-xl { padding: 1.25rem; }
.pp-p-xxl { padding: 1.5rem; }
.pp-pt-lg { padding-top: 2rem; }
.pp-pb-lg { padding-bottom: 2rem; }
.pp-px-md { padding: 0 0.75rem; }
.pp-py-sm { padding: 0.5rem 0; }

/* ─── Sizing ──────────────────────────────────────── */
.pp-w-full { width: 100%; }
.pp-w-auto { width: auto; }
.pp-w-50 { width: 50px; }
.pp-w-60 { width: 60px; }
.pp-w-100 { width: 100px; }
.pp-w-120 { width: 120px; }
.pp-w-200 { width: 200px; }
.pp-max-w-300 { max-width: 300px; }
.pp-max-w-400 { max-width: 400px; }
.pp-max-w-500 { max-width: 500px; }
.pp-max-w-600 { max-width: 600px; }
.pp-max-w-800 { max-width: 800px; margin-left: auto; margin-right: auto; }
.pp-min-w-260 { min-width: 260px; }
.pp-min-h-400 { min-height: 400px; }
.pp-min-h-screen { min-height: 100vh; }
.pp-thumb-sm { width: 40px; height: 40px; object-fit: cover; border-radius: 4px; }

/* ─── Typography ──────────────────────────────────── */
.pp-text-center { text-align: center; }
.pp-text-right { text-align: right; }
.pp-text-muted { color: #6c757d; }
.pp-text-light { color: #999; }
.pp-text-secondary { color: #666; }
.pp-text-danger { color: #dc3545; }
.pp-text-success { color: #28a745; }
.pp-text-primary { color: var(--pp-primary, #4a6cf7); }
.pp-text-info { color: #17a2b8; }
.pp-text-white { color: #fff; }
.pp-text-dark { color: #333; }
.pp-text-inherit { color: inherit; }
.pp-text-no-decoration { text-decoration: none; }
.pp-text-3xl { font-size: 2rem; }
.pp-text-xl { font-size: 1.25rem; }
.pp-text-lg { font-size: 1.1rem; }
.pp-text-sm { font-size: 0.85rem; }
.pp-text-xs { font-size: 0.8rem; }
.pp-text-xxs { font-size: 0.75rem; }
.pp-text-xxxs { font-size: 0.7rem; }
.pp-fw-normal { font-weight: 400; }
.pp-fw-bold { font-weight: 600; }
.pp-fw-700 { font-weight: 700; }
.pp-font-mono { font-family: monospace; }
.pp-lh-relaxed { line-height: 1.6; }
.pp-pre-wrap { white-space: pre-wrap; }
.pp-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ─── Borders & Radius ─────────────────────────────── */
.pp-border { border: 1px solid #dee2e6; }
.pp-border-0 { border: none; }
.pp-border-top { border-top: 1px solid #dee2e6; }
.pp-border-bottom { border-bottom: 1px solid #dee2e6; }
.pp-rounded { border-radius: 4px; }
.pp-rounded-md { border-radius: 6px; }
.pp-rounded-lg { border-radius: 8px; }
.pp-rounded-pill { border-radius: 12px; }
.pp-rounded-top { border-radius: 6px 6px 0 0; }
.pp-rounded-bottom { border-radius: 0 0 4px 4px; }

/* ─── Backgrounds ──────────────────────────────────── */
.pp-bg-white { background: #fff; }
.pp-bg-light { background: #f8f9fa; }
.pp-bg-muted { background: #e9ecef; }
.pp-bg-primary { background: var(--pp-primary, #4a6cf7); }
.pp-bg-success { background: #28a745; }
.pp-bg-danger { background: #dc3545; }
.pp-bg-warning { background: #ffc107; }
.pp-bg-info { background: #17a2b8; }
.pp-bg-blue-50 { background: var(--pp-blue-50, #eff6ff); }
.pp-bg-info-light { background: #e7f3ff; }
.pp-bg-warn-light { background: #fff3cd; }
.pp-bg-error-light { background: #f8d7da; }

/* ─── Cursor & Interaction ─────────────────────────── */
.pp-cursor-pointer { cursor: pointer; }
.pp-cursor-grab { cursor: grab; }
.pp-pointer-none { pointer-events: none; }
.pp-user-select-none { user-select: none; }
.pp-overflow-x-auto { overflow-x: auto; }
.pp-relative { position: relative; }
.pp-sticky { position: sticky; top: 0; z-index: 10; }

/* ─── Admin Compact Inputs ─────────────────────────── */
.pp-admin-input {
  width: 100%; padding: 0.4rem; border: 1px solid #ced4da;
  border-radius: 4px; font-size: 0.85rem;
}
.pp-admin-input-sm {
  padding: 0.35rem; border: 1px solid #ced4da;
  border-radius: 4px; font-size: 0.85rem;
}
.pp-admin-input-xs {
  padding: 0.3rem; border: 1px solid #ced4da;
  border-radius: 4px; font-size: 0.85rem;
}
.pp-admin-input-flex {
  flex: 1; padding: 0.4rem; border: 1px solid #ced4da; border-radius: 4px;
}
.pp-admin-textarea {
  width: 100%; font-family: monospace; font-size: 0.85rem;
  padding: 0.75rem; border: 1px solid #ced4da; border-radius: 4px;
}

/* ─── Admin Cards & Panels ─────────────────────────── */
.pp-admin-card {
  background: #fff; border: 1px solid #dee2e6;
  border-radius: 8px; padding: 1.25rem;
}
.pp-admin-card-hover { transition: box-shadow 0.2s; cursor: pointer; }
.pp-admin-card-hover:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
.pp-admin-panel {
  background: #f8f9fa; border-radius: 6px; padding: 1rem;
}
.pp-admin-toolbar {
  display: flex; gap: 0.5rem; flex-wrap: wrap;
  padding: 0.75rem; background: #f8f9fa; border-radius: 6px;
}
.pp-admin-toolbar-bottom {
  margin-top: 1rem; display: flex; gap: 0.5rem; flex-wrap: wrap;
  padding: 1rem; background: #e9ecef; border-radius: 6px;
}
.pp-admin-code {
  background: #f8f9fa; border: 1px solid #dee2e6; border-radius: 4px;
  padding: 0.75rem; font-size: 0.8rem; overflow-x: auto;
}
.pp-admin-preview {
  background: #f8f9fa; border: 1px solid #dee2e6; border-radius: 8px;
  padding: 1.25rem; white-space: pre-wrap; font-size: 0.9rem; line-height: 1.6;
}
.pp-admin-header-primary {
  background: var(--pp-primary, #4a6cf7); color: #fff;
  padding: 1rem; border-radius: 4px 4px 0 0;
}
.pp-admin-empty {
  text-align: center; padding: 2rem; color: #999;
}
.pp-admin-empty-lg {
  text-align: center; padding: 3rem 2rem; color: #999; font-size: 1.1rem;
}

/* ─── Admin Tab Navigation ─────────────────────────── */
.pp-admin-tab {
  padding: 0.5rem 1rem; background: #e9ecef;
  border: 1px solid #dee2e6; border-bottom: none;
  border-radius: 6px 6px 0 0; text-decoration: none;
  color: #6c757d; display: inline-block;
}
.pp-admin-tab-active {
  padding: 0.5rem 1rem; background: #fff;
  border: 1px solid #dee2e6; border-bottom: 1px solid #fff;
  border-radius: 6px 6px 0 0; text-decoration: none;
  color: #333; font-weight: 600; display: inline-block;
}
.pp-admin-tab-content {
  border: 1px solid #dee2e6; padding: 1.5rem;
  border-radius: 0 0 4px 4px;
}
.pp-admin-tab-content-styled {
  border: 1px solid #dee2e6; border-radius: 0 6px 6px 6px;
  background: #fff; padding: 1.25rem;
}

/* ─── Admin Badges ─────────────────────────────────── */
.pp-badge { padding: 1px 6px; border-radius: 8px; font-size: 0.7rem; display: inline-block; }
.pp-badge-lg { padding: 2px 8px; border-radius: 10px; font-size: 0.75rem; }
.pp-badge-xl { padding: 3px 10px; border-radius: 12px; font-size: 0.8rem; }
.pp-badge-blue { background: #4a6cf7; color: #fff; }
.pp-badge-green { background: #28a745; color: #fff; }
.pp-badge-red { background: #dc3545; color: #fff; }
.pp-badge-yellow { background: #ffc107; color: #333; }
.pp-badge-gray { background: #6c757d; color: #fff; }
.pp-badge-light { background: #e9ecef; color: #333; }
.pp-badge-cyan { background: #17a2b8; color: #fff; }
.pp-badge-info { background: #17a2b8; color: #fff; }
a.pp-badge { text-decoration: none; cursor: pointer; transition: opacity 0.15s; }
a.pp-badge:hover { opacity: 0.85; }
.pp-badge-abs { position: absolute; top: 0.5rem; right: 0.5rem; }

/* ─── Admin Delete Button (borderless) ─────────────── */
.pp-btn-del { color: #dc3545; border: none; background: none; cursor: pointer; }
.pp-btn-del:hover { color: #a71d2a; }
.pp-btn-success-fill { background: #28a745; color: #fff; border-color: #28a745; }
.pp-btn-info-fill { background: #17a2b8; color: #fff; border-color: #17a2b8; }

/* ─── Menu Item (Admin Menus) ──────────────────────── */
.pp-menu-item {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.6rem 0.75rem; background: #f8f9fa;
  border: 1px solid #dee2e6; border-radius: 4px;
  margin-bottom: 0.25rem; cursor: grab;
}
.pp-menu-item-indent-1 { margin-left: 2rem; }
.pp-menu-item-indent-2 { margin-left: 4rem; }
.pp-menu-item-indent-3 { margin-left: 6rem; }

/* ─── Centered Content Containers ──────────────────── */
.pp-container-sm { max-width: 500px; margin: 0 auto; }
.pp-container-md { max-width: 600px; margin: 0 auto; }
.pp-container-lg { max-width: 800px; margin: 0 auto; }

/* ─── Login Page ──────────────────────────────────── */
.pp-login-wrap {
  display: flex; align-items: center; justify-content: center;
  min-height: 100vh; background: var(--pp-bg-light, #f8f9fa);
  font-family: sans-serif;
}
.pp-login-card { width: 100%; max-width: 400px; padding: 1rem; }

/* ─── Warn/Info Banner ─────────────────────────────── */
.pp-banner-warning {
  background: var(--pp-warning, #f39c12); color: #fff;
  text-align: center; padding: 0.5rem; font-size: 0.85rem; font-weight: 600;
}
.pp-banner-info {
  background: #17a2b8; color: #fff;
  text-align: center; padding: 0.3rem; font-size: 0.75rem;
}

/* ─── Dropdown Menu (Navbar) ───────────────────────── */
.pp-dropdown-menu {
  display: none; position: absolute; right: 0; top: 100%;
  background: #fff; border: 1px solid #dee2e6; border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15); min-width: 180px;
  padding: 0.25rem 0; z-index: 1000;
}
.pp-dropdown-menu a,
.pp-navbar-nav .pp-dropdown-menu a {
  display: block; padding: 0.4rem 1rem; color: #333 !important;
  text-decoration: none; background: none;
}
.pp-dropdown-menu a:hover,
.pp-navbar-nav .pp-dropdown-menu a:hover {
  background: #f8f9fa !important; color: #111 !important;
}
.pp-dropdown-menu.pp-d-block { display: block; }
.pp-dropdown-sep { border-top: 1px solid #eee; margin: 0.2rem 0; }

/* ─── Tag Chips Component (Blog) ───────────────────── */
.tc-wrap {
  display: flex; flex-wrap: wrap; gap: 0.375rem; align-items: center;
  padding: 0.5rem; border: 1px solid var(--pp-border, #dee2e6);
  border-radius: var(--pp-radius, 0.375rem); background: #fff;
  min-height: 2.5rem; cursor: text;
}
.tc-chip {
  display: inline-flex; align-items: center; gap: 0.25rem;
  padding: 0.125rem 0.5rem; background: var(--pp-primary, #0d6efd);
  color: #fff; border-radius: 1rem; font-size: 0.8rem;
}
.tc-chip button { background: none; border: none; color: #fff; cursor: pointer; font-size: 0.9rem; padding: 0; line-height: 1; }
.tc-input { border: none; outline: none; flex: 1; min-width: 120px; font-size: 0.875rem; padding: 0.125rem; }

/* ─── Survey Progress Bars ─────────────────────────── */
.pp-survey-bar { background: #e9ecef; border-radius: 4px; height: 24px; position: relative; }
.pp-survey-bar-fill { background: var(--pp-primary, #4a6cf7); border-radius: 4px; height: 100%; }
.pp-survey-bar-label { position: absolute; right: 8px; top: 2px; font-size: 0.8rem; }
.pp-survey-bar-name { width: 150px; }

/* ─── Multi-Page Form (Survey) ─────────────────────── */
.pp-form-progress {
  background: #e9ecef; border-radius: 999px; height: 6px;
  margin-bottom: 1.5rem; overflow: hidden;
}
.pp-form-progress-bar {
  background: var(--pp-primary, #4a6cf7); height: 100%;
  border-radius: 999px; transition: width 0.3s ease;
}

.pp-form-steps {
  display: flex; gap: 0.25rem; margin-bottom: 1.5rem;
  border-bottom: 2px solid #e9ecef; padding-bottom: 0;
}
.pp-form-steps-tree { flex-direction: column; border-bottom: none; border-right: 2px solid #e9ecef; padding-right: 1rem; margin-right: 1rem; min-width: 200px; }
.pp-form-step {
  padding: 0.5rem 1rem; border: none; background: none; cursor: pointer;
  font-size: 0.85rem; color: #adb5bd; border-bottom: 2px solid transparent;
  margin-bottom: -2px; display: flex; align-items: center; gap: 0.5rem;
  transition: color 0.2s, border-color 0.2s;
}
.pp-form-step:hover { color: #495057; }
.pp-step-active { color: var(--pp-primary, #4a6cf7); border-bottom-color: var(--pp-primary, #4a6cf7); font-weight: 600; }
.pp-step-done { color: #198754; }
.pp-step-done .pp-step-num { background: #198754; color: #fff; }
.pp-step-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 50%; font-size: 0.75rem;
  background: #e9ecef; color: #495057; font-weight: 600;
}
.pp-step-active .pp-step-num { background: var(--pp-primary, #4a6cf7); color: #fff; }

.pp-form-page { animation: ppFadeIn 0.25s ease; }
.pp-form-page-header {
  display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem;
  padding-bottom: 0.75rem; border-bottom: 1px solid #e9ecef;
}
.pp-step-badge {
  background: var(--pp-primary, #4a6cf7); color: #fff;
  padding: 0.2rem 0.6rem; border-radius: 999px; font-size: 0.75rem; font-weight: 600;
}
.pp-form-page-nav {
  display: flex; justify-content: space-between; margin-top: 1.5rem;
  padding-top: 1rem; border-top: 1px solid #e9ecef;
}
@keyframes ppFadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Tree navigation layout */
.pp-form-steps-tree .pp-form-step {
  border-bottom: none; border-left: 2px solid transparent;
  margin-bottom: 0; margin-left: -2px; padding: 0.4rem 0.75rem;
}
.pp-form-steps-tree .pp-step-active { border-left-color: var(--pp-primary, #4a6cf7); }
.pp-form[data-pp-nav="tree"] { display: flex; }

/* ─── Form Field Tree (Admin Felder-Tab) ───────────── */
.pp-fd-tree-item {
  padding: 0.4rem 0.6rem; border: 1px solid #e9ecef; border-radius: 4px;
  margin-bottom: 0.35rem; display: flex; align-items: center; gap: 0.5rem;
  font-size: 0.85rem; background: #fff;
}
.pp-fd-tree-indent-1 { margin-left: 1.5rem; border-left: 3px solid #4a6cf7; }
.pp-fd-tree-indent-2 { margin-left: 3rem; border-left: 3px solid #6f42c1; }
.pp-fd-tree-indent-3 { margin-left: 4.5rem; border-left: 3px solid #e67e22; }
.pp-fd-tree-group { background: #f8f9ff; border-color: #c5cee8; }
.pp-fd-tree-divider { background: #f5f5f5; border-style: dashed; color: #adb5bd; }
.pp-fd-tree-desc { background: #fffbf0; border-color: #f0e6cc; }
.pp-fd-tree-icon { font-size: 1rem; width: 1.2rem; text-align: center; flex-shrink: 0; }
.pp-fd-tree-type { color: #999; font-size: 0.7rem; }
.pp-fd-tree-name { color: #999; font-size: 0.8rem; margin-left: auto; }
.pp-fd-tree-col {
  font-size: 0.55rem; font-weight: 700; color: #fff;
  padding: 0 4px; border-radius: 3px; line-height: 1.4; vertical-align: middle;
}
.pp-fd-tree-col-1 { background: #4a6cf7; }
.pp-fd-tree-col-2 { background: #6f42c1; }
.pp-fd-tree-col-3 { background: #e67e22; }
.pp-fd-tree-col-4 { background: #dc3545; }
.pp-fd-tree-col-auto { background: #adb5bd; font-style: italic; }
.pp-fd-tree-page { padding: 0.5rem 0 0.25rem; font-size: 0.9rem; border-bottom: 1px solid #dee2e6; margin-bottom: 0.5rem; }

/* ─── LLM Chat Button ──────────────────────────────── */
.pp-llm-chat-btn {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
  color: #fff !important; border: none !important;
  transition: opacity 0.15s, transform 0.15s;
}
.pp-llm-chat-btn:hover { opacity: 0.9; transform: translateY(-1px); }

/* ─── LLM Action Buttons (Blog/Pages) ─────────────── */
.pp-llm-btn {
  font-size: 0.7rem !important; padding: 0.15rem 0.5rem !important;
  vertical-align: middle; white-space: nowrap; opacity: 0.7;
  transition: opacity 0.15s;
}
.pp-llm-btn:hover { opacity: 1; }
.pp-llm-btn.pp-loading {
  pointer-events: none; opacity: 0.5;
}
.pp-llm-btn.pp-loading::after {
  content: ''; display: inline-block; width: 10px; height: 10px;
  border: 2px solid #ccc; border-top-color: var(--pp-primary, #4a6cf7);
  border-radius: 50%; animation: ppSpin 0.6s linear infinite;
  margin-left: 0.3rem; vertical-align: middle;
}
.pp-btn-xs { font-size: 0.65rem !important; padding: 0.1rem 0.4rem !important; }
.pp-llm-highlight { animation: ppLLMHighlight 1.5s ease-out; }
@keyframes ppLLMHighlight {
  0% { box-shadow: 0 0 0 3px rgba(74,108,247,0.5); }
  100% { box-shadow: 0 0 0 0 transparent; }
}

/* ─── Spam Guard (Honeypot) ─────────────────────────── */
.pp-honeypot { position: absolute; left: -9999px; top: -9999px; }

/* ─── Form Success Confirmation ────────────────────── */
.pp-form-success {
  text-align: center; padding: 2.5rem 1.5rem; max-width: 500px; margin: 0 auto;
}
.pp-form-success-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 64px; height: 64px; border-radius: 50%;
  background: #d1fae5; color: #059669; font-size: 2rem; font-weight: 700;
  margin-bottom: 1rem;
  animation: ppSuccessPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.pp-form-success-title { font-size: 1.25rem; margin: 0 0 0.5rem; color: #111; }
.pp-form-success-msg { font-size: 1rem; color: #374151; margin: 0 0 1rem; line-height: 1.5; }
.pp-form-success-detail { font-size: 0.9rem; color: #6b7280; margin: 0 0 1.5rem; }
.pp-form-success-info { border-top: 1px solid #e5e7eb; padding-top: 1rem; }
@keyframes ppSuccessPop { 0% { transform: scale(0); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }

/* ─── Form Grid: Spalten-Zuordnung (col Property) ──── */
.pp-form-col-1 { grid-column: 1; }
.pp-form-col-2 { grid-column: 2; }
.pp-form-col-3 { grid-column: 3; }
.pp-form-col-4 { grid-column: 4; }

/* Colspan (Spalten uebergreifen) */
.pp-form-colspan-2 { grid-column: span 2; }
.pp-form-colspan-3 { grid-column: span 3; }
.pp-form-colspan-4 { grid-column: span 4; }
.pp-form-colspan-all { grid-column: 1 / -1; }

/* Rowspan (Zeilen uebergreifen) */
.pp-form-rowspan-2 { grid-row: span 2; }
.pp-form-rowspan-3 { grid-row: span 3; }

/* Colspan + Col kombiniert */
.pp-form-col-1.pp-form-colspan-2 { grid-column: 1 / span 2; }
.pp-form-col-1.pp-form-colspan-3 { grid-column: 1 / span 3; }
.pp-form-col-2.pp-form-colspan-2 { grid-column: 2 / span 2; }
.pp-form-col-2.pp-form-colspan-3 { grid-column: 2 / span 3; }

/* ─── Form Elements: Description, Divider, Group ──── */
.pp-form-description { color: #495057; font-size: 0.9rem; line-height: 1.5; margin-bottom: 1rem; }
.pp-form-divider { border: none; border-top: 1px solid #dee2e6; margin: 1.5rem 0; }
.pp-form-group-box {
  border: 1px solid #dee2e6; border-radius: 6px; padding: 1rem;
  margin-bottom: 1rem; background: #fafbfc;
}
.pp-form-group-noborder { border: none; background: transparent; padding: 0; }
.pp-form-group-title { font-weight: 600; font-size: 0.9rem; margin-bottom: 0.75rem; color: #333; }
.pp-form-grid { display: grid; gap: 1rem; }
.pp-form-grid-1 { grid-template-columns: 1fr; }
.pp-form-grid-2 { grid-template-columns: 1fr 1fr; }
.pp-form-grid-3 { grid-template-columns: 1fr 1fr 1fr; }
.pp-form-grid-4 { grid-template-columns: 1fr 1fr 1fr 1fr; }
@media (max-width: 768px) { .pp-form-grid-2, .pp-form-grid-3, .pp-form-grid-4 { grid-template-columns: 1fr; } }

/* Conditional visibility (default hidden, shown by form-conditions.js) */
.pp-form-conditional { transition: opacity 0.2s ease; }
.pp-form-conditional.pp-d-block { animation: ppFadeIn 0.25s ease; }

/* Designer: toolbar separator + condition indicator */
.pp-fd-toolbar-sep { color: #dee2e6; margin: 0 0.15rem; }
.pp-fd-condition { background: #f8f9fa; border: 1px solid #e9ecef; border-radius: 4px; padding: 0.5rem; margin-top: 0.25rem; }

/* ─── Form Rendering (Frontend) ────────────────────── */
.pp-form { max-width: 640px; }
.pp-form .pp-form-group { margin-bottom: 1rem; }
.pp-form .pp-form-error { color: var(--pp-danger, #dc3545); font-size: 0.85rem; margin-top: 0.25rem; }
.pp-form .pp-form-help { color: #999; font-size: 0.85rem; margin-top: 0.25rem; }

/* ─── Form Utilities ───────────────────────────────── */
.pp-form-inline-input {
  width: 100%; padding: 0.4rem; border: 1px solid #ced4da;
  border-radius: 4px; font-size: 0.85rem;
}
.pp-form-mono-textarea {
  font-family: monospace; font-size: 0.85rem;
}
.pp-form-checks-inline { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; }
.pp-form-checks-inline .pp-form-check { margin-bottom: 0; }

/* ─── Live Validation Feedback ─────────────────────── */
.pp-form-valid {
  border-color: #198754 !important;
}
.pp-form-valid:focus {
  box-shadow: 0 0 0 3px rgba(25, 135, 84, 0.15) !important;
}
.pp-form-live-error {
  display: none; font-size: 0.75rem; color: var(--pp-danger, #dc3545);
  margin-top: 0.2rem; line-height: 1.3;
}
.pp-form-live-error.pp-d-block { display: block; }

/* Transition fuer sanftes Feedback */
.pp-form-input, .pp-form-textarea {
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* ─── Tab Navigation ───────────────────────────────── */
.pp-tabs { display: flex; gap: 0; border-bottom: 2px solid #dee2e6; margin-bottom: 1rem; }
.pp-tab {
  padding: 0.5rem 1.25rem; border: none; background: none; cursor: pointer;
  font-size: 0.9rem; color: #6c757d; border-bottom: 2px solid transparent;
  margin-bottom: -2px;
}
.pp-tab:hover { color: #495057; }
.pp-tab-active { font-weight: 600; color: var(--pp-primary, #4a6cf7); border-bottom-color: var(--pp-primary, #4a6cf7); }

/* ─── Stats Cards (Dashboard) ──────────────────────── */
.pp-stat-icon { font-size: 3rem; color: #999; }
.pp-stat-value { font-size: 1.5rem; font-weight: 600; }

/* ─── Badge Pills ──────────────────────────────────── */
.pp-pill { padding: 1px 6px; border-radius: 8px; font-size: 0.7rem; }
.pp-pill-purple { background: #6f42c1; color: #fff; }
.pp-pill-gray { background: #6c757d; color: #fff; }
.pp-pill-blue { background: #0d6efd; color: #fff; }
.pp-pill-green { background: #198754; color: #fff; }
.pp-pill-red { background: #dc3545; color: #fff; }
.pp-pill-orange { background: #fd7e14; color: #fff; }

/* ─── Progress Bar ─────────────────────────────────── */
.pp-progress { background: #e9ecef; border-radius: 4px; height: 24px; position: relative; }
.pp-progress-bar { background: var(--pp-primary, #4a6cf7); border-radius: 4px; height: 100%; }
.pp-progress-label { position: absolute; right: 8px; top: 2px; font-size: 0.8rem; }

/* ─── Fullscreen Mode ──────────────────────────────── */
.pp-fullscreen {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  z-index: 9999; background: #fff; padding: 1rem; overflow-y: auto;
}
.pp-fullscreen .pp-tabs { position: sticky; top: 0; background: #fff; z-index: 1; }

/* ─── Error Pages ───────────────────────────────────── */
.pp-error-page { padding: 2rem 0; }
.pp-error-content { text-align: center; padding: 3rem 0; }
.pp-error-code { font-size: 3rem; color: #999; }
.pp-error-detail { color: #666; }

/* ─── Code/Mono Display ────────────────────────────── */
.pp-code-block {
  padding: 0.35rem; border: 1px solid #ced4da;
  border-radius: 4px; font-size: 0.85rem; font-family: monospace;
  background: #f8f9fa;
}

/* ─── Auto-fit Grids ───────────────────────────────── */
.pp-grid-auto-200 { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; }
.pp-grid-auto-220 { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; }
.pp-grid-auto-250 { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1rem; }
.pp-grid-auto-280 { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; }
.pp-grid-label { display: grid; grid-template-columns: 120px 1fr; gap: 0.5rem; }
.pp-grid-sidebar-sm { display: grid; grid-template-columns: 1fr 300px; gap: 1rem; }
.pp-grid-form-3 { display: grid; grid-template-columns: 1fr 1fr auto; gap: 0.5rem; align-items: end; }
.pp-grid-form-4 { display: grid; grid-template-columns: 1fr 1fr auto auto; gap: 0.5rem; align-items: end; }
.pp-grid-3-sm { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0.5rem; }

/* ─── Flex extras ──────────────────────────────────── */
.pp-flex-2 { flex: 2; }
.pp-min-w-0 { min-width: 0; }
.pp-min-w-150 { min-width: 150px; }
.pp-min-w-180 { min-width: 180px; }

/* ─── Frontend Navigation ──────────────────────────── */
.pp-nav-list { list-style: none; display: flex; gap: 1rem; margin: 0; padding: 0; flex-wrap: wrap; }
.pp-nav-link-light { color: rgba(255,255,255,0.7); text-decoration: none; }
.pp-nav-link-light:hover { color: #fff; }
.pp-list-none { list-style: none; }
.pp-pl-md { padding-left: 1.2rem; }
.pp-mb-xl { margin-bottom: 2rem; }

/* ─── Blog Images ──────────────────────────────────── */
.pp-blog-card-img { width: 100%; height: 200px; object-fit: cover; border-radius: var(--pp-radius, 0.375rem); margin-bottom: 0.75rem; }
.pp-blog-hero-img { width: 100%; max-height: 400px; object-fit: cover; border-radius: var(--pp-radius, 0.375rem); margin-bottom: 1.5rem; }
.pp-blog-related-img { width: 100%; height: 100px; object-fit: cover; border-radius: 4px; margin-bottom: 0.5rem; }

/* ─── Theme Color Swatches ─────────────────────────── */
.pp-theme-card { border-radius: 8px; padding: 1rem; position: relative; }
.pp-theme-swatch { width: 32px; height: 32px; border-radius: 50%; display: inline-block; }

/* ─── Workflow State Badge ─────────────────────────── */
.pp-wf-badge { display: inline-block; padding: 4px 12px; border-radius: 12px; margin: 3px; }
.pp-wf-state-badge { display: inline-block; padding: 2px 8px; border-radius: 12px; font-size: 0.8rem; }

/* ─── Dynamic Styles (set by JS via data-pp-*) ─────── */
/* data-pp-color, data-pp-bg, data-pp-border,
   data-pp-indent, data-pp-size, data-pp-width, data-pp-gap */

/* ─── Admin Dashboard Stats Cards ──────────────────── */
.pp-stat-card { text-align: center; }
.pp-stat-number { font-size: 2rem; font-weight: 700; }
.pp-stat-number-primary { font-size: 2rem; font-weight: 700; color: var(--pp-primary); }
.pp-stat-number-purple { font-size: 2rem; font-weight: 700; color: #7c3aed; }
.pp-stat-number-teal { font-size: 2rem; font-weight: 700; color: #0891b2; }
.pp-stat-number-orange { font-size: 2rem; font-weight: 700; color: #c2410c; }
.pp-stat-label { color: #666; font-size: 0.875rem; }

/* ─── Admin Page Headers ──────────────────────────── */
.pp-page-header {
  display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem;
}
.pp-page-header-actions { display: flex; gap: 0.5rem; }
.pp-page-count { color: #999; font-weight: 400; font-size: 0.9rem; }

/* ─── Admin Filter Bar ─────────────────────────────── */
.pp-filter-bar {
  display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; margin-bottom: 1rem;
}
.pp-filter-bar .pp-form-input { width: auto; }
.pp-filter-bar input[type="text"] { width: 200px; }

/* ─── Admin Table ──────────────────────────────────── */
.pp-table-card .pp-card-body { padding: 0; }
.pp-table-card .pp-table { margin: 0; }
.pp-table-empty { text-align: center; padding: 2rem; color: #999; }
.pp-table-w50 { width: 50px; }

/* ─── Admin Media Grid ─────────────────────────────── */
.pp-media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 1rem; }
.pp-media-card { display: block; text-decoration: none; color: inherit; transition: box-shadow 0.15s ease; }
.pp-media-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.12); }
.pp-media-thumb { width: 100%; height: 140px; object-fit: cover; display: block; }
.pp-media-icon-placeholder {
  display: flex; align-items: center; justify-content: center;
  height: 140px; background: var(--pp-gray-100, #f5f5f5); font-size: 3rem; text-decoration: none;
}
.pp-media-meta { color: #666; font-size: 0.875rem; }
.pp-media-filename { font-size: 0.8rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ─── Admin Settings Layout ────────────────────────── */
.pp-settings-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; }
.pp-settings-item { padding: 0.5rem 0; display: flex; align-items: center; gap: 0.75rem; }
.pp-settings-item-row { padding: 0.5rem 0.75rem; display: flex; justify-content: space-between; align-items: center; }
.pp-settings-code { background: var(--pp-gray-100, #f5f5f5); padding: 0.75rem; border-radius: 0.25rem; margin-bottom: 1rem; font-size: 0.85rem; }
.pp-settings-header-bg { background: var(--pp-gray-100, #f5f5f5); font-weight: 600; padding: 0.5rem; }

/* ─── Admin Inline Forms ───────────────────────────── */
.pp-form-inline { display: inline; }
.pp-form-delete-inline { display: inline; margin-right: 0.5rem; }
.pp-form-error-list { margin: 0; padding-left: 1.2rem; }

/* ─── Admin Workflow/Card Helpers ──────────────────── */
.pp-card-flush { padding: 0; }
.pp-wf-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }

/* ─── Element: Card Layout Helpers ─────────────────── */
.pp-card-img-top { width: 100%; height: auto; display: block; border-radius: var(--pp-radius,0.375rem) var(--pp-radius,0.375rem) 0 0; }
.pp-card-img-cover { width: 100%; height: 140px; object-fit: cover; display: block; }
.pp-card-subtitle { margin: 0; color: var(--pp-gray-600, #6c757d); }
.pp-card-title-sm { margin: 0 0 0.5rem; font-size: 1.1rem; }
.pp-card-meta { font-size: 0.875rem; color: var(--pp-gray-500, #adb5bd); }

/* ─── Element: Breadcrumb ──────────────────────────── */
.pp-breadcrumb-list { display: flex; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; gap: 0.25rem; font-size: 0.875rem; }
.pp-breadcrumb-sep { color: var(--pp-gray-400, #adb5bd); margin: 0 0.125rem; }
.pp-breadcrumb-icon { display: inline-flex; align-items: center; min-width: 1.5rem; justify-content: center; color: var(--pp-gray-400, #adb5bd); font-size: 0.875rem; }
.pp-breadcrumb-link { color: var(--pp-primary, #2563eb); text-decoration: none; }
.pp-breadcrumb-current { color: var(--pp-text, #333); }

/* ─── Element: Pagination ──────────────────────────── */
.pp-pagination { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem; }
.pp-pagination-info { color: var(--pp-gray-600, #6c757d); }
.pp-pagination-danger { color: var(--pp-danger, #e74c3c); text-align: center; }
.pp-pagination-empty { text-align: center; padding: 1rem; }
.pp-pagination-success-sm { color: var(--pp-success); font-size: 0.8rem; }
.pp-pagination-muted-sm { color: var(--pp-gray-500); font-size: 0.85rem; margin-bottom: 1rem; }
.pp-page-link {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 2rem; height: 2rem; padding: 0 0.5rem; margin: 0 0.125rem;
  border: 1px solid var(--pp-border, #dee2e6); border-radius: 0.25rem;
  color: var(--pp-primary, #2563eb); text-decoration: none; font-size: 0.875rem;
  transition: background 0.1s;
}
.pp-page-link:hover { background: var(--pp-gray-100, #f8f9fa); }
.pp-page-active {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 2rem; height: 2rem; padding: 0 0.5rem; margin: 0 0.125rem;
  border: 1px solid var(--pp-primary, #2563eb); border-radius: 0.25rem;
  color: #fff; background: var(--pp-primary, #2563eb); font-size: 0.875rem; font-weight: 600;
}
.pp-page-disabled {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 2rem; height: 2rem; padding: 0 0.5rem; margin: 0 0.125rem;
  border: 1px solid var(--pp-border, #dee2e6); border-radius: 0.25rem;
  color: var(--pp-gray-400, #adb5bd); font-size: 0.875rem;
  pointer-events: none; background: var(--pp-gray-100, #f8f9fa);
}
.pp-page-ellipsis {
  display: inline-flex; align-items: center; min-width: 1.5rem;
  justify-content: center; color: var(--pp-gray-400, #adb5bd); font-size: 0.875rem;
}

/* ─── Element: Modal ───────────────────────────────── */
.pp-modal-hidden { display: none; margin-top: 0.5rem; }
.pp-modal-hidden-sm { display: none; margin-top: 0.25rem; }

/* ─── Element: Image / Gallery ─────────────────────── */
.pp-img-caption { color: #999; font-size: 0.75rem; margin-top: 0.25rem; }
.pp-gallery-grid { display: grid; gap: 0.5rem; }

/* ─── Chart Helpers ────────────────────────────────── */
.pp-chart-bar-text { position: absolute; top: 0; left: 50%; transform: translateX(-50%); font-size: 0.75rem; line-height: 1.2rem; }
.pp-chart-progress { background: #eee; border-radius: 4px; height: 1.2rem; min-width: 120px; position: relative; }

/* ─── Blog: Frontend Layout ────────────────────────── */
.pp-blog-empty-icon { margin-bottom: 0.5rem; opacity: 0.2; font-size: 2rem; }
.pp-blog-tag-list { margin-bottom: 1rem; display: flex; gap: 0.25rem; flex-wrap: wrap; }
.pp-blog-share { margin-top: 1.5rem; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.pp-blog-hint { margin-top: 1rem; color: #666; font-size: 0.85rem; }
.pp-blog-meta-row { color: #666; margin-bottom: 1.5rem; }
.pp-blog-icon-3xl { font-size: 3rem; margin-bottom: 1rem; }

/* ─── Menu Editor Item ─────────────────────────────── */
.pp-menu-item-row {
  display: flex; align-items: center; gap: 0.75rem; padding: 0.6rem 0.75rem;
  background: #f8f9fa; border: 1px solid #dee2e6; border-radius: 4px;
  margin-bottom: 0.25rem; cursor: grab;
}

/* ─── Miscellaneous Helpers ────────────────────────── */
.pp-flex-min-150 { flex: 1; min-width: 150px; }
.pp-min-w-200 { min-width: 200px; }
.pp-opacity-50 { opacity: 0.5; }

/* ═══════════════════════════════════════════════════════
   LHS_XUI Theme (pp-form-* Prefix) — Phase 50
   Klassen die LHS_XUI::l_Render() generiert und die
   nicht im bestehenden Design-System vorhanden sind
   ═══════════════════════════════════════════════════════ */

/* ─── Form Wrapper ─────────────────────────────────── */
.pp-form-form { margin: 0; }
.pp-form-wrapper { margin: 0 auto; }
.pp-form-target-box { }
.pp-form-target-compact { }
.pp-form-target-wide { }
.pp-form-target-full { max-width: 100% !important; }

/* ─── Sections (fieldset → Card-Look) ──────────────── */
.pp-form-section { border: 1px solid #dee2e6; border-radius: 8px; padding: 0; margin: 0 0 1.25rem; background: #fff; }
.pp-form-legend { font-weight: 600; font-size: 0.95rem; color: #333; padding: 0.75rem 1rem; margin: 0; background: #f8f9fa; border-bottom: 1px solid #dee2e6; border-radius: 8px 8px 0 0; width: 100%; float: none; }
.pp-form-section[data-xui-collapsible] .pp-form-legend { cursor: pointer; user-select: none; }
.pp-form-section[data-xui-collapsible] .pp-form-legend:hover { background: #e9ecef; }
.pp-form-section-content { padding: 1rem; }
.pp-form-collapse-icon { float: right; font-size: 0.8rem; color: #6c757d; }

/* ─── Field (Wrapper → wie pp-form-group) ──────────── */
.pp-form-field { margin-bottom: 1rem; }
.pp-form-field:last-child { margin-bottom: 0; }

/* ─── Columns (Grid) ──────────────────────────────── */
.pp-form-columns { display: grid; gap: 1rem; margin-bottom: 0.5rem; }
@media (max-width: 640px) { .pp-form-columns { grid-template-columns: 1fr !important; } }

/* ─── Buttons ──────────────────────────────────────── */
.pp-form-btn { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.5rem 1rem; font-size: 0.875rem; font-weight: 500; border: 1px solid #ced4da; border-radius: 6px; background: #fff; color: #333; cursor: pointer; text-decoration: none; transition: all 0.15s; }
.pp-form-btn:hover { background: #e9ecef; }
.pp-form-btn-primary { background: #4a6cf7; color: #fff; border-color: #4a6cf7; }
.pp-form-btn-primary:hover { background: #3b5de7; }
.pp-form-btn-danger { background: #dc3545; color: #fff; border-color: #dc3545; }
.pp-form-btn-danger:hover { background: #c82333; }
.pp-form-btn-warning { background: #f59e0b; color: #fff; border-color: #f59e0b; }
.pp-form-btn-warning:hover { background: #d97706; }
.pp-form-actions { display: flex; gap: 0.5rem; align-items: center; margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid #dee2e6; }

/* ─── Toggle Switch ────────────────────────────────── */
.pp-form-toggle { display: inline-flex; align-items: center; gap: 0.5rem; cursor: pointer; font-size: 0.875rem; }
.pp-form-toggle input[type="checkbox"] { position: relative; width: 2.5rem; height: 1.25rem; appearance: none; -webkit-appearance: none; background: #ced4da; border-radius: 1rem; cursor: pointer; transition: background 0.2s; }
.pp-form-toggle input[type="checkbox"]:checked { background: #4a6cf7; }
.pp-form-toggle input[type="checkbox"]::after { content: ''; position: absolute; width: 1rem; height: 1rem; background: #fff; border-radius: 50%; top: 0.125rem; left: 0.125rem; transition: transform 0.2s; box-shadow: 0 1px 3px rgba(0,0,0,0.2); }
.pp-form-toggle input[type="checkbox"]:checked::after { transform: translateX(1.25rem); }
.pp-form-toggle-slider { display: none; }

/* ─── Tabs ─────────────────────────────────────────── */
.pp-form-tabs { border: 1px solid #dee2e6; border-radius: 8px; overflow: hidden; margin-bottom: 1rem; }
.pp-form-tab-nav { display: flex; background: #f8f9fa; border-bottom: 1px solid #dee2e6; overflow-x: auto; }
.pp-form-tab-btn { padding: 0.6rem 1rem; border: none; background: none; font-size: 0.875rem; color: #6c757d; cursor: pointer; border-bottom: 2px solid transparent; transition: all 0.15s; white-space: nowrap; }
.pp-form-tab-btn:hover { color: #333; background: #e9ecef; }
.pp-form-tab-btn-active, .pp-form-tab-btn.active { color: #4a6cf7; border-bottom-color: #4a6cf7; font-weight: 500; background: #fff; }
.pp-form-tab-panel { padding: 1rem; display: none; }
.pp-form-tab-panel.active, .pp-form-tab-panel-active { display: block; }

/* ─── Separator ────────────────────────────────────── */
.pp-form-separator { border: 0; border-top: 1px solid #dee2e6; margin: 1rem 0; }

/* ─── Meta (Title+Icon aus XUI <meta>) ────────────── */
.pp-form-title { display: flex; align-items: center; gap: 0.5rem; font-size: 1.25rem; font-weight: 600; margin: 0 0 1rem; color: #333; }