/* ═══════════════════════════════════════════════════════════════
   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; flex-wrap: wrap; gap: 0.5rem; }   /* PP-1030: Kopfleisten brechen um */
.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: var(--pp-text-muted); }
.pp-text-light { color: var(--pp-text-muted); }
.pp-text-secondary { color: var(--pp-text-muted); }
.pp-text-danger { color: var(--pp-danger); }
.pp-text-success { color: var(--pp-ok); }
.pp-text-primary { color: var(--pp-primary); }
.pp-text-info { color: var(--pp-primary); }
.pp-text-white { color: #fff; }
.pp-text-dark { color: var(--pp-text); }
.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: var(--pp-font-mono); }
.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: var(--pp-border-w) solid var(--pp-border); }
.pp-border-0 { border: none; }
.pp-border-top { border-top: var(--pp-border-w) solid var(--pp-border); }
.pp-border-bottom { border-bottom: var(--pp-border-w) solid var(--pp-border); }
.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: var(--pp-surface); }
.pp-bg-light { background: var(--pp-surface-2); }
.pp-bg-muted { background: var(--pp-surface-2); }
.pp-bg-primary { background: var(--pp-primary); color: var(--pp-primary-contrast); }
.pp-bg-success { background: var(--pp-ok); color: var(--pp-primary-contrast); }
.pp-bg-danger { background: var(--pp-danger); color: var(--pp-primary-contrast); }
.pp-bg-warning { background: var(--pp-warn); color: var(--pp-primary-contrast); }
.pp-bg-info { background: var(--pp-primary); color: var(--pp-primary-contrast); }
.pp-bg-blue-50 { background: var(--pp-primary-soft); }
.pp-bg-info-light { background: var(--pp-primary-soft); }
.pp-bg-warn-light { background: var(--pp-warn-soft); }
.pp-bg-error-light { background: var(--pp-danger-soft); }

/* ─── 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 var(--pp-border);
  border-radius: 4px; font-size: 0.85rem;
}
.pp-admin-input-sm {
  padding: 0.35rem; border: 1px solid var(--pp-border);
  border-radius: 4px; font-size: 0.85rem;
}
.pp-admin-input-xs {
  padding: 0.3rem; border: 1px solid var(--pp-border);
  border-radius: 4px; font-size: 0.85rem;
}
.pp-admin-input-flex {
  flex: 1; padding: 0.4rem; border: 1px solid var(--pp-border); border-radius: 4px;
}
.pp-admin-textarea {
  width: 100%; font-family: monospace; font-size: 0.85rem;
  padding: 0.75rem; border: 1px solid var(--pp-border); border-radius: 4px;
}

/* ─── Admin Cards & Panels ─────────────────────────── */
.pp-admin-card {
  background: var(--pp-surface); border: 1px solid var(--pp-border);
  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: var(--pp-surface-2); border-radius: 6px; padding: 1rem;
}
.pp-admin-toolbar {
  display: flex; gap: 0.5rem; flex-wrap: wrap;
  padding: 0.75rem; background: var(--pp-surface-2); border-radius: 6px;
}
.pp-admin-toolbar-bottom {
  margin-top: 1rem; display: flex; gap: 0.5rem; flex-wrap: wrap;
  padding: 1rem; background: var(--pp-surface-2); border-radius: 6px;
}
.pp-admin-code {
  background: var(--pp-surface-2); border: 1px solid var(--pp-border); border-radius: 4px;
  padding: 0.75rem; font-size: 0.8rem; overflow-x: auto;
}
.pp-admin-preview {
  background: var(--pp-surface-2); border: 1px solid var(--pp-border); 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); color: var(--pp-primary-contrast);
  padding: 1rem; border-radius: 4px 4px 0 0;
}
.pp-admin-empty {
  text-align: center; padding: 2rem; color: var(--pp-text-muted);
}
.pp-admin-empty-lg {
  text-align: center; padding: 3rem 2rem; color: var(--pp-text-muted); font-size: 1.1rem;
}

/* ─── Admin Tab Navigation ─────────────────────────── */
.pp-admin-tab {
  padding: 0.5rem 1rem; background: var(--pp-surface-2);
  border: 1px solid var(--pp-border); border-bottom: none;
  border-radius: 6px 6px 0 0; text-decoration: none;
  color: var(--pp-text-muted); display: inline-block;
}
.pp-admin-tab-active {
  padding: 0.5rem 1rem; background: var(--pp-surface);
  border: 1px solid var(--pp-border); border-bottom: 1px solid var(--pp-surface);
  border-radius: 6px 6px 0 0; text-decoration: none;
  color: var(--pp-text); font-weight: 600; display: inline-block;
}
.pp-admin-tab-content {
  border: 1px solid var(--pp-border); padding: 1.5rem;
  border-radius: 0 0 4px 4px;
}
.pp-admin-tab-content-styled {
  border: 1px solid var(--pp-border); border-radius: 0 6px 6px 6px;
  background: var(--pp-surface); padding: 1.25rem;
}

/* ─── Admin Badges ─────────────────────────────────── */
/* PP-995: die Grundform (.pp-badge) steht in pp.css (DesignComp) — eine
   zweite hier ueberschrieb sie, weil pp-utils.css spaeter laedt. Die
   Farbvarianten sind jetzt weich (Farbe auf ihrer Flaeche) wie im Muster:
   Weiss auf Vollfarbe fiel im dunklen Schema durch. */
.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: var(--pp-primary-soft); color: var(--pp-primary); border-color: transparent; }
.pp-badge-green { background: var(--pp-ok-soft); color: var(--pp-ok); border-color: transparent; }
.pp-badge-red { background: var(--pp-danger-soft); color: var(--pp-danger); border-color: transparent; }
.pp-badge-yellow { background: var(--pp-warn-soft); color: var(--pp-warn); border-color: transparent; }
.pp-badge-gray { background: var(--pp-surface-2); color: var(--pp-text-muted); }
.pp-badge-light { background: var(--pp-surface-2); color: var(--pp-text); }
.pp-badge-cyan { background: var(--pp-primary-soft); color: var(--pp-primary); border-color: transparent; }
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: var(--pp-danger); border: none; background: none; cursor: pointer; }
.pp-btn-del:hover { color: var(--pp-danger-hover); }
.pp-btn-success-fill { background: var(--pp-ok); color: var(--pp-primary-contrast); border-color: var(--pp-ok); }
.pp-btn-info-fill { background: var(--pp-primary); color: var(--pp-primary-contrast); border-color: var(--pp-primary); }

/* PP-941: hier stand .pp-menu-item als graue Kastenzeile "(Admin Menus)".
   Der Menue-Editor benutzt .pp-menu-editor-item (static/editor/menu-editor.css);
   getroffen hat die Regel nur das OEFFENTLICHE Menue — als Kastenstapel.
   Menues gestaltet jetzt DesignComp::GenerateKopf (pp.css). */

/* ─── 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);
  font-family: var(--pp-font);
}
.pp-login-card { width: 100%; max-width: 400px; padding: 1rem; }

/* ─── Warn/Info Banner ─────────────────────────────── */
.pp-banner-warning {
  background: var(--pp-warning); color: var(--pp-primary-contrast);
  text-align: center; padding: 0.5rem; font-size: 0.85rem; font-weight: 600;
}
.pp-banner-info {
  background: var(--pp-primary); color: var(--pp-primary-contrast);
  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: var(--pp-surface); border: 1px solid var(--pp-border); 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: var(--pp-text) !important;
  text-decoration: none; background: none;
  white-space: nowrap;   /* 0.9.693: Symbol und Text auf EINER Zeile (Wunsch Rene) */
}
/* 0.9.693: das Menue ist so breit wie sein laengster Eintrag — vorher
   180 px fest, "🔗 Verknuepfungsarten" brach unter dem Symbol um. */
.pp-dropdown-menu { width: max-content; max-width: calc(100vw - 2rem); }
@media (max-width: 768px) {
  .pp-dropdown-menu a, .pp-navbar-nav .pp-dropdown-menu a { white-space: normal; }
}
.pp-dropdown-menu a:hover,
.pp-navbar-nav .pp-dropdown-menu a:hover {
  background: var(--pp-surface-2) !important; color: var(--pp-text) !important;
}
.pp-dropdown-menu.pp-d-block { display: block; }
.pp-dropdown-sep { border-top: 1px solid var(--pp-border); margin: 0.2rem 0; }
/* PP-972: Mehr-Menue in Spalten — ein Abschnitt je Spalte
   (NavbarLoader::MehrSpalten). Spaltenzahl = Zahl der Abschnitte. */
.pp-dropdown-menu.pp-mehr-spalten.pp-d-block {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(170px, max-content);
  width: max-content;
  max-width: calc(100vw - 2rem); max-height: calc(100vh - 5rem); overflow: auto;
}
.pp-mehr-spalten > .pp-mehr-spalte { list-style: none; padding: 0.15rem 0; }
.pp-mehr-spalten > .pp-mehr-spalte + .pp-mehr-spalte { border-left: 1px solid var(--pp-border); }
.pp-mehr-spalte > ul { list-style: none; margin: 0; padding: 0; }
.pp-mehr-spalte a { white-space: nowrap; }
@media (max-width: 768px) {
  .pp-dropdown-menu.pp-mehr-spalten.pp-d-block { grid-auto-flow: row; grid-auto-columns: auto; width: auto; max-height: none; }
  .pp-mehr-spalten > .pp-mehr-spalte + .pp-mehr-spalte { border-left: 0; border-top: 1px solid var(--pp-border); }
}

