/**
 * OW Onboarding Tool - Frontend Styles
 * Standalone-SPA, kein WordPress-Admin-Konflikt mehr
 */

* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --color-bg: #f7f7f5;
  --color-surface: #ffffff;
  --color-surface-alt: #fafaf8;
  --color-border: #e5e5e2;
  --color-border-strong: #d4d4d0;
  --color-text: #1a1a1a;
  --color-text-muted: #6b6b68;
  --color-text-soft: #9a9a96;
  --color-accent: #1a1a1a;

  --color-group-1: #dc2626;
  --color-group-1-soft: #fef2f2;
  --color-group-2: #eab308;
  --color-group-2-soft: #fefce8;
  --color-group-3: #16a34a;
  --color-group-3-soft: #f0fdf4;
  --color-group-check: #6366f1;
  --color-group-check-soft: #eef2ff;
  --color-group-none: #d4d4d0;

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.08);

  --font-display: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

html, body {
  height: 100%;
  font-family: var(--font-display);
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-text);
  background: var(--color-bg);
}

/* Dashboard und Login dürfen den natürlichen Page-Scroll nutzen.
   Im Editor/Presenter ist die App vollflächig (kein Scroll auf der Seite). */
body[data-view="dashboard"],
body[data-view="login"] {
  height: auto;
  min-height: 100%;
  overflow-y: auto;
}

body[data-view="dashboard"] #app-root,
body[data-view="login"] #app-root {
  height: auto;
  min-height: 100%;
}

button, input, textarea, select {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

button {
  background: none;
  border: none;
  cursor: pointer;
}

input, textarea {
  background: white;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 8px 12px;
  outline: none;
}

input:focus, textarea:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(26, 26, 26, 0.06);
}

a {
  color: var(--color-accent);
  text-decoration: none;
}

a:hover { text-decoration: underline; }

/* ============================================
   LOADING SCREEN
   ============================================ */
.loading-screen {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--color-bg);
  gap: 16px;
  color: var(--color-text-soft);
}

.loading-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid var(--color-border);
  border-top-color: var(--color-accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ============================================
   LOGIN PAGE
   ============================================ */
.login-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.login-card {
  width: 100%;
  max-width: 420px;
  background: white;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 40px;
}

.login-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.login-brand-dot {
  width: 10px;
  height: 10px;
  background: var(--color-accent);
  border-radius: 50%;
}

.login-brand-name {
  font-weight: 500;
  font-size: 14px;
}

.login-brand-tag {
  font-size: 10px;
  background: var(--color-bg);
  color: var(--color-text-muted);
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.login-title {
  font-size: 24px;
  font-weight: 500;
  margin: 30px 0 8px;
}

.login-subtitle {
  color: var(--color-text-muted);
  margin-bottom: 30px;
  font-size: 13px;
}

.login-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.login-field label {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
  margin-bottom: 6px;
  font-weight: 500;
}

.login-field input {
  width: 100%;
  padding: 12px;
  font-size: 14px;
}

.login-error {
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #991b1b;
  padding: 10px 14px;
  border-radius: var(--radius-md);
  font-size: 12px;
}

.login-submit {
  background: var(--color-accent);
  color: white;
  padding: 12px;
  border-radius: var(--radius-md);
  font-weight: 500;
  font-size: 14px;
  cursor: pointer;
  transition: opacity 0.15s;
  margin-top: 8px;
}

.login-submit:hover { opacity: 0.9; }
.login-submit:disabled { opacity: 0.5; cursor: wait; }

.login-footer {
  margin-top: 30px;
  text-align: center;
  font-size: 11px;
  color: var(--color-text-soft);
}

/* ============================================
   DASHBOARD
   ============================================ */
.dashboard-wrap {
  min-height: 100vh;
  padding: 40px 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.dashboard-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 30px;
  flex-wrap: wrap;
  gap: 16px;
}

.dashboard-brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

.dashboard-actions {
  display: flex;
  gap: 10px;
  align-items: center;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: white;
  color: var(--color-text);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
}

.btn:hover {
  border-color: var(--color-border-strong);
  background: var(--color-surface-alt);
  text-decoration: none;
}

.btn-primary {
  background: var(--color-accent);
  color: white;
  border-color: var(--color-accent);
}

.btn-primary:hover {
  background: #000;
  opacity: 0.9;
}

.btn-ghost {
  border-color: transparent;
  background: transparent;
}

.btn-secondary {
  background: white;
  border-color: var(--color-border);
}

.dashboard-title {
  font-size: 28px;
  font-weight: 500;
  margin-bottom: 8px;
}

.dashboard-subtitle {
  color: var(--color-text-muted);
  margin-bottom: 30px;
}

.onboardings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px;
}

.onboarding-card {
  background: white;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 20px;
  transition: all 0.15s;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.onboarding-card:hover {
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.onboarding-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.onboarding-card-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 2px;
}

.onboarding-card-company {
  font-size: 12px;
  color: var(--color-text-muted);
}

.onboarding-card-status {
  font-size: 10px;
  padding: 3px 8px;
  border-radius: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 500;
  flex-shrink: 0;
}

.status-draft { background: #f3f4f6; color: #6b7280; }
.status-in_progress { background: #fef3c7; color: #92400e; }
.status-completed { background: #d1fae5; color: #065f46; }

.onboarding-card-meta {
  display: flex;
  gap: 14px;
  font-size: 11px;
  color: var(--color-text-soft);
  margin-top: 6px;
  padding-top: 12px;
  border-top: 1px solid var(--color-border);
}

.empty-state {
  text-align: center;
  padding: 60px 20px;
  background: white;
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-lg);
}

.empty-state h2 {
  font-size: 18px;
  font-weight: 500;
  margin-bottom: 8px;
}

.empty-state p {
  color: var(--color-text-muted);
  margin-bottom: 20px;
}

/* ============================================
   CLAUDE-PROMPT-TEMPLATE BOX
   ============================================ */
.claude-template-box {
  margin-top: 50px;
  background: white;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

/* Zweite Prompt-Box direkt unter der ersten: weniger Abstand (Plattform-Erweiterung) */
.claude-template-box + .claude-template-box {
  margin-top: 12px;
}

.claude-template-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
}

.claude-template-toggle:hover {
  background: var(--color-surface-alt);
}

.claude-template-icon {
  font-size: 10px;
  color: var(--color-text-soft);
  width: 12px;
  flex-shrink: 0;
}

.claude-template-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text);
  flex-shrink: 0;
}

.claude-template-hint {
  font-size: 11px;
  color: var(--color-text-soft);
  margin-left: auto;
  font-weight: 400;
}

.claude-template-body {
  padding: 20px 24px 24px 24px;
  border-top: 1px solid var(--color-border);
  background: var(--color-surface-alt);
}

.claude-template-instructions {
  margin-bottom: 16px;
  font-size: 12px;
  color: var(--color-text-muted);
  line-height: 1.6;
}

.claude-template-instructions p {
  margin-bottom: 8px;
  color: var(--color-text);
}

.claude-template-instructions ol {
  list-style: decimal;
  padding-left: 20px;
}

.claude-template-instructions li {
  margin-bottom: 4px;
}

.claude-template-code-wrap {
  position: relative;
  background: white;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.claude-template-copy-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  background: white;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 6px 12px;
  font-size: 11px;
  font-weight: 500;
  color: var(--color-text);
  cursor: pointer;
  z-index: 2;
  transition: all 0.15s;
}

.claude-template-copy-btn:hover {
  background: var(--color-accent);
  color: white;
  border-color: var(--color-accent);
}

.claude-template-copy-btn.copied {
  background: var(--color-group-3);
  color: white;
  border-color: var(--color-group-3);
}

.claude-template-code {
  font-family: 'JetBrains Mono', 'Courier New', monospace;
  font-size: 11px;
  line-height: 1.55;
  color: var(--color-text);
  padding: 16px 80px 16px 16px;
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 400px;
  overflow-y: auto;
  background: white;
}

@media (max-width: 720px) {
  .claude-template-hint {
    display: none;
  }
}

/* ============================================
   MODAL
   ============================================ */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
}

.modal {
  background: white;
  border-radius: var(--radius-lg);
  max-width: 600px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
}

.modal-header {
  padding: 20px 24px;
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.modal-title {
  font-size: 18px;
  font-weight: 500;
}

.modal-close {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: var(--color-text-soft);
}

.modal-body {
  padding: 24px;
}

.modal-footer {
  padding: 16px 24px;
  border-top: 1px solid var(--color-border);
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

.form-row {
  margin-bottom: 16px;
}

.form-row label {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: var(--color-text-muted);
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.form-row input,
.form-row textarea {
  width: 100%;
  font-size: 14px;
}

.form-row textarea {
  min-height: 80px;
  resize: vertical;
}

.form-required::after {
  content: '*';
  color: var(--color-group-1);
  margin-left: 4px;
}

/* Icons */
.icon {
  width: 14px;
  height: 14px;
  stroke-width: 2;
}
  * { margin: 0; padding: 0; box-sizing: border-box; }

  :root {
    --color-bg: #f7f7f5;
    --color-surface: #ffffff;
    --color-surface-alt: #fafaf8;
    --color-border: #e5e5e2;
    --color-border-strong: #d4d4d0;
    --color-text: #1a1a1a;
    --color-text-muted: #6b6b68;
    --color-text-soft: #9a9a96;
    --color-accent: #1a1a1a;

    --color-group-1: #dc2626;
    --color-group-1-soft: #fef2f2;
    --color-group-2: #eab308;
    --color-group-2-soft: #fefce8;
    --color-group-3: #16a34a;
    --color-group-3-soft: #f0fdf4;
    --color-group-check: #6366f1;
    --color-group-check-soft: #eef2ff;
    --color-group-none: #d4d4d0;

    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.08);

    --font-display: 'Poppins', sans-serif;
    --font-mono: 'JetBrains Mono', monospace;
  }

  body {
    font-family: var(--font-display);
    background: var(--color-bg);
    color: var(--color-text);
    min-height: 100vh;
    overflow: hidden;
  }

  .app-shell {
    display: flex;
    flex-direction: column;
    height: 100vh;
  }

  /* Top Bar */
  .top-bar {
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    padding: 14px 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
  }

  .brand {
    display: flex; align-items: center; gap: 10px;
    font-weight: 500; font-size: 15px;
  }

  .brand-dot {
    width: 8px; height: 8px;
    background: var(--color-accent); border-radius: 50%;
  }

  .brand-tag {
    font-size: 11px; font-weight: 400;
    color: var(--color-text-muted);
    background: var(--color-surface-alt);
    padding: 3px 8px; border-radius: var(--radius-sm);
  }

  .top-bar-actions {
    display: flex; align-items: center; gap: 12px;
    flex-wrap: nowrap;
  }

  .top-bar-actions > .btn {
    flex-shrink: 0;
  }

  .save-indicator {
    font-size: 12px; color: var(--color-text-muted);
    display: flex; align-items: center; gap: 6px;
    /* Fester Platz, damit der Text-Wechsel zwischen "Speichert..." und
       "Gespeichert" nicht die nachfolgenden Buttons hin- und herschiebt. */
    min-width: 110px;
    white-space: nowrap;
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
  }

  /* Kompakter LIVE-Badge: signalisiert dass die Kunden-Ansicht verbunden ist
     und Updates empfängt. Klein und ruhig damit nichts in der Toolbar wackelt. */
  .live-indicator {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 9px 4px 7px;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 999px;
    color: #15803d;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
    flex-shrink: 0;
    line-height: 1;
  }

  .live-indicator-icon {
    flex-shrink: 0;
    color: #15803d;
  }

  .live-indicator-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #16a34a;
    flex-shrink: 0;
    box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.55);
    animation: live-indicator-pulse 1.6s ease-in-out infinite;
  }

  .live-indicator-label {
    font-family: inherit;
  }

  @keyframes live-indicator-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.55); }
    70%  { box-shadow: 0 0 0 5px rgba(22, 163, 74, 0); }
    100% { box-shadow: 0 0 0 0 rgba(22, 163, 74, 0); }
  }

  .save-dot {
    width: 6px; height: 6px;
    background: var(--color-group-3); border-radius: 50%;
    animation: pulse 2s ease-in-out infinite;
  }

  @keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
  }

  /* Stepper */
  .stepper {
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    padding: 16px 28px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
  }

  .step {
    display: flex; align-items: center; gap: 10px;
    cursor: pointer; transition: opacity 0.2s;
  }

  .step:hover { opacity: 0.7; }

  .step-number {
    width: 26px; height: 26px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 500;
    background: var(--color-border); color: var(--color-text-muted);
    transition: all 0.2s;
  }

  .step.active .step-number {
    background: var(--color-accent); color: white;
  }

  .step-label {
    font-size: 13px; font-weight: 500;
    color: var(--color-text-muted);
  }

  .step.active .step-label { color: var(--color-text); }

  .step-divider {
    width: 60px; height: 1px;
    background: var(--color-border); margin: 0 14px;
  }

  /* Client Bar
     Dezenter Streifen oben der per Klick aus- und eingeklappt werden kann.
     Im eingeklappten Zustand: nur eine Zeile mit Firma · Ansprechpartner und einem Chevron.
     Im ausgeklappten Zustand: alle Felder sichtbar.
  */
  .client-bar {
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    flex-shrink: 0;
    transition: padding 0.22s ease;
  }

  /* Eingeklappter Zustand */
  .client-bar.collapsed {
    padding: 0 16px;
  }
  .client-bar.collapsed .client-info {
    display: none;
  }
  .client-bar.collapsed .client-bar-toggle {
    width: 100%;
    justify-content: space-between;
  }

  /* Ausgeklappter Zustand */
  .client-bar:not(.collapsed) {
    padding: 10px 24px;
  }
  .client-bar:not(.collapsed) .client-bar-toggle {
    margin-right: 16px;
    padding-right: 16px;
    border-right: 1px solid var(--color-border);
  }
  .client-bar:not(.collapsed) .client-bar-chevron {
    transform: rotate(180deg);
  }

  /* Toggle-Zeile (immer sichtbar) */
  .client-bar-toggle {
    background: none;
    border: none;
    padding: 8px 0;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-family: inherit;
    font-size: 12px;
    color: var(--color-text-soft);
    transition: color 0.15s ease;
  }
  .client-bar-toggle:hover {
    color: var(--color-text-muted);
  }

  .client-bar-summary {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
  }

  .client-bar-icon {
    flex-shrink: 0;
    opacity: 0.6;
  }

  .client-bar-summary-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 320px;
  }

  .client-bar-chevron {
    flex-shrink: 0;
    opacity: 0.5;
    transition: transform 0.22s ease;
  }
  .client-bar-toggle:hover .client-bar-chevron {
    opacity: 0.8;
  }

  .client-info {
    display: flex;
    align-items: center;
    gap: 22px;
    flex: 1;
  }

  .client-field {
    display: flex;
    flex-direction: column;
    gap: 1px;
  }

  .client-field-label {
    font-size: 9.5px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-soft);
    font-weight: 500;
    opacity: 0.7;
  }

  .client-field-value {
    font-size: 12px;
    font-weight: 500;
    color: var(--color-text-muted);
  }

  /* Bearbeiten-Button: dezent ohne Border */
  .client-bar-edit {
    margin-left: auto;
    background: none;
    border: none;
    color: var(--color-text-soft);
    font-family: inherit;
    font-size: 11.5px;
    font-weight: 500;
    cursor: pointer;
    padding: 6px 10px;
    border-radius: 6px;
    transition: background 0.15s ease, color 0.15s ease;
  }
  .client-bar-edit:hover {
    background: var(--color-surface-alt);
    color: var(--color-text);
  }

  /* Main Layout */
  .main-content {
    flex: 1;
    display: flex;
    overflow: hidden;
  }

  .step-content {
    display: none;
    flex: 1;
    overflow: hidden;
  }

  .step-content.active {
    display: flex;
  }

  /* Step 2 nutzt grid intern, daher muss der Container block sein
     statt flex, damit das Grid sich entfalten kann. */
  #step-2.step-content.active {
    display: block;
    overflow: auto;
  }

  /* Step 1: Three Panel Editor */
  .editor-layout {
    display: grid;
    grid-template-columns: var(--panel-left-width, 280px) 1fr var(--panel-right-width, 300px);
    width: 100%;
    height: 100%;
    transition: grid-template-columns 0.25s ease;
    position: relative;
  }

  .editor-layout.panel-left-collapsed {
    --panel-left-width: 0px;
  }

  .editor-layout.panel-right-collapsed {
    --panel-right-width: 0px;
  }

  .editor-panel {
    background: var(--color-surface);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--color-border);
    position: relative;
    transition: opacity 0.2s ease;
    min-width: 0;
  }

  /* Wenn collapsed: Inhalt unsichtbar, nicht klickbar */
  .editor-layout.panel-left-collapsed .editor-panel-left {
    opacity: 0;
    pointer-events: none;
  }

  .editor-layout.panel-right-collapsed .editor-panel-right {
    opacity: 0;
    pointer-events: none;
  }

  /* ============================================
     PANEL TOGGLE-BUTTONS
     Liegen ABSOLUT im editor-layout, nicht im Panel selbst.
     Position folgt der Panel-Breite via CSS-Variable.
     ============================================ */
  .panel-collapse-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 22px;
    height: 56px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    color: var(--color-text-muted);
    cursor: pointer;
    z-index: 30;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: left 0.25s ease, right 0.25s ease, background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
    box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.06);
  }

  .panel-collapse-btn:hover {
    background: var(--color-text);
    color: white;
    border-color: var(--color-text);
    box-shadow: 2px 2px 12px rgba(0, 0, 0, 0.15);
  }

  .panel-collapse-btn svg {
    transition: transform 0.25s ease;
  }

  /* Linker Button: position folgt linker Panel-Breite */
  .panel-collapse-btn-left {
    left: calc(var(--panel-left-width, 280px) - 1px);
    border-radius: 0 8px 8px 0;
    border-left: none;
  }

  /* Rechter Button: position folgt rechter Panel-Breite */
  .panel-collapse-btn-right {
    right: calc(var(--panel-right-width, 300px) - 1px);
    border-radius: 8px 0 0 8px;
    border-right: none;
    box-shadow: -2px 2px 8px rgba(0, 0, 0, 0.06);
  }

  .panel-collapse-btn-right:hover {
    box-shadow: -2px 2px 12px rgba(0, 0, 0, 0.15);
  }

  /* Pfeil drehen wenn collapsed */
  .editor-layout.panel-left-collapsed .panel-collapse-btn-left svg {
    transform: rotate(180deg);
  }

  .editor-layout.panel-right-collapsed .panel-collapse-btn-right svg {
    transform: rotate(180deg);
  }

  /* Responsive: bei schmalen Screens sind Panels eh schon klein */
  @media (max-width: 1100px) {
    .editor-layout {
      grid-template-columns: var(--panel-left-width, 240px) 1fr var(--panel-right-width, 260px);
    }
    .panel-collapse-btn-left {
      left: calc(var(--panel-left-width, 240px) - 1px);
    }
    .panel-collapse-btn-right {
      right: calc(var(--panel-right-width, 260px) - 1px);
    }
  }

  @media (max-width: 900px) {
    .editor-layout {
      grid-template-columns: var(--panel-left-width, 220px) 1fr var(--panel-right-width, 240px);
    }
    .panel-collapse-btn-left {
      left: calc(var(--panel-left-width, 220px) - 1px);
    }
    .panel-collapse-btn-right {
      right: calc(var(--panel-right-width, 240px) - 1px);
    }
  }

  .editor-panel:last-child {
    border-right: none;
    border-left: 1px solid var(--color-border);
  }

  .panel-header {
    padding: 14px 18px;
    border-bottom: 1px solid var(--color-border);
    display: flex; align-items: center; justify-content: space-between;
    flex-shrink: 0;
  }

  .panel-title {
    font-size: 12px; font-weight: 500;
    text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--color-text-muted);
  }

  .panel-body {
    padding: 16px 18px;
    flex: 1; overflow-y: auto;
  }

  /* Import Panel */
  .import-textarea {
    width: 100%; min-height: 280px;
    padding: 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-family: var(--font-mono);
    font-size: 12px; line-height: 1.6;
    resize: vertical;
    background: var(--color-surface-alt);
    color: var(--color-text);
  }

  .import-textarea:focus {
    outline: none;
    border-color: var(--color-accent);
    background: var(--color-surface);
  }

  .import-divider {
    margin: 14px 0; text-align: center;
    color: var(--color-text-soft); font-size: 11px;
    text-transform: uppercase; letter-spacing: 0.08em;
    position: relative;
  }

  .import-divider::before, .import-divider::after {
    content: ''; position: absolute; top: 50%;
    width: calc(50% - 24px); height: 1px;
    background: var(--color-border);
  }

  .import-divider::before { left: 0; }
  .import-divider::after { right: 0; }

  .file-upload {
    border: 1px dashed var(--color-border-strong);
    border-radius: var(--radius-md);
    padding: 16px;
    text-align: center;
    cursor: pointer; transition: all 0.2s;
    background: var(--color-surface-alt);
  }

  .file-upload:hover {
    border-color: var(--color-accent);
    background: var(--color-surface);
  }

  .file-upload-text {
    font-size: 11px; color: var(--color-text-muted);
  }

  /* Canvas Container */
  .canvas-container {
    flex: 1;
    position: relative;
    overflow: hidden;
    background-color: #f9f9f7;
    background-image:
      radial-gradient(circle at 1px 1px, #e2e2dd 1px, transparent 1.5px);
    background-size: 28px 28px;
    background-position: 0 0;
    cursor: grab;
  }

  .canvas-container.panning {
    cursor: grabbing;
  }

  .canvas-container.connecting {
    cursor: crosshair;
  }

  .canvas-inner {
    position: absolute;
    top: 0; left: 0;
    transform-origin: 0 0;
    will-change: transform;
  }

  /* Canvas Controls */
  .canvas-controls {
    position: absolute;
    bottom: 16px; right: 16px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    display: flex; flex-direction: column;
    overflow: hidden;
    z-index: 10;
  }

  .canvas-control-btn {
    width: 36px; height: 36px;
    background: none; border: none;
    cursor: pointer; font-size: 14px;
    color: var(--color-text-muted);
    transition: all 0.15s;
    display: flex; align-items: center; justify-content: center;
    border-bottom: 1px solid var(--color-border);
  }

  .canvas-control-btn:last-child {
    border-bottom: none;
  }

  .canvas-control-btn:hover {
    background: var(--color-surface-alt);
    color: var(--color-text);
  }

  .zoom-level {
    position: absolute;
    bottom: 16px; left: 16px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 6px 12px;
    font-size: 11px; font-weight: 500;
    color: var(--color-text-muted);
    box-shadow: var(--shadow-sm);
    z-index: 10;
  }

  /* Layout Toggle */
  .layout-toggle {
    position: absolute;
    top: 16px; right: 16px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    box-shadow: var(--shadow-md);
    padding: 5px;
    display: flex;
    align-items: center;
    gap: 2px;
    z-index: 10;
    font-family: var(--font-display);
  }

  /* Vertikaler Trenner zwischen Button-Gruppen */
  .toolbar-divider {
    width: 1px;
    height: 18px;
    background: var(--color-border);
    margin: 0 4px;
    flex-shrink: 0;
  }

  /* Icon-Button: nutzt grid-template-columns Trick für smooth width-Animation.
     Grid kann nativ von 0fr zu 1fr animieren, was zu einer wirklich flüssigen Expand-Animation führt. */
  .icon-btn {
    background: none;
    border: none;
    padding: 0 8px;
    cursor: pointer;
    color: var(--color-text-muted);
    font-family: inherit;
    font-size: 12px;
    font-weight: 500;
    display: grid;
    grid-template-columns: 16px 0fr;
    align-items: center;
    gap: 0px;
    height: 32px;
    border-radius: 999px;
    overflow: hidden;
    white-space: nowrap;
    transition: grid-template-columns 0.28s cubic-bezier(0.32, 0.72, 0, 1),
                gap 0.28s cubic-bezier(0.32, 0.72, 0, 1),
                padding 0.28s cubic-bezier(0.32, 0.72, 0, 1),
                background 0.18s ease,
                color 0.18s ease;
    user-select: none;
  }

  .icon-btn svg {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
  }

  /* Label sitzt in der zweiten Grid-Spalte, die im Default 0fr (= 0px) breit ist.
     Bei Hover wird sie 1fr breit, was vom Browser smooth zum natürlichen Inhalt animiert wird. */
  .icon-btn-label {
    min-width: 0;
    overflow: hidden;
    opacity: 0;
    transition: opacity 0.2s ease 0.06s;
  }

  /* Hover: Grid-Spalte für Label expandiert smooth */
  .icon-btn:not(:disabled):hover {
    background: var(--color-surface-alt);
    color: var(--color-text);
    grid-template-columns: 16px 1fr;
    gap: 7px;
    padding-right: 14px;
  }

  .icon-btn:not(:disabled):hover .icon-btn-label {
    opacity: 1;
  }

  /* Active-Zustand: Label immer sichtbar */
  .icon-btn.active {
    background: var(--color-text);
    color: white;
    grid-template-columns: 16px 1fr;
    gap: 7px;
    padding-right: 14px;
  }
  .icon-btn.active .icon-btn-label {
    opacity: 1;
  }

  /* Datenfluss-Button (Plattform): aktiver Zustand violett, passend zur
     Farbe der nutzt-Kanten, damit der Bezug zum Datenfluss klar ist. */
  .ow-onboarding-dataflow-btn.active {
    background: #818cf8;
    color: white;
  }
  .ow-onboarding-dataflow-btn.active .icon-btn-label {
    opacity: 1;
  }
  /* WICHTIG: Hover auf active darf die weiße Schrift NICHT überschreiben */
  .icon-btn.active:hover {
    background: var(--color-text);
    color: white;
  }

  /* Primary-Variante: + Neue Seite (immer ausgeklappt mit dunklem Hintergrund) */
  .icon-btn-primary {
    background: var(--color-text);
    color: white;
    grid-template-columns: 16px 1fr;
    gap: 7px;
    padding-right: 14px;
  }
  .icon-btn-primary .icon-btn-label {
    opacity: 1;
  }
  .icon-btn-primary:not(:disabled):hover {
    background: #1a1a1a;
    color: white;
  }

  /* Danger-Variante: Hover wird rot */
  .icon-btn-danger:not(:disabled):hover {
    background: #fee2e2;
    color: #dc2626;
  }

  /* Disabled (z.B. Undo wenn keine History) */
  .icon-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
  }

  /* Selection-Mode aktiv: Indigo-Akzent (Override für die active-Klasse) */
  #selection-mode-btn.active {
    background: var(--color-accent);
    color: white;
  }
  #selection-mode-btn.active:hover {
    background: var(--color-accent);
    color: white;
  }
  #selection-mode-btn.active svg { stroke: white; }

  /* Help text on canvas */
  .canvas-help {
    position: absolute;
    top: 16px; left: 16px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 8px 12px;
    font-size: 11px;
    color: var(--color-text-muted);
    box-shadow: var(--shadow-sm);
    z-index: 10;
    display: flex;
    gap: 14px;
    align-items: center;
  }

  .canvas-help kbd {
    background: var(--color-surface-alt);
    border: 1px solid var(--color-border);
    border-radius: 3px;
    padding: 1px 5px;
    font-family: var(--font-mono);
    font-size: 10px;
  }

  /* Node */
  .node {
    position: absolute;
    background: var(--color-surface);
    border: 1.5px solid var(--color-border-strong);
    border-radius: 10px;
    padding: 11px 14px;
    min-width: 170px;
    max-width: 220px;
    cursor: grab;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease, background 0.15s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02);
    user-select: none;
  }

  .node.dragging {
    cursor: grabbing;
    z-index: 100;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12), 0 4px 8px rgba(0, 0, 0, 0.06);
    transition: none;
    transform: rotate(-0.5deg);
  }

  .node:hover {
    border-color: var(--color-accent);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.04);
    transform: translateY(-1px);
  }

  .node.selected {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(26, 26, 26, 0.12), 0 4px 12px rgba(0, 0, 0, 0.08);
    transform: translateY(-1px);
  }

  /* Multi-Selection Highlight - dezenter Indigo-Rahmen */
  .node.multi-selected {
    border-color: #6366f1;
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.22), 0 4px 10px rgba(99, 102, 241, 0.08);
  }
  .node.multi-selected.selected {
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.35), 0 4px 12px rgba(0, 0, 0, 0.08);
  }

  .node.root {
    background: transparent;
    color: var(--color-text-muted);
    border: 1.5px dashed var(--color-border-strong);
    box-shadow: none;
  }

  .node.root .node-title {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 500;
  }

  .node.root .node-note-indicator {
    color: var(--color-text-soft);
  }

  /* ============================================
     STARTSEITE / HOME - der zentrale Anker
     ============================================ */
  .node.home {
    background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 50%, #1a1a1a 100%);
    color: white;
    border: 2px solid #000;
    border-radius: 12px;
    padding: 16px 22px 16px 48px;
    min-width: 200px;
    box-shadow:
      0 10px 30px rgba(0, 0, 0, 0.22),
      0 4px 12px rgba(0, 0, 0, 0.12),
      0 0 0 1px rgba(255, 255, 255, 0.06) inset;
    position: relative;
  }

  .node.home::before {
    content: '';
    position: absolute;
    left: 16px;
    top: 50%;
    width: 22px;
    height: 22px;
    margin-top: -11px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9.5L12 3l9 6.5V21H3V9.5z'/%3E%3Cpath d='M9 21V12h6v9'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0.95;
  }

  .node.home::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 14px;
    border: 1px solid rgba(26, 26, 26, 0.08);
    pointer-events: none;
    z-index: -1;
  }

  .node.home .node-title {
    font-weight: 600;
    font-size: 14px;
    letter-spacing: -0.01em;
  }

  .node.home .node-note-indicator {
    color: rgba(255, 255, 255, 0.65);
    font-size: 10px;
    margin-top: 3px;
  }

  .node.home .node-level-badge {
    display: none;
  }

  .node.home:hover {
    transform: translateY(-2px);
    box-shadow:
      0 14px 36px rgba(0, 0, 0, 0.28),
      0 6px 16px rgba(0, 0, 0, 0.14),
      0 0 0 1px rgba(255, 255, 255, 0.08) inset;
  }

  .node.home.selected {
    box-shadow:
      0 0 0 3px rgba(99, 102, 241, 0.35),
      0 10px 30px rgba(0, 0, 0, 0.22);
  }

  /* ============================================
     HIERARCHIE-EBENEN - klar visuell differenziert
     L1 = Hauptseiten, kräftig
     L2 = Unterseiten, mittel
     L3 = Detail, dezenter mit Indigo-Akzent
     L4 = Tiefste Ebene, am dezentesten mit Lila-Akzent
     ============================================ */
  .node.level-1 {
    background: var(--color-surface);
    border-width: 2px;
    border-color: #b8b8b3;
    padding: 13px 18px;
    min-width: 170px;
    box-shadow:
      0 2px 6px rgba(0, 0, 0, 0.05),
      0 1px 3px rgba(0, 0, 0, 0.03);
  }

  .node.level-1 .node-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text);
  }

  .node.level-1:hover {
    border-color: var(--color-accent);
    box-shadow:
      0 6px 16px rgba(0, 0, 0, 0.1),
      0 2px 4px rgba(0, 0, 0, 0.04);
  }

  .node.level-2 {
    background: #fafaf8;
    border-width: 1.5px;
    border-color: #c8c8c4;
    border-left-width: 3px;
    border-left-color: #6b6b68;
  }

  .node.level-2 .node-title {
    font-size: 12px;
    font-weight: 500;
  }

  .node.level-3 {
    background: #f2f3fa;
    border-width: 1.5px;
    border-color: #b5b8d0;
    border-left-width: 3px;
    border-left-color: #6366f1;
  }

  .node.level-3 .node-title {
    font-size: 11.5px;
    font-weight: 500;
    color: #3b3a55;
  }

  .node.level-4 {
    background: #faf4ff;
    border-width: 1.5px;
    border-color: #e0c9f6;
    border-left-width: 3px;
    border-left-color: #a855f7;
  }

  .node.level-4 .node-title {
    font-size: 11px;
    font-weight: 500;
    color: #4a3a5f;
  }

  .node-level-badge {
    position: absolute;
    top: -8px;
    left: 10px;
    font-size: 9px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 10px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: var(--color-surface);
    border: 1.5px solid var(--color-border-strong);
    color: var(--color-text-muted);
    pointer-events: none;
    line-height: 1.4;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  }

  .node.level-1 .node-level-badge {
    background: #1a1a1a;
    border-color: #1a1a1a;
    color: white;
  }

  .node.level-2 .node-level-badge {
    background: #f5f5f3;
    border-color: #9a9a96;
    color: #4a4a48;
  }

  .node.level-3 .node-level-badge {
    background: #6366f1;
    border-color: #4f46e5;
    color: white;
  }

  .node.level-4 .node-level-badge {
    background: #a855f7;
    border-color: #9333ea;
    color: white;
  }

  .node.connect-source {
    border-color: var(--color-group-check);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2), 0 4px 12px rgba(99, 102, 241, 0.15);
  }

  /* ============================================
     LEGAL / PFLICHTSEITEN
     Dezent, separat vom Hauptstrang, kleiner
     ============================================ */
  .node.legal {
    background: transparent;
    border: 1px dashed #c8c8c4;
    border-radius: 14px;
    padding: 6px 12px 6px 28px;
    min-width: 90px;
    max-width: 140px;
    box-shadow: none;
    opacity: 0.7;
    position: relative;
  }

  .node.legal::before {
    content: '';
    position: absolute;
    left: 10px;
    top: 50%;
    width: 12px;
    height: 12px;
    margin-top: -6px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239a9a96' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpolyline points='14 2 14 8 20 8'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0.8;
  }

  .node.legal:hover {
    opacity: 1;
    border-color: var(--color-text-muted);
    border-style: solid;
    background: var(--color-surface);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    transform: none;
  }

  .node.legal.selected {
    opacity: 1;
    border-color: var(--color-accent);
    border-style: solid;
    background: var(--color-surface);
    box-shadow: 0 0 0 3px rgba(26, 26, 26, 0.08);
  }

  .node.legal .node-title {
    font-size: 10.5px;
    font-weight: 500;
    color: var(--color-text-muted);
    letter-spacing: 0.01em;
  }

  /* Kein L-Badge bei Legal-Pages */
  .node.legal .node-level-badge {
    display: none;
  }

  .node.legal .node-note-indicator,
  .node.legal .node-features-list {
    display: none;
  }

  /* Anker-Punkte trotzdem da damit man verbinden kann */
  .node.legal .node-handle {
    width: 8px;
    height: 8px;
  }


  /* ============================================
     PLATTFORM-ERWEITERUNG: Knotentypen
     module  = Funktionseinheit einer App (Karte + Akzentkante + Wuerfel-Icon)
     dataObject = geteilter Datensatz (Datenbank-Look, Zylinder-Icon, ruhig/grau)
     Beide additiv: normale Seiten (kein nodeType) bleiben unveraendert.
     ============================================ */

  /* --- MODUL --- */
  /* Karte bleibt, links eine kraeftige Akzentkante, Platz fuer das Wuerfel-Icon. */
  .node.node-type-module {
    border-left-width: 4px;
    border-left-color: var(--color-text);
    padding-left: 30px;
    position: relative;
  }

  .node.node-type-module .node-header {
    position: relative;
  }

  /* Wuerfel-Icon (Baustein) links im Titelbereich als inline-SVG-Data-URI */
  .node.node-type-module::before {
    content: '';
    position: absolute;
    left: 9px;
    top: 13px;
    width: 13px;
    height: 13px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23525252' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z'/%3E%3Cpolyline points='3.27 6.96 12 12.01 20.73 6.96'/%3E%3Cline x1='12' y1='22.08' x2='12' y2='12'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0.85;
    pointer-events: none;
  }

  /* Modul-Knoten tragen keine L-Ebene (sie sind Funktionseinheiten im Zugang) */
  .node.node-type-module .node-level-badge {
    display: none;
  }

  /* --- DATENOBJEKT --- */
  /* Kategorisch anders: ruhige graue Flaeche, dickere Kontur, Datenbank-Zylinder.
     Soll als "Datenebene" lesbar sein, nicht als Bildschirm. */
  .node.node-type-dataobject {
    background: #f4f4f5;
    border: 1.5px solid #a1a1aa;
    border-radius: 12px;
    padding-left: 30px;
    position: relative;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 1px 4px rgba(0, 0, 0, 0.05);
  }

  /* Zylinder-Icon (Datenbank) als inline-SVG-Data-URI */
  .node.node-type-dataobject::before {
    content: '';
    position: absolute;
    left: 9px;
    top: 12px;
    width: 13px;
    height: 13px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2371717a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cellipse cx='12' cy='5' rx='9' ry='3'/%3E%3Cpath d='M21 12c0 1.66-4 3-9 3s-9-1.34-9-3'/%3E%3Cpath d='M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0.9;
    pointer-events: none;
  }

  .node.node-type-dataobject .node-title {
    font-weight: 500;
    color: #3f3f46;
    letter-spacing: 0.01em;
  }

  /* Datenobjekte tragen keine L-Ebene */
  .node.node-type-dataobject .node-level-badge {
    display: none;
  }

  .node.node-type-dataobject:hover {
    border-color: #71717a;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 3px 10px rgba(0, 0, 0, 0.08);
  }

  .node.node-type-dataobject.selected {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(26, 26, 26, 0.08);
  }


  .node-title {
    font-size: 12px;
    font-weight: 500;
    line-height: 1.35;
    pointer-events: none;
    word-break: break-word;
  }

  .node-note-indicator {
    margin-top: 5px;
    font-size: 10px;
    color: var(--color-text-soft);
    pointer-events: none;
    line-height: 1.3;
  }

  /* Feature-Liste: einzelne Tags untereinander, max 3 sichtbar */
  .node-features-list {
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    pointer-events: none;
  }

  .node-feature-tag {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 10px;
    color: var(--color-text-muted);
    line-height: 1.3;
    padding: 2px 0;
  }

  .node-feature-dot {
    flex-shrink: 0;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--color-group-check);
    opacity: 0.7;
  }

  .node-feature-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
  }

  .node-feature-more {
    margin-top: 2px;
    font-size: 9.5px;
    color: var(--color-text-soft);
    font-style: italic;
    cursor: help;
    pointer-events: auto;
  }

  .node.home .node-feature-dot {
    background: rgba(255, 255, 255, 0.5);
  }
  .node.home .node-feature-tag {
    color: rgba(255, 255, 255, 0.75);
  }
  .node.home .node-feature-more {
    color: rgba(255, 255, 255, 0.6);
  }

  .node.root .node-note-indicator {
    color: rgba(255, 255, 255, 0.7);
  }

  /* Connection handles on node edges */
  .node-handle {
    position: absolute;
    width: 10px;
    height: 10px;
    background: var(--color-group-check);
    border: 2px solid white;
    border-radius: 50%;
    opacity: 0;
    transition: opacity 0.15s ease, transform 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
    cursor: crosshair;
    z-index: 5;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
  }

  .node:hover .node-handle,
  .node.selected .node-handle {
    opacity: 1;
  }

  .node-handle:hover,
  .node-handle.target-active {
    transform: scale(1.7);
    background: #4f46e5;
    box-shadow: 0 0 0 5px rgba(99, 102, 241, 0.25), 0 2px 6px rgba(0, 0, 0, 0.2);
  }

  /* When user is dragging a connection, show all handles on other nodes prominently */
  .canvas-container.connecting .node:not(.connect-source) .node-handle {
    opacity: 1;
    background: #c7c8e0;
  }

  .canvas-container.connecting .node:not(.connect-source) .node-handle::before {
    content: '';
    position: absolute;
    inset: -10px;
    border-radius: 50%;
  }

  .canvas-container.connecting .node:not(.connect-source) .node-handle:hover,
  .canvas-container.connecting .node:not(.connect-source) .node-handle.target-active {
    background: var(--color-group-check);
    transform: scale(1.8);
    box-shadow: 0 0 0 6px rgba(99, 102, 241, 0.25);
  }

  .node-handle.top { top: -6px; left: 50%; margin-left: -6px; }
  .node-handle.right { right: -6px; top: 50%; margin-top: -6px; }
  .node-handle.bottom { bottom: -6px; left: 50%; margin-left: -6px; }
  .node-handle.left { left: -6px; top: 50%; margin-top: -6px; }

  /* Add-Subpage Buttons direkt am Node */
  .node-add-btn {
    position: absolute;
    width: 22px;
    height: 22px;
    background: var(--color-surface);
    border: 1.5px solid var(--color-accent);
    color: var(--color-accent);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    opacity: 0;
    transition: opacity 0.15s, transform 0.15s, background 0.15s, color 0.15s;
    cursor: pointer;
    z-index: 6;
    box-shadow: var(--shadow-sm);
    padding: 0;
  }

  .node:hover .node-add-btn,
  .node.selected .node-add-btn {
    opacity: 1;
  }

  .node-add-btn:hover {
    background: var(--color-accent);
    color: white;
    transform: scale(1.1);
  }

  /* Position außerhalb des Nodes, weiter als die handles */
  .node-add-btn.top    { top: -32px; left: 50%; margin-left: -11px; }
  .node-add-btn.right  { right: -32px; top: 50%; margin-top: -11px; }
  .node-add-btn.bottom { bottom: -32px; left: 50%; margin-left: -11px; }
  .node-add-btn.left   { left: -32px; top: 50%; margin-top: -11px; }

  /* Bei Connecting-Modus die Add-Buttons ausblenden, damit sie nicht stören */
  .canvas-container.connecting .node-add-btn {
    opacity: 0 !important;
    pointer-events: none;
  }

  /* SVG layer for connections */
  .connections-svg {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    pointer-events: none;
    overflow: visible;
  }

  .connection-path {
    fill: none;
    stroke-width: 2;
    pointer-events: stroke;
    cursor: pointer;
    transition: stroke-width 0.15s ease, opacity 0.15s ease;
    stroke-linecap: round;
  }

  /* Default: zur L1 (von Home), kräftigste Linie */
  .connection-path.hierarchy {
    stroke: #6b6b68;
    stroke-width: 2;
  }

  /* Zu L2: etwas dünner */
  .connection-path.hierarchy-l2 {
    stroke: #8a8a86;
    stroke-width: 1.6;
  }

  /* Zu L3: weiterhin durchgezogen, nur etwas dünner und etwas heller */
  .connection-path.hierarchy-l3 {
    stroke: #a3a3a0;
    stroke-width: 1.4;
  }

  /* Zu L4: noch dünner und noch dezenter, aber durchgezogen */
  .connection-path.hierarchy-l4 {
    stroke: #b8b8b5;
    stroke-width: 1.2;
  }

  /* Plattform-Erweiterung: nutzt-Kante (Modul -> Datenobjekt).
     Bewusst anders als die durchgezogenen Hierarchie-Strahlen: gestrichelt und
     in einem ruhigen Blaugrau, damit "Modul nutzt Objekt" sofort von
     "Seite haengt unter Seite" unterscheidbar ist. */
  .connection-path.nutzt {
    stroke: #818cf8;
    stroke-width: 1.5;
    stroke-dasharray: 2 4;
    opacity: 0.85;
  }

  .connection-path:hover {
    stroke-width: 2.5;
    opacity: 1;
    cursor: pointer;
  }

  /* Selected connection: animierter Akzent statt drop-shadow,
     plus parallele Highlight-Linie für mehr Sichtbarkeit */
  .connection-path.selected {
    stroke: #6366f1;
    stroke-width: 2.5;
    opacity: 1;
    stroke-dasharray: 6 3;
    animation: connection-dash 0.8s linear infinite;
  }

  /* Im selektierten Zustand auch leichter Halo durch ein zweites Pfad-Element
     (per CSS gar nicht möglich, daher Schatten der subtil ist) */
  .connection-path.selected {
    filter: drop-shadow(0 1px 2px rgba(99, 102, 241, 0.35));
  }

  @keyframes connection-dash {
    to {
      stroke-dashoffset: -9;
    }
  }

  .connections-svg.editable .connection-path {
    pointer-events: stroke;
  }

  /* Mini Delete-Icon-Button für selektierte Verbindung */
  /* Delete-Icon direkt im SVG-Canvas der Mindmap.
     Skaliert und pant automatisch mit weil es Teil der Connection-Group ist. */
  .connection-delete-svg {
    color: #6b6b68;
    transition: color 0.15s ease;
  }

  .connection-delete-svg .connection-delete-bg {
    fill: #efefed;
    stroke: #d4d4d0;
    stroke-width: 1;
    transition: fill 0.15s ease, stroke 0.15s ease;
  }

  .connection-delete-svg:hover {
    color: white;
  }

  .connection-delete-svg:hover .connection-delete-bg {
    fill: #dc2626;
    stroke: #dc2626;
  }

  /* Temp drag line when creating connection */
  .temp-connection {
    stroke: var(--color-group-check);
    stroke-width: 2;
    stroke-dasharray: 4 4;
    fill: none;
    opacity: 0.7;
  }

  /* Detail Panel */
  .detail-form {
    display: flex; flex-direction: column; gap: 14px;
  }

  .form-field {
    display: flex; flex-direction: column; gap: 6px;
  }

  .form-label {
    font-size: 10px; font-weight: 500;
    text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--color-text-muted);
  }

  .form-input, .form-textarea, .form-select {
    width: 100%; padding: 9px 11px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-family: var(--font-display);
    font-size: 12px;
    background: var(--color-surface);
    color: var(--color-text);
    resize: vertical;
  }

  .form-select {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23999' stroke-width='2' stroke-linecap='round'%3e%3cpolyline points='4 6 8 10 12 6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 14px;
    padding-right: 30px;
  }

  .form-textarea { min-height: 70px; }

  .form-input:focus, .form-textarea:focus, .form-select:focus {
    outline: none;
    border-color: var(--color-accent);
  }

  .form-helper {
    font-size: 10px; color: var(--color-text-soft);
  }

  .linked-pages { display: flex; flex-direction: column; gap: 4px; }

  .linked-page {
    display: flex; align-items: center; justify-content: space-between;
    padding: 5px 8px;
    background: var(--color-group-check-soft);
    border-radius: var(--radius-sm);
    font-size: 11px;
  }

  .linked-page-remove {
    background: none; border: none;
    color: var(--color-text-muted);
    cursor: pointer; font-size: 13px;
  }

  /* Level Selector in Detail Panel and Add Modal */
  .level-selector {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
  }

  .level-btn {
    padding: 8px 4px;
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    cursor: pointer;
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 500;
    color: var(--color-text-muted);
    transition: all 0.15s;
    text-align: center;
  }

  .level-btn:hover {
    border-color: var(--color-text-muted);
  }

  .level-btn.active.l1 {
    background: white;
    border-color: var(--color-accent);
    color: var(--color-accent);
  }
  .level-btn.active.l2 {
    background: #f5f5f3;
    border-color: #6b6b68;
    color: var(--color-text);
  }
  .level-btn.active.l3 {
    background: #ecedf4;
    border-color: #6366f1;
    color: #4338ca;
  }
  .level-btn.active.l4 {
    background: #fdf4ff;
    border-color: #a855f7;
    color: #9333ea;
  }

  /* Modal */
  .modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1000;
  }

  .modal-overlay.open {
    display: flex;
  }

  .modal-box {
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    width: 90%;
    max-width: 440px;
    padding: 24px;
  }

  .modal-title {
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 16px;
  }

  .modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 20px;
  }

  /* Parent-Info im Detail-Panel */
  .parent-info-box {
    background: var(--color-surface-alt);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 10px 12px;
    font-size: 11px;
    color: var(--color-text-muted);
    line-height: 1.5;
  }

  .parent-info-box strong {
    color: var(--color-text);
    font-weight: 500;
  }

  .parent-chain {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 6px;
  }

  .parent-chain-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
  }

  .parent-chain-arrow {
    color: var(--color-text-soft);
    font-size: 10px;
  }

  /* Buttons */
  .btn {
    padding: 8px 14px;
    border-radius: var(--radius-md);
    border: 1px solid transparent;
    font-family: var(--font-display);
    font-size: 12px; font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
    display: inline-flex; align-items: center; gap: 6px;
  }

  .btn-primary {
    background: var(--color-accent); color: white;
  }

  .btn-primary:hover { background: #000; }

  .btn-secondary {
    background: var(--color-surface);
    color: var(--color-text);
    border-color: var(--color-border-strong);
  }

  .btn-secondary:hover { background: var(--color-surface-alt); }

  .btn-ghost {
    background: transparent;
    color: var(--color-text-muted);
  }

  .btn-ghost:hover {
    background: var(--color-surface-alt);
    color: var(--color-text);
  }

  /* Bottom Bar */
  .bottom-bar {
    background: var(--color-surface);
    border-top: 1px solid var(--color-border);
    padding: 12px 28px;
    display: flex; align-items: center; justify-content: space-between;
    flex-shrink: 0;
  }

  .stats {
    font-size: 12px; color: var(--color-text-muted);
    display: flex; gap: 16px;
  }

  /* Step 2 */
  .groups-layout {
    display: grid;
    grid-template-columns: 280px 1fr;
    width: 100%;
    height: 100%;
    padding: 16px;
    gap: 16px;
  }

  .unassigned-panel {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    display: flex; flex-direction: column;
  }

  .groups-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 14px;
  }

  .group-zone {
    background: var(--color-surface);
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 14px;
    overflow-y: auto;
    display: flex; flex-direction: column;
    transition: all 0.2s;
  }

  .group-zone.drag-over {
    border-color: var(--color-accent);
    background: var(--color-surface-alt);
  }

  .group-zone-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 10px; padding-bottom: 8px;
    border-bottom: 1px solid var(--color-border);
  }

  .group-zone-title {
    display: flex; align-items: center; gap: 8px;
    font-size: 13px; font-weight: 500;
  }

  .group-color-dot {
    width: 9px; height: 9px; border-radius: 50%;
  }

  .group-color-dot.g1 { background: var(--color-group-1); }
  .group-color-dot.g2 { background: var(--color-group-2); }
  .group-color-dot.g3 { background: var(--color-group-3); }
  .group-color-dot.gc { background: var(--color-group-check); }
  .group-color-dot.gn { background: var(--color-group-none); }

  .group-count {
    font-size: 11px; color: var(--color-text-muted);
    background: var(--color-surface-alt);
    padding: 2px 8px; border-radius: 10px;
  }

  .group-zone-body {
    flex: 1; display: flex; flex-direction: column; gap: 5px;
    min-height: 80px;
  }

  .group-1 .group-zone-header { border-bottom-color: var(--color-group-1); }
  .group-2 .group-zone-header { border-bottom-color: var(--color-group-2); }
  .group-3 .group-zone-header { border-bottom-color: var(--color-group-3); }
  .group-check .group-zone-header { border-bottom-color: var(--color-group-check); }

  .page-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 9px 11px;
    cursor: grab;
    transition: all 0.15s;
    display: flex; align-items: flex-start; gap: 8px;
  }

  .page-card:hover {
    border-color: var(--color-border-strong);
    box-shadow: var(--shadow-sm);
  }

  .page-card:active { cursor: grabbing; }

  .page-card-handle {
    color: var(--color-text-soft);
    font-size: 14px; line-height: 1;
    padding-top: 2px;
  }

  .page-card-content { flex: 1; min-width: 0; }

  .page-card-title {
    font-size: 12px; font-weight: 500; margin-bottom: 2px;
    display: flex;
    align-items: center;
    gap: 6px;
  }

  .page-card-level-badge {
    font-size: 8.5px;
    font-weight: 600;
    padding: 1px 5px;
    border-radius: 6px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: var(--color-surface-alt);
    border: 1px solid var(--color-border);
    color: var(--color-text-muted);
    line-height: 1.4;
    flex-shrink: 0;
  }

  .page-card-level-badge.l2 { background: #f5f5f3; border-color: #c8c8c4; }
  .page-card-level-badge.l3 { background: #ecedf4; border-color: #a5a8bd; color: #4f46e5; }
  .page-card-level-badge.l4 { background: #fdf4ff; border-color: #d8b4fe; color: #9333ea; }

  .page-card-meta {
    font-size: 10px; color: var(--color-text-soft);
    display: flex; gap: 6px; align-items: center;
    flex-wrap: wrap;
  }

  .page-card-parent {
    font-size: 9px;
    background: var(--color-surface-alt);
    padding: 1px 5px; border-radius: 8px;
  }

  .page-card-hierarchy {
    font-size: 9.5px;
    color: var(--color-text-soft);
    display: flex;
    align-items: center;
    gap: 3px;
    margin-top: 3px;
  }

  .page-card-hierarchy-arrow {
    color: var(--color-text-soft);
    font-size: 9px;
  }

  /* Wireframe Notice */
  .wireframe-notice {
    background: #fffbeb;
    border-bottom: 1px solid #fde68a;
    padding: 8px 28px;
    font-size: 11px;
    color: #92400e;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
  }

  .wireframe-notice strong {
    font-weight: 600;
  }

  /* SVG-Icons in Buttons */
  .btn .icon-svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    stroke-width: 2;
  }

  .btn-primary .icon-svg {
    color: white;
  }

  .btn-secondary .icon-svg,
  .btn-ghost .icon-svg {
    color: var(--color-text);
  }

  /* ============================================
     PRESENTER MODE - Kunden-Ansicht
     Wenn body.presenter-mode aktiv: nur Canvas + Mindmap sichtbar
     ============================================ */
  body.presenter-mode {
    overflow: hidden;
  }

  body.presenter-mode .top-bar,
  body.presenter-mode .stepper,
  body.presenter-mode .client-bar,
  body.presenter-mode .wireframe-notice,
  body.presenter-mode .editor-panel:first-child,
  body.presenter-mode .editor-panel:last-child,
  body.presenter-mode .editor-panel-left,
  body.presenter-mode .editor-panel-right,
  body.presenter-mode .panel-collapse-btn,
  body.presenter-mode .bottom-bar,
  body.presenter-mode .layout-toggle,
  body.presenter-mode .canvas-help,
  body.presenter-mode #empty-connections-hint,
  body.presenter-mode #step-2 {
    display: none !important;
  }

  /* Im Presenter-Modus: Step 1 immer aktiv, egal welcher Step gerade ausgewählt war */
  body.presenter-mode #step-1 {
    display: flex !important;
  }

  body.presenter-mode .app-shell {
    height: 100vh;
  }

  body.presenter-mode .main-content {
    overflow: hidden;
  }

  body.presenter-mode .step-content {
    display: flex !important;
  }

  body.presenter-mode .editor-layout {
    grid-template-columns: 1fr !important;
  }

  body.presenter-mode .canvas-container {
    border: none !important;
    height: 100vh;
  }

  /* Im Presenter Mode: keine Handles, keine Add-Buttons, kein Hover-Effekt */
  body.presenter-mode .node-handle,
  body.presenter-mode .node-add-btn {
    display: none !important;
  }

  body.presenter-mode .node {
    cursor: default !important;
  }

  body.presenter-mode .node:hover {
    box-shadow: var(--shadow-sm);
    transform: none;
  }

  body.presenter-mode .node.selected {
    box-shadow: var(--shadow-sm);
  }

  /* Subtile Zoom-Controls nur klein unten rechts */
  body.presenter-mode .canvas-controls {
    opacity: 0.5;
    transition: opacity 0.2s;
  }

  body.presenter-mode .canvas-controls:hover {
    opacity: 1;
  }

  body.presenter-mode .zoom-level {
    opacity: 0.5;
  }

  /* Auf iPad/Tablet etwas größere Schrift */
  @media (max-width: 1100px) {
    body.presenter-mode .node-title { font-size: 14px; }
    body.presenter-mode .node-note-indicator { font-size: 11px; }
    body.presenter-mode .node-features-list { font-size: 11px; }
    body.presenter-mode .node { padding: 12px 16px; min-width: 160px; }
    body.presenter-mode .node.home { padding: 16px 20px 16px 46px; min-width: 200px; }
  }

/* ============================================
   EDITOR-INTERNE MODALS (Add Node, Edit Client)
   ============================================ */
.ow-modal-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1000;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.ow-modal-backdrop.open {
  display: flex;
}

.ow-modal {
  background: white;
  border-radius: var(--radius-lg);
  max-width: 480px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
}

.ow-modal-header {
  padding: 18px 22px;
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.ow-modal-title {
  font-size: 15px;
  font-weight: 500;
  color: var(--color-text);
}

.ow-modal-close {
  background: none;
  border: none;
  font-size: 22px;
  cursor: pointer;
  color: var(--color-text-soft);
  line-height: 1;
  padding: 4px 8px;
  border-radius: 4px;
}

.ow-modal-close:hover {
  background: var(--color-surface-alt);
  color: var(--color-text);
}

.ow-modal-body {
  padding: 20px 22px;
}

.ow-modal-footer {
  padding: 14px 22px;
  border-top: 1px solid var(--color-border);
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

/* Level-Btn-Group im Modal (gleich wie level-selector aber andere Klasse) */
.level-btn-group {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}


/* ============================================
   CUSTOM CONFIRM DIALOG
   ============================================ */
.ow-confirm-modal {
  max-width: 440px;
}

.btn.btn-danger {
  background: #dc2626;
  color: white;
  border-color: #dc2626;
}

.btn.btn-danger:hover {
  background: #b91c1c;
  border-color: #b91c1c;
}

/* Alles löschen Button */
.layout-toggle-btn.layout-toggle-btn-danger {
  color: #dc2626;
  margin-left: auto;
  border-color: rgba(220, 38, 38, 0.2);
}

.layout-toggle-btn.layout-toggle-btn-danger:hover {
  background: #fef2f2;
  border-color: #dc2626;
}


/* ============================================
   MINIMAP
   ============================================ */
.minimap {
  position: absolute;
  bottom: 16px;
  right: 70px;
  width: 220px;
  height: 160px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  z-index: 9;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: height 0.2s, width 0.2s;
}

.minimap.collapsed {
  height: 32px;
  width: 120px;
}

.minimap.collapsed .minimap-svg {
  display: none;
}

.minimap-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  padding: 6px 10px;
  border-bottom: 1px solid var(--color-border);
  font-weight: 500;
  background: var(--color-surface-alt);
}

.minimap.collapsed .minimap-label {
  border-bottom: none;
}

.minimap-svg {
  flex: 1;
  width: 100%;
  cursor: crosshair;
  background:
    radial-gradient(circle at 1px 1px, #e8e8e6 1px, transparent 1px);
  background-size: 8px 8px;
  user-select: none;
}

.minimap-svg.dragging {
  cursor: grabbing;
}

.minimap-toggle {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 22px;
  height: 22px;
  border: none;
  background: var(--color-surface-alt);
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 500;
}

.minimap-toggle:hover {
  background: var(--color-border);
  color: var(--color-text);
}

/* Auf Presenter-Modus Minimap ausblenden */
body.presenter-mode .minimap { display: none; }


/* ============================================
   MINDMAP-NOTIZEN (Sticky-Notes)
   ============================================ */
.mindmap-note {
  position: absolute;
  min-width: 160px;
  max-width: 240px;
  background: linear-gradient(180deg, #fff8d6 0%, #fdf2b8 100%);
  border: 1px solid #e8d97a;
  border-radius: 3px;
  padding: 10px 12px;
  cursor: grab;
  font-family: 'Caveat', 'Comic Sans MS', cursive, sans-serif;
  font-size: 14px;
  line-height: 1.4;
  color: #4a3f15;
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.08),
    0 6px 16px rgba(0, 0, 0, 0.06),
    0 1px 0 rgba(255, 255, 255, 0.7) inset;
  user-select: none;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
  z-index: 4;
}

.mindmap-note::before {
  content: '';
  position: absolute;
  top: -6px;
  left: 50%;
  margin-left: -10px;
  width: 20px;
  height: 8px;
  background: rgba(232, 217, 122, 0.7);
  border-radius: 2px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.mindmap-note:hover {
  box-shadow:
    0 4px 8px rgba(0, 0, 0, 0.1),
    0 10px 24px rgba(0, 0, 0, 0.08);
  z-index: 6;
}

.mindmap-note.selected {
  border-color: #c9a629;
  box-shadow:
    0 0 0 2px rgba(232, 196, 41, 0.35),
    0 4px 12px rgba(0, 0, 0, 0.1);
  z-index: 7;
}

.mindmap-note.dragging {
  cursor: grabbing;
  z-index: 100;
  box-shadow:
    0 10px 24px rgba(0, 0, 0, 0.18),
    0 4px 8px rgba(0, 0, 0, 0.1);
}

.mindmap-note.editing {
  cursor: text;
  z-index: 50;
  background: #fff8d6;
}

.note-text {
  outline: none;
  word-break: break-word;
  white-space: pre-wrap;
  cursor: text;
  min-height: 18px;
}

.mindmap-note.editing .note-text {
  background: rgba(255, 255, 255, 0.5);
  border-radius: 2px;
  padding: 2px 4px;
  margin: -2px -4px;
}

.note-delete-btn {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 18px;
  height: 18px;
  background: rgba(255, 255, 255, 0.6);
  border: none;
  border-radius: 50%;
  color: #4a3f15;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background 0.15s ease, transform 0.15s ease;
}

.mindmap-note:hover .note-delete-btn,
.mindmap-note.selected .note-delete-btn {
  display: flex;
}

.note-delete-btn:hover {
  background: #dc2626;
  color: white;
  transform: scale(1.1);
}

/* Auf Presenter-Modus Notizen mit anzeigen aber nicht editierbar */
body.presenter-mode .mindmap-note {
  cursor: default;
  pointer-events: none;
}

body.presenter-mode .note-delete-btn { display: none !important; }


/* ============================================
   NODE-FARBEN (sehr dezente Pastellfarben)
   Überschreiben den Hintergrund der Level-Klassen,
   linker Akzent-Balken bleibt erhalten.
   ============================================ */
.node.node-color-rose     { background: #fef0f0; border-color: #f0d4d4; }
.node.node-color-amber    { background: #fef6e8; border-color: #f0e2c0; }
.node.node-color-lime     { background: #f3f8e8; border-color: #d8e4be; }
.node.node-color-mint     { background: #ebf6f1; border-color: #c5dfd1; }
.node.node-color-sky      { background: #ebf3fb; border-color: #c5d8ec; }
.node.node-color-lavender { background: #f0eef9; border-color: #d4cee5; }
.node.node-color-stone    { background: #f0eeeb; border-color: #d8d4ce; }

/* Bei Hover: leichte Sättigung */
.node.node-color-rose:hover     { background: #fde8e8; }
.node.node-color-amber:hover    { background: #fdefd8; }
.node.node-color-lime:hover     { background: #ecf3da; }
.node.node-color-mint:hover     { background: #e0f0e8; }
.node.node-color-sky:hover      { background: #dfeaf6; }
.node.node-color-lavender:hover { background: #e6e3f3; }
.node.node-color-stone:hover    { background: #e6e2dc; }

/* L3/L4 Akzent-Balken erhalten trotz Farbe - die border-left bleibt */

/* ============================================
   COLOR PICKER (Detail-Panel)
   ============================================ */
.color-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}

.color-swatch {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1.5px solid #d4d4d0;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #9a9a96;
  transition: transform 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
}

.color-swatch:hover {
  transform: scale(1.1);
  border-color: var(--color-text);
}

.color-swatch.active {
  border-color: var(--color-text);
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.1);
  transform: scale(1.05);
}

.color-swatch.color-swatch-default {
  background: #ffffff;
}

.color-swatch.color-swatch-default svg {
  opacity: 0.5;
}

.color-swatch.color-swatch-default.active svg {
  opacity: 0.8;
  color: var(--color-text);
}


/* ============================================
   QUICK-ACTIONS am selektierten Node
   Erscheinen oben am Node bei Selection
   ============================================ */
.node-quick-actions {
  position: absolute;
  top: -32px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 4px;
  background: white;
  border: 1px solid #d4d4d0;
  border-radius: 8px;
  padding: 3px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06);
  z-index: 20;
  white-space: nowrap;
}

.node-quick-action-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  background: transparent;
  border: none;
  color: var(--color-text-muted);
  font-size: 10.5px;
  font-weight: 500;
  padding: 4px 8px;
  border-radius: 5px;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
  font-family: inherit;
}

.node-quick-action-btn:hover {
  background: var(--color-text);
  color: white;
}

/* Danger-Variante (Lösch-Button): nur ein Icon, rot beim Hover */
.node-quick-action-btn.node-quick-action-btn-danger {
  padding: 5px 7px;
}
.node-quick-action-btn.node-quick-action-btn-danger:hover {
  background: #dc2626;
  color: white;
}

/* Auf Mobile/kleinen Screens: Quick-Actions kompakter */
.node-quick-action-btn svg {
  flex-shrink: 0;
}

/* Home: Quick-Actions sollen für die Startseite nicht über das Home-Icon stehen */
.node.home .node-quick-actions {
  top: -34px;
}

/* Im Presenter-Modus keine Quick-Actions */
body.presenter-mode .node-quick-actions { display: none !important; }

/* ============================================
   ATTACHED NOTES - leichte Verbindungslinie zum Parent
   ============================================ */
.mindmap-note[data-attached-to]::after {
  content: '';
  position: absolute;
  top: 50%;
  left: -20px;
  width: 20px;
  height: 1px;
  background: linear-gradient(90deg, rgba(232, 217, 122, 0) 0%, rgba(180, 160, 80, 0.4) 100%);
  pointer-events: none;
}


/* ============================================
   PRÄSENTATIONSMODUS
   ============================================ */

/* Steuerleiste im Editor (unten zentriert, nur sichtbar wenn aktiv) */
.present-controls {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%) translateY(80px);
  background: var(--color-text);
  border-radius: 12px;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow:
    0 12px 30px rgba(0, 0, 0, 0.25),
    0 4px 12px rgba(0, 0, 0, 0.15);
  z-index: 50;
  opacity: 0;
  pointer-events: none;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
}

body.present-mode-active .present-controls {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
  pointer-events: auto;
}

.present-btn {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: white;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, border-color 0.15s ease;
  padding: 0;
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
}

.present-btn:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.3);
}

.present-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.present-btn-stop {
  width: auto;
  padding: 0 14px;
  background: rgba(220, 38, 38, 0.15);
  border-color: rgba(220, 38, 38, 0.3);
  color: #fca5a5;
}

.present-btn-stop:hover {
  background: #dc2626;
  border-color: #dc2626;
  color: white;
}

.present-info {
  min-width: 220px;
  text-align: center;
  padding: 0 8px;
  color: white;
}

.present-step-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.5);
  font-weight: 500;
  line-height: 1.3;
}

.present-current-title {
  font-size: 13px;
  font-weight: 500;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 280px;
}

.present-divider {
  width: 1px;
  height: 24px;
  background: rgba(255, 255, 255, 0.15);
}

/* Toggle-Button im Editor: aktiver Zustand */
#present-toggle-btn.active {
  background: var(--color-text);
  color: white;
  border-color: var(--color-text);
}

#present-toggle-btn.active svg {
  fill: rgba(255, 255, 255, 0.2);
}

/* Während Präsentation im Editor: kleine Status-Pille oben rechts am Canvas (subtil) */
body.present-mode-active .canvas-container::after {
  content: '● Präsentation läuft';
  position: absolute;
  top: 14px;
  right: 14px;
  background: rgba(26, 26, 26, 0.85);
  color: #22c55e;
  padding: 5px 12px;
  border-radius: 14px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  z-index: 40;
  pointer-events: none;
}

/* Während Präsentation: Toolbar (Auto-Layout, Frei, Alles löschen) etc. ausblenden
   damit der Canvas-Bereich aufgeräumt ist. Nur die Präsentations-Steuerleiste bleibt sichtbar. */
body.present-mode-active .layout-toggle,
body.present-mode-active .canvas-help,
body.present-mode-active #empty-connections-hint,
body.present-mode-active .minimap {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

/* ============================================
   PRÄSENTATIONS-EFFEKT: Nodes/Connections ein-/ausblenden
   Gilt sowohl im Presenter (body.presenter-mode) als auch im Editor
   während aktiver Präsentation (body.present-mode-active)
   ============================================ */
body.presenter-mode .node,
body.presenter-mode .mindmap-note,
body.presenter-mode .connection-path,
body.present-mode-active .node,
body.present-mode-active .mindmap-note,
body.present-mode-active .connection-path {
  transition: opacity 0.4s ease, transform 0.4s ease;
}

body.presenter-mode .node.present-hidden,
body.presenter-mode .mindmap-note.present-hidden,
body.present-mode-active .node.present-hidden,
body.present-mode-active .mindmap-note.present-hidden {
  opacity: 0;
  transform: scale(0.92);
  pointer-events: none;
}

body.presenter-mode .connection-path.present-hidden,
body.presenter-mode svg path.present-hidden,
body.present-mode-active .connection-path.present-hidden,
body.present-mode-active svg path.present-hidden {
  opacity: 0 !important;
  transition: opacity 0.4s ease;
}

/* Bereichs-gefärbte Connections: Opacity über CSS-Variable damit .present-hidden sie überschreiben kann */
.connection-path.area-colored {
  opacity: var(--area-conn-opacity, 0.75);
}

/* Aktueller Node bekommt einen sanften Highlight-Glow */
body.presenter-mode .node.present-current,
body.present-mode-active .node.present-current {
  box-shadow:
    0 0 0 4px rgba(99, 102, 241, 0.25),
    0 8px 24px rgba(99, 102, 241, 0.2),
    0 4px 12px rgba(0, 0, 0, 0.1);
  z-index: 10;
}

body.presenter-mode .node.present-current.home,
body.present-mode-active .node.present-current.home {
  box-shadow:
    0 0 0 4px rgba(99, 102, 241, 0.35),
    0 12px 30px rgba(0, 0, 0, 0.3);
}

/* Bereiche im Präsentationsmodus: dezent ausblenden wenn nicht "geöffnet" */
body.present-mode-active .area-bg-group,
body.present-mode-active .area-label-group,
body.presenter-mode .area-bg-group,
body.presenter-mode .area-label-group {
  transition: opacity 0.5s ease;
}

body.present-mode-active .area-bg-group.present-hidden,
body.present-mode-active .area-label-group.present-hidden,
body.presenter-mode .area-bg-group.present-hidden,
body.presenter-mode .area-label-group.present-hidden {
  opacity: 0;
  pointer-events: none;
}

/* Bereich wird gerade "geöffnet" - dezentes Pulsieren am Label */
body.present-mode-active .area-label-group.present-area-open .area-label-bg,
body.presenter-mode .area-label-group.present-area-open .area-label-bg {
  animation: area-open-pulse 1.6s ease-in-out infinite;
}

@keyframes area-open-pulse {
  0%, 100% {
    filter: brightness(1);
  }
  50% {
    filter: brightness(1.18);
  }
}

/* Aktiver Bereich: das Rechteck bekommt einen stärkeren Border */
body.present-mode-active .area-bg-group.present-area-open .area-rect,
body.presenter-mode .area-bg-group.present-area-open .area-rect {
  stroke-width: 2.5;
  stroke-opacity: 0.7;
}

/* Im Presenter-Modus während Präsentation: Steuerleiste ausblenden (Editor-only) */
/* Im Presenter ist die Steuerleiste sichtbar wenn Präsentation läuft (Steuerung direkt im Presenter) */
body.presenter-mode.present-mode-active .present-controls {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
  pointer-events: auto;
}


/* ============================================
   PRÄSENTATIONS-START-BUTTON (im Presenter)
   ============================================ */
.present-start-btn {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-text);
  color: white;
  border: none;
  padding: 12px 22px;
  border-radius: 999px;
  cursor: pointer;
  display: none;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 500;
  box-shadow:
    0 12px 30px rgba(0, 0, 0, 0.18),
    0 4px 12px rgba(0, 0, 0, 0.1);
  z-index: 50;
  font-family: inherit;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.present-start-btn:hover {
  transform: translateX(-50%) translateY(-2px);
  box-shadow:
    0 16px 36px rgba(0, 0, 0, 0.22),
    0 6px 16px rgba(0, 0, 0, 0.12);
}

/* Nur im Presenter sichtbar UND wenn Modus NICHT aktiv */
body.presenter-mode .present-start-btn {
  display: flex;
}

body.presenter-mode.present-mode-active .present-start-btn {
  display: none;
}

/* Im Editor immer ausgeblendet */
body:not(.presenter-mode) .present-start-btn {
  display: none !important;
}


/* ============================================
   PRÄSENTATIONS-INFO-PANEL
   Schwebendes Panel unten links zeigt Titel, Beschreibung, Funktionen der aktuellen Seite
   In beiden Modi sichtbar (Editor + Presenter) wenn Präsentation läuft
   ============================================ */
.present-info-panel {
  position: fixed;
  bottom: 20px;
  left: 20px;
  width: 320px;
  max-width: calc(100vw - 40px);
  max-height: calc(100vh - 140px);
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid #e5e5e2;
  border-radius: 14px;
  padding: 18px 20px 16px;
  box-shadow:
    0 12px 30px rgba(0, 0, 0, 0.08),
    0 4px 12px rgba(0, 0, 0, 0.05);
  z-index: 45;
  display: none;
  flex-direction: column;
  font-family: 'Poppins', sans-serif;
  transform: translateY(20px);
  opacity: 0;
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
  overflow: hidden;
}

/* Sichtbar wenn Präsentation aktiv UND Info nicht manuell ausgeblendet */
body.present-mode-active .present-info-panel,
body.presenter-mode.present-mode-active .present-info-panel {
  display: flex;
  transform: translateY(0);
  opacity: 1;
}

body.present-info-hidden .present-info-panel {
  display: none !important;
}

.present-info-panel-header {
  padding-bottom: 12px;
  border-bottom: 1px solid #efefed;
  margin-bottom: 12px;
  flex-shrink: 0;
}

.present-info-panel-label {
  display: inline-block;
  font-size: 9.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #9a9a96;
  margin-bottom: 6px;
}

.present-info-panel-title {
  font-size: 17px;
  font-weight: 500;
  line-height: 1.3;
  color: #1a1a1a;
  margin: 0;
  word-break: break-word;
}

.present-info-panel-body {
  flex: 1 1 auto;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 0;
}

.present-info-panel-body::-webkit-scrollbar {
  width: 6px;
}
.present-info-panel-body::-webkit-scrollbar-thumb {
  background: #d4d4d0;
  border-radius: 3px;
}

.present-info-section-label {
  font-size: 9.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #9a9a96;
  margin-bottom: 5px;
}

.present-info-section-text {
  font-size: 12.5px;
  line-height: 1.55;
  color: #4a4a48;
  white-space: pre-wrap;
  word-break: break-word;
}

.present-info-features {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.present-info-features li {
  font-size: 12px;
  line-height: 1.45;
  color: #4a4a48;
  padding-left: 18px;
  position: relative;
}

.present-info-features li::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 7px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #6366f1;
}

.present-info-empty {
  font-size: 12px;
  font-style: italic;
  color: #9a9a96;
  line-height: 1.5;
}

/* Vorschau auf nächste Seite - NUR im Editor sichtbar, im Presenter ausgeblendet */
.present-info-next {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed #e5e5e2;
  display: none;
  flex-shrink: 0;
}

body:not(.presenter-mode).present-mode-active .present-info-next {
  display: block;
}

.present-info-next-label {
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #b8b8b4;
  margin-bottom: 4px;
}

.present-info-next-title {
  font-size: 11.5px;
  font-weight: 500;
  color: #6b6b68;
  font-style: italic;
  word-break: break-word;
}

/* Info-Toggle-Button in Steuerleiste: aktiver Zustand */
#present-info-toggle.active {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.35);
  color: white;
}

/* Im Presenter steht das Panel etwas weiter unten weil keine Steuerleiste da ist */
body.presenter-mode .present-info-panel {
  bottom: 20px;
}


/* ============================================
   VERBINDUNGEN: Hit-Area + Drag-Handles
   ============================================ */

/* Unsichtbarer Hit-Path liefert die Click-Area */
.connection-hit-area {
  cursor: pointer;
  pointer-events: stroke;
  /* Beim Hover über die Hit-Area: sichtbaren Path stärker anzeigen */
}

/* Wenn die Maus über der Hit-Area ist, dann den Geschwister-Pfad hervorheben */
.connection-group:hover .connection-path:not(.selected) {
  stroke-width: 2.5;
  opacity: 1;
}


/* ============================================
   MULTI-SELECT-TOOLBAR
   Sichtbar wenn 2+ Nodes ausgewählt sind
   ============================================ */
.multi-select-toolbar {
  position: absolute;
  top: 64px;
  left: 50%;
  transform: translateX(-50%) translateY(-10px);
  background: white;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: 5px 6px 5px 14px;
  display: none;
  align-items: center;
  gap: 6px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1), 0 2px 6px rgba(0, 0, 0, 0.04);
  z-index: 30;
  font-family: var(--font-display);
  opacity: 0;
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.multi-select-toolbar.visible {
  display: flex;
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.multi-select-count {
  font-size: 12px;
  font-weight: 500;
  color: var(--color-text);
  padding-right: 6px;
  border-right: 1px solid var(--color-border);
  margin-right: 2px;
}

/* ============================================
   AUSWAHL-MODUS (Lasso aktiv)
   ============================================ */
.canvas-container.selection-mode {
  cursor: crosshair;
}
.canvas-container.selection-mode .node {
  cursor: pointer;
}

/* ============================================
   BEREICH-DRAG (Cursor und visuelle Aktion)
   ============================================ */
.area-label-group {
  transition: opacity 0.15s ease;
}
.area-label-group:hover .area-label-bg {
  filter: brightness(1.08);
}
.area-label-group:active {
  cursor: grabbing;
}
.canvas-container.dragging-area {
  cursor: grabbing;
}
.canvas-container.dragging-area .node {
  transition: none !important;
}

/* Selektierter Bereich - dezenter Hervorhebungsrand */
.area-bg-group.selected .area-rect {
  stroke-width: 2.5;
  stroke-dasharray: 6 3;
}


/* ============================================
   FARBPALETTE IM "NEUER BEREICH" MODAL
   ============================================ */
.area-color-palette {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
  padding: 4px 0;
}

.area-color-swatch {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  padding: 0;
  outline: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.area-color-swatch:hover {
  transform: scale(1.08);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.area-color-swatch.selected {
  border-color: var(--color-text);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 1),
              0 0 0 5px var(--color-text),
              0 2px 6px rgba(0, 0, 0, 0.1);
  transform: scale(1.05);
}

.area-color-swatch.selected::after {
  content: '';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
  background-size: 14px 14px;
  background-position: center;
  background-repeat: no-repeat;
  pointer-events: none;
}

/* ============================================
   BEREICHS-CHIPS IM "NEUE SEITE" MODAL
   ============================================ */
.area-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 2px 0;
}

.area-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  border-radius: 999px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
  user-select: none;
}

.area-chip:hover {
  border-color: var(--color-text-muted);
  color: var(--color-text);
}

.area-chip.selected {
  border-color: var(--chip-color, var(--color-text));
  background: color-mix(in srgb, var(--chip-color, var(--color-text)) 8%, var(--color-surface));
  color: var(--color-text);
}

.area-chip-none.selected {
  border-color: var(--color-text);
  background: var(--color-surface-alt);
}

.area-chip-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.area-chip-label {
  white-space: nowrap;
}

/* ============================================
   BEREICHS-LISTE (oben links im Canvas)
   ============================================ */
.area-list-panel {
  position: absolute;
  top: 16px;
  left: 16px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  min-width: 200px;
  max-width: 280px;
  z-index: 11;
  font-family: var(--font-display);
  transition: max-height 0.22s ease, opacity 0.22s ease;
  overflow: hidden;
}

.area-list-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px 8px 14px;
  gap: 8px;
  border-bottom: 1px solid var(--color-border);
}

.area-list-title {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-soft);
  font-weight: 500;
}

.area-list-toggle {
  background: none;
  border: none;
  padding: 4px;
  cursor: pointer;
  color: var(--color-text-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: background 0.15s ease, transform 0.22s ease, color 0.15s ease;
}
.area-list-toggle:hover {
  background: var(--color-surface-alt);
  color: var(--color-text);
}

.area-list-panel.collapsed .area-list-toggle svg {
  transform: rotate(-90deg);
}

.area-list-body {
  padding: 6px;
  max-height: 360px;
  overflow-y: auto;
  transition: max-height 0.22s ease, padding 0.22s ease, opacity 0.18s ease;
}

.area-list-panel.collapsed .area-list-body {
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  opacity: 0;
}

.area-list-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.12s ease;
  position: relative;
}

.area-list-item:hover {
  background: var(--color-surface-alt);
}

.area-list-item.selected {
  background: var(--color-surface-alt);
  box-shadow: inset 0 0 0 1px var(--color-border-strong);
}

.area-list-item-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.area-list-item-label {
  flex: 1;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.area-list-item-count {
  font-size: 10.5px;
  color: var(--color-text-soft);
  white-space: nowrap;
}

/* Leere Bereiche: dezenter dargestellt damit sie als Aufräum-Kandidaten erkennbar sind */
.area-list-item.empty .area-list-item-label {
  color: var(--color-text-muted);
}
.area-list-item.empty .area-list-item-count {
  font-style: italic;
}
.area-list-item.empty .area-list-item-dot {
  opacity: 0.5;
}

.area-list-item-delete {
  background: none;
  border: none;
  padding: 4px;
  cursor: pointer;
  color: var(--color-text-soft);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: background 0.12s ease, color 0.12s ease, opacity 0.15s ease;
}

.area-list-item:hover .area-list-item-delete,
.area-list-item.selected .area-list-item-delete {
  opacity: 1;
}

.area-list-item-delete:hover {
  background: #fee2e2;
  color: #dc2626;
}

/* ============================================
   DASHBOARD: GRID-LAYOUT MIT SIDEBAR
   ============================================ */
.dashboard-grid {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 24px;
  align-items: start;
}

@media (max-width: 1100px) {
  .dashboard-grid {
    grid-template-columns: 1fr;
  }
  .dashboard-side-col {
    position: static;
    order: -1; /* Kalender auf Mobile ÜBER der Liste */
  }
}

@media (max-width: 640px) {
  .dashboard-grid {
    gap: 16px;
  }
}

.dashboard-main-col {
  min-width: 0;
}

.dashboard-side-col {
  position: sticky;
  top: 24px;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  /* Scrollbar nur bei Bedarf */
  scrollbar-width: thin;
}

.dashboard-side-col::-webkit-scrollbar {
  width: 6px;
}
.dashboard-side-col::-webkit-scrollbar-thumb {
  background: var(--color-border);
  border-radius: 3px;
}
.dashboard-side-col::-webkit-scrollbar-thumb:hover {
  background: var(--color-border-strong);
}

/* ============================================
   ONBOARDING-KARTEN (modernes Card-Layout)
   ============================================ */
.onboardings-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ob-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  overflow: hidden;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.ob-card:hover {
  border-color: var(--color-border-strong);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.05), 0 2px 4px rgba(0, 0, 0, 0.03);
  transform: translateY(-1px);
}

.ob-card-body {
  padding: 18px 20px 16px;
  cursor: pointer;
}

.ob-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.ob-card-titleblock {
  min-width: 0;
  flex: 1;
}

.ob-card-title {
  font-size: 16px;
  font-weight: 500;
  color: var(--color-text);
  letter-spacing: -0.01em;
  margin-bottom: 4px;
  word-break: break-word;
}

/* Projekttyp-Badge auf der Karte (Plattform-Erweiterung).
   Zeigt ohne Filter, ob ein Onboarding eine Website oder Plattform ist. */
.ob-card-kind {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  vertical-align: middle;
  margin-left: 8px;
  padding: 2px 8px 2px 6px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1.4;
  white-space: nowrap;
}
.ob-card-kind svg { flex-shrink: 0; }

.ob-card-kind-website {
  background: #eef2ff;
  color: #4338ca;
  border: 1px solid #c7d2fe;
}
.ob-card-kind-platform {
  background: #f0fdfa;
  color: #0f766e;
  border: 1px solid #99f6e4;
}

.ob-card-sub {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  align-items: center;
  font-size: 12.5px;
}

.ob-card-company {
  color: var(--color-text-muted);
  font-weight: 500;
}

.ob-card-name {
  color: var(--color-text-soft);
  display: inline-flex;
  align-items: center;
}
.ob-card-name::before {
  content: '';
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--color-text-soft);
  margin-right: 8px;
  opacity: 0.5;
}

.ob-card-actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
  opacity: 0;
  transition: opacity 0.18s ease;
}

.ob-card:hover .ob-card-actions,
.ob-card:focus-within .ob-card-actions {
  opacity: 1;
}

.ob-card-action-btn {
  background: none;
  border: none;
  padding: 6px;
  cursor: pointer;
  color: var(--color-text-soft);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, color 0.15s ease;
}

.ob-card-action-btn:hover {
  background: var(--color-surface-alt);
  color: var(--color-text);
}

.ob-card-action-btn.ob-card-action-danger:hover {
  background: #fee2e2;
  color: #dc2626;
}

.ob-card-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

@media (max-width: 600px) {
  .ob-card-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}

.ob-card-block {
  min-width: 0;
}

.ob-card-block-label {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-soft);
  font-weight: 500;
  margin-bottom: 6px;
}

.ob-card-block-value {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  color: var(--color-text);
  min-width: 0;
}

.ob-card-block-empty {
  font-size: 12.5px;
  color: var(--color-text-soft);
  font-style: italic;
  padding-top: 2px;
}

.ob-meeting-icon {
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
  flex-shrink: 0;
}

.ob-meeting-date {
  font-weight: 500;
  color: var(--color-text);
  line-height: 1.35;
  word-break: break-word;
}

.ob-meeting-type {
  font-size: 11.5px;
  color: var(--color-text-soft);
  margin-top: 2px;
}

/* Deadline-Pille - kompakt damit kein Umbruch passiert */
.ob-deadline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--color-text);
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ob-deadline-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-text-muted);
  flex-shrink: 0;
}