/* ─── Plugin Nav-Switcher (Sprint 64B.20) ────────────── */
.pp-plugin-navbar {
  background: var(--pp-header);
  padding: 0.4rem var(--pp-spacing-4);
}
.pp-plugin-navbar .pp-navbar-nav { gap: 0.1rem; }
.pp-navbar .pp-navbar-nav > li { position: relative; }
.pp-core-navbar .pp-navbar-nav > li > a {
  font-size: 1.1rem; padding: 0.35rem 0.6rem; line-height: 1;
}
.pp-plugin-navbar .pp-navbar-nav > li > a {
  font-size: 1.1rem;
  padding: 0.35rem 0.6rem;
  line-height: 1;
}
/* Tooltip-Blase unter dem Icon (Core + Plugin Navbar) */
.pp-navbar .pp-navbar-nav > li > a[data-tt]::after {
  content: attr(data-tt);
  position: absolute;
  left: 50%; top: 100%;
  transform: translateX(-50%);
  margin-top: 22px;
  background: var(--pp-header);
  color: var(--pp-header-text);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  padding: 5px 12px;
  border-radius: 5px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s;
  z-index: 1100;
}
/* Linie nach oben */
.pp-navbar .pp-navbar-nav > li > a[data-tt]::before {
  content: '';
  position: absolute;
  left: 50%; top: 100%;
  transform: translateX(-50%);
  margin-top: 2px;
  width: 4px;
  height: 20px;
  background: var(--pp-header);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s;
  z-index: 1100;
}
.pp-navbar .pp-navbar-nav > li > a[data-tt]:hover::after,
.pp-navbar .pp-navbar-nav > li > a[data-tt]:hover::before {
  opacity: 1;
}
/* Dropdown-Items: kein Tooltip (wird als erste Zeile im Dropdown angezeigt) */
.pp-navbar .pp-navbar-nav > li.pp-nav-dropdown > a[data-tt]::after,
.pp-navbar .pp-navbar-nav > li.pp-nav-dropdown > a[data-tt]::before {
  display: none;
}
.pp-nav-active > a { color: var(--pp-header-text) !important; background: color-mix(in srgb, var(--pp-header-text) 15%, transparent); }
/* Brand-Dropdown (Workspace-Switcher) */
.pp-brand-dropdown { display: inline-block; }
.pp-brand-dropdown > .pp-navbar-brand { cursor: pointer; }
.pp-brand-menu { left: 0; right: auto; min-width: 200px; }
.pp-brand-menu a { font-size: 0.9rem; }

/* Plugin-Navbar: Hamburger Toggle (Mobile) */
.pp-plugin-navbar .pp-navbar-toggle {
  display: none; background: none; border: 1px solid color-mix(in srgb, var(--pp-header-text) 30%, transparent);
  color: var(--pp-header-text); padding: 0.3rem 0.6rem; border-radius: var(--pp-radius, 0.375rem);
  cursor: pointer; font-size: 1.1rem; line-height: 1;
}
@media (max-width: 768px) {
  .pp-plugin-navbar .pp-navbar-toggle { display: inline-flex; }
  .pp-plugin-navbar .pp-navbar-nav {
    display: none; width: 100%; flex-direction: column;
    padding-top: 0.5rem; margin-top: 0.4rem;
    border-top: 1px solid color-mix(in srgb, var(--pp-header-text) 15%, transparent);
  }
  .pp-plugin-navbar .pp-navbar-nav.pp-open { display: flex; }
  .pp-plugin-navbar .pp-navbar-nav > li {
    display: flex;
  }
  .pp-plugin-navbar .pp-navbar-nav > li > a {
    font-size: 0.95rem; padding: 0.5rem 0.75rem;
    display: inline-flex; align-items: center;
    width: 100%;
  }
  /* Icon-Span: feste Breite, zentriert */
  .pp-plugin-navbar .pp-navbar-nav > li > a > .pp-nav-icon {
    display: inline-block;
    width: 1.6em;
    text-align: center;
    flex-shrink: 0;
  }
  /* Icons + Labels sichtbar auf Mobile (data-tt statt title) */
  .pp-plugin-navbar .pp-navbar-nav > li > a[data-tt]::after,
.pp-core-navbar .pp-navbar-nav > li > a[data-tt]::after {
    content: attr(data-tt) !important;
    position: static !important;
    display: inline !important;
    margin-left: 0.5rem !important;
    margin-top: 0 !important;
    font-size: 0.85rem;
    background: none !important;
    color: color-mix(in srgb, var(--pp-header-text) 90%, transparent) !important;
    padding: 0 !important;
    border-radius: 0 !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: none !important;
    white-space: normal !important;
  }
  /* Mobile: keine Tooltip-Linie */
  .pp-plugin-navbar .pp-navbar-nav > li > a[data-tt]::before,
.pp-core-navbar .pp-navbar-nav > li > a[data-tt]::before {
    display: none !important;
  }
  /* Dropdowns im Mobile: volle Breite, heller Hintergrund, dunkle Schrift */
  .pp-plugin-navbar .pp-dropdown-menu {
    position: static; width: 100%; box-shadow: none;
    border: none; background: var(--pp-surface-2);
    border-radius: 6px; margin: 0.25rem 0; padding: 0.25rem 0 0.25rem 1rem;
  }
  .pp-plugin-navbar .pp-dropdown-menu a { color: var(--pp-text) !important; font-size: 0.9rem; }
  .pp-plugin-navbar .pp-dropdown-menu a:hover { background: var(--pp-surface-2) !important; color: var(--pp-text) !important; }
  .pp-plugin-navbar .pp-dropdown-menu a::after { content: none; }
  /* Brand-Dropdown: kompakt */
  .pp-plugin-navbar .pp-brand-dropdown { width: auto; }
  .pp-plugin-navbar .pp-container { flex-wrap: wrap; }
  /* User-Menu: volle Breite, kein Separator */
  .pp-plugin-navbar .pp-nav-user-sep {
    border-left: none; margin-left: 0; padding-left: 0;
    width: 100%; border-top: 1px solid color-mix(in srgb, var(--pp-header-text) 15%, transparent);
    margin-top: 0.25rem; padding-top: 0.25rem;
  }
  .pp-plugin-navbar .pp-nav-user-sep > .pp-nav-user-link {
    display: flex !important; align-items: baseline; gap: 0.5rem;
  }
  .pp-plugin-navbar .pp-nav-user-sep > .pp-nav-user-link[data-tt]::after {
    font-size: 0.75rem !important;
    color: color-mix(in srgb, var(--pp-header-text) 40%, transparent) !important;
  }
}

/* ─── Quick-Search (Ticket-Navbar) ────────────────── */
.tk-quick-search-wrap {
  width: 100%; order: 99;
  padding: 0.4rem 0;
  border-top: 1px solid color-mix(in srgb, var(--pp-header-text) 15%, transparent);
}
.tk-quick-search-wrap #tk-quick-search {
  display: flex; gap: 6px; align-items: center; width: 100%;
}
.tk-quick-search-wrap #tk-qs-input {
  flex: 1; padding: 8px 12px;
  border: 1px solid color-mix(in srgb, var(--pp-header-text) 30%, transparent); border-radius: 6px;
  background: color-mix(in srgb, var(--pp-header-text) 10%, transparent); color: var(--pp-header-text);
  font-size: 15px; outline: none;
}
.tk-quick-search-wrap #tk-qs-input::placeholder { color: color-mix(in srgb, var(--pp-header-text) 40%, transparent); }
.tk-quick-search-wrap #tk-qs-input:focus { border-color: color-mix(in srgb, var(--pp-header-text) 60%, transparent); background: color-mix(in srgb, var(--pp-header-text) 15%, transparent); }
.tk-quick-search-wrap button[type="submit"] {
  background: none; border: none; color: color-mix(in srgb, var(--pp-header-text) 70%, transparent);
  cursor: pointer; font-size: 20px; padding: 4px 8px;
}
@media (min-width: 769px) {
  .tk-quick-search-wrap {
    width: auto; order: 0; border-top: none; padding: 0;
    margin-left: auto;
  }
  .tk-quick-search-wrap #tk-qs-input { width: 140px; padding: 5px 10px; font-size: 13px; }
}

/* ─── Navbar User-Menu ────────────────────────────── */
.pp-plugin-navbar .pp-nav-user-sep {
  border-left: 1px solid color-mix(in srgb, var(--pp-header-text) 20%, transparent);
  margin-left: 8px;
  padding-left: 8px;
}
.pp-plugin-navbar .pp-nav-user-link {
  font-size: 0.82rem;
  color: color-mix(in srgb, var(--pp-header-text) 90%, transparent) !important;
}
.pp-plugin-navbar .pp-nav-user-header {
  padding: 8px 12px;
  font-weight: 600;
  border-bottom: 1px solid var(--pp-border);
  pointer-events: none;
}
.pp-plugin-navbar .pp-nav-user-sub {
  font-weight: 400;
  font-size: 12px;
  color: var(--pp-text-muted);
}