.ob-deadline-text {
  overflow: hidden;
  text-overflow: ellipsis;
}

.ob-deadline.is-soon {
  background: #fff7ed;
  border-color: #fed7aa;
  color: #c2410c;
}
.ob-deadline.is-soon .ob-deadline-dot {
  background: #ea580c;
}

.ob-deadline.is-overdue {
  background: #fef2f2;
  border-color: #fecaca;
  color: #dc2626;
}
.ob-deadline.is-overdue .ob-deadline-dot {
  background: #dc2626;
  animation: ob-deadline-pulse 1.6s ease-in-out infinite;
}

@keyframes ob-deadline-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

/* Footer mit Status-Buttons */
.ob-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 20px;
  background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.015));
  border-top: 1px solid var(--color-border);
  flex-wrap: wrap;
}

.ob-card-footer-label {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-soft);
  font-weight: 500;
}

/* Status-Buttons: kleine Pill-Group (im Card-Footer und Editor) */
.prep-status-buttons {
  display: flex;
  gap: 3px;
  background: var(--color-surface-alt);
  padding: 3px;
  border-radius: 999px;
}

.prep-status-btn {
  background: none;
  border: none;
  padding: 5px 12px;
  font-family: var(--font-display);
  font-size: 11.5px;
  font-weight: 500;
  color: var(--color-text-soft);
  cursor: pointer;
  border-radius: 999px;
  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
  white-space: nowrap;
}

.prep-status-btn:hover {
  color: var(--color-text);
}

.prep-status-btn.active {
  background: var(--color-surface);
  color: var(--color-text);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.prep-status-btn.prep-needs_prep.active { color: #ea580c; }
.prep-status-btn.prep-in_progress.active { color: #2563eb; }
.prep-status-btn.prep-prepared.active { color: #16a34a; }

/* Im Edit-Modal Status-Buttons in einer großen Variante */
.prep-status-buttons.prep-status-buttons-lg {
  display: flex;
  gap: 8px;
  background: none;
  padding: 0;
  flex-wrap: wrap;
}

.prep-status-buttons.prep-status-buttons-lg .prep-status-btn {
  flex: 1;
  min-width: 130px;
  padding: 10px 14px;
  font-size: 12.5px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  text-align: center;
}

.prep-status-buttons.prep-status-buttons-lg .prep-status-btn.active {
  background: var(--color-surface-alt);
  border-color: var(--color-text);
  box-shadow: 0 0 0 1px var(--color-text);
}

.prep-status-buttons.prep-status-buttons-lg .prep-status-btn.prep-needs_prep.active {
  border-color: #ea580c;
  box-shadow: 0 0 0 1px #ea580c;
  background: #fff7ed;
}
.prep-status-buttons.prep-status-buttons-lg .prep-status-btn.prep-in_progress.active {
  border-color: #2563eb;
  box-shadow: 0 0 0 1px #2563eb;
  background: #eff6ff;
}
.prep-status-buttons.prep-status-buttons-lg .prep-status-btn.prep-prepared.active {
  border-color: #16a34a;
  box-shadow: 0 0 0 1px #16a34a;
  background: #f0fdf4;
}

/* Responsive: bei schmalem Screen wird der Footer untereinander */
@media (max-width: 520px) {
  .ob-card-footer {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .ob-card-footer .prep-status-buttons {
    width: 100%;
    justify-content: space-between;
  }
  .ob-card-actions {
    opacity: 1; /* auf Mobile immer sichtbar weil kein Hover */
  }
}

/* Modal: Variante mit mehr Breite für lange Formulare */
.modal-lg {
  max-width: 640px;
}

/* Im Editor (langes Layout) Status-Buttons untereinander statt nebeneinander */
#edit-client-modal .prep-status-buttons {
  flex-wrap: wrap;
}

/* Danger-Button für destruktive Aktionen */
.btn-danger {
  background: #dc2626;
  color: white;
  border: 1px solid #dc2626;
}
.btn-danger:hover {
  background: #b91c1c;
  border-color: #b91c1c;
}


/* ============================================
   KALENDER-WIDGET
   ============================================ */
.calendar-widget {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 14px;
  font-family: var(--font-display);
}

.calendar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.calendar-month-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text);
}

.calendar-nav {
  background: none;
  border: none;
  padding: 4px;
  cursor: pointer;
  color: var(--color-text-soft);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, color 0.15s ease;
}

.calendar-nav:hover {
  background: var(--color-surface-alt);
  color: var(--color-text);
}

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}

.calendar-weekday {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-soft);
  font-weight: 500;
  text-align: center;
  padding: 4px 0;
}

.calendar-day {
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 4px 2px 2px;
  font-size: 11px;
  color: var(--color-text-muted);
  border-radius: 4px;
  position: relative;
  min-height: 32px;
}

.calendar-day-empty {
  visibility: hidden;
}

.calendar-day.is-today {
  background: var(--color-text);
  color: white;
  font-weight: 500;
}

.calendar-day.has-events:not(.is-today) {
  background: var(--color-surface-alt);
}

.calendar-day-num {
  font-size: 11px;
  line-height: 1;
}

.calendar-day-dots {
  display: flex;
  gap: 2px;
  margin-top: 3px;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

.calendar-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  flex-shrink: 0;
}

.calendar-dot-meeting.prep-needs_prep { background: #ea580c; }
.calendar-dot-meeting.prep-in_progress { background: #2563eb; }
.calendar-dot-meeting.prep-prepared { background: #16a34a; }
.calendar-dot-deadline {
  background: transparent;
  border: 1.5px solid #dc2626;
}

.calendar-dot-more {
  font-size: 8px;
  color: var(--color-text-soft);
  line-height: 1;
}

.calendar-legend {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.calendar-legend-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.calendar-legend-label {
  font-size: 11px;
  color: var(--color-text-muted);
}

.calendar-upcoming {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--color-border);
}

.calendar-upcoming-title {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-soft);
  font-weight: 500;
  margin-bottom: 8px;
}

.calendar-upcoming-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.12s ease;
}

.calendar-upcoming-item:hover {
  background: var(--color-surface-alt);
}

.calendar-upcoming-text {
  flex: 1;
  min-width: 0;
}

.calendar-upcoming-name {
  font-size: 12px;
  font-weight: 500;
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.calendar-upcoming-date {
  font-size: 10.5px;
  color: var(--color-text-soft);
}

/* ============================================
   MODAL-FELDER: SECTION-DIVIDER + GRID
   ============================================ */
.modal-section-divider {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-soft);
  font-weight: 500;
  margin: 20px 0 12px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--color-border);
}

.form-row-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

@media (max-width: 600px) {
  .form-row-grid {
    grid-template-columns: 1fr;
  }
}

/* Meeting-Typ Auswahl als Card-Radios */
.meeting-type-group {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.meeting-type-option {
  position: relative;
  cursor: pointer;
}

.meeting-type-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.meeting-type-card {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  font-size: 13px;
  color: var(--color-text-muted);
  background: var(--color-surface);
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.meeting-type-option:hover .meeting-type-card {
  border-color: var(--color-text-muted);
  color: var(--color-text);
}

.meeting-type-option input:checked + .meeting-type-card {
  border-color: var(--color-text);
  background: var(--color-surface-alt);
  color: var(--color-text);
  box-shadow: 0 0 0 1px var(--color-text);
}

.meeting-type-card svg {
  flex-shrink: 0;
  opacity: 0.7;
}

.meeting-type-option input:checked + .meeting-type-card svg {
  opacity: 1;
}

/* Einklappbarer "Weitere Details"-Block im Anlege-Dialog (Plattform-Erweiterung) */
.new-onboarding-more {
  border: 1px solid var(--color-border);
  border-radius: 8px;
  margin-top: 4px;
  background: var(--color-surface);
}
.new-onboarding-more > summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 14px;
  cursor: pointer;
  list-style: none;
  user-select: none;
  font-size: 13px;
  color: var(--color-text);
}
.new-onboarding-more > summary::-webkit-details-marker { display: none; }
.new-onboarding-more-label { font-weight: 500; }
.new-onboarding-more-hint {
  color: var(--color-text-soft);
  font-size: 12px;
  font-weight: 400;
}
.new-onboarding-more-chevron {
  margin-left: auto;
  flex-shrink: 0;
  color: var(--color-text-muted);
  transition: transform 0.18s ease;
}
.new-onboarding-more[open] > summary .new-onboarding-more-chevron {
  transform: rotate(180deg);
}
.new-onboarding-more > summary:hover {
  background: var(--color-surface-alt);
  border-radius: 8px;
}
.new-onboarding-more-body {
  padding: 4px 14px 14px;
  border-top: 1px solid var(--color-border);
}
.new-onboarding-more-body .form-row:first-child { margin-top: 12px; }

/* ============================================
   DASHBOARD HERO + STATS + FILTERS
   Hochwertige Premium-Optik
   ============================================ */

.dashboard-user {
  font-size: 12.5px;
  color: var(--color-text-muted);
  padding: 6px 12px;
  background: var(--color-surface);
  border-radius: 999px;
  border: 1px solid var(--color-border);
}

/* Hero-Section: Titel + großer Primär-Button */
.dashboard-hero {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 28px;
  flex-wrap: wrap;
}

.dashboard-hero-text {
  flex: 1;
  min-width: 0;
}

.dashboard-title {
  font-size: 32px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--color-text);
  margin: 0 0 6px;
  line-height: 1.15;
}

.dashboard-subtitle {
  font-size: 14px;
  color: var(--color-text-muted);
  margin: 0;
  line-height: 1.4;
}

.btn-lg {
  padding: 11px 20px;
  font-size: 14px;
  border-radius: 10px;
  font-weight: 500;
}

/* ============================================
   STATS-KARTEN
   ============================================ */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 24px;
}

@media (max-width: 900px) {
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 440px) {
  .stats-grid { grid-template-columns: 1fr; }
}

.stat-card {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 16px 18px;
  text-align: left;
  font-family: inherit;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
  position: relative;
  overflow: hidden;
}

.stat-clickable {
  cursor: pointer;
}

.stat-clickable:hover {
  border-color: var(--color-border-strong);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
}

.stat-clickable.active {
  border-color: var(--color-text);
  box-shadow: 0 0 0 1px var(--color-text), 0 4px 16px rgba(0, 0, 0, 0.06);
}

.stat-card-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-surface-alt);
  color: var(--color-text-muted);
  flex-shrink: 0;
}

.stat-card-body { min-width: 0; }

.stat-card-value {
  font-size: 24px;
  font-weight: 500;
  color: var(--color-text);
  line-height: 1;
  letter-spacing: -0.02em;
  margin-bottom: 3px;
}

.stat-card-label {
  font-size: 11.5px;
  color: var(--color-text-soft);
  line-height: 1.3;
}

/* Farbvarianten der Stat-Karten - subtil mit Tinted Backgrounds */
.stat-blue .stat-card-icon { background: #eff6ff; color: #2563eb; }
.stat-green .stat-card-icon { background: #f0fdf4; color: #16a34a; }
.stat-red .stat-card-icon { background: #fef2f2; color: #dc2626; }
.stat-red { border-color: rgba(220, 38, 38, 0.18); }
.stat-muted .stat-card-icon { background: var(--color-surface-alt); color: var(--color-text-soft); }
.stat-muted .stat-card-value { color: var(--color-text-muted); }

/* ============================================
   FILTER-TOOLBAR (Suche + Pills)
   ============================================ */
.dashboard-toolbar {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.dashboard-search {
  position: relative;
  flex: 1;
  min-width: 220px;
  max-width: 380px;
}

.dashboard-search-icon {
  position: absolute;
  top: 50%;
  left: 12px;
  transform: translateY(-50%);
  color: var(--color-text-soft);
  pointer-events: none;
}

.dashboard-search input {
  width: 100%;
  padding: 9px 32px 9px 34px;
  font-family: inherit;
  font-size: 13px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  color: var(--color-text);
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.dashboard-search input:focus {
  border-color: var(--color-text);
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.05);
}

.dashboard-search input::placeholder {
  color: var(--color-text-soft);
}

.dashboard-search-clear {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  background: none;
  border: none;
  padding: 4px;
  color: var(--color-text-soft);
  cursor: pointer;
  border-radius: 4px;
  display: flex;
  align-items: center;
}
.dashboard-search-clear:hover {
  background: var(--color-surface-alt);
  color: var(--color-text);
}

.dashboard-filters {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
}

.filter-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.filter-pill:hover {
  border-color: var(--color-border-strong);
  color: var(--color-text);
}

.filter-pill.active {
  background: var(--color-text);
  color: white;
  border-color: var(--color-text);
}

.filter-pill-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}
.filter-pill-dot.prep-needs_prep { background: #ea580c; }
.filter-pill-dot.prep-in_progress { background: #2563eb; }
.filter-pill-dot.prep-prepared { background: #16a34a; }
.filter-pill.active .filter-pill-dot { box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.2); }

/* Trennstrich zwischen Status-Filtern und Projekttyp-Filtern (Plattform-Erweiterung) */
.dashboard-filters-divider {
  width: 1px;
  align-self: stretch;
  min-height: 18px;
  margin: 0 4px;
  background: var(--color-border);
}

/* ============================================
   ONBOARDING-CARD: Premium-Look mit Accent + Avatar
   ============================================ */
.ob-card {
  position: relative;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  overflow: hidden;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
  animation: ob-card-in 0.35s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes ob-card-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.ob-card:hover {
  border-color: var(--color-border-strong);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.05), 0 2px 4px rgba(0, 0, 0, 0.03);
  transform: translateY(-1px);
}

/* Farb-Accent-Stripe links */
.ob-card-accent {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--ob-accent, #6366f1);
  transition: width 0.18s ease;
}

.ob-card:hover .ob-card-accent {
  width: 5px;
}

/* Avatar mit Initialen */
.ob-card-avatar {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--ob-accent, #6366f1) 0%, color-mix(in srgb, var(--ob-accent, #6366f1) 75%, #000) 100%);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 500;
  flex-shrink: 0;
  letter-spacing: 0.02em;
  box-shadow: 0 2px 6px color-mix(in srgb, var(--ob-accent, #6366f1) 35%, transparent);
}

.ob-card-header {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

/* ============================================
   LOADING + ERROR STATES
   ============================================ */
.dashboard-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 20px;
  gap: 14px;
  color: var(--color-text-soft);
  font-size: 13px;
}

.dashboard-loading .loading-spinner {
  width: 32px;
  height: 32px;
  border: 2.5px solid var(--color-surface-alt);
  border-top-color: var(--color-text);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.dashboard-error {
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 12px;
  padding: 24px;
  text-align: center;
  color: #b91c1c;
}
.dashboard-error svg { margin-bottom: 12px; }
.dashboard-error h3 { font-size: 14px; margin: 0 0 4px; }
.dashboard-error p { font-size: 12.5px; margin: 0; }

/* Empty States */
.empty-state-large {
  text-align: center;
  padding: 60px 20px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 14px;
}

.empty-state-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 16px;
  background: var(--color-surface-alt);
  color: var(--color-text-muted);
  margin-bottom: 16px;
}

.empty-state-large h2 {
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.01em;
  margin: 0 0 6px;
}

.empty-state-large p {
  color: var(--color-text-muted);
  font-size: 13px;
  margin: 0 0 18px;
}

.empty-state-compact {
  text-align: center;
  padding: 40px 20px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 12px;
}
.empty-state-compact h3 {
  font-size: 14px;
  margin: 8px 0 4px;
}
.empty-state-compact p {
  font-size: 12.5px;
  color: var(--color-text-soft);
  margin: 0 0 14px;
}

.btn-sm {
  padding: 5px 12px;
  font-size: 12px;
}

/* ============================================
   DASHBOARD-LAYOUT VERFEINERUNG
   ============================================ */
.dashboard-wrap {
  /* Mehr Atemraum unten damit beim Scrollen genug Luft ist */
  padding-bottom: 80px;
}

@media (max-width: 640px) {
  .dashboard-wrap {
    padding: 20px 14px 60px;
  }
  .dashboard-title { font-size: 24px; }
  .dashboard-subtitle { font-size: 13px; }
  .btn-lg { padding: 9px 16px; font-size: 13px; }
}

/* Header: dezenter mit hellem Border */
.dashboard-header {
  padding-bottom: 20px;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 28px;
}

/* ============================================
   KALENDER-TAG: Hover-Hervorhebung für Events
   ============================================ */
.calendar-day.has-events {
  cursor: help;
  transition: background 0.15s ease, transform 0.15s ease;
}

.calendar-day.has-events:hover {
  background: var(--color-text);
  color: white;
  transform: scale(1.08);
}

.calendar-day.has-events:hover .calendar-dot {
  box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.4);
}

.calendar-day.has-events:hover .calendar-dot-deadline {
  border-color: white;
}

/* ============================================
   KALENDER-POPOVER (beim Hover über Tag mit Events)
   Rendert im body damit overflow:auto der Sidebar nicht clipped.
   ============================================ */
.cal-popover {
  position: absolute;
  z-index: 1000;
  min-width: 260px;
  max-width: 320px;
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: 12px;
  box-shadow:
    0 10px 30px rgba(0, 0, 0, 0.12),
    0 4px 10px rgba(0, 0, 0, 0.05);
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.18s ease, transform 0.18s ease;
  font-family: var(--font-display);
  pointer-events: auto;
  overflow: hidden;
}

.cal-popover.visible {
  opacity: 1;
  transform: translateY(0);
}

.cal-popover-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--color-surface-alt);
  border-bottom: 1px solid var(--color-border);
}

.cal-popover-header-day {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: var(--color-text);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.02em;
  flex-shrink: 0;
}

.cal-popover-header-text {
  min-width: 0;
}

.cal-popover-header-weekday {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--color-text);
  line-height: 1.2;
}

.cal-popover-header-month {
  font-size: 10.5px;
  color: var(--color-text-soft);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 1px;
}

.cal-popover-body {
  max-height: 320px;
  overflow-y: auto;
  padding: 6px;
}

.cal-popover-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  text-decoration: none;
  color: inherit;
  transition: background 0.12s ease;
  cursor: pointer;
}

.cal-popover-item:hover {
  background: var(--color-surface-alt);
}

.cal-popover-item + .cal-popover-item {
  margin-top: 2px;
}

.cal-popover-status {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-top: 5px;
  flex-shrink: 0;
}

.cal-popover-status.prep-needs_prep { background: #ea580c; }
.cal-popover-status.prep-in_progress { background: #2563eb; }
.cal-popover-status.prep-prepared { background: #16a34a; }

.cal-popover-status-deadline {
  background: transparent;
  border: 1.5px solid #dc2626;
  width: 8px;
  height: 8px;
  box-sizing: border-box;
}

.cal-popover-item-body {
  min-width: 0;
  flex: 1;
}

.cal-popover-item-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cal-popover-item-sub {
  font-size: 11.5px;
  color: var(--color-text-muted);
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cal-popover-item-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  margin-top: 5px;
  font-size: 11px;
  color: var(--color-text-soft);
}

.cal-popover-time,
.cal-popover-type {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.cal-popover-time svg,
.cal-popover-type svg {
  opacity: 0.6;
}

.cal-popover-prep {
  font-size: 10.5px;
  font-weight: 500;
  padding: 1px 7px;
  border-radius: 999px;
}

.cal-popover-prep.prep-needs_prep {
  background: #fff7ed;
  color: #c2410c;
}
.cal-popover-prep.prep-in_progress {
  background: #eff6ff;
  color: #2563eb;
}
.cal-popover-prep.prep-prepared {
  background: #f0fdf4;
  color: #16a34a;
}

.cal-popover-deadline-label {
  font-weight: 500;
  color: #dc2626;
}

.cal-popover-item-deadline .cal-popover-item-title::before {
  content: '';
  display: inline-block;
  margin-right: 6px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #dc2626;
  vertical-align: 2px;
}

/* Scrollbar im Popover-Body */
.cal-popover-body::-webkit-scrollbar {
  width: 4px;
}
.cal-popover-body::-webkit-scrollbar-thumb {
  background: var(--color-border);
  border-radius: 2px;
}

/* ============================================
   BEREICHS-LISTE IM PRESENTER
   - Etwas dezenter dargestellt (kein Edit-Hover, kein Delete)
   - "active" Markierung für den gerade präsentierten Bereich
   ============================================ */
.area-list-panel-presenter {
  /* Im Presenter darüber positionieren damit nichts vom Canvas-Padding überlappt */
  z-index: 12;
  /* Etwas Transparenz und Backdrop-Filter für luftigeren Look im Präsentationsmodus */
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(140%) blur(8px);
  -webkit-backdrop-filter: saturate(140%) blur(8px);
  border-color: rgba(0, 0, 0, 0.08);
}

.area-list-panel-presenter .area-list-item {
  /* Im Presenter ist Hover dezenter - kein Edit-Affordance */
  transition: background 0.18s ease, box-shadow 0.18s ease;
}

/* Active-Highlight für den aktuell präsentierten Bereich */
.area-list-panel-presenter .area-list-item.active {
  background: var(--color-text);
  color: white;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  position: relative;
}

.area-list-panel-presenter .area-list-item.active .area-list-item-label {
  color: white;
  font-weight: 500;
}

.area-list-panel-presenter .area-list-item.active .area-list-item-count {
  color: rgba(255, 255, 255, 0.7);
}

/* Pulsierender Akzent links bei aktiver Reihe */
.area-list-panel-presenter .area-list-item.active::before {
  content: '';
  position: absolute;
  left: -1px;
  top: 6px;
  bottom: 6px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: white;
  opacity: 0.7;
}

/* Der Farb-Dot bleibt in der Bereichsfarbe, aber mit weißem Ring drum für Kontrast */
.area-list-panel-presenter .area-list-item.active .area-list-item-dot {
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.35);
}

/* Im Presenter im Präsentationsmodus die Liste leicht abdunkeln wenn versteckt-Modus */
body.present-info-hidden .area-list-panel-presenter {
  /* Wenn Info-Panel ausgeblendet ist, dezenter darstellen damit der Fokus auf dem Canvas bleibt */
  opacity: 0.85;
  transition: opacity 0.2s ease;
}
body.present-info-hidden .area-list-panel-presenter:hover {
  opacity: 1;
}

/* ============================================
   NODE-UI VERFEINERUNG
   Modernere Features-Liste mit Check-Icon, Content-Indikatoren oben rechts
   ============================================ */

/* Features-Liste: subtile Karte mit Check-Icon je Eintrag */
.node-features-list {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px dashed var(--color-border);
  display: flex;
  flex-direction: column;
  gap: 2px;
  pointer-events: none;
}

.node-feature-tag {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10.5px;
  color: var(--color-text-muted);
  line-height: 1.35;
  padding: 1px 0;
}

.node-feature-icon {
  flex-shrink: 0;
  color: var(--color-group-check);
  opacity: 0.75;
}

.node-feature-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
}

.node-feature-more {
  margin-top: 3px;
  font-size: 10px;
  color: var(--color-text-soft);
  font-style: italic;
  cursor: help;
  pointer-events: auto;
  padding-left: 15px;
}

/* Content-Indicators als Flex-Sibling vom Title im node-header.
   Damit überlappen sie strukturell nie mit dem Title-Text, auch bei
   sehr schmalen Karten oder mehrzeiligen Überschriften. */
.node-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.node-header .node-title {
  flex: 1;
  min-width: 0;
  /* word-break verhindert dass extrem lange Wörter die Karte sprengen */
  word-break: break-word;
}

.node-content-indicators {
  display: flex;
  gap: 3px;
  flex-shrink: 0;
  pointer-events: auto;
  /* Leicht angehoben damit visuell auf einer Linie mit dem Titel-Top */
  margin-top: 1px;
}

.node-content-indicator {
  width: 18px;
  height: 18px;
  border-radius: 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-surface-alt);
  color: var(--color-text-muted);
  position: relative;
  cursor: help;
  transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.node-content-indicator:hover {
  transform: scale(1.15);
}

.node-content-indicator-desc {
  background: #f1f5f9;
  color: #475569;
}
.node-content-indicator-feat {
  background: #f0fdf4;
  color: #16a34a;
}
.node-content-indicator-note {
  background: #fef3c7;
  color: #b45309;
}

.node-content-indicator-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 12px;
  height: 12px;
  padding: 0 3px;
  border-radius: 6px;
  background: var(--color-text);
  color: white;
  font-size: 8.5px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  box-shadow: 0 0 0 2px var(--color-surface);
}

/* Home behält weißen Stil */
.node.home .node-feature-icon {
  color: rgba(255, 255, 255, 0.7);
}
.node.home .node-feature-tag {
  color: rgba(255, 255, 255, 0.75);
}
.node.home .node-feature-more {
  color: rgba(255, 255, 255, 0.6);
}
.node.home .node-features-list {
  border-top-color: rgba(255, 255, 255, 0.15);
}

/* ============================================
   NODE PREVIEW POPOVER (Presenter Click)
   Schwebende Detail-Karte beim Klick auf eine Node
   ============================================ */
.node.node-has-detail {
  cursor: pointer;
}

body.presenter-mode .node.node-has-detail::after {
  /* Subtiler Hint dass die Node klickbar ist */
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  transition: box-shadow 0.18s ease;
}

body.presenter-mode .node.node-has-detail:hover::after {
  box-shadow: inset 0 0 0 1.5px rgba(0, 0, 0, 0.08);
}

.node-preview-popover {
  position: absolute;
  z-index: 2000;
  width: 340px;
  max-width: calc(100vw - 24px);
  max-height: calc(100vh - 24px);
  background: white;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 14px;
  box-shadow:
    0 20px 50px rgba(0, 0, 0, 0.15),
    0 8px 16px rgba(0, 0, 0, 0.06);
  opacity: 0;
  transform: translateY(-6px) scale(0.98);
  transition: opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1), transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  font-family: var(--font-display);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.node-preview-popover.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.node-preview-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 24px;
  height: 24px;
  border: none;
  background: rgba(0, 0, 0, 0.04);
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
  transition: background 0.15s ease, color 0.15s ease;
  z-index: 2;
}

.node-preview-close:hover {
  background: rgba(0, 0, 0, 0.08);
  color: var(--color-text);
}

.node-preview-header {
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--color-border);
  background: linear-gradient(180deg, #fafafa 0%, transparent 100%);
}

.node-preview-level {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-soft);
  font-weight: 600;
  margin-bottom: 4px;
}

.node-preview-title {
  margin: 0;
  font-size: 17px;
  font-weight: 500;
  color: var(--color-text);
  letter-spacing: -0.01em;
  line-height: 1.3;
  padding-right: 30px;
  word-break: break-word;
}

.node-preview-body {
  padding: 16px 20px 18px;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}

.node-preview-section + .node-preview-section {
  margin-top: 18px;
}

.node-preview-section-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-soft);
  font-weight: 600;
  margin-bottom: 8px;
}

.node-preview-section-label svg {
  opacity: 0.7;
}

.node-preview-section-count {
  margin-left: auto;
  background: var(--color-surface-alt);
  color: var(--color-text-muted);
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}

.node-preview-description {
  font-size: 13px;
  color: var(--color-text);
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
}

.node-preview-features {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.node-preview-features li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 13px;
  color: var(--color-text);
  line-height: 1.45;
  padding: 6px 10px;
  background: #f8fafc;
  border-radius: 8px;
  border-left: 2px solid var(--color-group-check);
}

.node-preview-features li::before {
  content: '';
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  margin-top: 2px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316a34a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}

.node-preview-section-note {
  padding: 12px 14px;
  background: #fffbeb;
  border-left: 3px solid #f59e0b;
  border-radius: 8px;
  margin-top: 18px;
}

.node-preview-section-note .node-preview-section-label {
  margin-bottom: 4px;
  color: #b45309;
}

.node-preview-note {
  font-size: 12.5px;
  color: #78350f;
  line-height: 1.5;
  white-space: pre-wrap;
}

/* ============================================
   POINTER-MODUS (Kunde zeigt auf eine Seite)
   ============================================ */

/* Großer Akzent-Button unten rechts: prominent damit der Kunde ihn sofort findet */

/* Crosshair-Cursor wenn Pointer-Modus aktiv */
#presenter-canvas-wrap.pointer-mode-active,
#presenter-canvas-wrap.pointer-mode-active .canvas-container {
  cursor: crosshair !important;
}

#presenter-canvas-wrap.pointer-mode-active .node {
  cursor: crosshair !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease, outline-color 0.15s ease;
}

#presenter-canvas-wrap.pointer-mode-active .node:hover {
  outline: 2px solid #6366f1;
  outline-offset: 2px;
  transform: scale(1.04);
  z-index: 10;
}

/* Hint-Banner oben in der Mitte */
.pointer-mode-banner {
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1500;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px 9px 14px;
  background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
  color: white;
  border-radius: 999px;
  font-family: var(--font-display);
  font-size: 12.5px;
  font-weight: 500;
  box-shadow: 0 8px 24px rgba(79, 70, 229, 0.32), 0 2px 6px rgba(79, 70, 229, 0.18);
  animation: pointer-banner-in 0.28s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes pointer-banner-in {
  from { opacity: 0; transform: translate(-50%, -8px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}

.pointer-mode-banner-close {
  background: rgba(255, 255, 255, 0.16);
  border: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  cursor: pointer;
  color: white;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 4px;
  transition: background 0.15s ease;
}
.pointer-mode-banner-close:hover {
  background: rgba(255, 255, 255, 0.28);
}

/* Flash-Animation auf der Ziel-Node bei Pointer-Empfang */
@keyframes node-pointer-flash {
  0% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.55), 0 0 0 0 rgba(99, 102, 241, 0.3); }
  40% { box-shadow: 0 0 0 8px rgba(99, 102, 241, 0.18), 0 0 0 16px rgba(99, 102, 241, 0.08); }
  100% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0), 0 0 0 0 rgba(99, 102, 241, 0); }
}

.node.node-pointer-flash {
  animation: node-pointer-flash 1.6s ease-out;
  /* z-index ohne position:relative — die Node ist bereits absolute positioniert,
     und ein expliziter position-override würde die Karte aus ihrem Layout-Slot
     springen lassen ("Verrutschen" beim Klick). */
  z-index: 50;
}

/* Im Presenter: Pointer-Banner an die "Info ausgeblendet"-Variante anpassen */
body.present-info-hidden .pointer-mode-banner {
  opacity: 0.95;
}