/* ─── 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);
  border-radius: var(--pp-radius, 0.375rem); background: var(--pp-surface);
  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);
  color: var(--pp-primary-contrast); border-radius: 1rem; font-size: 0.8rem;
}
.tc-chip button { background: none; border: none; color: var(--pp-primary-contrast); 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: var(--pp-surface-2); border-radius: 4px; height: 24px; position: relative; }
.pp-survey-bar-fill { background: var(--pp-primary); 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: var(--pp-surface-2); border-radius: 999px; height: 6px;
  margin-bottom: 1.5rem; overflow: hidden;
}
.pp-form-progress-bar {
  background: var(--pp-primary); 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 var(--pp-border); padding-bottom: 0;
}
.pp-form-steps-tree { flex-direction: column; border-bottom: none; border-right: 2px solid var(--pp-border); 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: var(--pp-text-muted); 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: var(--pp-text); }
.pp-step-active { color: var(--pp-primary); border-bottom-color: var(--pp-primary); font-weight: 600; }
.pp-step-done { color: var(--pp-ok); }
.pp-step-done .pp-step-num { background: var(--pp-ok); color: var(--pp-primary-contrast); }
.pp-step-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 50%; font-size: 0.75rem;
  background: var(--pp-surface-2); color: var(--pp-text); font-weight: 600;
}
.pp-step-active .pp-step-num { background: var(--pp-primary); color: var(--pp-primary-contrast); }

.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 var(--pp-border);
}
.pp-step-badge {
  background: var(--pp-primary); color: var(--pp-primary-contrast);
  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 var(--pp-border);
}
@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); }
.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 var(--pp-border); border-radius: 4px;
  margin-bottom: 0.35rem; display: flex; align-items: center; gap: 0.5rem;
  font-size: 0.85rem; background: var(--pp-surface);
}
.pp-fd-tree-indent-1 { margin-left: 1.5rem; border-left: 3px solid var(--pp-primary); }
.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: var(--pp-primary-soft); border-color: color-mix(in srgb, var(--pp-primary) 30%, var(--pp-border)); }
.pp-fd-tree-divider { background: var(--pp-surface-2); border-style: dashed; color: var(--pp-text-muted); }
.pp-fd-tree-desc { background: var(--pp-warn-soft); border-color: color-mix(in srgb, var(--pp-warn) 30%, var(--pp-border)); }
.pp-fd-tree-icon { font-size: 1rem; width: 1.2rem; text-align: center; flex-shrink: 0; }
.pp-fd-tree-type { color: var(--pp-text-muted); font-size: 0.7rem; }
.pp-fd-tree-name { color: var(--pp-text-muted); 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: var(--pp-primary); }
.pp-fd-tree-col-2 { background: #6f42c1; }
.pp-fd-tree-col-3 { background: #e67e22; }
.pp-fd-tree-col-4 { background: var(--pp-danger); }
.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 var(--pp-border); 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 var(--pp-border); border-top-color: var(--pp-primary);
  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: var(--pp-ok-soft); color: var(--pp-ok); 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: var(--pp-text); }
.pp-form-success-msg { font-size: 1rem; color: var(--pp-text); margin: 0 0 1rem; line-height: 1.5; }
.pp-form-success-detail { font-size: 0.9rem; color: var(--pp-text-muted); margin: 0 0 1.5rem; }
.pp-form-success-info { border-top: 1px solid var(--pp-border); 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: var(--pp-text); font-size: 0.9rem; line-height: 1.5; margin-bottom: 1rem; }
.pp-form-divider { border: none; border-top: 1px solid var(--pp-border); margin: 1.5rem 0; }
.pp-form-group-box {
  border: 1px solid var(--pp-border); border-radius: 6px; padding: 1rem;
  margin-bottom: 1rem; background: var(--pp-surface-2);
}
.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: var(--pp-text); }
.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: var(--pp-border); margin: 0 0.15rem; }
.pp-fd-condition { background: var(--pp-surface-2); border: 1px solid var(--pp-border); 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); font-size: 0.85rem; margin-top: 0.25rem; }
.pp-form .pp-form-help { color: var(--pp-text-muted); font-size: 0.85rem; margin-top: 0.25rem; }

/* ─── Form Utilities ───────────────────────────────── */
.pp-form-inline-input {
  width: 100%; padding: 0.4rem; border: 1px solid var(--pp-border);
  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: var(--pp-ok) !important;
}
.pp-form-valid:focus {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--pp-ok) 22%, transparent) !important;
}
.pp-form-live-error {
  display: none; font-size: 0.75rem; color: var(--pp-danger);
  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 var(--pp-border); margin-bottom: 1rem; }
.pp-tab {
  padding: 0.5rem 1.25rem; border: none; background: none; cursor: pointer;
  font-size: 0.9rem; color: var(--pp-text-muted); border-bottom: 2px solid transparent;
  margin-bottom: -2px;
}
.pp-tab:hover { color: var(--pp-text); }
.pp-tab-active { font-weight: 600; color: var(--pp-primary); border-bottom-color: var(--pp-primary); }

/* ─── Stats Cards (Dashboard) ──────────────────────── */
.pp-stat-icon { font-size: 3rem; color: var(--pp-text-muted); }
.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: var(--pp-primary); color: var(--pp-primary-contrast); }
.pp-pill-green { background: var(--pp-ok); color: var(--pp-primary-contrast); }
.pp-pill-red { background: var(--pp-danger); color: var(--pp-primary-contrast); }
.pp-pill-orange { background: #fd7e14; color: #fff; }

/* ─── Progress Bar ─────────────────────────────────── */
.pp-progress { background: var(--pp-surface-2); border-radius: 4px; height: 24px; position: relative; }
.pp-progress-bar { background: var(--pp-primary); 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: var(--pp-surface); padding: 1rem; overflow-y: auto;
}
.pp-fullscreen .pp-tabs { position: sticky; top: 0; background: var(--pp-surface); 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: var(--pp-text-muted); }
.pp-error-detail { color: var(--pp-text-muted); }

/* ─── Code/Mono Display ────────────────────────────── */
.pp-code-block {
  padding: 0.35rem; border: 1px solid var(--pp-border);
  border-radius: 4px; font-size: 0.85rem; font-family: monospace;
  background: var(--pp-surface-2);
}

/* ─── 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: var(--pp-header-text); opacity: 0.8; text-decoration: none; }
.pp-nav-link-light:hover { color: var(--pp-header-text); opacity: 1; }
.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: var(--pp-text-muted); font-size: 0.875rem; }

/* ─── Admin Page Headers ──────────────────────────── */
.pp-page-header {
  display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem;
  /* PP-1030: Knoepfe rechts quetschten am Handy den Titel und ragten ueber
     den Rand (/admin/settings/languages bei 390 px) — umbrechen statt ueberlaufen */
  flex-wrap: wrap; gap: 0.75rem;
}
.pp-page-header > h1, .pp-page-header > h2 { min-width: 0; overflow-wrap: anywhere; margin: 0;
  /* PP-1030: wie die Ueberschrift der XUI-Listen (.pp-xui-titel) — die
     Seitenkoepfe sahen neben den Listen fremd aus (h1 2.25rem) */
  font-size: 1.5rem; }
.pp-page-header-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; }
.pp-page-header-actions .pp-btn { white-space: nowrap; }
.pp-page-header-actions form { margin: 0; display: contents; }   /* Formular-Knopf steht in der Leiste wie jeder andere */
@media (max-width: 768px) {
  /* Titel oben ueber die volle Breite, Knoepfe darunter in Zeilen */
  .pp-page-header { flex-direction: column; align-items: stretch; }
  .pp-page-header-actions { justify-content: flex-start; }
}
.pp-page-count { color: var(--pp-text-muted); 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: var(--pp-text-muted); }
.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); font-size: 3rem; text-decoration: none;
}
.pp-media-meta { color: var(--pp-text-muted); 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); padding: 0.75rem; border-radius: 0.25rem; margin-bottom: 1rem; font-size: 0.85rem; }
.pp-settings-header-bg { background: var(--pp-gray-100); 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); }
.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); }

/* ─── 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); 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); font-size: 0.875rem; }
.pp-breadcrumb-link { color: var(--pp-primary); text-decoration: none; }
.pp-breadcrumb-current { color: var(--pp-text); }

/* ─── Element: Pagination ──────────────────────────── */
.pp-pagination { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem; }
.pp-pagination-info { color: var(--pp-gray-600); }
.pp-pagination-danger { color: var(--pp-danger); 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); border-radius: 0.25rem;
  color: var(--pp-primary); text-decoration: none; font-size: 0.875rem;
  transition: background 0.1s;
}
.pp-page-link:hover { background: var(--pp-gray-100); }
.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); border-radius: 0.25rem;
  color: var(--pp-primary-contrast); background: var(--pp-primary); 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); border-radius: 0.25rem;
  color: var(--pp-gray-400); font-size: 0.875rem;
  pointer-events: none; background: var(--pp-gray-100);
}
.pp-page-ellipsis {
  display: inline-flex; align-items: center; min-width: 1.5rem;
  justify-content: center; color: var(--pp-gray-400); 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: var(--pp-text-muted); 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: var(--pp-surface-2); 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: var(--pp-text-muted); font-size: 0.85rem; }
.pp-blog-meta-row { color: var(--pp-text-muted); 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: var(--pp-surface-2); border: 1px solid var(--pp-border); 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-1179: min-width 0 — ein fieldset ist sonst min-content breit und waechst mit
   einer eingebetteten Tabelle; .pp-table-responsive rollte dann nie (Handy 1263 px) */
.pp-form-section { border: 1px solid var(--pp-border); border-radius: 8px; padding: 0; margin: 0 0 1.25rem; background: var(--pp-surface); min-width: 0; }
.pp-form-legend { font-weight: 600; font-size: 0.95rem; color: var(--pp-text); padding: 0.75rem 1rem; margin: 0; background: var(--pp-surface-2); border-bottom: 1px solid var(--pp-border); 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: var(--pp-primary-soft); }
.pp-form-section-content { padding: 1rem; }
.pp-form-collapse-icon { float: right; font-size: 0.8rem; color: var(--pp-text-muted); }

/* ─── 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 var(--pp-border); border-radius: 6px; background: var(--pp-surface); color: var(--pp-text); cursor: pointer; text-decoration: none; transition: all 0.15s; }
.pp-form-btn:hover { background: var(--pp-surface-2); }
.pp-form-btn-primary { background: var(--pp-primary); color: var(--pp-primary-contrast); border-color: var(--pp-primary); }
.pp-form-btn-primary:hover { background: var(--pp-primary-hover); }
.pp-form-btn-danger { background: var(--pp-danger); color: var(--pp-primary-contrast); border-color: var(--pp-danger); }
.pp-form-btn-danger:hover { background: var(--pp-danger-hover); }
.pp-form-btn-warning { background: var(--pp-warn); color: var(--pp-primary-contrast); border-color: var(--pp-warn); }
.pp-form-btn-warning:hover { background: var(--pp-warning-hover); }
/* PPTICKET-288 (Nebenbefund): ohne flex-wrap stand jede Aktionsleiste in
   EINER Reihe — die Projekt-Einstellungen (9 Knoepfe) machten die Seite auf
   dem Handy 974 px breit. Betrifft jedes XUI-Formular jedes Plugins. */
.pp-form-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--pp-border); }