/* ============================================
   PRIMÄR-MARKIERUNG (Star-Badge)
   Für besonders wichtige Seiten wie umsatzstärkste Leistungen.
   ============================================ */

/* Badge oben an der Karte, neben dem Level-Badge */
.node-primary-badge {
  position: absolute;
  top: -8px;
  /* Wenn Level-Badge da ist (left: 10px), sitzen wir daneben.
     Wenn nicht (Home), sitzen wir direkt links. Wir nutzen ein Fallback
     mit Standard-Position right:10px. */
  right: 10px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 9px;
  font-weight: 700;
  padding: 2px 8px 2px 6px;
  border-radius: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
  color: #5a3a05;
  border: 1.5px solid #d97706;
  pointer-events: none;
  line-height: 1.4;
  box-shadow: 0 2px 4px rgba(217, 119, 6, 0.32), 0 0 0 1px rgba(255, 255, 255, 0.4) inset;
  z-index: 2;
}

.node-primary-badge svg {
  flex-shrink: 0;
  /* Etwas heller als die Schrift damit der Stern strahlt */
  color: #fef3c7;
  filter: drop-shadow(0 0.5px 0 rgba(120, 53, 15, 0.3));
}

/* Subtiles Highlight der Karte selbst wenn Primär */
.node.is-primary {
  border-color: #f59e0b;
  box-shadow:
    0 0 0 1px rgba(245, 158, 11, 0.3),
    0 4px 14px rgba(245, 158, 11, 0.16),
    0 1px 3px rgba(0, 0, 0, 0.04);
}

.node.is-primary:hover {
  border-color: #d97706;
  box-shadow:
    0 0 0 1px rgba(245, 158, 11, 0.4),
    0 8px 22px rgba(245, 158, 11, 0.22),
    0 2px 4px rgba(0, 0, 0, 0.04);
}

.node.is-primary.selected {
  border-color: #d97706;
  box-shadow:
    0 0 0 3px rgba(245, 158, 11, 0.28),
    0 6px 18px rgba(245, 158, 11, 0.2),
    0 4px 12px rgba(0, 0, 0, 0.08);
}

/* Quick-Action Star-Button im aktiven Zustand */
.node-quick-action-btn-primary-on {
  background: #fff7ed !important;
  color: #b45309 !important;
  border-color: #fed7aa !important;
}
.node-quick-action-btn-primary-on:hover {
  background: #ffedd5 !important;
}

/* Preview-Popover: Primär-Badge im Header */
.node-preview-header.has-primary {
  background: linear-gradient(180deg, #fffbeb 0%, transparent 100%);
}

.node-preview-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.node-preview-level {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-soft);
  font-weight: 600;
  /* Alte Block-Variante hatte margin-bottom — jetzt im Flex-Meta-Container */
  margin: 0;
}

.node-preview-primary-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 9.5px;
  font-weight: 700;
  padding: 2px 8px 2px 6px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
  color: #5a3a05;
  border: 1px solid #d97706;
  box-shadow: 0 1px 2px rgba(217, 119, 6, 0.25), 0 0 0 1px rgba(255, 255, 255, 0.4) inset;
}

.node-preview-primary-badge svg {
  color: #fef3c7;
}

/* ============================================
   ADMIN-NOTIZEN (Editor: Slide-In Panel von rechts)
   ============================================ */

/* Button mit Counter-Badge in der Top-Bar */
.btn-with-badge {
  position: relative;
}

.btn-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: #f59e0b;
  color: white;
  font-size: 9.5px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  box-shadow: 0 0 0 2px var(--color-surface);
}

/* Overlay hinter dem Panel - dim Effect + Klick zum Schließen */
.admin-notes-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.18);
  z-index: 100;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease;
}
.admin-notes-overlay.open {
  opacity: 1;
  pointer-events: auto;
}

/* Side-Panel */
.admin-notes-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 380px;
  max-width: calc(100vw - 40px);
  background: var(--color-surface);
  border-left: 1px solid var(--color-border);
  box-shadow: -8px 0 24px rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 101;
  font-family: var(--font-display);
}

.admin-notes-panel.open {
  transform: translateX(0);
}

.admin-notes-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 16px 18px 14px;
  border-bottom: 1px solid var(--color-border);
  gap: 12px;
}

.admin-notes-title {
  margin: 0 0 2px;
  font-size: 15px;
  font-weight: 500;
  color: var(--color-text);
  letter-spacing: -0.005em;
}

.admin-notes-sub {
  margin: 0;
  font-size: 11px;
  color: var(--color-text-soft);
  line-height: 1.4;
}

.admin-notes-close {
  background: none;
  border: none;
  padding: 4px;
  cursor: pointer;
  color: var(--color-text-soft);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.15s ease, color 0.15s ease;
}
.admin-notes-close:hover {
  background: var(--color-surface-alt);
  color: var(--color-text);
}

/* Composer: Eingabefeld unten */
.admin-notes-composer {
  padding: 14px 18px;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface-alt);
}

.admin-notes-composer textarea {
  width: 100%;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 10px 12px;
  font-family: inherit;
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-text);
  background: var(--color-surface);
  resize: vertical;
  min-height: 70px;
  max-height: 180px;
  outline: none;
  transition: border-color 0.15s ease;
}
.admin-notes-composer textarea:focus {
  border-color: var(--color-text);
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.04);
}

.admin-notes-composer-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 8px;
  gap: 8px;
}

.admin-notes-composer-hint {
  font-size: 10.5px;
  color: var(--color-text-soft);
}

/* Liste der Notizen - scrollfähig */
.admin-notes-list {
  flex: 1;
  overflow-y: auto;
  padding: 10px 12px 24px;
  scrollbar-width: thin;
}

.admin-notes-list::-webkit-scrollbar {
  width: 6px;
}
.admin-notes-list::-webkit-scrollbar-thumb {
  background: var(--color-border);
  border-radius: 3px;
}

.admin-notes-empty,
.admin-notes-loading,
.admin-notes-error {
  padding: 30px 16px;
  text-align: center;
  color: var(--color-text-soft);
  font-size: 13px;
}
.admin-notes-error {
  color: #b91c1c;
}

/* Einzelne Notiz */
.admin-note {
  position: relative;
  padding: 12px 14px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  transition: border-color 0.15s ease, background 0.15s ease;
  animation: admin-note-in 0.3s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes admin-note-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

.admin-note + .admin-note {
  margin-top: 8px;
}

.admin-note:hover {
  border-color: var(--color-border-strong);
}

.admin-note-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: 10.5px;
  color: var(--color-text-soft);
  margin-bottom: 6px;
}

.admin-note-author {
  font-weight: 500;
  color: var(--color-text-muted);
}

.admin-note-sep {
  opacity: 0.5;
}

.admin-note-text {
  font-size: 13px;
  line-height: 1.55;
  color: var(--color-text);
  word-break: break-word;
}

.admin-note-text a {
  color: #2563eb;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.admin-note-actions {
  position: absolute;
  top: 8px;
  right: 8px;
  display: flex;
  gap: 2px;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.admin-note:hover .admin-note-actions {
  opacity: 1;
}

.admin-note-action {
  background: none;
  border: none;
  padding: 4px;
  cursor: pointer;
  color: var(--color-text-soft);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.12s ease, color 0.12s ease;
}
.admin-note-action:hover {
  background: var(--color-surface-alt);
  color: var(--color-text);
}
.admin-note-action-danger:hover {
  background: #fee2e2;
  color: #dc2626;
}

/* Edit-Modus */
.admin-note-editing {
  background: var(--color-surface-alt);
}

.admin-note-edit-input {
  width: 100%;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: 8px 10px;
  font-family: inherit;
  font-size: 13px;
  line-height: 1.5;
  background: white;
  resize: vertical;
  outline: none;
}
.admin-note-edit-input:focus {
  border-color: var(--color-text);
}

.admin-note-edit-actions {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  margin-top: 8px;
}

/* Mobile: Panel auf voller Breite */
@media (max-width: 520px) {
  .admin-notes-panel {
    width: 100%;
    max-width: 100%;
  }
}

/* ============================================
   DASHBOARD: NOTIZEN-BADGE AUF KARTEN
   ============================================ */

.ob-card-action-notes {
  position: relative;
}

.ob-card-action-badge {
  position: absolute;
  top: -3px;
  right: -3px;
  min-width: 14px;
  height: 14px;
  padding: 0 4px;
  border-radius: 999px;
  background: #f59e0b;
  color: white;
  font-size: 9px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  box-shadow: 0 0 0 2px var(--color-surface);
}

/* Wenn Notizen vorhanden, das Notes-Icon immer sichtbar machen
   (sonst nur on hover via .ob-card:hover .ob-card-actions) */
.ob-card-action-notes:has(.ob-card-action-badge) {
  opacity: 1 !important;
}

/* Dashboard Notes-Modal */
.admin-notes-modal-content {
  max-width: 560px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
}
.admin-notes-modal-content .modal-body {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}
.admin-notes-composer-dashboard {
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 12px;
  margin-bottom: 14px;
}
.admin-notes-composer-dashboard textarea {
  width: 100%;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 10px 12px;
  font-family: inherit;
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-text);
  background: var(--color-surface);
  resize: vertical;
  min-height: 70px;
  outline: none;
}
.admin-notes-composer-dashboard textarea:focus {
  border-color: var(--color-text);
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.04);
}

.modal-subtitle {
  font-size: 12px;
  color: var(--color-text-soft);
  margin-top: 2px;
}

/* ============================================
   SITEMAP-DRAWER (Presenter)
   Premium-UI für die Übersicht aller Seiten
   ============================================ */


/* Overlay hinter dem Drawer */
.sitemap-drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.22);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  z-index: 1100;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.28s ease;
}

.sitemap-drawer-overlay.open {
  opacity: 1;
  pointer-events: auto;
}

/* Drawer-Container */
.sitemap-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 420px;
  max-width: calc(100vw - 32px);
  background: #ffffff;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 1101;
  font-family: var(--font-display);
  box-shadow: -16px 0 40px rgba(15, 23, 42, 0.12), -2px 0 8px rgba(15, 23, 42, 0.04);
  overflow: hidden;
}

.sitemap-drawer.open {
  transform: translateX(0);
}

/* Header */
.sitemap-drawer-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 20px 22px 16px;
  gap: 12px;
  /* Subtiler Gradient als Hero-Akzent */
  background: linear-gradient(180deg, #fafafa 0%, transparent 100%);
  border-bottom: 1px solid var(--color-border);
}

.sitemap-drawer-title-wrap {
  min-width: 0;
}

.sitemap-drawer-title {
  margin: 0 0 3px;
  font-size: 17px;
  font-weight: 500;
  color: var(--color-text);
  letter-spacing: -0.015em;
  line-height: 1.2;
}

.sitemap-drawer-sub {
  margin: 0;
  font-size: 11.5px;
  color: var(--color-text-soft);
  line-height: 1.4;
}

.sitemap-drawer-close {
  background: none;
  border: none;
  padding: 6px;
  cursor: pointer;
  color: var(--color-text-soft);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.15s ease, color 0.15s ease;
}

.sitemap-drawer-close:hover {
  background: var(--color-surface-alt);
  color: var(--color-text);
}

/* Search-Bar */
.sitemap-drawer-search {
  position: relative;
  padding: 12px 18px;
  border-bottom: 1px solid var(--color-border);
  background: white;
}

.sitemap-search-icon {
  position: absolute;
  top: 50%;
  left: 30px;
  transform: translateY(-50%);
  color: var(--color-text-soft);
  pointer-events: none;
}

.sitemap-drawer-search input {
  width: 100%;
  padding: 9px 32px 9px 32px;
  font-family: inherit;
  font-size: 13px;
  background: var(--color-surface-alt);
  border: 1px solid transparent;
  border-radius: 10px;
  color: var(--color-text);
  outline: none;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.sitemap-drawer-search input:focus {
  background: white;
  border-color: var(--color-text);
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.04);
}

.sitemap-drawer-search input::placeholder {
  color: var(--color-text-soft);
}

.sitemap-search-clear {
  position: absolute;
  top: 50%;
  right: 26px;
  transform: translateY(-50%);
  background: none;
  border: none;
  padding: 4px;
  color: var(--color-text-soft);
  cursor: pointer;
  border-radius: 4px;
  display: flex;
  align-items: center;
}
.sitemap-search-clear:hover {
  background: var(--color-surface-alt);
  color: var(--color-text);
}

/* Body: Scroll-Container für Gruppen + Seiten */
.sitemap-drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 14px 0;
  scrollbar-width: thin;
}

.sitemap-drawer-body::-webkit-scrollbar {
  width: 6px;
}
.sitemap-drawer-body::-webkit-scrollbar-thumb {
  background: var(--color-border);
  border-radius: 3px;
}
.sitemap-drawer-body::-webkit-scrollbar-thumb:hover {
  background: var(--color-border-strong);
}

/* Gruppe (Bereich) */
.sitemap-group {
  margin-bottom: 4px;
}

.sitemap-group-header {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  background: none;
  border: none;
  padding: 8px 18px;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  transition: background 0.12s ease;
}

.sitemap-group-header:hover {
  background: var(--color-surface-alt);
}

.sitemap-group-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--group-color, currentColor) 18%, transparent);
}

.sitemap-group-icon {
  width: 18px;
  height: 18px;
  border-radius: 5px;
  background: var(--group-color, var(--color-surface-alt));
  color: white;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.sitemap-group-icon svg {
  opacity: 0.95;
}

.sitemap-group-title {
  flex: 1;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--color-text);
  letter-spacing: -0.005em;
  text-transform: uppercase;
  font-feature-settings: 'tnum';
  letter-spacing: 0.04em;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.sitemap-group-count {
  font-size: 10.5px;
  font-weight: 500;
  color: var(--color-text-soft);
  background: var(--color-surface-alt);
  padding: 1px 7px;
  border-radius: 999px;
  min-width: 20px;
  text-align: center;
}

.sitemap-group-chevron {
  color: var(--color-text-soft);
  transition: transform 0.22s ease;
  flex-shrink: 0;
}

.sitemap-group.collapsed .sitemap-group-chevron {
  transform: rotate(-90deg);
}

.sitemap-group-pages {
  padding: 2px 12px 8px;
  max-height: 1000px;
  overflow: hidden;
  transition: max-height 0.28s ease, padding 0.28s ease;
}

.sitemap-group.collapsed .sitemap-group-pages {
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
}

.sitemap-group-empty {
  padding: 8px 12px;
  font-size: 11.5px;
  color: var(--color-text-soft);
  font-style: italic;
}

/* Page-Item */
.sitemap-page {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  margin: 1px 0;
  background: none;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  font-size: 13px;
  color: var(--color-text);
  position: relative;
  transition: background 0.12s ease, transform 0.12s ease;
}

.sitemap-page::before {
  /* Linke Akzent-Linie in der Bereichsfarbe (taucht beim Hover stärker auf) */
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 2px;
  border-radius: 2px;
  background: var(--area-color, var(--color-border));
  opacity: 0.4;
  transition: opacity 0.15s ease, left 0.15s ease;
}

.sitemap-page:hover {
  background: var(--color-surface-alt);
}

.sitemap-page:hover::before {
  opacity: 1;
}

.sitemap-page:active {
  transform: scale(0.98);
}

/* Hierarchie-Indent: L1 = kein Indent, L2 = 14px, L3 = 28px, L4 = 42px */
.sitemap-page-l1 { padding-left: 16px; }
.sitemap-page-l2 { padding-left: 30px; }
.sitemap-page-l3 { padding-left: 44px; }
.sitemap-page-l4 { padding-left: 58px; }

.sitemap-page-l2::before { left: 14px; }
.sitemap-page-l3::before { left: 28px; }
.sitemap-page-l4::before { left: 42px; }

/* Level-Badge */
.sitemap-page-level {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 16px;
  padding: 0 5px;
  border-radius: 4px;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: var(--color-surface-alt);
  color: var(--color-text-soft);
  flex-shrink: 0;
}

.sitemap-page-l1 .sitemap-page-level {
  background: #1a1a1a;
  color: white;
}
.sitemap-page-l2 .sitemap-page-level {
  background: #e5e5e2;
  color: #4a4a48;
}
.sitemap-page-l3 .sitemap-page-level {
  background: #e0e7ff;
  color: #4338ca;
}
.sitemap-page-l4 .sitemap-page-level {
  background: #f3e8ff;
  color: #7e22ce;
}

.sitemap-page.is-home .sitemap-page-level {
  background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
  color: white;
  min-width: 32px;
}

.sitemap-page-title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
  letter-spacing: -0.005em;
}

/* Indicators rechts */
.sitemap-page-inds {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.sitemap-page-ind {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  height: 16px;
  min-width: 16px;
  padding: 0 4px;
  border-radius: 4px;
  font-size: 9.5px;
  font-weight: 600;
  background: var(--color-surface-alt);
  color: var(--color-text-soft);
}

.sitemap-page-ind-desc {
  background: #f1f5f9;
  color: #475569;
}

.sitemap-page-ind-feat {
  background: #f0fdf4;
  color: #16a34a;
}

.sitemap-page-ind-primary {
  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
  color: #5a3a05;
  border: 1px solid #d97706;
  padding: 0 4px;
}

/* Primär-Seite: Gold-Hint im Background */
.sitemap-page.is-primary {
  background: linear-gradient(90deg, rgba(251, 191, 36, 0.08) 0%, transparent 100%);
}
.sitemap-page.is-primary:hover {
  background: linear-gradient(90deg, rgba(251, 191, 36, 0.14) 0%, var(--color-surface-alt) 100%);
}
.sitemap-page.is-primary .sitemap-page-title {
  font-weight: 500;
}

/* Empty-State */
.sitemap-empty {
  text-align: center;
  padding: 60px 20px;
  color: var(--color-text-soft);
}
.sitemap-empty svg {
  opacity: 0.4;
  margin-bottom: 12px;
}
.sitemap-empty p {
  margin: 0;
  font-size: 12.5px;
}

/* Footer */
.sitemap-drawer-footer {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-top: 1px solid var(--color-border);
  background: var(--color-surface-alt);
  font-size: 10.5px;
  color: var(--color-text-soft);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.sitemap-drawer-footer-sep {
  opacity: 0.4;
}

/* Mobile-Anpassungen */
@media (max-width: 540px) {
  .sitemap-drawer {
    width: 100%;
    max-width: 100%;
  }
  .sitemap-drawer-header {
    padding: 16px 18px 14px;
  }
  .sitemap-drawer-title {
    font-size: 16px;
  }
}

/* ============================================
   PRESENTER TOUCHBAR (iPad-optimierte rechte Steuerleiste)
   Ein zusammenhängender vertikaler Block mit großen quadratischen
   Touch-Buttons, ideal für Finger-Bedienung am iPad.
   ============================================ */

.presenter-touchbar {
  position: fixed;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
  z-index: 12;

  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  padding: 8px;

  /* Glasmorphic Container: leichte Transparenz + Backdrop-Blur damit der
     Canvas darunter durchschimmert ohne den Block unprofessionell wirken
     zu lassen. Auf iPad sieht das edel aus. */
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: saturate(160%) blur(20px);
  -webkit-backdrop-filter: saturate(160%) blur(20px);

  border: 1px solid rgba(15, 23, 42, 0.06);
  border-radius: 20px;

  /* Mehrlagiger Shadow für richtigen Schwebe-Effekt */
  box-shadow:
    0 24px 48px -12px rgba(15, 23, 42, 0.18),
    0 12px 24px -8px rgba(15, 23, 42, 0.1),
    0 4px 8px -2px rgba(15, 23, 42, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);

  font-family: var(--font-display);
}

/* Einzelner Button: großzügiges Quadrat mit Icon + Label */
.touchbar-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;

  width: 56px;
  height: 56px;
  padding: 6px 4px;

  background: transparent;
  border: none;
  border-radius: 14px;

  color: var(--color-text);
  cursor: pointer;

  /* Smooth, taktil wirkendes Easing */
  transition:
    background-color 0.18s ease,
    transform 0.12s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.18s ease,
    color 0.15s ease;

  /* Verhindert Text-Selection beim Touch-Drücken */
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.touchbar-btn svg {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  opacity: 0.85;
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.touchbar-btn-label {
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--color-text-soft);
  line-height: 1;
  white-space: nowrap;
  transition: color 0.15s ease;
}

.touchbar-btn:hover {
  background: rgba(15, 23, 42, 0.06);
}

.touchbar-btn:hover svg {
  opacity: 1;
}

.touchbar-btn:hover .touchbar-btn-label {
  color: var(--color-text);
}

/* Active-State: leichtes "Eindrücken" - simuliert physisches Button-Gefühl */
.touchbar-btn:active {
  transform: scale(0.94);
  background: rgba(15, 23, 42, 0.1);
  transition-duration: 0.05s;
}

/* Touch-Devices: kein Hover-Effekt damit der Sticky-Hover auf iPad nicht stört */
@media (hover: none) {
  .touchbar-btn:hover {
    background: transparent;
  }
  .touchbar-btn:hover svg {
    opacity: 0.85;
  }
  .touchbar-btn:hover .touchbar-btn-label {
    color: var(--color-text-soft);
  }
}

/* Primärer Button (Pointer) - hervorgehoben mit Indigo-Akzent */
.touchbar-btn-primary {
  background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
  color: white;
  box-shadow:
    0 4px 12px rgba(79, 70, 229, 0.32),
    0 1px 3px rgba(79, 70, 229, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.touchbar-btn-primary svg {
  opacity: 1;
  color: white;
}

.touchbar-btn-primary .touchbar-btn-label {
  color: rgba(255, 255, 255, 0.92);
  font-weight: 700;
}

.touchbar-btn-primary:hover {
  background: linear-gradient(135deg, #4f46e5 0%, #4338ca 100%);
  box-shadow:
    0 6px 16px rgba(79, 70, 229, 0.4),
    0 2px 4px rgba(79, 70, 229, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.24);
  transform: translateY(-1px);
}

/* Label-Farbe beim Hover des Primär-Buttons explizit halten,
   sonst überschreibt die allgemeine .touchbar-btn:hover-Regel sie zu dunkel */
.touchbar-btn-primary:hover .touchbar-btn-label {
  color: white;
}

.touchbar-btn-primary:hover svg {
  color: white;
  opacity: 1;
}

.touchbar-btn-primary:active {
  background: linear-gradient(135deg, #4338ca 0%, #3730a3 100%);
  transform: scale(0.94);
}

@media (hover: none) {
  .touchbar-btn-primary:hover {
    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
    transform: none;
  }
  .touchbar-btn-primary .touchbar-btn-label {
    color: rgba(255, 255, 255, 0.92);
  }
}

/* Aktiv-Zustand (Pointer-Modus läuft): zusätzlicher Pulse-Ring */
.touchbar-btn-primary.pointer-mode-active {
  background: linear-gradient(135deg, #4338ca 0%, #3730a3 100%);
  animation: touchbar-pulse 1.8s ease-in-out infinite;
}

@keyframes touchbar-pulse {
  0%, 100% {
    box-shadow:
      0 4px 12px rgba(79, 70, 229, 0.4),
      0 0 0 0 rgba(99, 102, 241, 0.5),
      inset 0 1px 0 rgba(255, 255, 255, 0.18);
  }
  50% {
    box-shadow:
      0 6px 16px rgba(79, 70, 229, 0.5),
      0 0 0 8px rgba(99, 102, 241, 0),
      inset 0 1px 0 rgba(255, 255, 255, 0.24);
  }
}

/* Sitemap aktiv (Drawer offen) */
.touchbar-btn#sitemap-toggle-btn.active {
  background: var(--color-text);
  color: white;
}
.touchbar-btn#sitemap-toggle-btn.active svg {
  opacity: 1;
  color: white;
}
.touchbar-btn#sitemap-toggle-btn.active .touchbar-btn-label {
  color: rgba(255, 255, 255, 0.92);
  font-weight: 700;
}
/* Beim Hover über den aktiven Sitemap-Button: Text- und Icon-Farbe weiß halten */
.touchbar-btn#sitemap-toggle-btn.active:hover .touchbar-btn-label {
  color: white;
}
.touchbar-btn#sitemap-toggle-btn.active:hover svg {
  color: white;
  opacity: 1;
}

/* Separator-Linie zwischen Button-Gruppen */
.touchbar-separator {
  height: 1px;
  margin: 2px 8px;
  background: rgba(15, 23, 42, 0.08);
  flex-shrink: 0;
}

/* ============================================
   Touchbar Responsive: Mobile / kleines iPad-Portrait
   ============================================ */

/* Bei sehr schmalen Screens: Touchbar bleibt rechts, etwas kompakter */
@media (max-width: 480px) {
  .presenter-touchbar {
    right: 12px;
    padding: 6px;
    gap: 3px;
    border-radius: 18px;
  }
  .touchbar-btn {
    width: 50px;
    height: 50px;
    border-radius: 12px;
  }
  .touchbar-btn svg {
    width: 20px;
    height: 20px;
  }
  .touchbar-btn-label {
    font-size: 9px;
  }
}

/* ============================================
   Crosshair-Cursor + Pulse-Node bei Pointer-Modus
   (aus alten Pointer-Styles übernommen)
   ============================================ */

#presenter-canvas-wrap.pointer-mode-active,
#presenter-canvas-wrap.pointer-mode-active .canvas-container {
  cursor: crosshair !important;
}

#presenter-canvas-wrap.pointer-mode-active .node {
  cursor: crosshair !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease, outline-color 0.15s ease;
}

#presenter-canvas-wrap.pointer-mode-active .node:hover {
  outline: 2px solid #6366f1;
  outline-offset: 2px;
  transform: scale(1.04);
  z-index: 10;
}

/* Im Präsentations-Modus mit ausgeblendeten Infos: Touchbar etwas dezenter */
body.present-info-hidden .presenter-touchbar {
  opacity: 0.88;
}
body.present-info-hidden .presenter-touchbar:hover {
  opacity: 1;
}

/* ============================================
   DETAIL-PANEL: SEITENINHALT-SEKTION
   Neue strukturierte Ansicht: Beschreibung, Funktionen-Liste, Notizen
   ============================================ */

.detail-content-section {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--color-border);
}

.detail-content-section-header {
  margin-bottom: 14px;
}

.detail-content-section-title {
  margin: 0 0 3px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--color-text);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.detail-content-section-sub {
  margin: 0;
  font-size: 11px;
  color: var(--color-text-soft);
  line-height: 1.4;
}

/* Größeres Textarea für die Beschreibung */
.form-textarea-lg {
  min-height: 90px;
  resize: vertical;
}

/* ============================================
   FUNKTIONEN-EDITOR (Item-Liste)
   ============================================ */

.features-editor {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.features-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.feature-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px 7px 8px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  transition: border-color 0.15s ease, background 0.15s ease;
  animation: feature-in 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes feature-in {
  from { opacity: 0; transform: translateX(-6px); }
  to { opacity: 1; transform: translateX(0); }
}

.feature-item:hover {
  border-color: var(--color-border-strong);
  background: var(--color-surface-alt);
}

.feature-item-bullet {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #dcfce7;
  color: #16a34a;
}

.feature-item-text {
  flex: 1;
  font-size: 12.5px;
  color: var(--color-text);
  line-height: 1.4;
  cursor: text;
  word-break: break-word;
  outline: none;
  padding: 2px 4px;
  border-radius: 4px;
  transition: background 0.15s ease;
}

.feature-item-text:hover,
.feature-item-text:focus {
  background: rgba(0, 0, 0, 0.03);
}

.feature-item-edit-input {
  flex: 1;
  font-family: inherit;
  font-size: 12.5px;
  color: var(--color-text);
  line-height: 1.4;
  background: white;
  border: 1px solid var(--color-text);
  border-radius: 4px;
  padding: 4px 6px;
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.04);
}

.feature-item-remove {
  flex-shrink: 0;
  background: none;
  border: none;
  padding: 4px;
  border-radius: 5px;
  color: var(--color-text-soft);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s ease, background 0.15s ease, color 0.15s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.feature-item:hover .feature-item-remove {
  opacity: 1;
}

.feature-item-remove:hover {
  background: #fee2e2;
  color: #dc2626;
}

.features-empty {
  padding: 14px 12px;
  font-size: 11.5px;
  color: var(--color-text-soft);
  text-align: center;
  background: var(--color-surface-alt);
  border: 1px dashed var(--color-border);
  border-radius: 8px;
  font-style: italic;
}

/* Add-Row unterhalb der Liste */
.features-add-row {
  display: flex;
  gap: 6px;
  align-items: stretch;
}

.features-add-input {
  flex: 1;
  font-size: 12.5px;
  padding: 7px 10px;
}

.features-add-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  padding: 6px 10px;
}

.features-add-btn svg {
  flex-shrink: 0;
}

/* Disabled-Zustand (keine Node ausgewählt) */
.features-add-input:disabled {
  background: var(--color-surface-alt);
  color: var(--color-text-soft);
  cursor: not-allowed;
}

/* ============================================
   PAGE-NOTES-SEKTION (verknüpfte Sticky-Notes)
   ============================================ */

.page-notes-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.page-notes-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.page-note-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 10px;
  background: #fefce8;
  border: 1px solid #fde68a;
  border-radius: 8px;
  transition: border-color 0.15s ease, transform 0.12s ease;
  animation: feature-in 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

.page-note-item:hover {
  border-color: #f59e0b;
}

.page-note-item-text {
  flex: 1;
  font-size: 12px;
  color: #713f12;
  line-height: 1.45;
  cursor: pointer;
  word-break: break-word;
  min-width: 0;
}

.page-note-item-actions {
  display: flex;
  gap: 2px;
  opacity: 0;
  transition: opacity 0.15s ease;
  flex-shrink: 0;
}

.page-note-item:hover .page-note-item-actions {
  opacity: 1;
}

.page-note-action {
  background: none;
  border: none;
  padding: 4px;
  border-radius: 5px;
  color: #92400e;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, color 0.15s ease;
}

.page-note-action:hover {
  background: rgba(146, 64, 14, 0.12);
}

.page-note-action-danger:hover {
  background: #fee2e2;
  color: #dc2626;
}

.page-notes-empty {
  padding: 14px 12px;
  font-size: 11.5px;
  color: var(--color-text-soft);
  text-align: center;
  background: var(--color-surface-alt);
  border: 1px dashed var(--color-border);
  border-radius: 8px;
  font-style: italic;
}

.page-notes-add-btn {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  padding: 6px 10px;
}

/* Sticky-Note Flash bei Focus aus dem Detail-Panel */
@keyframes sticky-note-flash {
  0% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.6); transform: scale(1); }
  40% { box-shadow: 0 0 0 8px rgba(245, 158, 11, 0.2); transform: scale(1.04); }
  100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0); transform: scale(1); }
}

.sticky-note.sticky-note-flash {
  animation: sticky-note-flash 1.6s ease-out;
  z-index: 50;
}

/* ============================================
   DETAIL-PANEL: UI-VERFEINERUNGEN
   ============================================ */

/* Feature-Item: klareres Layout, festere Höhe */
.feature-item {
  min-height: 34px;
}

/* Feature-Bullet: etwas mehr Präsenz */
.feature-item-bullet {
  width: 20px;
  height: 20px;
}

.feature-item-text {
  font-size: 12.5px;
  padding: 3px 4px;
}

.feature-item-text:focus {
  outline: 1px solid var(--color-text);
  outline-offset: 0;
}

/* Add-Row: in eine Reihe, gleich groß */
.features-add-row {
  margin-top: 6px;
  display: flex;
  gap: 6px;
  align-items: stretch;
}

.features-add-input {
  height: 32px;
  padding: 0 10px;
  font-size: 12.5px;
  border: 1px solid var(--color-border);
  border-radius: 7px;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.features-add-input:focus {
  border-color: var(--color-text);
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.04);
}

.features-add-btn {
  height: 32px;
  flex-shrink: 0;
  font-size: 12px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

/* ============================================
   PAGE-NOTES: Actions-Row + Link-Dropdown
   ============================================ */

.page-notes-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
  position: relative;
}

.page-notes-add-btn,
.page-notes-link-btn {
  height: 32px;
  font-size: 12px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}

.page-notes-link-btn {
  /* Sekundärer Button — leichter im Akzent */
  color: var(--color-text-muted);
}

/* Dropdown-Auswahl bestehender Notizen */
.page-notes-link-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 50;
  background: white;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12), 0 2px 6px rgba(15, 23, 42, 0.06);
  padding: 8px;
  max-height: 240px;
  overflow-y: auto;
  animation: dropdown-in 0.18s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes dropdown-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

.page-notes-link-dropdown-header {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--color-text-soft);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 4px 6px 8px;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 4px;
}

.page-notes-link-option {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  width: 100%;
  background: none;
  border: none;
  padding: 7px 8px;
  border-radius: 6px;
  cursor: pointer;
  text-align: left;
  transition: background 0.12s ease;
}

.page-notes-link-option:hover {
  background: var(--color-surface-alt);
}

.page-notes-link-option-icon {
  flex-shrink: 0;
  color: #b45309;
  margin-top: 2px;
}

.page-notes-link-option-text {
  flex: 1;
  font-size: 12px;
  line-height: 1.4;
  color: var(--color-text);
  word-break: break-word;
}

/* Note-Connection-Line: dezent gestrichelt zwischen Note und Node */
.note-link-line {
  /* SVG-Attribute setzen schon stroke/dash, hier nur evtl. CSS-Anpassung */
  transition: stroke-opacity 0.2s ease;
}

/* Highlight bei Notiz-Hover */
.mindmap-note:hover ~ * .note-link-line,
.node:hover ~ * .note-link-line {
  stroke-opacity: 0.7;
}

/* Empty-State leicht verbessern */
.page-notes-empty,
.features-empty {
  padding: 12px 14px;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--color-text-soft);
  text-align: center;
  background: var(--color-surface-alt);
  border: 1px dashed var(--color-border);
  border-radius: 8px;
  font-style: normal;
}

/* ============================================
   PAGE-NOTES: COMPOSER + INLINE-EDIT
   Notizen direkt im Detail-Panel rechts schreiben.
   ============================================ */

/* Composer-Block oben in der Sektion */
.page-notes-composer {
  background: #fefce8;
  border: 1px solid #fde68a;
  border-radius: 10px;
  padding: 10px;
  margin-bottom: 10px;
  animation: feature-in 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

.page-notes-composer-input {
  width: 100%;
  background: #fffef5;
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 8px 10px;
  font-family: inherit;
  font-size: 12.5px;
  line-height: 1.5;
  color: #713f12;
  resize: vertical;
  min-height: 56px;
  outline: none;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.page-notes-composer-input:focus {
  border-color: #f59e0b;
  background: white;
}

.page-notes-composer-input::placeholder {
  color: #b45309;
  opacity: 0.6;
}

.page-notes-composer-hint {
  font-size: 10.5px;
  color: #92400e;
  opacity: 0.75;
}

#page-notes-composer-submit {
  height: 28px;
  font-size: 11.5px;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  flex-shrink: 0;
}

.page-notes-composer-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 8px;
  flex-wrap: wrap;
}

.page-notes-composer-hint {
  font-size: 10.5px;
  color: #92400e;
  opacity: 0.75;
  min-width: 0;
}

/* Bei sehr schmalem Panel: Hint ausblenden, Button auf volle Breite */
@media (max-width: 1100px) {
  .page-notes-composer-hint {
    display: none;
  }
  #page-notes-composer-submit {
    width: 100%;
    justify-content: center;
  }
}

/* Items: jede Notiz als eigener gelber Block mit eigener Textarea */
.page-notes-items {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 6px;
}

.page-note-item {
  background: #fefce8;
  border: 1px solid #fde68a;
  border-radius: 10px;
  padding: 8px 10px;
  animation: feature-in 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  transition: border-color 0.15s ease;
}

.page-note-item:hover {
  border-color: #fbbf24;
}

.page-note-item-input {
  width: 100%;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 5px;
  padding: 4px 6px;
  font-family: inherit;
  font-size: 12.5px;
  line-height: 1.5;
  color: #713f12;
  resize: vertical;
  min-height: 50px;
  outline: none;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.page-note-item-input:hover {
  background: rgba(255, 255, 255, 0.5);
}

.page-note-item-input:focus {
  background: white;
  border-color: #f59e0b;
}

.page-note-item-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 4px;
  gap: 8px;
}

.page-note-item-status {
  font-size: 10px;
  color: #92400e;
  opacity: 0.65;
  font-weight: 500;
  transition: opacity 0.2s ease, color 0.2s ease;
}

.page-note-item-status.is-typing {
  color: #b45309;
  opacity: 1;
}

.page-note-item-actions {
  display: flex;
  gap: 2px;
  opacity: 0.45;
  transition: opacity 0.15s ease;
}

.page-note-item:hover .page-note-item-actions,
.page-note-item:focus-within .page-note-item-actions {
  opacity: 1;
}

.page-note-action {
  background: none;
  border: none;
  padding: 3px;
  border-radius: 4px;
  color: #92400e;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, color 0.15s ease;
}

.page-note-action:hover {
  background: rgba(146, 64, 14, 0.12);
}

.page-note-action-danger:hover {
  background: #fee2e2;
  color: #dc2626;
}

/* Actions-Row unten (Bestehende verknüpfen) */
.page-notes-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
  position: relative;
}

.page-notes-actions:empty {
  display: none;
}

.page-notes-link-btn {
  height: 28px;
  font-size: 11.5px;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--color-text-soft);
}

/* Empty-State angepasst */
.page-notes-empty {
  padding: 14px 12px;
  font-size: 11.5px;
  color: var(--color-text-soft);
  text-align: center;
  background: var(--color-surface-alt);
  border: 1px dashed var(--color-border);
  border-radius: 8px;
  margin-bottom: 6px;
}

/* ============================================
   ZWEI ITEM-LISTEN: INHALTE (blau) + FUNKTIONEN/TECH (grün)
   Visuell trennen damit der User direkt erkennt was wo gehört.
   ============================================ */

/* Form-Sub-Label unter dem Haupt-Label (für Erklärtexte) */
.form-sub-label {
  margin: 2px 0 8px;
  font-size: 11px;
  color: var(--color-text-soft);
  line-height: 1.4;
  font-style: italic;
}

/* INHALTE-Liste: blauer Akzent (was der Nutzer sieht) */
.feature-item-blue .feature-item-bullet {
  background: #dbeafe;
  color: #2563eb;
}

/* FUNKTIONEN-Liste: grüner Akzent (technisch) */
.feature-item-green .feature-item-bullet {
  background: #dcfce7;
  color: #16a34a;
}

/* Container-spezifische Add-Input-Akzentfarben beim Fokussieren */
.features-list-contents + .features-add-row .features-add-input:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.08);
}

.features-list-features + .features-add-row .features-add-input:focus {
  border-color: #16a34a;
  box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.08);
}

/* Sub-Label etwas dezenter darstellen */
.form-field .form-sub-label {
  margin-top: -2px;
}

/* ============================================
   INDICATORS: Knoten + Sitemap zeigen separate Badges
   ============================================ */

/* Knoten-Indicator: Inhalte (blau) */
.node-content-indicator-content {
  background: #dbeafe;
  color: #1d4ed8;
}

/* Knoten-Indicator: Funktionen (grün) - bleibt wie bisher */
.node-content-indicator-feat {
  background: #dcfce7;
  color: #15803d;
}

/* Sitemap-Indicator: Inhalte */
.sitemap-page-ind-content {
  background: #dbeafe;
  color: #1d4ed8;
}

/* Preview-Popover: Inhalte-Sektion mit blauem Akzent-Strip */
.node-preview-section-contents {
  position: relative;
}

.node-preview-section-contents .node-preview-section-label {
  color: #1d4ed8;
}

.node-preview-section-contents .node-preview-section-count {
  background: #dbeafe;
  color: #1d4ed8;
}

.node-preview-contents li::marker {
  color: #2563eb;
}


/* ============================================
   AREA-LIST: ERWEITERTES MANAGEMENT
   Edit-Icon, Drag-Handle, Add-Button, Edit-Popover
   ============================================ */

/* Drag-Handle: links der Zeile, dezent */
.area-list-item-handle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 18px;
  flex-shrink: 0;
  color: var(--color-text-soft);
  opacity: 0;
  cursor: grab;
  transition: opacity 0.15s ease;
  margin-right: -2px;
}

.area-list-item:hover .area-list-item-handle {
  opacity: 0.5;
}

.area-list-item-handle:hover {
  opacity: 1 !important;
}

.area-list-item-handle:active {
  cursor: grabbing;
}

.area-list-item.dragging {
  opacity: 0.4;
}

/* Drop-Indicator-Linien beim Drag-Over */
.area-list-item.drag-over-top {
  box-shadow: inset 0 2px 0 var(--color-text);
}
.area-list-item.drag-over-bottom {
  box-shadow: inset 0 -2px 0 var(--color-text);
}

/* Farb-Dot: jetzt button mit subtilem Hover */
.area-list-item-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  border: 1px solid rgba(0, 0, 0, 0.1);
  cursor: pointer;
  padding: 0;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.area-list-item-dot:hover {
  transform: scale(1.3);
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.08);
}

/* Label: bei Hover Cursor=pointer */
.area-list-item-label {
  cursor: pointer;
}

.area-list-item-label:hover {
  color: var(--color-text);
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 2px;
}

/* Edit-Icon (Stift) */
.area-list-item-edit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 5px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-text-soft);
  opacity: 0;
  transition: opacity 0.15s ease, background 0.12s ease, color 0.12s ease;
}

.area-list-item:hover .area-list-item-edit {
  opacity: 1;
}

.area-list-item-edit:hover {
  background: var(--color-surface-alt);
  color: var(--color-text);
}

/* "Neuer Bereich"-Button */
.area-list-add-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 7px 10px;
  margin-top: 6px;
  background: none;
  border: 1px dashed var(--color-border);
  border-radius: 6px;
  color: var(--color-text-soft);
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.area-list-add-btn:hover {
  background: var(--color-surface-alt);
  color: var(--color-text);
  border-color: var(--color-border-strong);
}

.area-list-add-btn svg {
  flex-shrink: 0;
}

/* Empty-State wenn keine Bereiche da sind */
.area-list-empty {
  padding: 12px 10px;
  font-size: 11px;
  color: var(--color-text-soft);
  text-align: center;
  line-height: 1.5;
}

/* ============================================
   AREA-EDIT-POPOVER: Inline-Editor für Name + Farbe
   ============================================ */

.area-edit-popover {
  position: fixed;
  z-index: 200;
  width: 240px;
  background: white;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.14), 0 4px 12px rgba(15, 23, 42, 0.08);
  padding: 14px;
  font-family: var(--font-display);
  animation: area-edit-pop-in 0.18s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes area-edit-pop-in {
  from { opacity: 0; transform: translateY(-4px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.area-edit-popover-section {
  margin-bottom: 12px;
}

.area-edit-popover-section:last-of-type {
  margin-bottom: 14px;
}

.area-edit-popover-label {
  display: block;
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-soft);
  margin-bottom: 5px;
}

.area-edit-popover-input {
  width: 100%;
  padding: 7px 10px;
  font-family: inherit;
  font-size: 13px;
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.area-edit-popover-input:focus {
  border-color: var(--color-text);
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.04);
}

.area-edit-popover-colors {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 6px;
  margin-bottom: 8px;
}

.area-edit-color-swatch {
  width: 100%;
  aspect-ratio: 1 / 1;
  border: 2px solid transparent;
  border-radius: 7px;
  cursor: pointer;
  padding: 0;
  transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
}

.area-edit-color-swatch:hover {
  transform: scale(1.1);
}

.area-edit-color-swatch.active {
  border-color: var(--color-text);
  box-shadow: 0 0 0 2px white, 0 0 0 3px var(--color-text), inset 0 0 0 1px rgba(0, 0, 0, 0.1);
}

.area-edit-popover-custom-color-row {
  display: flex;
  gap: 6px;
  align-items: stretch;
}

.area-edit-popover-hex-input {
  flex: 1;
  font-family: monospace;
  font-size: 11.5px;
  text-transform: uppercase;
}

.area-edit-popover-color-picker {
  flex-shrink: 0;
  width: 34px;
  height: auto;
  padding: 2px;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  background: var(--color-surface);
  cursor: pointer;
}

.area-edit-popover-actions {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
}

.area-edit-popover-actions .btn-sm {
  height: 30px;
  padding: 0 12px;
  font-size: 12px;
}

/* ============================================
   PRESENTER-PREVIEW-POPOVER: ERWEITERTE INFOS
   Breadcrumb, Bereichs-Badge, Pflicht-Badge,
   verknüpfte Notizen, Empty-State
   ============================================ */

/* Breadcrumb / Eltern-Pfad oben im Header */
.node-preview-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px 6px;
  font-size: 11px;
  color: var(--color-text-soft);
  margin-bottom: 6px;
  line-height: 1.4;
}

.node-preview-breadcrumb-item {
  white-space: nowrap;
  opacity: 0.9;
}

.node-preview-breadcrumb-sep {
  color: var(--color-text-soft);
  opacity: 0.5;
  font-weight: 400;
}

/* Meta-Zeile mit Badges flex-wrap */
.node-preview-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
}

/* Bereichs-Badge im Header */
.node-preview-area-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px 3px 7px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--color-text);
  background: rgba(0, 0, 0, 0.04);
  border-radius: 999px;
  border: 1px solid rgba(0, 0, 0, 0.06);
}

.node-preview-area-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--area-color, var(--color-text));
  flex-shrink: 0;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
}

/* Pflicht-Badge */
.node-preview-mandatory-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  font-size: 10.5px;
  font-weight: 600;
  color: #92400e;
  background: #fef3c7;
  border-radius: 999px;
  border: 1px solid #fde68a;
}

/* Notizen-Sektion: gelb wie die Sticky-Notes */
.node-preview-section-notes .node-preview-section-label {
  color: #b45309;
}

.node-preview-section-notes .node-preview-section-count {
  background: #fef3c7;
  color: #92400e;
}

.node-preview-notes-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.node-preview-note-item {
  background: #fefce8;
  border: 1px solid #fde68a;
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 12.5px;
  line-height: 1.5;
  color: #713f12;
  white-space: pre-wrap;
  word-break: break-word;
}

/* Funktionen-Sektion: grüner Akzent (war vorher nur generisch) */
.node-preview-section-features .node-preview-section-label {
  color: #15803d;
}

.node-preview-section-features .node-preview-section-count {
  background: #dcfce7;
  color: #15803d;
}

/* Empty-State wenn die Seite gar nichts hinterlegt hat */
.node-preview-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px 16px;
  gap: 10px;
  color: var(--color-text-soft);
}

.node-preview-empty-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--color-surface-alt, rgba(0, 0, 0, 0.04));
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.6;
}

.node-preview-empty-text {
  font-size: 12.5px;
  line-height: 1.5;
  max-width: 260px;
}


/* ============================================
   PRESENT-INFO-PANEL: INHALTE + FUNKTIONEN getrennt
   Akzent-Farben für die zwei neuen Sektionen
   ============================================ */

/* Inhalte (blau) */
.present-info-section-contents .present-info-section-label {
  color: #1d4ed8;
}

.present-info-contents li::before {
  background: #2563eb !important;
}

/* Funktionen & Technik (grün) */
.present-info-section-features .present-info-section-label {
  color: #15803d;
}

.present-info-section-features .present-info-features li::before {
  background: #16a34a;
}


/* ============================================
   GLOBAL TEXT-SELECTION: nur dort wo wirklich Text editiert wird
   Verhindert das versehentliche blaue Markieren von UI-Texten beim
   Klicken/Drag/Doppelklick. Figma- und Canva-Verhalten.
   ============================================ */

/* Canvas-Bereich, Bereichs-Panel, Detail-Panel-Labels: keine Selection */
#canvas-container,
#canvas-inner,
.canvas-wrap,
.area-list-panel,
.area-list-body,
.area-list-item,
.area-list-item *,
.editor-toolbar,
.editor-toolbar *,
.workflow-stepper,
.workflow-stepper *,
.minimap,
.minimap *,
.presenter-touchbar,
.presenter-touchbar *,
.area-edit-popover,
.area-edit-popover * {
  user-select: none;
  -webkit-user-select: none;
}

/* Aber: Eingaben und editierbare Texte MÜSSEN selektierbar bleiben */
input,
textarea,
[contenteditable="true"],
.note-text,
.feature-item-edit-input,
.area-edit-popover-input,
.area-edit-popover-hex-input,
#detail-title,
#detail-description,
#features-add-input,
#contents-add-input,
#page-notes-composer-input,
.page-note-item-input,
.present-info-section-text,
.present-info-features li,
.present-info-contents li,
.node-preview-description,
.node-preview-note,
.node-preview-note-item,
.node-preview-features li,
.node-preview-contents li {
  user-select: text !important;
  -webkit-user-select: text !important;
}


/* ============================================
   AREA-DRAG: Visuelle Hinweise dass die Hülle ziehbar ist
   ============================================ */

/* Cursor schon im Inline-Style gesetzt; Hover gibt eine subtile Reaktion */
.area-rect:hover {
  stroke-width: 2;
  filter: brightness(0.97);
}

/* Während ein Area-Drag läuft: subtile visuelle Bestätigung */
.dragging-area .area-rect {
  cursor: grabbing !important;
  filter: brightness(0.95) saturate(1.1);
}

/* Verhindert dass beim Drag der Cursor auf Knoten / Hülle wechselt */
.dragging-area .node,
.dragging-area .area-rect,
.dragging-area .area-label-group {
  cursor: grabbing !important;
}


/* ============================================
   SITEMAP-DRAWER: KARTEN-LAYOUT mit FILTER-PILLS
   Card-basierte Übersicht statt Liste
   ============================================ */

/* Filter-Pills-Leiste oben unter der Suche */
.sitemap-drawer-filters {
  padding: 8px 18px 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface);
}

.sitemap-filter-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px 5px 8px;
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.12s ease;
}

.sitemap-filter-pill:hover {
  background: var(--color-surface-alt);
  border-color: var(--color-border-strong);
}

.sitemap-filter-pill.active {
  color: white;
  background: var(--pill-color, #1a1a1a);
  border-color: var(--pill-color, #1a1a1a);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

.sitemap-filter-pill-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--pill-color, #1a1a1a);
  flex-shrink: 0;
  border: 1px solid rgba(0, 0, 0, 0.1);
}

.sitemap-filter-pill.active .sitemap-filter-pill-dot {
  background: white;
  border-color: rgba(255, 255, 255, 0.6);
}

.sitemap-filter-pill-label {
  white-space: nowrap;
}

.sitemap-filter-pill-count {
  font-size: 10.5px;
  font-weight: 600;
  opacity: 0.6;
  font-variant-numeric: tabular-nums;
  min-width: 14px;
  text-align: center;
}

.sitemap-filter-pill.active .sitemap-filter-pill-count {
  opacity: 0.85;
}

/* ============================================
   SITEMAP-SECTIONS: Bereichs-Gruppen
   ============================================ */

.sitemap-drawer-body {
  padding: 16px 18px 20px;
}

.sitemap-section {
  margin-bottom: 22px;
}

.sitemap-section:last-child {
  margin-bottom: 0;
}

.sitemap-section-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0 10px;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 12px;
}

.sitemap-section-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--group-color, #1a1a1a);
  flex-shrink: 0;
  border: 1.5px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--group-color, #1a1a1a) 12%, transparent);
}

.sitemap-section-title {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text);
  letter-spacing: -0.01em;
}

.sitemap-section-count {
  margin-left: auto;
  font-size: 11px;
  font-weight: 600;
  color: var(--color-text-soft);
  background: var(--color-surface-alt);
  padding: 2px 8px;
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
}

/* ============================================
   SITEMAP-CARDS: Karten-Grid
   ============================================ */

.sitemap-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 10px;
}

.sitemap-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  padding: 11px 12px 10px;
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  border-radius: 12px;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: border-color 0.15s ease, box-shadow 0.18s ease, transform 0.12s ease, background 0.15s ease;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
  /* Linke Akzent-Linie in der Bereichs-Farbe */
  border-left: 3px solid var(--area-color, var(--color-border));
}

.sitemap-card:hover {
  border-color: var(--area-color, var(--color-border-strong));
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06), 0 2px 4px rgba(0, 0, 0, 0.04);
  transform: translateY(-1px);
}

.sitemap-card:active {
  transform: translateY(0);
}

/* Top-Zeile mit Level-Badge + Primär-Stern */
.sitemap-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  min-height: 14px;
}

.sitemap-card-level {
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-soft);
  background: var(--color-surface-alt);
  padding: 2px 6px;
  border-radius: 4px;
  font-variant-numeric: tabular-nums;
}

.sitemap-card-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #d97706;
}

/* Titel */
.sitemap-card-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text);
  line-height: 1.35;
  letter-spacing: -0.01em;
  /* Auf max 3 Zeilen begrenzen */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}

/* Meta-Zeile mit Indicators */
.sitemap-card-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: auto;
}

.sitemap-card-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 10px;
  font-weight: 600;
  color: var(--color-text-soft);
  background: var(--color-surface-alt);
  padding: 2px 6px;
  border-radius: 4px;
  font-variant-numeric: tabular-nums;
}

.sitemap-card-meta-content {
  color: #1d4ed8;
  background: #dbeafe;
}

.sitemap-card-meta-feat {
  color: #15803d;
  background: #dcfce7;
}

/* Spezial-States */
.sitemap-card.is-home {
  background: linear-gradient(135deg, #fafaf9 0%, #f5f5f3 100%);
  border-color: #1a1a1a;
  border-left-color: #1a1a1a;
}

.sitemap-card.is-home .sitemap-card-title {
  font-weight: 600;
}

.sitemap-card.is-primary {
  background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
  border-color: #f59e0b;
}

.sitemap-card.is-primary:hover {
  border-color: #d97706;
}

.sitemap-card.is-legal {
  opacity: 0.85;
  background: #fafaf9;
}

/* Level-spezifische Größen-Hierarchie: L1 etwas prominenter, L4 kleiner */
.sitemap-card-l1 .sitemap-card-title {
  font-size: 14px;
  font-weight: 600;
}

.sitemap-card-l3,
.sitemap-card-l4 {
  padding: 9px 11px 9px;
}

.sitemap-card-l3 .sitemap-card-title,
.sitemap-card-l4 .sitemap-card-title {
  font-size: 12px;
}

/* Empty-State Karten */
.sitemap-group-empty {
  grid-column: 1 / -1;
  font-size: 11.5px;
  color: var(--color-text-soft);
  padding: 12px;
  text-align: center;
  background: var(--color-surface-alt);
  border-radius: 8px;
  border: 1px dashed var(--color-border);
}


/* ============================================
   TAGS / STATUS-LABELS
   Detail-Panel: Chip-Liste mit Toggle-Funktion
   Knoten-Karten: kleine Badges
   Tag-Manager: Modal zum Verwalten der Tags
   ============================================ */

/* Header der Tags-Sektion im Detail-Panel mit "Verwalten"-Button rechts */
.tags-field-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}

.tags-field-header .form-label {
  margin-bottom: 0;
}

.tags-manage-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  font-family: inherit;
  font-size: 10.5px;
  font-weight: 500;
  color: var(--color-text-soft);
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  border-radius: 5px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.tags-manage-btn:hover {
  background: var(--color-surface);
  color: var(--color-text);
  border-color: var(--color-border-strong);
}

/* Toggle-Chips im Detail-Panel */
.tags-toggles {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 4px;
}

.tag-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px 4px 7px;
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--color-text-soft);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.12s ease;
  user-select: none;
}

.tag-chip:hover {
  border-color: var(--tag-color, var(--color-border-strong));
  color: var(--color-text);
}

.tag-chip.active {
  color: white;
  background: var(--tag-color, #1a1a1a);
  border-color: var(--tag-color, #1a1a1a);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.tag-chip-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--tag-color, #737373);
  flex-shrink: 0;
  border: 1px solid rgba(0, 0, 0, 0.08);
}

.tag-chip.active .tag-chip-dot {
  background: white;
  border-color: rgba(255, 255, 255, 0.6);
}

.tags-empty {
  font-size: 11.5px;
  font-style: italic;
  color: var(--color-text-soft);
  padding: 8px 0 2px;
}

/* ============================================
   NODE-CARDS: Tag-Badges unter dem Header
   ============================================ */

.node-tag-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 4px 0 -2px;
  pointer-events: none;
}

.node-tag-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 1.5px 6px 1.5px 5px;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--tag-color, #737373);
  background: color-mix(in srgb, var(--tag-color, #737373) 12%, transparent);
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--tag-color, #737373) 25%, transparent);
  line-height: 1.4;
  max-width: 100%;
  overflow: hidden;
}

.node-tag-badge-dot {
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--tag-color, #737373);
  flex-shrink: 0;
}

.node-tag-badge-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 80px;
}

.node-tag-badge-more {
  color: var(--color-text-soft);
  background: var(--color-surface-alt);
  border-color: var(--color-border);
}

/* ============================================
   TAG-MANAGER MODAL
   ============================================ */

.tag-manager-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.42);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: tag-manager-fade-in 0.18s ease;
}

@keyframes tag-manager-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.tag-manager-modal {
  width: min(440px, calc(100vw - 32px));
  max-height: calc(100vh - 64px);
  background: var(--color-surface);
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.24), 0 8px 24px rgba(15, 23, 42, 0.12);
  display: flex;
  flex-direction: column;
  font-family: var(--font-display);
  animation: tag-manager-pop-in 0.22s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes tag-manager-pop-in {
  from { opacity: 0; transform: translateY(-6px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.tag-manager-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--color-border);
}

.tag-manager-title {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text);
  letter-spacing: -0.01em;
}

.tag-manager-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: none;
  border: none;
  border-radius: 6px;
  color: var(--color-text-soft);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.tag-manager-close:hover {
  background: var(--color-surface-alt);
  color: var(--color-text);
}

.tag-manager-body {
  padding: 12px 18px;
  overflow-y: auto;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.tag-manager-empty {
  padding: 24px 12px;
  font-size: 12.5px;
  color: var(--color-text-soft);
  text-align: center;
  background: var(--color-surface-alt);
  border-radius: 8px;
  border: 1px dashed var(--color-border);
}

.tag-manager-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px 6px 6px;
  border-radius: 8px;
  background: var(--color-surface);
  transition: background 0.15s ease;
}