/* ─── 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: var(--pp-border); border-radius: 1rem; cursor: pointer; transition: background 0.2s; }
.pp-form-toggle input[type="checkbox"]:checked { background: var(--pp-primary); }
.pp-form-toggle input[type="checkbox"]::after { content: ''; position: absolute; width: 1rem; height: 1rem; background: var(--pp-surface); 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 var(--pp-border); border-radius: 8px; overflow: hidden; margin-bottom: 1rem; }
.pp-form-tab-nav { display: flex; background: var(--pp-surface-2); border-bottom: 1px solid var(--pp-border); overflow-x: auto; }
.pp-form-tab-btn { padding: 0.6rem 1rem; border: none; background: none; font-size: 0.875rem; color: var(--pp-text-muted); cursor: pointer; border-bottom: 2px solid transparent; transition: all 0.15s; white-space: nowrap; }
.pp-form-tab-btn:hover { color: var(--pp-text); background: var(--pp-surface-2); }
.pp-form-tab-btn-active, .pp-form-tab-btn.active { color: var(--pp-primary); border-bottom-color: var(--pp-primary); font-weight: 500; background: var(--pp-surface); }
.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 var(--pp-border); 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: var(--pp-text); }

/* ─── Plugin Log Viewer (PPSDK-65) ─────────────────── */
.pp-log-viewer {
  background: #0f1115;
  color: #e6e6e6;
  font-family: 'Menlo', 'Monaco', 'Courier New', monospace;
  font-size: 12px;
  line-height: 1.4;
  padding: 1rem;
  margin: 0;
  height: 480px;
  overflow-y: auto;
  white-space: pre-wrap;
  word-break: break-all;
  border-radius: 0 0 4px 4px;
}
.pp-log-viewer:empty::before { content: '(leer)'; color: #6c757d; font-style: italic; }

/* Navigationsleiste mit Text (show_labels='true' in der Navbar-Datei).
   Auf schmalen Geraeten bleibt nur das Icon — der Text weicht, nicht
   die Navigation. */
.pp-nav-icon { margin-right: .4em; }
.pp-nav-label { font-size: .9375rem; }
@media (max-width: 640px) { .pp-nav-label { display: none; } .pp-nav-icon { margin-right: 0; } }

/* ═══════════════════════════════════════════════════════════════
   PP-773 — Fassungsvergleich (Workflows und Pipelines)
   ═══════════════════════════════════════════════════════════════
   Erzeugt von Infrastructure/Text_Diff.pbi.

   ⚠ FARBE IST HIER NUR DIE ZUGABE. Jede Zeile traegt ihr Vorzeichen
     (+ / - / Leerzeichen) im TEXT, nicht in der Darstellung: rot und
     gruen sind fuer einen Teil der Leute dasselbe, und beim Kopieren
     geht die Farbe ohnehin verloren. Wer hier den linken Rand oder
     das Vorzeichen wegnimmt, macht den Vergleich fuer diese Leute
     unlesbar, ohne dass es jemandem auffaellt.
*/
.pp-diff { margin: 12px 0; }

.pp-diff-kopf {
  display: flex;
  gap: 12px;
  align-items: center;
  font-size: 13px;
  margin-bottom: 6px;
}
.pp-diff-alt  { color: var(--pp-danger); font-weight: 600; }
.pp-diff-neu  { color: var(--pp-ok); font-weight: 600; }
.pp-diff-zahl {
  margin-left: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--pp-text-muted);
}

.pp-diff-gleich {
  color: var(--pp-text-muted);
  font-style: italic;
  padding: 8px 0;
}

/* Die Kappung faellt auf oder sie taugt nichts. */
.pp-diff-gekappt {
  background: var(--pp-warn-soft);
  border-left: 3px solid var(--pp-warn);
  color: var(--pp-warn);
  padding: 8px 10px;
  margin: 0 0 8px;
  font-size: 13px;
}

.pp-diff-block {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12.5px;
  line-height: 1.5;
  border: 1px solid var(--pp-border);
  border-radius: 4px;
  padding: 0;
  margin: 0;
  overflow-x: auto;
  background: var(--pp-surface);
}
.pp-diff-block span {
  display: block;
  padding: 1px 8px;
  white-space: pre;
  border-left: 3px solid transparent;
}
.pp-diff-ctx  { color: var(--pp-text-muted); }
.pp-diff-weg  { background: var(--pp-danger-soft); border-left-color: var(--pp-danger) !important; color: var(--pp-danger); }
.pp-diff-dazu { background: var(--pp-ok-soft); border-left-color: var(--pp-ok) !important; color: var(--pp-ok); }

/* ═══════════════════════════════════════════════════════════════
   PPMCP-42: MCP-Freigabe — Schalter in drei Ebenen
   ═══════════════════════════════════════════════════════════════
   ⚠ Diese vier Klassen wurden seit PP-786 in Admin-Seiten BENUTZT
     und waren nirgends DEFINIERT. Das faellt nicht auf, weil eine
     unbekannte Klasse in HTML kein Fehler ist — sie tut nur nichts.
     Ein Abzeichen ohne Farbe sah aus wie ein Abzeichen, das eben so
     aussieht. */
/* PP-995: .pp-badge-muted / .pp-badge-secondary stehen jetzt in pp.css (DesignComp). */

/* ⚠ Eine neue Gruppe muss ABGESETZT stehen, nicht in derselben Zeile
     wie die uebrigen — ein stiller Zuwachs ist bei 495 Werkzeugen die
     eigentliche Gefahr. Der linke Balken traegt die Aussage, die
     Hintergrundfarbe verstaerkt sie nur: wer Farben nicht
     unterscheidet, sieht den Balken trotzdem. */
.pp-row-highlight > td {
  background: var(--pp-warning-bg);
}
.pp-row-highlight > td:first-child {
  border-left: 3px solid var(--pp-warning);
}

.pp-input {
  padding: 0.35rem 0.5rem; font-size: 0.875rem;
  border: 1px solid var(--pp-border);
  border-radius: var(--pp-radius, 4px);
  background: var(--pp-bg); color: var(--pp-text);
}
.pp-input-sm { padding: 0.2rem 0.35rem; font-size: 0.75rem; }

/* PPMCP-45: Zeile aufklappen statt Seite wechseln */
.pp-xui-expand {
  border: none; background: none; cursor: pointer;
  font-size: 0.9rem; padding: 0 0.35rem;
  color: var(--pp-text-muted);
}
.pp-xui-expand:hover { color: var(--pp-text); }
.pp-xui-expand-row > td {
  background: var(--pp-bg-alt);
  padding: 0.5rem 0.75rem;
}
.pp-xui-expand-row[hidden] { display: none; }

/* ═══════════════════════════════════════════════════════════════
   PPMCP-45: MCP-Freigabe — Auswahl links, Inhalt rechts
   ═══════════════════════════════════════════════════════════════
   ⚠ Die Auswahl stand oben ueber der ganzen Breite. Bei 47 Gruppen ist
     sie nach zwei Bildschirmhoehen aus dem Blick — und man schaltet
     Zeilen, ohne noch zu sehen, fuer WEN. Links und stehend bleibt die
     Frage sichtbar, die die Tabelle beantwortet. */
.pp-mcp-layout {
  display: grid;
  grid-template-columns: 22rem minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
}
.pp-mcp-seite {
  position: sticky;
  top: 1rem;
  align-self: start;
  max-height: calc(100vh - 2rem);
  overflow-y: auto;
}
/* ⚠ Das XUI-Formular bringt max-width und margin:auto mit (render_target
     wide). In einer 22rem-Spalte waere es dadurch eingerueckt und
     schmaler als noetig. */
.pp-mcp-seite .pp-form-wrapper {
  max-width: none !important;
  margin: 0 !important;
}
.pp-mcp-seite .pp-form-actions { margin-top: .5rem; }

/* ⚠ Unter 1000px nebeneinander zu setzen hiesse, beide Spalten zu
     quetschen. Dann lieber untereinander — und der Klebeeffekt weg,
     sonst verdeckt die Auswahl den Inhalt. */
@media (max-width: 1000px) {
  .pp-mcp-layout { grid-template-columns: 1fr; }
  .pp-mcp-seite  { position: static; max-height: none; }
}

/* ═══════════════════════════════════════════════════════════════
   PPMCP-45: Hinweise klein halten, auf Wunsch ganz zeigen
   ═══════════════════════════════════════════════════════════════
   ⚠ Die Hilfetexte unter den Feldern waren laenger als die Felder
     selbst — in einer 22rem-Spalte fuellten drei Felder den halben
     Bildschirm. Gekuerzt bleiben sie lesbar als Erinnerung; wer sie
     ganz braucht, faehrt darueber oder klickt ins Feld.

   ⚠ Nur zusammengefaltet, NICHT weggelassen. Ein Hinweis, der erst auf
     Suche erscheint, ist fuer den, der ihn braucht, nicht da. */
.pp-mcp-seite .pp-form-help {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: .78rem;
  line-height: 1.35;
  cursor: help;
  transition: none;
}
/* Hover ODER Tastatur/Klick im Feld — beides zeigt den ganzen Text.
   ⚠ focus-within deckt den Klick ab, ohne dass das Markup ein
     tabindex braucht: wer ins Feld klickt, sieht dessen Hinweis. */
.pp-mcp-seite .pp-form-group:hover .pp-form-help,
.pp-mcp-seite .pp-form-group:focus-within .pp-form-help {
  -webkit-line-clamp: unset;
  overflow: visible;
}

/* Der Warnkasten als aufklappbarer Hinweis */
.pp-hinweis > summary {
  cursor: pointer;
  list-style: revert;
}
.pp-hinweis > summary::-webkit-details-marker { display: revert; }
.pp-hinweis[open] > summary { margin-bottom: .25rem; }

/* ─── PP-111: Makros {{name:wert}} in Seiteninhalten ──────────────── */
/* Falscher Wert: sichtbar fuer den Autor (Vorschau) — nicht rot schreiend,
   aber nicht zu uebersehen. */