.tag-manager-row:hover {
  background: var(--color-surface-alt);
}

.tag-manager-color-btn {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  cursor: pointer;
  padding: 0;
  transition: transform 0.12s ease, box-shadow 0.15s ease;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2);
}

.tag-manager-color-btn:hover {
  transform: scale(1.08);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}

.tag-manager-name-input {
  flex: 1;
  min-width: 0;
  padding: 5px 8px;
  font-family: inherit;
  font-size: 13px;
  color: var(--color-text);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 5px;
  outline: none;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.tag-manager-name-input:hover {
  background: rgba(0, 0, 0, 0.02);
}

.tag-manager-name-input:focus {
  background: var(--color-surface);
  border-color: var(--color-border-strong);
}

.tag-manager-usage {
  flex-shrink: 0;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--color-text-soft);
  background: var(--color-surface-alt);
  padding: 2px 7px;
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
  min-width: 22px;
  text-align: center;
}

.tag-manager-delete-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  background: none;
  border: none;
  border-radius: 5px;
  color: var(--color-text-soft);
  cursor: pointer;
  opacity: 0.5;
  transition: background 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}

.tag-manager-row:hover .tag-manager-delete-btn {
  opacity: 1;
}

.tag-manager-delete-btn:hover {
  background: #fee2e2;
  color: #dc2626;
}

.tag-manager-footer {
  padding: 12px 18px 16px;
  border-top: 1px solid var(--color-border);
}

.tag-manager-add-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px dashed var(--color-border-strong);
  border-radius: 7px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
  width: 100%;
  justify-content: center;
}

.tag-manager-add-btn:hover {
  background: var(--color-surface-alt);
  border-color: var(--color-text);
  border-style: solid;
}

/* Tag-Color-Popover (kleines Picker-Fenster im Manager) */
.tag-color-popover {
  position: fixed;
  z-index: 9100;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.14), 0 4px 12px rgba(15, 23, 42, 0.08);
  padding: 10px;
  animation: tag-color-pop-in 0.16s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes tag-color-pop-in {
  from { opacity: 0; transform: scale(0.94); }
  to { opacity: 1; transform: scale(1); }
}

.tag-color-popover-swatches {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 5px;
}

.tag-color-swatch {
  width: 24px;
  height: 24px;
  border: 2px solid transparent;
  border-radius: 6px;
  cursor: pointer;
  padding: 0;
  transition: transform 0.12s ease, border-color 0.12s ease;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
}

.tag-color-swatch:hover {
  transform: scale(1.12);
}

.tag-color-swatch.active {
  border-color: var(--color-text);
  box-shadow: 0 0 0 2px var(--color-surface), 0 0 0 3px var(--color-text), inset 0 0 0 1px rgba(0, 0, 0, 0.1);
}


/* ============================================
   SITEMAP-CARDS: TAG-BADGES
   ============================================ */

.sitemap-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 4px 0 0;
}

.sitemap-card-tag {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 1.5px 6px 1.5px 5px;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--tag-color, #737373);
  background: color-mix(in srgb, var(--tag-color, #737373) 12%, transparent);
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--tag-color, #737373) 25%, transparent);
  line-height: 1.4;
  max-width: 100%;
  overflow: hidden;
}

.sitemap-card-tag-dot {
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--tag-color, #737373);
  flex-shrink: 0;
}

.sitemap-card-tag-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 70px;
}

.sitemap-card-tag-more {
  color: var(--color-text-soft);
  background: var(--color-surface-alt);
  border-color: var(--color-border);
}

/* ============================================
   PRESENTER-PREVIEW-POPOVER: TAG-BADGES
   im Header neben Bereich/Pflicht/Primär
   ============================================ */

.node-preview-tag-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px 3px 6px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--tag-color, #1a1a1a);
  background: color-mix(in srgb, var(--tag-color, #737373) 12%, transparent);
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--tag-color, #737373) 30%, transparent);
}

.node-preview-tag-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--tag-color, #737373);
  flex-shrink: 0;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
}


/* ============================================
   NODE-TAGS-POPOVER
   Erscheint unter dem Tags-Quick-Action-Button am Knoten
   ============================================ */

.node-tags-popover {
  position: fixed;
  z-index: 9050;
  width: 260px;
  max-width: calc(100vw - 32px);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.16), 0 4px 12px rgba(15, 23, 42, 0.08);
  padding: 10px 12px 12px;
  animation: node-tags-pop-in 0.16s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes node-tags-pop-in {
  from { opacity: 0; transform: translateY(-4px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.node-tags-popover-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--color-border);
}

.node-tags-popover-title {
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-soft);
}

.node-tags-popover-manage {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 7px;
  font-family: inherit;
  font-size: 10.5px;
  font-weight: 500;
  color: var(--color-text-soft);
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  border-radius: 5px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.node-tags-popover-manage:hover {
  background: var(--color-surface);
  color: var(--color-text);
  border-color: var(--color-border-strong);
}

.node-tags-popover-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.node-tags-popover-empty {
  font-size: 11.5px;
  font-style: italic;
  color: var(--color-text-soft);
  text-align: center;
  padding: 8px 0;
}

/* "Tags"-Button am Knoten mit angedeutetem Active-State wenn Tags zugewiesen */
.node-quick-action-btn-tags-on {
  color: #1a1a1a !important;
  background: #fef3c7 !important;
  border-color: #fde68a !important;
}


/* Info-Icon im Bereichs-Listen-Header: Hinweis dass Drag-Reorder
   die Präsentations-Reihenfolge bestimmt (per title-Tooltip). */
.area-list-info-icon {
  color: var(--color-text-soft);
  opacity: 0.6;
  margin-right: auto;
  flex-shrink: 0;
  cursor: help;
}

.area-list-info-icon:hover {
  opacity: 1;
  color: var(--color-text);
}

.area-list-header {
  cursor: help;
}

/* ============================================
   SCHRITT 2: AUFWAND-GRUPPEN (Kanban Drag&Drop)
   Linke Spalte: nicht zugeordnete Seiten
   Rechte Seite: 4 Aufwand-Gruppen als Spalten
   ============================================ */

.effort-groups-layout {
  display: grid;
  grid-template-columns: 440px 1fr;
  gap: 20px;
  padding: 24px 28px;
  height: calc(100vh - 240px);
  min-height: 540px;
  box-sizing: border-box;
}

.effort-unassigned-panel,
.effort-group-column {
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  overflow: hidden;
  min-height: 0;
}

.effort-group-column {
  background: var(--effort-bg, var(--color-surface-alt));
  border-color: var(--effort-border, var(--color-border));
}

.effort-panel-header {
  padding: 14px 16px 12px;
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  flex-shrink: 0;
  background: var(--color-surface);
}

.effort-group-column .effort-panel-header {
  background: var(--color-surface);
}

.effort-panel-title {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

.effort-panel-title-text {
  display: inline-flex;
  align-items: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text);
  letter-spacing: -0.01em;
}

.effort-group-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--effort-color, var(--color-text-soft));
  margin-right: 8px;
  flex-shrink: 0;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--effort-color, #737373) 14%, transparent);
}

.effort-panel-sub {
  font-size: 10.5px;
  color: var(--color-text-soft);
  margin-top: 1px;
  margin-left: 0;
  line-height: 1.4;
}

.effort-group-column .effort-panel-sub {
  margin-left: 18px;
}

.effort-panel-count {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 600;
  color: var(--color-text-soft);
  background: var(--color-surface-alt);
  padding: 3px 9px;
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
  min-width: 28px;
  text-align: center;
}

.effort-group-column .effort-panel-count {
  background: var(--effort-bg);
  color: var(--effort-color);
  border: 1px solid var(--effort-border);
}

.effort-panel-body {
  flex: 1;
  overflow-y: auto;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
}

.effort-drop-zone {
  transition: background 0.15s ease, box-shadow 0.15s ease;
}

.effort-drop-zone.effort-drop-active {
  background: color-mix(in srgb, var(--effort-color, #1a1a1a) 6%, transparent);
  box-shadow: inset 0 0 0 2px var(--effort-color, var(--color-text));
  border-radius: 0 0 14px 14px;
}

.effort-unassigned-panel .effort-drop-zone.effort-drop-active {
  background: rgba(15, 23, 42, 0.04);
  box-shadow: inset 0 0 0 2px var(--color-text);
}

/* Empty-State pro Drop-Zone */
.effort-drop-zone:empty {
  position: relative;
  min-height: 80px;
}
.effort-drop-zone:empty::after {
  content: 'Karte hierhin ziehen';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: var(--color-text-soft);
  opacity: 0.5;
  font-style: italic;
  pointer-events: none;
}

/* ============================================
   NICHT ZUGEORDNET: Sektionen pro Bereich
   Karten in der linken Spalte werden nach Bereich gruppiert dargestellt,
   damit auch bei vielen Seiten alles lesbar bleibt.
   ============================================ */
.effort-unassigned-section {
  margin-bottom: 14px;
}

.effort-unassigned-section:last-child {
  margin-bottom: 0;
}

.effort-unassigned-section-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 4px 8px;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 8px;
  position: sticky;
  top: -12px;
  background: var(--color-surface);
  z-index: 2;
  /* Hover/Drag-Indikator pro Sektion-Header */
}

.effort-unassigned-section-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--section-color, #737373);
  flex-shrink: 0;
  box-shadow: 0 0 0 2.5px color-mix(in srgb, var(--section-color, #737373) 14%, transparent);
}

.effort-unassigned-section-label {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--color-text);
  letter-spacing: -0.005em;
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.effort-unassigned-section-count {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--color-text-soft);
  background: var(--color-surface-alt);
  padding: 1.5px 7px;
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
  min-width: 22px;
  text-align: center;
  flex-shrink: 0;
}

.effort-unassigned-section-cards {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Linke Spalte breiter machen für bessere Lesbarkeit */

/* Effort-Cards */
.effort-card {
  display: flex;
  align-items: stretch;
  gap: 0;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  overflow: hidden;
  cursor: grab;
  user-select: none;
  transition: border-color 0.15s ease, box-shadow 0.18s ease, transform 0.12s ease;
}

.effort-card:hover {
  border-color: var(--color-border-strong);
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.06);
}

.effort-card:active {
  cursor: grabbing;
}

.effort-card-dragging {
  opacity: 0.45;
  border-style: dashed;
  transform: scale(0.98);
}

.effort-card-handle {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  background: var(--color-surface-alt);
  color: var(--color-text-soft);
  border-right: 1px solid var(--color-border);
  cursor: grab;
}

.effort-card-handle:hover {
  background: color-mix(in srgb, var(--color-text) 6%, transparent);
  color: var(--color-text);
}

.effort-card-content {
  flex: 1;
  min-width: 0;
  padding: 9px 11px 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.effort-card-top {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.effort-card-area-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 0 1.5px rgba(0, 0, 0, 0.08);
}

.effort-card-level {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-text-soft);
  background: var(--color-surface-alt);
  padding: 1.5px 5px;
  border-radius: 4px;
  flex-shrink: 0;
}

.effort-card-title {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}

.effort-card-special {
  flex-shrink: 0;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 1.5px 6px;
  border-radius: 4px;
  white-space: nowrap;
}

.effort-card-special-home {
  background: #1a1a1a;
  color: #fff;
}

.effort-card-special-legal {
  background: var(--color-surface-alt);
  color: var(--color-text-soft);
  border: 1px solid var(--color-border);
}

.effort-card-hierarchy {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 10.5px;
  color: var(--color-text-soft);
  flex-wrap: wrap;
  padding-left: 16px;
}

.effort-card-arrow {
  color: var(--color-text-muted);
  font-weight: 500;
}

.effort-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  margin-top: 2px;
  padding-left: 16px;
}