.pp-makro-fehler {
  display: inline-block;
  padding: 0.1rem 0.4rem;
  border: 1px dashed var(--pp-warning);
  border-radius: 4px;
  font-size: 0.85em;
  color: var(--pp-warning);
}
/* Gast vor einem nicht oeffentlichen Makro */
.pp-makro-anmeldung {
  display: inline-block;
  padding: 0.25rem 0.5rem;
  border: 1px solid var(--pp-border);
  border-radius: 4px;
  font-size: 0.9em;
  color: var(--pp-text-light);
}

/* PP-110: das Workflow-Widget (wf_state) liest seine Termin-Adresse aus
   <help> des Feldes — die XUI-Bibliothek zeigt <help> aber als Text unter
   jedem Feld. Direkt nach dem Widget ist die Zeile Einstellung, kein Hinweis. */
[data-pp-wf-widget] + .pp-form-help { display: none; }

/* ─── XUI-Listen: Blaetterleiste, Seitengroesse, Suchfeld (0.9.695) ── */
/* PP-995 (0.9.702): ganz aus den Tokens des Designs (--pp-*), nach dem
   Muster xui-designs.html (Leiste, Chips, Abzeichen, Blaetterleiste).
   Keine feste Farbe — Hell/Dunkel und Klar/Kompakt/Kontrast schalten mit. */
.pp-xui-blaettern {
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 0.5rem 0.75rem;
  font-size: 0.92em; color: var(--pp-text-muted);
  padding: calc(var(--pp-gap) * 0.5) 0;
  font-variant-numeric: tabular-nums;
}
.pp-xui-blaettern-rechts { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem 0.75rem; }
/* 0.9.704: EINE Leiste oben — links die Zaehlung, rechts Blaettern,
   Pro Seite, Tabelle|Karten. Unten nur die Seitenknoepfe (> 1 Seite). */
.pp-xui-zaehlung { color: var(--pp-text-muted); font-size: 0.92em; font-variant-numeric: tabular-nums; }
.pp-xui-blaettern .pp-xui-zaehlung { font-size: 1em; }
.pp-xui-seiten { display: flex; align-items: center; flex-wrap: wrap; gap: 0.25rem; }
.pp-xui-blaettern-unten { justify-content: flex-end; }
/* Seitenknoepfe wie im Muster (.blaettern button): klein, gerahmt,
   die aktuelle Seite in der Primaerfarbe */
.pp-xui-blaettern .pp-btn {
  min-width: 30px; padding: 3px 8px; font-size: 1em; font-weight: 500;
  border-radius: var(--pp-radius-sm); border: var(--pp-border-w) solid var(--pp-border);
  background: var(--pp-surface); color: var(--pp-text);
}
.pp-xui-blaettern .pp-btn:hover { background: var(--pp-primary-soft); border-color: var(--pp-primary); color: var(--pp-primary); }
.pp-xui-blaettern .pp-btn[aria-current] { background: var(--pp-primary); border-color: var(--pp-primary); color: var(--pp-primary-contrast); font-weight: 600; }
.pp-xui-seitengroesse { display: inline-flex; align-items: center; gap: 0.25rem; margin: 0; }
.pp-xui-seitengroesse-label {
  display: inline-flex; align-items: center; gap: 0.375rem;
  color: var(--pp-text-muted); white-space: nowrap; margin: 0; font-size: 1em; font-weight: 400;
}
.pp-xui-seitengroesse-wahl { width: auto; min-width: 4.5rem; padding-top: 0.2rem; padding-bottom: 0.2rem; font-size: 1em; }

/* Filter- und Suchleiste (Muster: .leiste) — die Karte (pp-card) gibt
   Flaeche, Linie, Radius und Schatten; hier nur Anordnung und Abstand. */
.pp-xui-filterleiste { display: flex; gap: var(--pp-gap); flex-wrap: wrap; align-items: flex-end; padding: var(--pp-gap); }
/* PP-1054: Felder als Gruppe, oben buendig (gleiche Beschriftungshoehe);
   Filtern | Zuruecksetzen rechts daneben, auf Hoehe der Eingaben. */
.pp-xui-filter-felder { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--pp-gap); flex: 1 1 32rem; min-width: 0; }
.pp-xui-filter-aktionen { display: flex; gap: 8px; flex-wrap: wrap; margin-left: auto; }
.pp-xui-filter-felder .pp-form-group { margin-bottom: 0; }
/* PP-1054: Mehrfachauswahl als Klappliste. Der Kopf sieht aus wie ein
   Auswahlfeld; offen liegt die Liste ueber der Seite (keine Verschiebung). */
.pp-xui-mehrfach { position: relative; min-width: 10rem; max-width: 100%; }
.pp-xui-mehrfach-kopf { display: block; cursor: pointer; list-style: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 2rem; user-select: none; }
.pp-xui-mehrfach-kopf::-webkit-details-marker { display: none; }
/* Pfeil wie am Auswahlfeld (der Kopf ist ein summary, kein select) */
.pp-xui-mehrfach-kopf { position: relative; }
.pp-xui-mehrfach-kopf::after {
  content: ""; position: absolute; right: 12px; top: 50%; width: 7px; height: 7px; margin-top: -5px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); opacity: .7;
}
.pp-xui-mehrfach[open] > .pp-xui-mehrfach-kopf::after { transform: rotate(-135deg); margin-top: -1px; }
.pp-xui-mehrfach-feld {
  position: absolute; z-index: 30; top: calc(100% + 4px); left: 0; min-width: 100%;
  background: var(--pp-surface); border: var(--pp-border-w) solid var(--pp-border);
  border-radius: var(--pp-radius-sm); box-shadow: var(--pp-shadow-md, 0 6px 20px rgba(0,0,0,.15));
  padding: 4px; max-height: 18rem; overflow-y: auto;
}
.pp-xui-mehrfach-feld .pp-xui-filter-mehrfach { width: 100%; border: 0; }
.pp-xui-mehrfach.pp-xui-mehrfach-bereit .pp-xui-filter-mehrfach { display: none; }
.pp-xui-mehrfach-wahl { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: var(--pp-radius-sm); cursor: pointer; white-space: nowrap; margin: 0; font-weight: 400; }
.pp-xui-mehrfach-wahl:hover { background: var(--pp-surface-2); }
.pp-xui-mehrfach-wahl input { margin: 0; accent-color: var(--pp-primary); }
.pp-xui-spalten[aria-pressed="true"] { background: var(--pp-primary-soft); border-color: var(--pp-primary); color: var(--pp-primary); }
@media (max-width: 600px) {
  .pp-xui-filter-felder > .pp-form-group { flex: 1 1 calc(50% - var(--pp-gap)); }
  .pp-xui-filter-felder > .pp-xui-suche { flex-basis: 100%; max-width: none; }
  .pp-xui-filter-felder .pp-xui-filter-wahl, .pp-xui-filter-felder .pp-xui-filter-text, .pp-xui-mehrfach { width: 100%; min-width: 0; }
  .pp-xui-filter-aktionen { margin-left: 0; width: 100%; }
}
.pp-xui-filter { margin: 0; min-width: 0; max-width: 100%; }
.pp-xui-filter-label {
  font-size: 0.78em; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--pp-text-muted); margin-bottom: 0.25rem;
}
.pp-xui-filter-wahl { min-width: 7rem; width: auto; }
.pp-xui-filter-text { min-width: 9rem; }
.pp-xui-filter-mehrfach { min-width: 9rem; height: auto; }
/* PP-1003: ein Auswahlfeld ist so breit wie seine laengste Option. Ein
   langer Projektname schob das Feld am Handy ueber den Rand und die ganze
   Seite liess sich seitlich verschieben. Das Feld bleibt in seiner Zeile. */
.pp-xui-filter-wahl, .pp-xui-filter-text, .pp-xui-filter-mehrfach { max-width: 100%; }
select.pp-form-input { max-width: 100%; text-overflow: ellipsis; }
.pp-xui-knopf-hoch { padding-top: 0.45rem; padding-bottom: 0.45rem; }
.pp-xui-suche { margin: 0; flex: 1 1 16rem; max-width: 32rem; min-width: 0; }
/* Suchfeld mit Lupe (Muster: .lupe/.feld) */
.pp-xui-lupe { position: relative; display: flex; min-width: 0; }
.pp-xui-lupe-bild {
  position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
  width: 15px; height: 15px; stroke: var(--pp-text-muted); pointer-events: none;
}
.pp-xui-suche-feld { width: 100%; padding-left: 34px; background: var(--pp-surface-2); }
.pp-xui-suche-feld:focus { background: var(--pp-surface); }
/* PP-1045: Ausdrucksfilter (<ausdruck>) — Schalter Felder | Ausdruck.
   Modus am Formular (data-pp-xui-modus); gemerkte Filter (Projekt)
   bleiben auch im Ausdrucksmodus stehen. */
.pp-xui-modus-schalter { display: inline-flex; align-self: flex-end; flex-basis: 100%; gap: 0; }
.pp-xui-modus-schalter .pp-btn { border-radius: 0; }
.pp-xui-modus-schalter .pp-btn:first-child { border-radius: var(--pp-radius-sm) 0 0 var(--pp-radius-sm); }
.pp-xui-modus-schalter .pp-btn:last-child { border-radius: 0 var(--pp-radius-sm) var(--pp-radius-sm) 0; margin-left: -1px; }
.pp-xui-modus-schalter .pp-btn[aria-pressed="true"] { background: var(--pp-primary); color: var(--pp-primary-contrast); border-color: var(--pp-primary); }
.pp-xui-ausdruck { margin: 0; flex: 1 1 28rem; min-width: 0; max-width: 100%; }
.pp-xui-ausdruck-feld { width: 100%; font-family: var(--pp-font-mono, ui-monospace, monospace); resize: vertical; min-height: 2.4rem; }
.pp-xui-ausdruck-meldung { margin: 0.3rem 0 0; font-size: 0.9em; }
.pp-xui-ausdruck-hilfe { display: inline-block; margin-top: 0.25rem; font-size: 0.85em; }
/* PP-1111: ohne "form" davor — in einem XUI-Formular traegt der Inhalt
   ([data-pp-form-inhalt]) den Modus, das Formular ist eine leere Huelle. */
[data-pp-xui-modus="felder"] .pp-xui-ausdruck { display: none; }
[data-pp-xui-modus="ausdruck"] .pp-xui-filter:not(.pp-xui-filter-gemerkt),
[data-pp-xui-modus="ausdruck"] .pp-xui-suche { display: none; }
/* PP-1111: Platzhalter eines ausgelagerten Formulars ohne eigene Klasse */
.pp-d-contents { display: contents; }
/* Werkzeugleiste ueber der Liste (toolbar) */
.pp-xui-werkzeuge { display: flex; flex-wrap: wrap; gap: 8px; }
/* Waehrend die Liste nachlaedt: gedimmt, aber bedienbar. */
.pp-xui-liste.pp-xui-laedt { opacity: 0.6; transition: opacity 0.15s; }

/* ─── Darstellung Tabelle | Karten (PP-995) ───────────────────────────
   Schalter wie im Muster (.segment). Seit 0.9.704 rechts in der Leiste
   ueber der Liste (pp-xui-blaettern-rechts), keine eigene Zeile mehr. */
.pp-xui-ansicht { display: inline-flex; margin: 0; }
.pp-xui-darstellung {
  display: inline-flex; border: var(--pp-border-w) solid var(--pp-border);
  border-radius: var(--pp-radius-sm); overflow: hidden; background: var(--pp-surface);
}
.pp-xui-darstellung-knopf {
  padding: 4px 12px; font-size: 0.92em; color: var(--pp-text); text-decoration: none;
  background: transparent; line-height: 1.5;
}
.pp-xui-darstellung-knopf + .pp-xui-darstellung-knopf { border-left: var(--pp-border-w) solid var(--pp-border); }
.pp-xui-darstellung-knopf:hover { background: var(--pp-surface-2); color: var(--pp-text); text-decoration: none; }
.pp-xui-darstellung-knopf[aria-pressed="true"] { background: var(--pp-primary); color: var(--pp-primary-contrast); font-weight: 600; }
.pp-xui-darstellung-knopf:focus-visible { outline: 2px solid transparent; box-shadow: inset var(--pp-focus); }

/* ─── Karten: DIESELBEN Zeilen, anders ausgelegt ──────────────────────
   Jede Zelle traegt data-pp-karte (titel|untertitel|text|abzeichen|meta|
   aus|aktionen|auswahl); meta-Zellen zusaetzlich data-pp-label. Kein
   zweites Markup — Suche, Filter, Blaettern und refresh bleiben gleich.
   ⚠ Die Rollen-Regeln tragen denselben langen Vorspann wie die Grundregel
     fuer td (".pp-table > tbody > tr > td"): sonst ist die Grundregel
     spezifischer, und "aus" bliebe sichtbar (display:block gewaenne). */
/* PP-1004: Sortierwahl fuer die Kartenansicht — in der Tabelle sortiert
   der Kopf, deshalb dort ausgeblendet. */
.pp-xui-kartensort { display: none; }
.pp-xui-kartensort-label {
  display: inline-flex; align-items: center; gap: 0.375rem; margin: 0; max-width: 100%;
  color: var(--pp-text-muted); font-size: 1em; font-weight: 400;
}
.pp-xui-kartensort-wahl { width: auto; min-width: 0; max-width: 100%; }
/* PP-1011: render="farbe" — Farbfeld vor dem Code */
.pp-xui-farbe {
  display: inline-block; width: 1em; height: 1em; vertical-align: -0.15em;
  border-radius: var(--pp-radius-sm); border: var(--pp-border-w) solid var(--pp-border);
}
/* PP-1007: "Mehr anzeigen" an langen Kartentexten — in der Tabelle nie */
.pp-karte-mehr {
  display: none; margin-top: 0.25rem; padding: 0; border: 0; background: none;
  color: var(--pp-primary); font: inherit; font-size: 0.92em; font-weight: 500; cursor: pointer;
}
.pp-karte-mehr:hover { text-decoration: underline; }
.pp-karte-mehr-auf { display: none; }
/* karten:anfang — Quelle fuer den Block "karten-auto" weiter unten */
.pp-xui-liste[data-pp-darstellung="karten"] .pp-table-responsive {
  overflow: visible; background: transparent; border: 0; box-shadow: none; border-radius: 0;
}
.pp-xui-liste[data-pp-darstellung="karten"] .pp-table { display: block; margin: 0; }
.pp-xui-liste[data-pp-darstellung="karten"] .pp-table > thead { display: none; }
.pp-xui-liste[data-pp-darstellung="karten"] .pp-table > tbody {
  display: grid; gap: var(--pp-gap);
  grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
}
.pp-xui-liste[data-pp-darstellung="karten"] .pp-table > tbody > tr {
  display: flex; flex-wrap: wrap; align-items: baseline; align-content: flex-start;
  gap: 8px 14px; min-width: 0; padding: var(--pp-pad);
  background: var(--pp-surface); border: var(--pp-border-w) solid var(--pp-border);
  border-radius: var(--pp-radius); box-shadow: var(--pp-shadow);
}
.pp-xui-liste[data-pp-darstellung="karten"] .pp-table > tbody > tr:hover { border-color: var(--pp-primary); }
.pp-xui-liste[data-pp-darstellung="karten"] .pp-table > tbody > tr > td {
  display: block; height: auto; padding: 0; border: 0; background: transparent; min-width: 0;
}
.pp-xui-liste[data-pp-darstellung="karten"] .pp-table > tbody > tr.pp-xui-leer { grid-column: 1 / -1; display: block; }
.pp-xui-liste[data-pp-darstellung="karten"] .pp-table > tbody > tr.pp-xui-leer > td { padding: 28px; text-align: center; }
.pp-xui-liste[data-pp-darstellung="karten"] .pp-table > tbody > tr > td[data-pp-karte="auswahl"] { order: 0; }
.pp-xui-liste[data-pp-darstellung="karten"] .pp-table > tbody > tr > td[data-pp-karte="titel"] {
  order: 1; flex: 1 1 auto; font-weight: 600; font-size: 1.08em; overflow-wrap: anywhere;
}
.pp-xui-liste[data-pp-darstellung="karten"] .pp-table > tbody > tr > td[data-pp-karte="titel"] a:not(.pp-btn) { color: var(--pp-primary); text-decoration: var(--pp-link-deco); }
.pp-xui-liste[data-pp-darstellung="karten"] .pp-table > tbody > tr > td[data-pp-karte="abzeichen"] { order: 2; flex: 0 0 auto; }
.pp-xui-liste[data-pp-darstellung="karten"] .pp-table > tbody > tr > td[data-pp-karte="untertitel"] {
  order: 3; flex: 1 1 100%; color: var(--pp-text-muted); font-weight: 500; overflow-wrap: anywhere;
}
.pp-xui-liste[data-pp-darstellung="karten"] .pp-table > tbody > tr > td[data-pp-karte="text"] {
  order: 4; flex: 1 1 100%; color: var(--pp-text-muted); overflow-wrap: anywhere;
}
.pp-xui-liste[data-pp-darstellung="karten"] .pp-table > tbody > tr > td[data-pp-karte="meta"] {
  order: 5; flex: 0 1 auto; font-size: 0.9em; color: var(--pp-text); font-variant-numeric: tabular-nums;
}
.pp-xui-liste[data-pp-darstellung="karten"] .pp-table > tbody > tr > td[data-pp-karte="meta"]::before {
  content: attr(data-pp-label) ":"; color: var(--pp-text-muted); font-weight: 400; margin-right: 0.35em;
}
.pp-xui-liste[data-pp-darstellung="karten"] .pp-table > tbody > tr > td[data-pp-karte="meta"]:empty { display: none; }
.pp-xui-liste[data-pp-darstellung="karten"] .pp-table > tbody > tr > td[data-pp-karte="aus"] { display: none; }
.pp-xui-liste[data-pp-darstellung="karten"] .pp-table > tbody > tr > td[data-pp-karte="aktionen"] {
  order: 6; flex: 1 1 100%; display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end;
  padding-top: calc(var(--pp-gap) * 0.5); border-top: 1px solid var(--pp-border);
}
/* PP-1123: die Knoepfe stehen in .pp-xui-aktionen — in der Karte rechtsbuendig ueber die volle Breite */
.pp-xui-liste[data-pp-darstellung="karten"] .pp-table > tbody > tr > td[data-pp-karte="aktionen"] > .pp-xui-aktionen {
  flex: 1 1 100%; justify-content: flex-end;
}
/* Knoepfe einer rowform brechen in der Karte um und bleiben rechtsbuendig */
.pp-xui-liste[data-pp-darstellung="karten"] .pp-table > tbody > tr > td[data-pp-karte="aktionen"] > .pp-xui-aktionen > form {
  justify-content: flex-end;
}
:root[data-pp-design="kompakt"] .pp-xui-liste[data-pp-darstellung="karten"] .pp-table > tbody {
  grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr));
}
:root[data-pp-design="kompakt"] .pp-xui-liste[data-pp-darstellung="karten"] .pp-table > tbody > tr { gap: 4px 10px; }
.pp-xui-liste[data-pp-darstellung="karten"] .pp-xui-kartensort {
  display: flex; justify-content: flex-end; margin: 0 0 var(--pp-gap) 0;
}
.pp-xui-liste[data-pp-darstellung="karten"] .pp-table > tbody > tr > td[data-pp-karte="text"] .pp-karte-text {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden;
}
.pp-xui-liste[data-pp-darstellung="karten"] .pp-table > tbody > tr > td[data-pp-karte="text"][data-pp-offen] .pp-karte-text {
  display: block; -webkit-line-clamp: unset; line-clamp: none; overflow: visible;
}
.pp-xui-liste[data-pp-darstellung="karten"] .pp-table > tbody > tr > td[data-pp-karte="text"][data-pp-ueberlang] .pp-karte-mehr,
.pp-xui-liste[data-pp-darstellung="karten"] .pp-table > tbody > tr > td[data-pp-karte="text"][data-pp-offen] .pp-karte-mehr { display: inline-block; }
.pp-xui-liste[data-pp-darstellung="karten"] .pp-table > tbody > tr > td[data-pp-karte="text"][data-pp-offen] .pp-karte-mehr-zu { display: none; }
.pp-xui-liste[data-pp-darstellung="karten"] .pp-table > tbody > tr > td[data-pp-karte="text"][data-pp-offen] .pp-karte-mehr-auf { display: inline; }
/* PP-1151: aufgeklappter Inhalt steht IN der Karte (pp-xui-expand.js) */
.pp-xui-liste[data-pp-darstellung="karten"] .pp-table > tbody > tr > td.pp-xui-expand-zelle {
  order: 4; flex: 1 1 100%; overflow-wrap: anywhere;
  background: var(--pp-bg-alt); padding: 0.5rem 0.75rem; border-radius: var(--pp-radius);
}
.pp-xui-liste[data-pp-darstellung="karten"] .pp-table > tbody > tr > td.pp-xui-expand-zelle[hidden] { display: none; }
/* karten:ende */