.effort-card-tag {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--tag-color, #737373);
  background: color-mix(in srgb, var(--tag-color, #737373) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--tag-color, #737373) 25%, transparent);
  border-radius: 999px;
  padding: 1px 6px 1px 4px;
}

.effort-card-tag-dot {
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--tag-color, #737373);
}

.effort-card-tag-more {
  color: var(--color-text-soft);
  background: var(--color-surface-alt);
  border-color: var(--color-border);
}

/* Responsive: bei schmalem Viewport stapeln */
@media (max-width: 1100px) {
  .effort-groups-layout {
    grid-template-columns: 1fr;
    height: auto;
  }
  .effort-groups-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

.effort-groups-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  min-height: 0;
}


/* ============================================
   PLATTFORM-PAKET-ANSICHT (ab v0.36.0)
   Bereiche als Karten mit Funktions-Listen, statt verbundener Mindmap.
   Ersetzt bei Plattformen den Canvas. Webseiten nutzen sie nie.
   ============================================ */
.ow-onboarding-packages {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow-y: auto;
  padding: 40px 40px 80px 40px;
  background: #f0f0ee;
}

.ow-onboarding-pkg-header {
  text-align: center;
  margin-bottom: 32px;
}

.ow-onboarding-pkg-header-sub {
  font-size: 13px;
  color: var(--color-text-soft, #9a9a96);
  font-weight: 400;
}

.ow-onboarding-pkg-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  justify-content: center;
  align-items: flex-start;
  max-width: 1500px;
  margin: 0 auto;
}

.ow-onboarding-pkg {
  background: #ffffff;
  border-radius: 18px;
  border: 1px solid var(--color-border, #e5e5e2);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
  min-width: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.ow-onboarding-pkg-data {
  background: #f4f4f5;
  border: 1.5px solid #d4d4d8;
}

.ow-onboarding-pkg-head {
  padding: 17px 22px;
  display: flex;
  align-items: center;
  gap: 11px;
  border-bottom: 1px solid #f0f0ee;
}

.ow-onboarding-pkg-data .ow-onboarding-pkg-head {
  border-bottom-color: #e4e4e7;
}

.ow-onboarding-pkg-dot {
  width: 13px;
  height: 13px;
  border-radius: 4px;
  flex-shrink: 0;
}

.ow-onboarding-pkg-title {
  font-size: 15px;
  font-weight: 500;
  color: var(--color-text, #1a1a1a);
}

.ow-onboarding-pkg-count {
  margin-left: auto;
  font-size: 12px;
  color: var(--color-text-soft, #9a9a96);
  font-weight: 400;
}

.ow-onboarding-pkg-body {
  padding: 8px 0;
}

.ow-onboarding-pkg-fn {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 22px;
  cursor: pointer;
  transition: background 0.12s;
}

.ow-onboarding-pkg-fn:hover {
  background: var(--color-surface-alt, #fafaf8);
}

.ow-onboarding-pkg-icon {
  width: 15px;
  height: 15px;
  opacity: 0.7;
  flex-shrink: 0;
}

.ow-onboarding-pkg-fn-name {
  font-size: 13.5px;
  font-weight: 400;
  color: #33332f;
  line-height: 1.3;
}

/* Unterseiten: eingerueckt, kleiner, mit Punkt statt Wuerfel */
.ow-onboarding-pkg-sub {
  padding-left: 48px;
  padding-top: 7px;
  padding-bottom: 7px;
}

.ow-onboarding-pkg-sub .ow-onboarding-pkg-fn-name {
  font-size: 12.5px;
  color: #73726c;
}

.ow-onboarding-pkg-subdot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #c4c4c0;
  flex-shrink: 0;
  margin-left: 5px;
}

/* Tag-Punkte rechts in der Zeile */
.ow-onboarding-pkg-tags {
  margin-left: auto;
  display: flex;
  gap: 4px;
  align-items: center;
}

.ow-onboarding-pkg-tagdot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* --- Aufklappbare Funktions-Details (ab v0.36.0) --- */
.ow-onboarding-pkg-has-details {
  position: relative;
}

.ow-onboarding-pkg-chevron {
  width: 15px;
  height: 15px;
  color: #b4b4b0;
  margin-left: 8px;
  flex-shrink: 0;
  transition: transform 0.18s ease;
}

.ow-onboarding-pkg-chevron.open {
  transform: rotate(180deg);
}

/* Wenn keine Tags da sind, schiebt der Chevron nach rechts */
.ow-onboarding-pkg-fn .ow-onboarding-pkg-chevron {
  margin-left: auto;
}
.ow-onboarding-pkg-tags + .ow-onboarding-pkg-chevron {
  margin-left: 8px;
}

/* Detailbereich: standardmaessig eingeklappt (max-height 0) */
.ow-onboarding-pkg-detail {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.25s ease;
  padding: 0 22px;
}

.ow-onboarding-pkg-detail.open {
  max-height: 600px;
  padding-top: 4px;
  padding-bottom: 14px;
}

/* Unterseiten-Details etwas weiter eingerueckt */
.ow-onboarding-pkg-detail.ow-onboarding-pkg-sub {
  padding-left: 48px;
}

.ow-onboarding-pkg-desc {
  font-size: 12.5px;
  color: #57564f;
  line-height: 1.55;
  margin-bottom: 12px;
}

.ow-onboarding-pkg-detail-group {
  margin-bottom: 11px;
}

.ow-onboarding-pkg-detail-group:last-child {
  margin-bottom: 0;
}

.ow-onboarding-pkg-detail-label {
  font-size: 10.5px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 5px;
}

.ow-onboarding-pkg-label-content {
  color: #2563eb;
}

.ow-onboarding-pkg-label-feature {
  color: #16a34a;
}

.ow-onboarding-pkg-detail-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ow-onboarding-pkg-detail-list li {
  font-size: 12.5px;
  color: #44443f;
  line-height: 1.5;
  padding: 2px 0 2px 14px;
  position: relative;
}

.ow-onboarding-pkg-detail-list li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 9px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #c4c4c0;
}

.ow-onboarding-pkg-label-content + .ow-onboarding-pkg-detail-list li::before {
  background: #93c5fd;
}

.ow-onboarding-pkg-label-feature + .ow-onboarding-pkg-detail-list li::before {
  background: #86efac;
}

/* --- Aufklapp-Fix (ab v0.36.0): Klicks treffen immer die Zeile --- */
.ow-onboarding-pkg-chevron {
  pointer-events: none;
}
.ow-onboarding-pkg-fn.ow-onboarding-pkg-has-details {
  cursor: pointer;
}
.ow-onboarding-pkg-fn .ow-onboarding-pkg-icon,
.ow-onboarding-pkg-fn .ow-onboarding-pkg-fn-name,
.ow-onboarding-pkg-fn .ow-onboarding-pkg-subdot,
.ow-onboarding-pkg-fn .ow-onboarding-pkg-tags {
  pointer-events: none;
}

/* --- Plattform-Panel (eigenes Tool, ab v0.36.0) --- */
.ow-onboarding-pf-empty {
  padding: 24px 4px;
  font-size: 13px;
  color: var(--color-text-soft, #9a9a96);
  line-height: 1.6;
  text-align: center;
}

/* Aktive Funktionszeile in den Paketen (im Panel geladen) */
.ow-onboarding-pkg-fn-active {
  background: #f0eef9 !important;
  box-shadow: inset 3px 0 0 #6366f1;
}
.ow-onboarding-pkg-fn-active .ow-onboarding-pkg-fn-name {
  color: #1a1a1a;
  font-weight: 500;
}

/* --- Plattform-Panel: zuklappbar + Anlege-Modus (ab v0.37.0) --- */
.ow-onboarding-pf-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.ow-onboarding-pf-collapse,
.ow-onboarding-pf-rail {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-text-soft, #9a9a96);
  padding: 4px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.12s, color 0.12s;
}

/* Der Zuklapp-Knopf im Header bekommt eine dezente Fassung, damit er nicht
   verloren neben dem Titel steht (klare Klickflaeche, ab v0.52.0). */
.ow-onboarding-pf-collapse {
  width: 30px;
  height: 30px;
  padding: 0;
  background: var(--color-surface-alt, #f5f5f4);
  border: 1px solid var(--color-border, #e7e5e4);
}

.ow-onboarding-pf-collapse svg { width: 18px; height: 18px; }
.ow-onboarding-pf-collapse:hover,
.ow-onboarding-pf-rail:hover {
  background: var(--color-surface-alt, #f5f5f4);
  color: var(--color-text, #1a1a1a);
}

/* Eingeklappter Zustand: Panel wird schmal, nur die Schiene bleibt */
.ow-onboarding-pf-panel.ow-onboarding-pf-collapsed {
  width: 44px !important;
  min-width: 44px !important;
  flex: 0 0 44px !important;
}

.ow-onboarding-pf-rail {
  width: 44px;
  height: 100%;
  border-radius: 0;
}
.ow-onboarding-pf-rail svg { width: 20px; height: 20px; }

/* Anlege-Modus */
.ow-onboarding-pf-new-title {
  font-size: 15px;
  font-weight: 500;
  color: var(--color-text, #1a1a1a);
  margin-bottom: 6px;
}
.ow-onboarding-pf-new-sub {
  font-size: 12.5px;
  color: var(--color-text-soft, #9a9a96);
  line-height: 1.55;
  margin-bottom: 18px;
}

/* Zurueck-zu-Neu-Link im Bearbeiten-Modus */
.ow-onboarding-pf-back {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  color: #6366f1;
  font-size: 12.5px;
  font-weight: 500;
  padding: 0 0 12px 0;
  font-family: inherit;
}
.ow-onboarding-pf-back:hover { text-decoration: underline; }

/* --- Variante A: Funktionszeilen mit farbigem Icon-Feld (ab v0.38.2) --- */
.ow-onboarding-pkg-body {
  padding: 6px;
}
.ow-onboarding-pkg-fn {
  gap: 12px;
  padding: 9px 14px;
  border-radius: 10px;
}
.ow-onboarding-pkg-fn:hover {
  background: var(--color-surface-alt, #f7f7f5);
}
.ow-onboarding-pkg-iconwrap {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ow-onboarding-pkg-iconwrap .ow-onboarding-pkg-icon {
  width: 17px;
  height: 17px;
  opacity: 1;
}
/* Funktionszahl als Pill im Bereichskopf */
.ow-onboarding-pkg-count {
  color: #fff;
  background: #a1a1aa;
  min-width: 22px;
  height: 22px;
  border-radius: 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11.5px;
  font-weight: 500;
  padding: 0 7px;
}
/* Unterseiten-Einrueckung an das groessere Icon-Feld anpassen */
.ow-onboarding-pkg-sub {
  padding-left: 40px;
}
.ow-onboarding-pkg-detail {
  padding-left: 14px;
  padding-right: 14px;
}
.ow-onboarding-pkg-detail.ow-onboarding-pkg-sub {
  padding-left: 40px;
}
/* Aktive Zeile (im Panel geladen) an Variante A anpassen */
.ow-onboarding-pkg-fn-active {
  box-shadow: none !important;
}

/* ============================================
   PLATTFORM-PAKET-ANSICHT: PREMIUM APPLE-LOOK (ab v0.40.0)
   ============================================ */

/* Hero-Header */
.ow-onboarding-pkg-hero {
  text-align: center;
  padding: 56px 40px 8px;
}
.ow-onboarding-pkg-hero-eyebrow {
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #a1a1a6;
  margin-bottom: 14px;
}
.ow-onboarding-pkg-hero-title {
  font-size: 34px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: #1d1d1f;
  margin-bottom: 12px;
  line-height: 1.1;
}
.ow-onboarding-pkg-hero-sub {
  font-size: 16px;
  font-weight: 300;
  color: #6e6e73;
  max-width: 540px;
  margin: 0 auto;
  line-height: 1.5;
}
.ow-onboarding-pkg-hero-stats {
  display: flex;
  gap: 44px;
  justify-content: center;
  margin-top: 30px;
}
.ow-onboarding-pkg-hstat { text-align: center; }
.ow-onboarding-pkg-hstat-num {
  font-size: 28px;
  font-weight: 500;
  color: #1d1d1f;
  letter-spacing: -0.02em;
}
.ow-onboarding-pkg-hstat-label {
  font-size: 11.5px;
  color: #a1a1a6;
  margin-top: 2px;
}

/* Premium-Grid: responsiv mit CSS Grid.
   auto-fit + minmax sorgt dafuer, dass so viele Pakete wie moeglich
   nebeneinander passen und den Platz gleichmaessig fuellen. Drei bei breitem
   Fenster, zwei bei mittlerem, eines bei schmalem (Tablet hochkant). */
.ow-onboarding-packages .ow-onboarding-pkg-grid {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 8px;
  align-items: stretch;
  max-width: 860px;
  margin: 0 auto;
  /* Kein gemeinsamer Rahmen mehr: jeder Zugang ist eine eigene Karte
     (ab v0.55.0). Die drei Zugaenge stehen untereinander, gross und lesbar,
     auch wenn ein Zugang viele Funktionen hat. */
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
}

/* Jede Zugangs-Karte ist eigenstaendig: eigener Rahmen, eigener Schatten. */
.ow-onboarding-packages .ow-onboarding-pkg {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 8px 24px rgba(0, 0, 0, 0.05);
  border: 1px solid var(--color-border, #e7e5e4);
  border-radius: 20px;
  background: #ffffff;
}

/* iPad und schmale Fenster: Karten bleiben untereinander, etwas schmaler. */
@media (max-width: 1024px) {
  .ow-onboarding-packages .ow-onboarding-pkg-grid {
    max-width: 720px;
    padding: 6px;
  }
}

/* Karten eigenstaendig: eigener Rahmen und Schatten (ab v0.55.0). */
.ow-onboarding-packages .ow-onboarding-pkg {
  width: auto;
  min-width: 0;
  max-width: none;
}

/* Karten-Kopf mit grossem Icon-Feld */
.ow-onboarding-pkg-head {
  padding: 22px 24px 18px;
  display: flex;
  align-items: center;
  gap: 13px;
  border-bottom: none;
  position: relative;
}
.ow-onboarding-pkg-head::after {
  content: '';
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.06), transparent);
}
.ow-onboarding-pkg-head-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ow-onboarding-pkg-head-icon svg { width: 21px; height: 21px; }
.ow-onboarding-pkg-head-titles { flex: 1; }
.ow-onboarding-pkg-head .ow-onboarding-pkg-title {
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.01em;
  display: block;
}
.ow-onboarding-pkg-meta {
  font-size: 12px;
  color: #a1a1a6;
  margin-top: 1px;
}

/* Premium-Funktionszeile mit Beschreibung */
.ow-onboarding-packages .ow-onboarding-pkg-body { padding: 10px 14px 16px; }
.ow-onboarding-packages .ow-onboarding-pkg-fn {
  gap: 13px;
  padding: 11px 12px;
  border-radius: 13px;
  align-items: center;
}
.ow-onboarding-pkg-fn-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.ow-onboarding-packages .ow-onboarding-pkg-fn-name {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.3;
  /* Maximal zwei Zeilen, Umbruch nur an Leerzeichen (nie mitten im Wort).
     Lange Woerter werden nur als Notnagel getrennt, wenn sie allein nicht
     in eine Zeile passen. Kleinere Schrift damit mehr in eine Zeile passt
     (ab v0.45.2). */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: break-word;
  word-break: normal;
}
.ow-onboarding-pkg-fn-desc {
  font-size: 12px;
  color: #86868b;
  opacity: 0.65;
  margin-top: 3px;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ow-onboarding-packages .ow-onboarding-pkg-iconwrap {
  width: 34px;
  height: 34px;
  border-radius: 10px;
}

/* ============================================
   PLATTFORM-PAKET-ANSICHT: ANSCHAULICHE DETAIL-ANSICHT (ab v0.41.0)
   ============================================ */

/* Funktionszeile als Container fuer Detail, damit der Hintergrund beim
   Aufklappen die ganze Funktion umfasst. */
.ow-onboarding-packages .ow-onboarding-pkg-fn.ow-onboarding-pkg-has-details {
  flex-wrap: wrap;
}
.ow-onboarding-pkg-detail {
  flex-basis: 100%;
  width: 100%;
  max-height: 0;
  overflow: hidden;
  /* Grosszuegige Reserve, damit auch lange Funktionen nicht abgeschnitten
     werden, mit weicher Kurve fuer ein dezentes Aufklappen (ab v0.45.0). */
  transition: max-height 0.42s cubic-bezier(0.16, 1, 0.3, 1);
}
.ow-onboarding-pkg-detail.open {
  max-height: 2000px;
}
.ow-onboarding-pkg-detail-inner {
  padding: 4px 4px 10px 4px;
  /* Inhalt gleitet beim Aufklappen sanft hoch und blendet ein. */
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.3s ease 0.08s, transform 0.34s cubic-bezier(0.16, 1, 0.3, 1) 0.08s;
}
.ow-onboarding-pkg-detail.open .ow-onboarding-pkg-detail-inner {
  opacity: 1;
  transform: translateY(0);
}

/* Beschreibung prominent oben */
.ow-onboarding-pkg-detail-desc {
  font-size: 13.5px;
  line-height: 1.5;
  color: #3a3a3c;
  padding: 12px 16px;
  background: #ffffff;
  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, 0.05);
  margin-bottom: 12px;
}

/* Block fuer Inhalte / Technik */
.ow-onboarding-pkg-detail-block {
  background: #ffffff;
  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, 0.05);
  padding: 14px 16px;
  margin-bottom: 12px;
}
.ow-onboarding-pkg-detail-bhead {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.ow-onboarding-pkg-detail-bdot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.ow-onboarding-pkg-bdot-content { background: #2563eb; }
.ow-onboarding-pkg-bdot-feature { background: #16a34a; }
.ow-onboarding-pkg-detail-btitle {
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.ow-onboarding-pkg-btitle-content { color: #2563eb; }
.ow-onboarding-pkg-btitle-feature { color: #16a34a; }

.ow-onboarding-pkg-detail-item {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 5px 0;
  font-size: 13px;
  color: #33333a;
  line-height: 1.4;
}
.ow-onboarding-pkg-detail-iico {
  flex-shrink: 0;
  margin-top: 2px;
  display: flex;
}
.ow-onboarding-pkg-detail-iico svg { width: 15px; height: 15px; }
.ow-onboarding-pkg-iico-content { color: #2563eb; }
.ow-onboarding-pkg-iico-feature { color: #16a34a; }
.ow-onboarding-pkg-detail-itext { flex: 1; }

/* Verwendete Daten als Chips */
.ow-onboarding-pkg-detail-uses {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  padding: 4px 2px 2px 2px;
}
.ow-onboarding-pkg-detail-useslabel {
  font-size: 11px;
  color: #a1a1a6;
  width: 100%;
  margin-bottom: 2px;
}
.ow-onboarding-pkg-detail-chip {
  font-size: 11px;
  background: #ffffff;
  color: #666;
  padding: 5px 10px;
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.ow-onboarding-pkg-detail-chip svg {
  width: 11px;
  height: 11px;
  flex-shrink: 0;
  color: #999;
}

/* Aufgeklappte Funktionszeile bekommt ruhigen Hintergrund */
.ow-onboarding-packages .ow-onboarding-pkg-fn.ow-onboarding-pkg-open {
  background: #fafafa;
}

/* Notiz vom Berater in der Funktions-Detailansicht (ab v0.42.0) */
.ow-onboarding-pkg-detail-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: 12px;
  padding: 12px 14px;
  margin-top: 4px;
}
.ow-onboarding-pkg-detail-noteicon {
  flex-shrink: 0;
  margin-top: 1px;
  color: #b45309;
  display: flex;
}
.ow-onboarding-pkg-detail-noteicon svg { width: 15px; height: 15px; }
.ow-onboarding-pkg-detail-notetext {
  flex: 1;
  font-size: 13px;
  line-height: 1.5;
  color: #92400e;
  white-space: pre-wrap;
}

/* Hinweistext unter dem Notiz-Feld im Plattform-Panel */
.ow-onboarding-pf-panel .form-hint {
  font-size: 11px;
  color: #9a9a96;
  margin-top: 4px;
  line-height: 1.4;
}

/* Loesch-Button im Plattform-Panel (ab v0.43.0) */
.pf-danger-zone {
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid var(--color-border, #e7e5e4);
}
.pf-delete-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 10px 14px;
  background: #fff;
  color: #dc2626;
  border: 1px solid #fecaca;
  border-radius: 10px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.pf-delete-btn:hover {
  background: #fef2f2;
  border-color: #f87171;
}
.pf-delete-btn svg { flex-shrink: 0; }

/* Plattform-Panel: Flex-Kette durchziehen, damit der Body scrollt
   und die Inhalts-Liste rechts nicht unten abgeschnitten wird (Fix v0.43.1) */
.ow-onboarding-pf-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}
.ow-onboarding-pf-panel .panel-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

/* Bereichs-Toolbar am Karten-Kopf in der Paket-Ansicht (ab v0.43.1) */
.ow-onboarding-pkg-head-clickable {
  cursor: pointer;
  border-radius: 16px 16px 0 0;
  transition: background 0.12s;
}
.ow-onboarding-pkg-head-clickable:hover {
  background: rgba(0, 0, 0, 0.02);
}

.ow-onboarding-area-toolbar {
  position: fixed;
  z-index: 1000;
  display: flex;
  align-items: center;
  gap: 10px;
  background: #ffffff;
  border: 1px solid var(--color-border, #e7e5e4);
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
  padding: 8px 10px;
}
/* Farb-Menue: ein Knopf, Palette klappt bei Hover auf (ab v0.43.3) */
.ow-onboarding-area-colormenu {
  position: relative;
  display: flex;
  align-items: center;
}
.ow-onboarding-area-colorbtn {
  display: flex;
  align-items: center;
  gap: 5px;
  background: #fff;
  border: 1px solid var(--color-border, #e7e5e4);
  border-radius: 8px;
  padding: 5px 8px;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}
.ow-onboarding-area-colorbtn:hover {
  background: #f7f7f5;
  border-color: #d4d4d8;
}
.ow-onboarding-area-colordot {
  width: 16px;
  height: 16px;
  border-radius: 5px;
  display: block;
}
.ow-onboarding-area-colorcaret {
  color: #9a9a96;
}
/* Palette versteckt, klappt bei Hover ueber dem Menue auf */
.ow-onboarding-area-palette {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 1;
  grid-template-columns: repeat(6, 20px);
  gap: 6px;
  background: #fff;
  border: 1px solid var(--color-border, #e7e5e4);
  border-radius: 10px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.12);
  padding: 10px;
}
.ow-onboarding-area-colormenu:hover .ow-onboarding-area-palette {
  display: grid;
}
/* Unsichtbare Bruecke ueber die Luecke, damit das Flyout beim Hinfahren
   nicht zuklappt. */
.ow-onboarding-area-palette::before {
  content: "";
  position: absolute;
  top: -8px;
  left: 0;
  right: 0;
  height: 8px;
}
.ow-onboarding-area-swatch {
  width: 20px;
  height: 20px;
  border-radius: 6px;
  border: 2px solid transparent;
  cursor: pointer;
  padding: 0;
  transition: transform 0.1s;
}
.ow-onboarding-area-swatch:hover {
  transform: scale(1.15);
}
.ow-onboarding-area-swatch-active {
  border-color: #1d1d1f;
}
.ow-onboarding-area-toolbar-sep {
  width: 1px;
  height: 22px;
  background: var(--color-border, #e7e5e4);
}
.ow-onboarding-area-toolbar-del {
  display: flex;
  align-items: center;
  gap: 6px;
  background: #fff;
  color: #dc2626;
  border: 1px solid #fecaca;
  border-radius: 8px;
  padding: 6px 10px;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.12s, border-color 0.12s;
}
.ow-onboarding-area-toolbar-del:hover {
  background: #fef2f2;
  border-color: #f87171;
}
.ow-onboarding-area-toolbar-del svg { flex-shrink: 0; }

/* Schlanke Touchbar in der Paket-Ansicht: nur der Zeigen-Button (ab v0.44.0).
   Alle anderen Buttons und die Trenner werden ausgeblendet. */
.ow-onboarding-touchbar-pf > button:not(#pointer-toggle-btn) {
  display: none;
}
.ow-onboarding-touchbar-pf > .touchbar-separator {
  display: none;
}

/* Kurzes Aufleuchten der Funktion, wenn der Kunde darauf zeigt (Pointer) */
.ow-onboarding-pkg-fn-pointed {
  animation: ow-pkg-point-flash 1.2s ease-out;
}
@keyframes ow-pkg-point-flash {
  0% { background: rgba(99, 102, 241, 0.22); }
  100% { background: transparent; }
}

/* Markierte Funktion: farbiger Rahmen in Editor und Kundenansicht (ab v0.44.0) */
.ow-onboarding-pkg-fn-marked {
  box-shadow: inset 0 0 0 2px #6366f1;
  border-radius: 12px;
  background: rgba(99, 102, 241, 0.04);
}

/* Markier-Knopf im Plattform-Panel */
.pf-mark-row {
  margin-top: 20px;
}
.pf-mark-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 10px 14px;
  background: #fff;
  color: #4f46e5;
  border: 1px solid #c7d2fe;
  border-radius: 10px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.pf-mark-btn:hover {
  background: #eef2ff;
  border-color: #a5b4fc;
}
.pf-mark-btn-active {
  background: #4f46e5;
  color: #fff;
  border-color: #4f46e5;
}
.pf-mark-btn-active:hover {
  background: #4338ca;
  border-color: #4338ca;
}
.pf-mark-btn svg { flex-shrink: 0; }

/* Dezente Belebung der Funktionszeilen und Uebergaenge (ab v0.45.0).
   Sanfter Hover mit leichter Verschiebung, weicher Chevron, alles ruhig
   gehalten damit es im Kundengespraech nicht ablenkt. */
.ow-onboarding-pkg-fn {
  transition: background 0.2s ease, padding-left 0.2s ease;
}
.ow-onboarding-packages .ow-onboarding-pkg-fn:hover {
  padding-left: 18px;
}
.ow-onboarding-pkg-iconwrap {
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.ow-onboarding-pkg-fn:hover .ow-onboarding-pkg-iconwrap {
  transform: scale(1.06);
}
.ow-onboarding-pkg-chevron {
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ============================================
   NETZ-ANSICHT: rechts angedocktes Panel (Redesign ab v0.48.0)
   Modern, ruhig, responsiv. Breiter ziehbar, bleibt angedockt.
   Nur bei Plattformen sichtbar.
   ============================================ */
.ow-onboarding-netviz {
  position: absolute;
  top: 14px;
  right: 0;
  bottom: 14px;
  width: 420px;
  display: flex;
  z-index: 60;
  transition: transform 0.34s cubic-bezier(0.16, 1, 0.3, 1),
              width 0.34s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}
.ow-onboarding-netviz-inner,
.ow-onboarding-netviz-tab { pointer-events: auto; }

/* Breiter Modus: angedockt bleiben, mehr Platz fuers Netz */
.ow-onboarding-netviz.ow-onboarding-netviz-wide { width: 760px; }

/* Eingeklappt: Panel vollstaendig nach rechts raus, nur der Reiter bleibt */
.ow-onboarding-netviz.ow-onboarding-netviz-collapsed { transform: translateX(100%); }

/* Reiter an der linken Kante (ragt nach links raus) */
.ow-onboarding-netviz-tab {
  position: absolute;
  left: -40px;
  top: 16px;
  width: 40px;
  padding: 13px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  background: #ffffff;
  border: 1px solid #ececea;
  border-right: none;
  border-radius: 13px 0 0 13px;
  box-shadow: -4px 0 16px rgba(17, 17, 26, 0.07);
  cursor: pointer;
  color: #6366f1;
  transition: background 0.15s, color 0.15s;
}
.ow-onboarding-netviz-tab:hover { background: #f3f1ff; }
.ow-onboarding-netviz-tab-label {
  writing-mode: vertical-rl;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.07em;
  color: #57564f;
}

/* Panel-Koerper */
.ow-onboarding-netviz-inner {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border: 1px solid #ececea;
  border-right: none;
  border-radius: 20px 0 0 20px;
  box-shadow: -16px 0 48px rgba(17, 17, 26, 0.10);
  overflow: hidden;
}

/* Kopfzeile */
.ow-onboarding-netviz-bar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 15px 16px 13px;
  border-bottom: 1px solid #f0efec;
}
.ow-onboarding-netviz-titlewrap {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.ow-onboarding-netviz-title {
  font-size: 14px;
  font-weight: 500;
  color: #1d1d1f;
  letter-spacing: -0.01em;
}
.ow-onboarding-netviz-sub {
  font-size: 11px;
  color: #9a9a96;
  line-height: 1.3;
}
.ow-onboarding-netviz-actions {
  display: flex;
  gap: 2px;
  flex-shrink: 0;
}
.ow-onboarding-netviz-actions button {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 9px;
  color: #86857f;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.ow-onboarding-netviz-actions button:hover {
  background: #f3f1ff;
  color: #4f46e5;
}

/* Buehne mit Canvas: heller, leichter Tiefenverlauf */
.ow-onboarding-netviz-stage {
  position: relative;
  flex: 1;
  min-height: 0;
  background:
    radial-gradient(120% 80% at 50% 32%, #ffffff 0%, #fafaf8 62%, #f4f3f0 100%);
}
.ow-onboarding-netviz-stage canvas {
  display: block;
  position: absolute;
  inset: 0;
}

/* Info-Chip: erscheint beim Zeigen, zeigt wer was nutzt im Klartext */
.ow-onboarding-netviz-chip {
  position: absolute;
  top: 12px;
  left: 12px;
  right: 56px;
  max-width: calc(100% - 68px);
  padding: 9px 12px;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid #ececea;
  border-radius: 12px;
  box-shadow: 0 6px 20px rgba(17, 17, 26, 0.10);
  backdrop-filter: blur(6px);
  pointer-events: none;
}
.ow-onboarding-netviz-chip-head {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  font-weight: 500;
  color: #1d1d1f;
  margin-bottom: 2px;
}
.ow-onboarding-netviz-chip-mark {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
}
.ow-onboarding-netviz-chip-mark.dia {
  border-radius: 3px;
}
.ow-onboarding-netviz-chip-body {
  font-size: 11px;
  color: #73726c;
  line-height: 1.45;
}

/* Legende unten: feine Chips */
.ow-onboarding-netviz-legend {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 11px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  padding: 8px 11px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid #ececea;
  border-radius: 12px;
  backdrop-filter: blur(6px);
}
.ow-onboarding-netviz-leg {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 10.5px;
  color: #57564f;
}
.ow-onboarding-netviz-leg-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
}
.ow-onboarding-netviz-leg-dia {
  width: 10px;
  height: 10px;
  background: #737373;
  border-radius: 3px;
}
.ow-onboarding-netviz-hint {
  flex-basis: 100%;
  font-size: 10px;
  color: #b4b3ad;
  margin-top: 1px;
}

/* Responsiv: auf schmalen Viewports schmaler, breiter Modus gedeckelt */
@media (max-width: 1100px) {
  .ow-onboarding-netviz { width: 360px; }
  .ow-onboarding-netviz.ow-onboarding-netviz-wide { width: 92%; max-width: 680px; }
}
@media (max-width: 700px) {
  .ow-onboarding-netviz { width: 86%; }
  .ow-onboarding-netviz.ow-onboarding-netviz-wide { width: 94%; }
}

/* Zoom-Steuerung in der Netz-Buehne (ab v0.49.0) */
.ow-onboarding-netviz-zoom {
  position: absolute;
  right: 12px;
  top: 12px;
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid #ececea;
  border-radius: 11px;
  box-shadow: 0 4px 14px rgba(17, 17, 26, 0.08);
  overflow: hidden;
  backdrop-filter: blur(6px);
}
.ow-onboarding-netviz-zoom button {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: #57564f;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.ow-onboarding-netviz-zoom button:hover {
  background: #f3f1ff;
  color: #4f46e5;
}
.ow-onboarding-netviz-zoom button + button {
  border-top: 1px solid #f0efec;
}

/* ===========================================================================
   Praesentationsmodus fuer die Plattform-Paket-Ansicht (ab v0.51.0)
   Karten und Funktionen werden Schritt fuer Schritt eingeblendet. Alles was
   noch nicht dran war, ist versteckt. Die aktuelle Funktion wird hervorgehoben.
   =========================================================================== */

/* Versteckte Karten und Funktionen: raus aus dem Layout, damit die Liste
   ruhig waechst und nichts leer vorreserviert wirkt. */
.ow-onboarding-pkg-present .ow-onboarding-pkg.present-pkg-hidden {
  display: none;
}
.ow-onboarding-pkg-present .ow-onboarding-pkg-fn.present-pkg-hidden {
  display: none;
}
/* Detail einer versteckten Funktion ebenfalls raus. */
.ow-onboarding-pkg-present .ow-onboarding-pkg-fn.present-pkg-hidden + .ow-onboarding-pkg-detail {
  display: none;
}

/* Sichtbare Karten und Funktionen sanft einblenden. */
.ow-onboarding-pkg-present .ow-onboarding-pkg {
  animation: owPkgPresentIn 0.42s cubic-bezier(0.16, 1, 0.3, 1);
}
.ow-onboarding-pkg-present .ow-onboarding-pkg-fn:not(.present-pkg-hidden) {
  animation: owPkgPresentIn 0.38s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes owPkgPresentIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Aktuelle Funktion hervorheben: dezenter Rahmen und leichter Hintergrund,
   damit im Termin klar ist, worueber gerade gesprochen wird. */
.ow-onboarding-pkg-present .ow-onboarding-pkg-fn.present-pkg-current {
  background: #f7f5ff;
  box-shadow: inset 3px 0 0 0 #6366f1;
  border-radius: 10px;
}

/* ===========================================================================
   Praesentator-Erklaerung im Paket-Detail (ab v0.52.0)
   Nur im Editor sichtbar, nie in der Kundenansicht. Als erster Block im
   aufgeklappten Detail, damit Mika im Termin sofort die einfachen Worte hat.
   =========================================================================== */
.ow-onboarding-pkg-erklaerung {
  background: #f4f2ff;
  border: 1px solid #e4dfff;
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 14px;
}
.ow-onboarding-pkg-erklaerung-head {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 6px;
}
.ow-onboarding-pkg-erklaerung-icon {
  width: 15px;
  height: 15px;
  color: #6366f1;
  flex-shrink: 0;
}
.ow-onboarding-pkg-erklaerung-label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #6366f1;
}
.ow-onboarding-pkg-erklaerung-text {
  font-size: 13.5px;
  line-height: 1.6;
  color: #35323f;
}

/* ===========================================================================
   Plattform-Praesentation als Slides (Kundenansicht, ab v0.53.0)
   Eine Slide pro Schritt: Titel, Zugang-Intro oder eine einzelne Funktion.
   Vollflaechig, zentriert, ruhige Einblend-Animation. Ohne Erklaerung.
   =========================================================================== */
.ow-onboarding-slides {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 6vh 8vw;
  background: var(--color-surface, #f7f7f5);
  z-index: 40;
  /* Eigenes Scrollen: wenn der Slide-Inhalt hoeher wird als der Bildschirm
     (kleine iPads, viele Info-Punkte), muss man scrollen koennen. Ohne das
     wird oben/unten abgeschnitten und die Ansicht wirkt eingefroren. */
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

/* Wenn der Inhalt hoeher ist als der Bildschirm: oben ausrichten statt
   zentrieren, sonst verschwindet der obere Teil hinter dem Rand. */
@media (max-height: 760px) {
  .ow-onboarding-slides {
    align-items: flex-start;
    padding-top: 4vh;
    padding-bottom: 4vh;
  }
}
.ow-onboarding-slide {
  width: 100%;
  max-width: 900px;
  animation: owSlideIn 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes owSlideIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Titel-Slide */
.ow-onboarding-slide-eyebrow {
  font-size: 14px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-soft, #6b6a66);
  margin-bottom: 10px;
}
.ow-onboarding-slide-platname {
  font-size: 44px;
  font-weight: 500;
  line-height: 1.1;
  color: var(--color-text, #1a1a1a);
  margin-bottom: 40px;
}
.ow-onboarding-slide-zugaenge {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.ow-onboarding-slide-zugang {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 22px;
  background: #ffffff;
  border: 1px solid var(--color-border, #e7e5e4);
  border-radius: 16px;
}
.ow-onboarding-slide-zugang-icon {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ow-onboarding-slide-zugang-icon svg { width: 24px; height: 24px; }
.ow-onboarding-slide-zugang-txt { display: flex; flex-direction: column; }
.ow-onboarding-slide-zugang-name {
  font-size: 19px;
  font-weight: 500;
  color: var(--color-text, #1a1a1a);
}
.ow-onboarding-slide-zugang-meta {
  font-size: 14px;
  color: var(--color-text-soft, #6b6a66);
  margin-top: 2px;
}

/* Zugang-Intro-Slide */
.ow-onboarding-slide-zugintro {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.ow-onboarding-slide-zugintro-icon {
  width: 72px;
  height: 72px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
}
.ow-onboarding-slide-zugintro-icon svg { width: 36px; height: 36px; }
.ow-onboarding-slide-zugintro-name {
  font-size: 40px;
  font-weight: 500;
  color: var(--color-text, #1a1a1a);
  margin-bottom: 8px;
}
.ow-onboarding-slide-zugintro-meta {
  font-size: 17px;
  color: var(--color-text-soft, #6b6a66);
}

/* Funktions-Slide */
.ow-onboarding-slide-fnhead {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 34px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--color-border, #e7e5e4);
}
.ow-onboarding-slide-fnhead-icon {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ow-onboarding-slide-fnhead-icon svg { width: 21px; height: 21px; }
.ow-onboarding-slide-fnhead-name {
  font-size: 22px;
  font-weight: 500;
  color: var(--color-text, #1a1a1a);
  flex: 1;
}
.ow-onboarding-slide-fnhead-count {
  font-size: 14px;
  color: var(--color-text-soft, #6b6a66);
  font-variant-numeric: tabular-nums;
}
.ow-onboarding-slide-fn-icon {
  width: 60px;
  height: 60px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 22px;
}
.ow-onboarding-slide-fn-icon svg { width: 30px; height: 30px; }
.ow-onboarding-slide-fn-name {
  font-size: 34px;
  font-weight: 500;
  line-height: 1.15;
  color: var(--color-text, #1a1a1a);
  margin-bottom: 14px;
}
.ow-onboarding-slide-fn-desc {
  font-size: 18px;
  color: var(--color-text-soft, #6b6a66);
  line-height: 1.5;
  max-width: 680px;
}

/* ===========================================================================
   Leere Plattform: freundlicher Startpunkt statt leerer Flaeche (ab v0.54.0)
   =========================================================================== */
.ow-onboarding-pf-empty-state {
  max-width: 480px;
  margin: 12vh auto 0;
  text-align: center;
  padding: 0 24px;
}
.ow-onboarding-pf-empty-icon {
  width: 64px;
  height: 64px;
  border-radius: 18px;
  background: #f0eff5;
  color: #6366f1;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 22px;
}
.ow-onboarding-pf-empty-icon svg { width: 32px; height: 32px; }
.ow-onboarding-pf-empty-title {
  font-size: 22px;
  font-weight: 500;
  color: var(--color-text, #1a1a1a);
  margin-bottom: 10px;
}
.ow-onboarding-pf-empty-text {
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-text-soft, #6b6a66);
}

/* ===========================================================================
   Plattform-Modus: der generische rechte Zuklapp-Pfeil gehoert zum
   Webseiten-Detail-Panel. Das Plattform-Panel hat seinen eigenen Knopf, darum
   den generischen im Plattform-Modus hart ausblenden, deterministisch per CSS
   statt per JS-Timing (Bugfix v0.54.1).
   =========================================================================== */
.editor-layout.editor-platform-mode .panel-collapse-btn-right {
  display: none !important;
}

/* ===========================================================================
   Plattform-Praesentation: Split-Layout fuer Funktions-Slides (ab v0.55.0)
   Links die aktuelle Funktion gross, rechts die wachsende Liste des aktuellen
   Zugangs. Aeltere Eintraege verschwinden nach oben, die aktuelle bleibt unten.
   =========================================================================== */
.ow-onboarding-slide-split {
  width: 100%;
  max-width: 1240px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6vw;
  align-items: center;
  height: 78vh;
  max-height: 78vh;
}

/* Wenig Hoehe: feste 78vh-Hoehe aufgeben, Inhalt bestimmt die Hoehe,
   die Slide-Ebene scrollt bei Bedarf. */
@media (max-height: 760px) {
  .ow-onboarding-slide-split {
    height: auto;
    max-height: none;
    align-items: start;
  }
  .ow-onboarding-slide-split-right { height: auto; }
}

/* Linke Seite: aktuelle Funktion gross */
.ow-onboarding-slide-split-left {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.ow-onboarding-slide-fn-main .ow-onboarding-slide-fn-icon {
  width: 60px;
  height: 60px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 22px;
}
.ow-onboarding-slide-fn-main .ow-onboarding-slide-fn-icon svg { width: 30px; height: 30px; }
.ow-onboarding-slide-fn-main .ow-onboarding-slide-fn-name {
  font-size: 34px;
  font-weight: 500;
  line-height: 1.15;
  color: var(--color-text, #1a1a1a);
  margin-bottom: 14px;
}
.ow-onboarding-slide-fn-main .ow-onboarding-slide-fn-desc {
  font-size: 18px;
  color: var(--color-text-soft, #6b6a66);
  line-height: 1.5;
}

/* Rechte Seite: Zugang-Liste, unten verankert */
.ow-onboarding-slide-split-right {
  height: 78vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 0;
}
.ow-onboarding-slide-list {
  display: flex;
  flex-direction: column;
  max-height: 100%;
  min-height: 0;
}
.ow-onboarding-slide-list-head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-bottom: 18px;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--color-border, #e7e5e4);
  flex-shrink: 0;
}
.ow-onboarding-slide-list-head-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ow-onboarding-slide-list-head-icon svg { width: 22px; height: 22px; }
.ow-onboarding-slide-list-head-txt { display: flex; flex-direction: column; }
.ow-onboarding-slide-list-head-name {
  font-size: 20px;
  font-weight: 500;
  color: var(--color-text, #1a1a1a);
}
.ow-onboarding-slide-list-head-meta {
  font-size: 14px;
  color: var(--color-text-soft, #6b6a66);
  font-variant-numeric: tabular-nums;
  margin-top: 2px;
}

/* Die Zeilen: unten verankert, Ueberlauf verschwindet nach oben. */
.ow-onboarding-slide-list-rows {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 6px;
  overflow: hidden;
  min-height: 0;
  padding-top: 12px;
  /* Weiches Ausblenden am oberen Rand, damit das Verschwinden sanft wirkt. */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 48px);
  mask-image: linear-gradient(to bottom, transparent 0, #000 48px);
}
.ow-onboarding-slide-listrow {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 12px 14px;
  border-radius: 14px;
  flex-shrink: 0;
  animation: owListRowIn 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes owListRowIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.ow-onboarding-slide-listrow-icon {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ow-onboarding-slide-listrow-icon svg { width: 20px; height: 20px; }
.ow-onboarding-slide-listrow-txt { display: flex; flex-direction: column; min-width: 0; }
.ow-onboarding-slide-listrow-name {
  font-size: 17px;
  font-weight: 500;
  color: var(--color-text, #1a1a1a);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ow-onboarding-slide-listrow-desc {
  font-size: 13.5px;
  color: var(--color-text-soft, #6b6a66);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 1px;
}
/* Aktuelle Funktion in der Liste hervorheben. */
.ow-onboarding-slide-listrow-current {
  background: #f4f2ff;
}
.ow-onboarding-slide-listrow-current .ow-onboarding-slide-listrow-name {
  color: #4f46e5;
}

/* Schmale Fenster (iPad hochkant): untereinander statt Split. */
@media (max-width: 900px) {
  .ow-onboarding-slide-split {
    grid-template-columns: 1fr;
    gap: 32px;
    height: auto;
  }
  .ow-onboarding-slide-split-right { height: auto; }
}

/* ===========================================================================
   Kundenansicht aufraeumen (ab v0.55.1)
   - Der "Praesentation laeuft"-Badge ist eine Info fuer den Praesentator, nicht
     fuer den Kunden. In der Kundenansicht (presenter-mode) wird er ausgeblendet.
   - Das Webseiten-Info-Panel unten links gehoert nicht in die Plattform-
     Praesentation und wird im Plattform-Praesentationsmodus hart entfernt.
   =========================================================================== */
body.presenter-mode .canvas-container::after {
  content: none !important;
  display: none !important;
}
body.ow-platform-present .present-info-panel {
  display: none !important;
}

/* ===========================================================================
   Zusatz-Infos auf der Funktions-Slide (ab v0.56.0)
   "Das sieht der Nutzer" und "Das passiert im Hintergrund", je max 3 Punkte,
   dezent mit Icons. Erscheint nur wenn die Felder gefuellt sind.
   =========================================================================== */
.ow-onboarding-slide-info {
  margin-top: 30px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.ow-onboarding-slide-info-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.ow-onboarding-slide-info-headicon svg { width: 15px; height: 15px; display: block; }
.ow-onboarding-slide-info-head-content { color: #2563eb; }
.ow-onboarding-slide-info-head-feature { color: #16a34a; }
.ow-onboarding-slide-info-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.ow-onboarding-slide-info-item {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  font-size: 16px;
  line-height: 1.45;
  color: var(--color-text, #1a1a1a);
}
.ow-onboarding-slide-info-ico {
  width: 22px;
  height: 22px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}
.ow-onboarding-slide-info-ico svg { width: 13px; height: 13px; }
.ow-onboarding-slide-info-ico-content { background: #dbeafe; color: #2563eb; }
.ow-onboarding-slide-info-ico-feature { background: #dcfce7; color: #16a34a; }

/* ===========================================================================
   Struktur-loeschen (Gefahr-Aktion) im Plattform-Panel (ab v0.57.0)
   =========================================================================== */
.ow-onboarding-pf-danger {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--color-border, #e7e5e4);
}
.ow-onboarding-pf-clear-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 9px 14px;
  border-radius: 10px;
  background: transparent;
  border: 1px solid #f0c8c8;
  color: #dc2626;
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  font-family: inherit;
}
.ow-onboarding-pf-clear-btn:hover {
  background: #fef2f2;
  border-color: #e5a5a5;
}
.ow-onboarding-pf-clear-btn svg { flex-shrink: 0; }
.ow-onboarding-pf-danger-hint {
  font-size: 11.5px;
  color: var(--color-text-soft, #9a9a96);
  text-align: center;
  margin-top: 8px;
  line-height: 1.4;
}