/* karten-auto:anfang — ERZEUGT von tools/karten_auto_css.py, nicht von Hand */
@media (max-width: 768px) {
  .pp-xui-liste[data-pp-darstellung="auto"] .pp-table-responsive {
    overflow: visible; background: transparent; border: 0; box-shadow: none; border-radius: 0;
  }
  .pp-xui-liste[data-pp-darstellung="auto"] .pp-table { display: block; margin: 0; }
  .pp-xui-liste[data-pp-darstellung="auto"] .pp-table > thead { display: none; }
  .pp-xui-liste[data-pp-darstellung="auto"] .pp-table > tbody {
    display: grid; gap: var(--pp-gap);
    grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
  }
  .pp-xui-liste[data-pp-darstellung="auto"] .pp-table > tbody > tr {
    display: flex; flex-wrap: wrap; align-items: baseline; align-content: flex-start;
    gap: 8px 14px; min-width: 0; padding: var(--pp-pad);
    background: var(--pp-surface); border: var(--pp-border-w) solid var(--pp-border);
    border-radius: var(--pp-radius); box-shadow: var(--pp-shadow);
  }
  .pp-xui-liste[data-pp-darstellung="auto"] .pp-table > tbody > tr:hover { border-color: var(--pp-primary); }
  .pp-xui-liste[data-pp-darstellung="auto"] .pp-table > tbody > tr > td {
    display: block; height: auto; padding: 0; border: 0; background: transparent; min-width: 0;
  }
  .pp-xui-liste[data-pp-darstellung="auto"] .pp-table > tbody > tr.pp-xui-leer { grid-column: 1 / -1; display: block; }
  .pp-xui-liste[data-pp-darstellung="auto"] .pp-table > tbody > tr.pp-xui-leer > td { padding: 28px; text-align: center; }
  .pp-xui-liste[data-pp-darstellung="auto"] .pp-table > tbody > tr > td[data-pp-karte="auswahl"] { order: 0; }
  .pp-xui-liste[data-pp-darstellung="auto"] .pp-table > tbody > tr > td[data-pp-karte="titel"] {
    order: 1; flex: 1 1 auto; font-weight: 600; font-size: 1.08em; overflow-wrap: anywhere;
  }
  .pp-xui-liste[data-pp-darstellung="auto"] .pp-table > tbody > tr > td[data-pp-karte="titel"] a:not(.pp-btn) { color: var(--pp-primary); text-decoration: var(--pp-link-deco); }
  .pp-xui-liste[data-pp-darstellung="auto"] .pp-table > tbody > tr > td[data-pp-karte="abzeichen"] { order: 2; flex: 0 0 auto; }
  .pp-xui-liste[data-pp-darstellung="auto"] .pp-table > tbody > tr > td[data-pp-karte="untertitel"] {
    order: 3; flex: 1 1 100%; color: var(--pp-text-muted); font-weight: 500; overflow-wrap: anywhere;
  }
  .pp-xui-liste[data-pp-darstellung="auto"] .pp-table > tbody > tr > td[data-pp-karte="text"] {
    order: 4; flex: 1 1 100%; color: var(--pp-text-muted); overflow-wrap: anywhere;
  }
  .pp-xui-liste[data-pp-darstellung="auto"] .pp-table > tbody > tr > td[data-pp-karte="meta"] {
    order: 5; flex: 0 1 auto; font-size: 0.9em; color: var(--pp-text); font-variant-numeric: tabular-nums;
  }
  .pp-xui-liste[data-pp-darstellung="auto"] .pp-table > tbody > tr > td[data-pp-karte="meta"]::before {
    content: attr(data-pp-label) ":"; color: var(--pp-text-muted); font-weight: 400; margin-right: 0.35em;
  }
  .pp-xui-liste[data-pp-darstellung="auto"] .pp-table > tbody > tr > td[data-pp-karte="meta"]:empty { display: none; }
  .pp-xui-liste[data-pp-darstellung="auto"] .pp-table > tbody > tr > td[data-pp-karte="aus"] { display: none; }
  .pp-xui-liste[data-pp-darstellung="auto"] .pp-table > tbody > tr > td[data-pp-karte="aktionen"] {
    order: 6; flex: 1 1 100%; display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end;
    padding-top: calc(var(--pp-gap) * 0.5); border-top: 1px solid var(--pp-border);
  }
  /* PP-1123: die Knoepfe stehen in .pp-xui-aktionen — in der Karte rechtsbuendig ueber die volle Breite */
  .pp-xui-liste[data-pp-darstellung="auto"] .pp-table > tbody > tr > td[data-pp-karte="aktionen"] > .pp-xui-aktionen {
    flex: 1 1 100%; justify-content: flex-end;
  }
  /* Knoepfe einer rowform brechen in der Karte um und bleiben rechtsbuendig */
  .pp-xui-liste[data-pp-darstellung="auto"] .pp-table > tbody > tr > td[data-pp-karte="aktionen"] > .pp-xui-aktionen > form {
    justify-content: flex-end;
  }
  :root[data-pp-design="kompakt"] .pp-xui-liste[data-pp-darstellung="auto"] .pp-table > tbody {
    grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr));
  }
  :root[data-pp-design="kompakt"] .pp-xui-liste[data-pp-darstellung="auto"] .pp-table > tbody > tr { gap: 4px 10px; }
  .pp-xui-liste[data-pp-darstellung="auto"] .pp-xui-kartensort {
    display: flex; justify-content: flex-end; margin: 0 0 var(--pp-gap) 0;
  }
  .pp-xui-liste[data-pp-darstellung="auto"] .pp-table > tbody > tr > td[data-pp-karte="text"] .pp-karte-text {
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden;
  }
  .pp-xui-liste[data-pp-darstellung="auto"] .pp-table > tbody > tr > td[data-pp-karte="text"][data-pp-offen] .pp-karte-text {
    display: block; -webkit-line-clamp: unset; line-clamp: none; overflow: visible;
  }
  .pp-xui-liste[data-pp-darstellung="auto"] .pp-table > tbody > tr > td[data-pp-karte="text"][data-pp-ueberlang] .pp-karte-mehr,
  .pp-xui-liste[data-pp-darstellung="auto"] .pp-table > tbody > tr > td[data-pp-karte="text"][data-pp-offen] .pp-karte-mehr { display: inline-block; }
  .pp-xui-liste[data-pp-darstellung="auto"] .pp-table > tbody > tr > td[data-pp-karte="text"][data-pp-offen] .pp-karte-mehr-zu { display: none; }
  .pp-xui-liste[data-pp-darstellung="auto"] .pp-table > tbody > tr > td[data-pp-karte="text"][data-pp-offen] .pp-karte-mehr-auf { display: inline; }
  /* PP-1151: aufgeklappter Inhalt steht IN der Karte (pp-xui-expand.js) */
  .pp-xui-liste[data-pp-darstellung="auto"] .pp-table > tbody > tr > td.pp-xui-expand-zelle {
    order: 4; flex: 1 1 100%; overflow-wrap: anywhere;
    background: var(--pp-bg-alt); padding: 0.5rem 0.75rem; border-radius: var(--pp-radius);
  }
  .pp-xui-liste[data-pp-darstellung="auto"] .pp-table > tbody > tr > td.pp-xui-expand-zelle[hidden] { display: none; }
  .pp-xui-liste[data-pp-darstellung="auto"] .pp-xui-darstellung-knopf[data-pp-xui-darstellung="karten"] { background: var(--pp-primary); color: var(--pp-primary-contrast); font-weight: 600; }
}
@media (min-width: 769px) {
  .pp-xui-liste[data-pp-darstellung="auto"] .pp-xui-darstellung-knopf[data-pp-xui-darstellung="tabelle"] { background: var(--pp-primary); color: var(--pp-primary-contrast); font-weight: 600; }
}
/* karten-auto:ende */

/* ─── PP-995: Vorschau neben der Design-Wahl (Profil, Themes) ─────────
   Dieselben Bausteine wie die echte Liste; nur Kopf und Rahmen hier. */
.pp-design-vorschau {
  border: var(--pp-border-w) solid var(--pp-border); border-radius: var(--pp-radius);
  overflow: hidden; background: var(--pp-bg); margin: var(--pp-spacing-2) 0 var(--pp-spacing-3);
  max-width: 46rem;
}
.pp-design-vorschau-kopf {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px;
  padding: 8px var(--pp-pad); background: var(--pp-header); color: var(--pp-header-text);
}
.pp-design-vorschau-kopf > span { opacity: 0.85; padding: 2px 8px; border-radius: var(--pp-radius-sm); }
.pp-design-vorschau-kopf > span[aria-current] {
  opacity: 1; font-weight: 600; background: color-mix(in srgb, var(--pp-header-text) 16%, transparent);
}
.pp-design-vorschau-innen { padding: var(--pp-pad); }
.pp-design-vorschau .pp-table-responsive { margin-bottom: 0; }
.pp-design-vorschau-marke { display: inline-flex; align-items: center; gap: 0.35rem; }
.pp-design-vorschau-marke .pp-navbar-logo { height: 1.4rem; }

/* ─── /admin/themes (0.9.704) ─────────────────────────────────────────
   Kopf mit Abzeichen, darunter die Werkzeugleiste der Fassungen, dann
   gleich gebaute Abschnitte: h3, volle Breite, gleicher Abstand. Nur
   Tokens, kein style= (CMS/Admin_Themes.pbi). */
.pp-themes-seite { display: flex; flex-direction: column; gap: calc(var(--pp-gap) * 1.5); min-width: 0; }
.pp-themes-kopf { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.5rem 1rem; }
.pp-themes-kopf h2 { margin: 0; }
.pp-themes-abzeichen { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.pp-themes-werkzeuge {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem;
  padding-bottom: var(--pp-gap); border-bottom: var(--pp-border-w) solid var(--pp-border);
}
.pp-themes-werkzeuge form { margin: 0; }
.pp-themes-abschnitt { margin: 0; min-width: 0; }
.pp-themes-abschnitt > h3 { margin: 0 0 calc(var(--pp-gap) * 0.75); }
/* Die Vorschau so breit wie die anderen Abschnitte (im Profil bleibt sie schmal) */
.pp-themes-seite .pp-design-vorschau { max-width: none; margin-bottom: 0; }
.pp-themes-vorschau-wahl { display: flex; flex-wrap: wrap; gap: var(--pp-gap); margin-bottom: 0.5rem; }
/* Waehlbare Themes: ein Haekchen je Theme */
.pp-themes-wahl { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(15rem, 100%), 1fr)); gap: 0.5rem; }
.pp-themes-wahl-punkt {
  display: flex; align-items: center; gap: 0.5rem; margin: 0; cursor: pointer; font-weight: 400;
  padding: 0.5rem 0.75rem; border: var(--pp-border-w) solid var(--pp-border);
  border-radius: var(--pp-radius-sm); background: var(--pp-surface); color: var(--pp-text);
}
.pp-themes-wahl-punkt:has(input:checked) { border-color: var(--pp-primary); background: var(--pp-primary-soft); }
.pp-themes-wahl-punkt:has(input:disabled) { cursor: default; }
.pp-themes-wahl-name { font-weight: 600; }
.pp-themes-wahl-basis { color: var(--pp-text-muted); font-size: 0.85em; margin-right: auto; }

/* ─── Ticket 41072: Sprachwechsel oben rechts ─────────────────────
   details/summary: ohne Skript, auf dem Handy wie am Rechner. Im
   Handy-Menue (eingeklappte Leiste) klappt die Liste im Fluss auf,
   nicht schwebend. */
.pp-sprachwahl-li { list-style: none; display: flex; align-items: center; }
.pp-sprachwahl { position: relative; display: inline-block; }
.pp-sprachwahl-knopf {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 0.25em;
  padding: 0.25rem 0.45rem; border: 1px solid transparent; border-radius: var(--pp-radius-sm, 4px);
  font-size: 0.8rem; font-weight: 600; letter-spacing: 0.04em; line-height: 1.4; user-select: none;
}
.pp-sprachwahl-knopf::-webkit-details-marker { display: none; }
.pp-sprachwahl-knopf::marker { content: ""; }
.pp-sprachwahl-knopf::after { content: "\25BE"; font-size: 0.75em; opacity: 0.8; }
.pp-sprachwahl-knopf:hover, .pp-sprachwahl[open] > .pp-sprachwahl-knopf { border-color: currentColor; }
.pp-sprachwahl-knopf:focus-visible { outline: 2px solid var(--pp-primary); outline-offset: 2px; }
.pp-navbar .pp-sprachwahl-knopf { color: var(--pp-header-text); }
.pp-sprachwahl-liste {
  position: absolute; right: 0; top: calc(100% + 4px); z-index: 1001;
  min-width: 11rem; width: max-content; max-width: calc(100vw - 2rem);
  background: var(--pp-surface); color: var(--pp-text);
  border: 1px solid var(--pp-border); border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15); padding: 0.25rem 0;
}
.pp-sprachwahl-form { margin: 0; }
.pp-sprachwahl-eintrag,
.pp-navbar-nav .pp-sprachwahl-eintrag {
  display: flex; align-items: center; gap: 0.5rem; width: 100%;
  padding: 0.45rem 1rem; background: none; border: 0; text-align: left;
  color: var(--pp-text) !important; font: inherit; text-decoration: none; cursor: pointer; white-space: nowrap;
}
.pp-sprachwahl-eintrag:hover, .pp-sprachwahl-eintrag:focus-visible { background: var(--pp-surface-2); }
.pp-sprachwahl-eintrag[aria-current="true"] { font-weight: 700; }
.pp-sprachwahl-eintrag .pp-sprachwahl-kuerzel { min-width: 1.8rem; font-weight: 600; color: var(--pp-text-muted); }
/* Flaggen: lokale SVG unter /static/flaggen/, feste Groesse 20x14 */
.pp-sprachwahl-flagge {
  display: inline-block; width: 20px; height: 14px; flex: 0 0 20px; object-fit: cover;
  border-radius: 2px; box-shadow: 0 0 0 1px rgba(0,0,0,0.25); vertical-align: middle;
}
.pp-sprachwahl-knopf .pp-sprachwahl-flagge { width: 22px; height: 15px; flex-basis: 22px; }
@media (max-width: 768px) {
  .pp-sprachwahl-li { padding: 0.25rem 0; }
  .pp-sprachwahl-liste { position: static; box-shadow: none; margin-top: 0.25rem; }
}

/* PP-1027: Ueberschrift einer XUI-Listenseite (<view title>) */
.pp-xui-titel { margin: 0; font-size: 1.5rem; }

/* PP-1030: am Handy nichts breiter als der Bildschirm (gemessen 10.10.2026:
   13 von 48 Admin-Seiten bei 390 px zu breit, meist Tabellen ausserhalb von
   .pp-table-responsive — /admin/profile/api-keys 11084 px).
   Eine solche Tabelle scrollt fuer sich waagrecht statt die Seite zu dehnen;
   Knopfleisten und Formular-Knoepfe brechen um. */
@media (max-width: 768px) {
  main > table.pp-table,
  main :not(.pp-table-responsive) > table.pp-table {
    display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch;
  }
  main .pp-d-flex.pp-flex-gap-xs, main .pp-d-flex.pp-flex-gap-sm,
  main .pp-d-flex.pp-flex-gap-md, main .pp-d-flex.pp-flex-gap-lg { flex-wrap: wrap; }
  /* Eingabefelder in Flex-Zeilen duerfen schrumpfen (Suchfeld + Knopf) */
  main .pp-d-flex > input, main .pp-search-input-wrap > input { min-width: 0; }
  main .pp-search-input-wrap { flex-wrap: wrap; }
  main .pp-form-button { white-space: normal; max-width: 100%; }
  main pre, main code { overflow-wrap: anywhere; }
  main pre { overflow-x: auto; max-width: 100%; }
}

/* PP-1030: Dashboard-Widgets (Plugin_Manager) — 4 / 2 / 1 Spalten */
.pp-dashboard-widgets { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
.pp-dashboard-widgets > .pp-card { min-width: 0; }
.pp-dw-span-1 { grid-column: span 1; }
.pp-dw-span-2 { grid-column: span 2; }
.pp-dw-span-4 { grid-column: span 4; }
.pp-dw-plugin { font-size: 10px; font-weight: 400; }
@media (max-width: 1024px) {
  .pp-dashboard-widgets { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pp-dw-span-4 { grid-column: span 2; }
}
@media (max-width: 768px) {
  .pp-dashboard-widgets { grid-template-columns: minmax(0, 1fr); }
  .pp-dw-span-1, .pp-dw-span-2, .pp-dw-span-4 { grid-column: auto; }
}

/* PP-1031: Dropdown auf die Seite haengen, auf der es in den Bildschirm passt (pp-admin.js) */
.pp-dropdown-menu.pp-dropdown-links  { left: 0 !important; right: auto !important; }
.pp-dropdown-menu.pp-dropdown-rechts { right: 0 !important; left: auto !important; }

/* ─── PP-1046: durchsuchbare Auswahl (static/js/pp-auswahl.js) ─────────
   Schwebt ueber der Seite (am body), Lage per CSSOM; Farben aus dem Design. */
.pp-auswahl {
  position: absolute; z-index: 10050; box-sizing: border-box;
  background: var(--pp-surface); color: var(--pp-text);
  border: var(--pp-border-w) solid var(--pp-border); border-radius: var(--pp-radius-sm);
  box-shadow: var(--pp-shadow, 0 8px 24px rgba(0,0,0,.18)); padding: 6px;
  display: flex; flex-direction: column; gap: 6px; max-height: 360px;
}
.pp-auswahl.pp-auswahl-oben { flex-direction: column-reverse; }
.pp-auswahl-feld { width: 100%; box-sizing: border-box; flex: 0 0 auto; }
.pp-auswahl-liste { list-style: none; margin: 0; padding: 0; overflow-y: auto; flex: 1 1 auto; min-height: 0; }
.pp-auswahl-eintrag { padding: 6px 10px; border-radius: var(--pp-radius-sm); cursor: pointer; overflow-wrap: anywhere; }
.pp-auswahl-eintrag.pp-auswahl-aktiv { background: var(--pp-primary-soft); }
.pp-auswahl-eintrag.pp-auswahl-gewaehlt { font-weight: 600; }
.pp-auswahl-eintrag.pp-auswahl-gesperrt { color: var(--pp-text-muted); cursor: default; }
.pp-auswahl-gruppe { padding: 6px 10px 2px; font-size: .78em; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--pp-text-muted); }
.pp-auswahl-leer { padding: 6px 10px; color: var(--pp-text-muted); }
.pp-auswahl-treffer { background: transparent; color: inherit; font-weight: 700; text-decoration: underline; padding: 0; }
.pp-auswahl-mehrfach-feld { width: 100%; box-sizing: border-box; margin-bottom: 4px; padding-top: .2rem; padding-bottom: .2rem; }