/**
 * OW Onboarding Tool v0.109.0
 * Ruhiges Surface- und Tiefensystem mit besonderem Fokus auf Themencluster.
 *
 * Die mehrstufige Shadow-Skala ist aus „Smooth Shadow Plugin“ abgeleitet:
 * Copyright (c) 2026 Florian Kiem, veröffentlicht unter der MIT-Lizenz.
 * Der vollständige Lizenzhinweis liegt unter docs/THIRD-PARTY-NOTICES.md.
 */

:root {
  /* Neutrale Arbeitsflächen */
  --ow-depth-canvas: #f5f6f4;
  --ow-depth-panel: #f8f8f6;
  --ow-depth-surface: #ffffff;
  --ow-depth-surface-muted: #f4f4f1;
  --ow-depth-text: #252724;
  --ow-depth-muted: #696c66;
  --ow-depth-soft: #989b95;
  --ow-depth-ring: rgba(31, 34, 29, .075);
  --ow-depth-ring-strong: rgba(31, 34, 29, .13);
  --ow-depth-divider: rgba(31, 34, 29, .085);

  /* Smooth Shadow Plugin: gestaffelte, optisch gleichmäßige Tiefenstufen */
  --ow-smooth-shadow-xs: 0 0 4px rgba(0, 0, 0, .04);
  --ow-smooth-shadow-sm:
    0 18px 47px rgba(0, 0, 0, .03),
    0 7.5px 19px rgba(0, 0, 0, .02),
    0 4px 10.5px rgba(0, 0, 0, .02),
    0 2.3px 5.8px rgba(0, 0, 0, .01),
    0 1.2px 3.1px rgba(0, 0, 0, .01),
    0 .5px 1.3px rgba(0, 0, 0, .01);
  --ow-smooth-shadow-md:
    0 17.54px 23.39px rgba(0, 0, 0, .04),
    0 9.4px 12.5px rgba(0, 0, 0, .03),
    0 5.25px 7px rgba(0, 0, 0, .02),
    0 2.79px 3.72px -2px rgba(0, 0, 0, .01),
    0 1.16px 1.5px rgba(0, 0, 0, .01);
  --ow-smooth-shadow-lg:
    0 25px 50px rgba(0, 0, 0, .05),
    0 12px 24px rgba(0, 0, 0, .04),
    0 6px 12px rgba(0, 0, 0, .03),
    0 3px 6px rgba(0, 0, 0, .02),
    0 1.5px 3px rgba(0, 0, 0, .02);
  --ow-smooth-shadow-xl:
    0 40px 80px rgba(0, 0, 0, .06),
    0 20px 40px rgba(0, 0, 0, .05),
    0 10px 20px rgba(0, 0, 0, .04),
    0 5px 10px rgba(0, 0, 0, .03),
    0 2px 4px rgba(0, 0, 0, .02);
  --ow-smooth-shadow-2xl:
    0 60px 120px rgba(0, 0, 0, .07),
    0 30px 60px rgba(0, 0, 0, .06),
    0 15px 30px rgba(0, 0, 0, .05),
    0 7.5px 15px rgba(0, 0, 0, .04),
    0 3px 6px rgba(0, 0, 0, .03);

  --cm-bg: var(--ow-depth-panel);
  --cm-surface: var(--ow-depth-surface);
  --cm-surface-soft: var(--ow-depth-surface-muted);
  --cm-border: rgba(31, 34, 29, .08);
  --cm-border-strong: rgba(31, 34, 29, .13);
  --cm-shadow-card: var(--ow-smooth-shadow-sm);
  --cm-shadow-float: var(--ow-smooth-shadow-xl);
}

/* --------------------------------------------------------------------------
   Grundlayout: flache Struktur, Tiefe nur für interaktive Ebenen
   -------------------------------------------------------------------------- */
body.content-editor-mode .cm-editor,
body.content-review-mode .owr-app {
  color: var(--ow-depth-text);
  background: var(--ow-depth-panel);
}

body.content-editor-mode .cm-topbar {
  border-bottom-color: var(--ow-depth-divider);
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .72);
  backdrop-filter: blur(18px) saturate(1.05);
  -webkit-backdrop-filter: blur(18px) saturate(1.05);
}

body.content-editor-mode .cm-editor-body {
  background: var(--ow-depth-panel);
}

body.content-editor-mode .cm-sidebar,
body.content-editor-mode .cm-inspector {
  background: var(--ow-depth-panel);
}

body.content-editor-mode .cm-sidebar {
  gap: 11px;
  padding: 14px 13px 12px;
  border-right: 0;
  box-shadow: inset -1px 0 0 var(--ow-depth-divider);
}

body.content-editor-mode .cm-inspector {
  border-left: 0;
  box-shadow: inset 1px 0 0 var(--ow-depth-divider);
}

body.content-editor-mode .cm-sidebar-resizer::before {
  background: rgba(31, 34, 29, .12);
}

/* --------------------------------------------------------------------------
   Buttons und Eingaben: integrierte Hairline statt sichtbarer Außenborder
   -------------------------------------------------------------------------- */
body.content-editor-mode :is(.cm-button, .cm-icon-button),
body.content-review-mode :is(.owr-button, .owr-icon-button) {
  border-color: transparent !important;
}

body.content-editor-mode .cm-button:not(.cm-button-primary):not(.cm-button-danger):not(.cm-button-ghost),
body.content-editor-mode .cm-icon-button,
body.content-review-mode .owr-button:not(.primary):not(.danger),
body.content-review-mode .owr-icon-button {
  background: #fff;
  box-shadow: 0 0 0 1px var(--ow-depth-ring), var(--ow-smooth-shadow-xs);
}

body.content-editor-mode .cm-button:not(.cm-button-primary):not(.cm-button-danger):not(.cm-button-ghost):hover:not(:disabled),
body.content-editor-mode .cm-icon-button:hover:not(:disabled),
body.content-review-mode .owr-button:not(.primary):not(.danger):hover:not(:disabled),
body.content-review-mode .owr-icon-button:hover:not(:disabled) {
  border-color: transparent !important;
  background: #fff;
  box-shadow: 0 0 0 1px var(--ow-depth-ring-strong), var(--ow-smooth-shadow-sm);
}

body.content-editor-mode .cm-button-primary,
body.content-review-mode .owr-button.primary {
  border-color: transparent !important;
  background: #242623;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .9), var(--ow-smooth-shadow-sm);
}

body.content-editor-mode .cm-button-primary:hover:not(:disabled),
body.content-review-mode .owr-button.primary:hover:not(:disabled) {
  background: #151714;
  box-shadow: 0 0 0 1px #111, var(--ow-smooth-shadow-md);
}

body.content-editor-mode :is(.cm-search, .cm-filter-select, .cm-field input, .cm-field textarea, .cm-field select),
body.content-review-mode :is(.owr-search, .owr-field input, .owr-field textarea, .owr-field select) {
  border-color: transparent !important;
  background: rgba(255, 255, 255, .86);
  box-shadow: inset 0 0 0 1px var(--ow-depth-ring);
}

body.content-editor-mode :is(.cm-search:focus-within, .cm-field input:focus, .cm-field textarea:focus, .cm-field select:focus),
body.content-review-mode :is(.owr-search:focus-within, .owr-field input:focus, .owr-field textarea:focus, .owr-field select:focus) {
  border-color: transparent !important;
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(31, 34, 29, .19), 0 0 0 3px rgba(31, 34, 29, .045) !important;
}

/* --------------------------------------------------------------------------
   Linke Navigation und Projektkarte
   -------------------------------------------------------------------------- */
body.content-editor-mode .cm-site-card-shell {
  padding: 0;
}

body.content-editor-mode .cm-site-card {
  border-color: transparent !important;
  border-radius: 15px;
  background: #fff;
  box-shadow: 0 0 0 1px var(--ow-depth-ring), var(--ow-smooth-shadow-sm);
  transition: box-shadow .2s cubic-bezier(.22, 1, .36, 1), transform .2s cubic-bezier(.22, 1, .36, 1), background .16s ease;
}

body.content-editor-mode .cm-site-card:hover {
  border-color: transparent !important;
  transform: translateY(-1px);
  box-shadow: 0 0 0 1px var(--ow-depth-ring-strong), var(--ow-smooth-shadow-md);
}

body.content-editor-mode .cm-site-card.active {
  border-color: transparent !important;
  background: #fff;
  box-shadow:
    0 0 0 1px rgba(49, 87, 213, .38),
    0 0 0 3px rgba(49, 87, 213, .075),
    var(--ow-smooth-shadow-sm);
}

body.content-editor-mode .cm-site-card-top span,
body.content-editor-mode .cm-site-card > small {
  color: var(--ow-depth-soft);
}

body.content-editor-mode .cm-site-stats {
  border-top-color: var(--ow-depth-divider);
  border-bottom-color: var(--ow-depth-divider);
}

body.content-editor-mode .cm-site-stats span + span {
  border-left-color: var(--ow-depth-divider);
}

body.content-editor-mode .cm-site-language-summary > span {
  border-color: transparent !important;
  box-shadow: inset 0 0 0 1px currentColor;
}

body.content-editor-mode .cm-filter-select-wrap > span {
  color: var(--ow-depth-soft);
}

body.content-editor-mode .cm-sidebar-prompt-entry {
  border-color: transparent !important;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 0 0 1px var(--ow-depth-ring), var(--ow-smooth-shadow-sm);
  transition: transform .2s cubic-bezier(.22, 1, .36, 1), box-shadow .2s cubic-bezier(.22, 1, .36, 1);
}

body.content-editor-mode .cm-sidebar-prompt-entry:hover {
  border-color: transparent !important;
  transform: translateY(-1px);
  box-shadow: 0 0 0 1px var(--ow-depth-ring-strong), var(--ow-smooth-shadow-md);
}

/* --------------------------------------------------------------------------
   Themencluster: neue Informationshierarchie
   -------------------------------------------------------------------------- */
body.content-editor-mode .cm-sidebar-cluster-panel,
body.content-review-mode .owr-cluster-panel {
  border: 0 !important;
  border-radius: 15px;
  background: rgba(255, 255, 255, .62);
  box-shadow: 0 0 0 1px var(--ow-depth-ring), var(--ow-smooth-shadow-xs);
}

body.content-editor-mode .cm-sidebar-cluster-head,
body.content-review-mode .owr-cluster-head {
  min-height: 48px;
  padding: 8px 10px 8px 13px;
  border-bottom: 0;
  box-shadow: inset 0 -1px 0 var(--ow-depth-divider);
  background: rgba(249, 249, 247, .82);
}

body.content-editor-mode .cm-sidebar-cluster-head > div > span,
body.content-review-mode .owr-cluster-head > div > span {
  color: #555852;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: .025em !important;
  text-transform: uppercase;
}

body.content-editor-mode .cm-sidebar-cluster-head > div > small,
body.content-review-mode .owr-cluster-head > div > small {
  min-width: 21px;
  height: 20px;
  color: #666963;
  background: #eeefeb;
  box-shadow: inset 0 0 0 1px rgba(31, 34, 29, .045);
}

body.content-editor-mode .cm-sidebar-new-cluster {
  min-width: 61px;
  height: 30px;
  border: 0 !important;
  border-radius: 9px;
  background: #fff;
  box-shadow: 0 0 0 1px var(--ow-depth-ring), var(--ow-smooth-shadow-xs);
}

body.content-editor-mode .cm-sidebar-new-cluster:hover {
  border-color: transparent !important;
  box-shadow: 0 0 0 1px var(--ow-depth-ring-strong), var(--ow-smooth-shadow-sm);
}

/* Die Cluster werden unabhängig von der Sidebar-Breite als lesbare Liste
   geführt. Dadurch bleiben Titel, Beschreibung und Mengen scanbar. */
body.content-editor-mode .cm-cluster-overview,
body.content-review-mode .owr-cluster-overview-list {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  align-content: start;
  gap: 9px !important;
  padding: 10px !important;
}

body.content-editor-mode .cm-cluster-overview-card,
body.content-review-mode .owr-cluster-overview-card {
  --ow-cluster-accent: var(--cluster-color, var(--cluster, #71736e));
  position: relative;
  width: 100%;
  min-width: 0;
  min-height: 82px !important;
  height: auto !important;
  max-height: none !important;
  padding: 12px 11px 11px 13px !important;
  display: grid !important;
  grid-template-columns: 10px minmax(0, 1fr) auto 15px !important;
  align-items: center;
  gap: 10px !important;
  overflow: hidden;
  border: 0 !important;
  border-radius: 13px !important;
  color: #4c4f49;
  background: #fff !important;
  box-shadow: 0 0 0 1px var(--ow-depth-ring), var(--ow-smooth-shadow-sm) !important;
  transition:
    transform .2s cubic-bezier(.22, 1, .36, 1),
    box-shadow .2s cubic-bezier(.22, 1, .36, 1),
    background .16s ease !important;
}

body.content-editor-mode .cm-cluster-overview-card::before,
body.content-review-mode .owr-cluster-overview-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 18px;
  width: 44px;
  height: 3px;
  border-radius: 0 0 4px 4px;
  background: var(--ow-cluster-accent);
  opacity: .82;
  pointer-events: none;
}

body.content-editor-mode .cm-cluster-overview-card:hover,
body.content-review-mode .owr-cluster-overview-card:hover {
  transform: translateY(-1px);
  border-color: transparent !important;
  background: #fff !important;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--ow-cluster-accent) 24%, rgba(31, 34, 29, .1)),
    var(--ow-smooth-shadow-md) !important;
}

body.content-editor-mode .cm-cluster-overview-card.active,
body.content-review-mode .owr-cluster-overview-card.active {
  border-color: transparent !important;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--ow-cluster-accent) 4.5%, #fff) 0%, #fff 42%) !important;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--ow-cluster-accent) 46%, rgba(31, 34, 29, .08)),
    0 0 0 3px color-mix(in srgb, var(--ow-cluster-accent) 7%, transparent),
    var(--ow-smooth-shadow-sm) !important;
}

body.content-editor-mode .cm-cluster-overview-dot,
body.content-review-mode .owr-cluster-overview-card > i {
  width: 8px !important;
  height: 8px !important;
  border-radius: 999px;
  background: var(--ow-cluster-accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--ow-cluster-accent) 10%, transparent);
}

body.content-editor-mode .cm-cluster-overview-copy,
body.content-review-mode .owr-cluster-overview-card > span {
  min-width: 0;
  display: grid !important;
  gap: 3px !important;
}

body.content-editor-mode .cm-cluster-overview-copy strong,
body.content-review-mode .owr-cluster-overview-card strong {
  min-width: 0;
  max-width: 100%;
  display: -webkit-box !important;
  overflow: hidden !important;
  color: #2b2d29;
  font-size: 12px !important;
  line-height: 1.28 !important;
  font-weight: 600 !important;
  white-space: normal !important;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
  line-clamp: 2 !important;
}

body.content-editor-mode .cm-cluster-overview-copy small,
body.content-review-mode .owr-cluster-overview-card small {
  min-width: 0;
  display: -webkit-box !important;
  overflow: hidden !important;
  color: #858881;
  font-size: 9.5px !important;
  line-height: 1.3 !important;
  white-space: normal !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 1 !important;
  line-clamp: 1 !important;
}

body.content-editor-mode .cm-cluster-overview-copy > span,
body.content-review-mode .owr-cluster-overview-card em {
  min-width: 0;
  color: #6f726c;
  font-size: 9px !important;
  line-height: 1.25 !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

body.content-editor-mode .cm-cluster-overview-card > b,
body.content-review-mode .owr-cluster-overview-card > b:not(.owr-cluster-comment-count) {
  min-width: 27px !important;
  height: 25px !important;
  padding: 0 7px !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  color: #5d605a;
  background: #f2f3ef;
  box-shadow: inset 0 0 0 1px rgba(31, 34, 29, .045);
  font-size: 9.5px !important;
  font-weight: 600 !important;
}

body.content-editor-mode .cm-cluster-overview-card > svg,
body.content-review-mode .owr-cluster-overview-card > svg {
  display: block !important;
  width: 14px;
  height: 14px;
  color: #a0a39d;
  transition: color .16s ease, transform .2s cubic-bezier(.22, 1, .36, 1);
}

body.content-editor-mode .cm-cluster-overview-card:hover > svg,
body.content-review-mode .owr-cluster-overview-card:hover > svg {
  color: #50534d;
  transform: translateX(1px);
}

body.content-editor-mode .cm-cluster-overview-card > .cm-sidebar-cluster-review,
body.content-review-mode .owr-cluster-comment-count {
  position: absolute;
  top: 7px !important;
  right: 8px !important;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  border: 0;
  background: #fff2f0;
  box-shadow: inset 0 0 0 1px rgba(169, 76, 66, .12);
}

/* --------------------------------------------------------------------------
   Geöffneter Themencluster und gruppierte Inhalte
   -------------------------------------------------------------------------- */
body.content-editor-mode .cm-sidebar-cluster-detail-head {
  padding: 10px;
  border-bottom: 0;
  background: rgba(249, 249, 247, .84);
  box-shadow: inset 0 -1px 0 var(--ow-depth-divider);
}

body.content-editor-mode .cm-sidebar-back-to-clusters {
  border: 0 !important;
  background: #fff;
  box-shadow: 0 0 0 1px var(--ow-depth-ring), var(--ow-smooth-shadow-xs);
}

body.content-editor-mode .cm-sidebar-back-to-clusters:hover {
  border-color: transparent !important;
  box-shadow: 0 0 0 1px var(--ow-depth-ring-strong), var(--ow-smooth-shadow-sm);
}

body.content-editor-mode .cm-sidebar-active-cluster {
  position: relative;
  overflow: hidden;
  border: 0 !important;
  background: #fff;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--cluster-color) 28%, var(--ow-depth-ring)),
    var(--ow-smooth-shadow-sm);
}

body.content-editor-mode .cm-sidebar-active-cluster::before {
  content: '';
  position: absolute;
  top: 0;
  left: 17px;
  width: 42px;
  height: 3px;
  border-radius: 0 0 4px 4px;
  background: var(--cluster-color);
}

body.content-editor-mode .cm-sidebar-active-cluster > b {
  color: #555852;
  background: #f2f3ef;
  box-shadow: inset 0 0 0 1px rgba(31, 34, 29, .05);
}

body.content-editor-mode .cm-sidebar-status-section,
body.content-review-mode .owr-status-section {
  border: 0;
  border-radius: 12px;
  background: rgba(247, 248, 245, .88);
  box-shadow: inset 0 0 0 1px rgba(31, 34, 29, .06);
}

body.content-editor-mode .cm-sidebar-status-section > header,
body.content-review-mode .owr-status-section > header {
  color: var(--status-accent);
}

body.content-editor-mode .cm-sidebar-status-section > header > b,
body.content-review-mode .owr-status-section > header > b {
  background: #fff;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--status-accent) 14%, rgba(31, 34, 29, .06));
}

body.content-editor-mode .cm-sidebar-status-section .cm-sidebar-content-item,
body.content-review-mode .owr-status-section .owr-sidebar-item {
  border: 0 !important;
  border-left: 0 !important;
  border-radius: 10px;
  background: #fff !important;
  box-shadow: 0 0 0 1px var(--ow-depth-ring), var(--ow-smooth-shadow-xs) !important;
}

body.content-editor-mode .cm-sidebar-content-item,
body.content-review-mode .owr-sidebar-item,
body.content-review-mode .owr-cluster-content-item {
  border-color: transparent !important;
  border-style: solid !important;
  background: #fff !important;
  box-shadow: 0 0 0 1px var(--ow-depth-ring), var(--ow-smooth-shadow-xs) !important;
  transition: transform .16s ease, box-shadow .18s ease, background .16s ease;
}

body.content-editor-mode .cm-sidebar-content-item::before,
body.content-review-mode .owr-sidebar-item::before,
body.content-review-mode .owr-cluster-content-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 12px;
  bottom: 12px;
  width: 2px;
  border-radius: 0 2px 2px 0;
  background: var(--status-accent, var(--cluster-color, #7b7d77));
  opacity: .78;
}

body.content-editor-mode .cm-sidebar-content-item:hover,
body.content-review-mode .owr-sidebar-item:hover,
body.content-review-mode .owr-cluster-content-item:hover {
  transform: translateY(-1px);
  border-color: transparent !important;
  box-shadow: 0 0 0 1px var(--ow-depth-ring-strong), var(--ow-smooth-shadow-sm) !important;
}

body.content-editor-mode .cm-sidebar-content-item.active,
body.content-review-mode .owr-sidebar-item.active,
body.content-review-mode .owr-cluster-content-item.active {
  color: #292b27 !important;
  border-color: transparent !important;
  background: #fff !important;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--cluster-color, #292929) 38%, var(--ow-depth-ring)),
    0 0 0 3px color-mix(in srgb, var(--cluster-color, #292929) 6%, transparent),
    var(--ow-smooth-shadow-sm) !important;
}

/* --------------------------------------------------------------------------
   Canvas und Mindmap
   -------------------------------------------------------------------------- */
body.content-editor-mode .cm-stage,
body.content-review-mode .owr-stage {
  background-color: var(--ow-depth-canvas) !important;
  background-image: radial-gradient(circle at center, rgba(62, 67, 59, .18) .75px, transparent .9px) !important;
  background-size: 22px 22px !important;
}

body.content-editor-mode .cm-links path,
body.content-review-mode .owr-links path {
  stroke-width: 1.55px !important;
  opacity: .66 !important;
}

body.content-editor-mode .cm-link.planned,
body.content-review-mode .cm-link.planned {
  stroke-dasharray: 5 7;
  opacity: .52 !important;
}

/* Alle Karten erhalten eine neutrale Fläche. Der Kartentyp wird über kleine
   Akzente, Labels und Statussignale kommuniziert – nicht über Vollflächen. */
body.content-editor-mode .cm-node,
body.content-review-mode .cm-node,
body.content-presenter-mode .cmp-node {
  --ow-node-accent: var(--node-color, #656862);
  border: 1px solid transparent !important;
  border-style: solid !important;
  background: #fff !important;
  box-shadow: 0 0 0 1px var(--ow-depth-ring), var(--ow-smooth-shadow-md) !important;
  transition:
    opacity .16s ease,
    box-shadow .2s cubic-bezier(.22, 1, .36, 1),
    transform .16s ease,
    filter .16s ease !important;
}

body.content-editor-mode .cm-node-page,
body.content-review-mode .cm-node-page,
body.content-presenter-mode .cmp-node-page {
  --ow-node-accent: var(--cm-card-accent, #3157d5);
}

body.content-editor-mode .cm-node-opportunity,
body.content-review-mode .cm-node-opportunity,
body.content-presenter-mode .cmp-node-opportunity {
  --ow-node-accent: var(--cm-card-accent, #168653);
  border-style: solid !important;
}

body.content-editor-mode .cm-node-cluster,
body.content-review-mode .cm-node-cluster,
body.content-presenter-mode .cmp-node-cluster {
  --ow-node-accent: var(--node-color, #6552c8);
  width: 266px;
  min-height: 114px;
  padding: 14px 15px 13px !important;
}

body.content-editor-mode :is(.cm-node-page, .cm-node-opportunity)::before,
body.content-review-mode :is(.cm-node-page, .cm-node-opportunity)::before,
body.content-presenter-mode :is(.cmp-node-page, .cmp-node-opportunity)::before,
body.content-editor-mode .cm-node-cluster::before,
body.content-review-mode .cm-node-cluster::before,
body.content-presenter-mode .cmp-node-cluster::before {
  content: '';
  position: absolute;
  top: 0;
  left: 17px;
  right: auto;
  bottom: auto;
  width: 46px;
  height: 3px;
  border-radius: 0 0 4px 4px;
  background: var(--ow-node-accent);
  opacity: .84;
  pointer-events: none;
}

body.content-editor-mode .cm-node:hover,
body.content-review-mode .cm-node:hover,
body.content-presenter-mode .cmp-node:hover {
  z-index: 5;
  border-color: transparent !important;
  background: #fff !important;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--ow-node-accent) 24%, var(--ow-depth-ring)),
    var(--ow-smooth-shadow-lg) !important;
}

body.content-editor-mode .cm-node.selected,
body.content-review-mode .cm-node.selected,
body.content-presenter-mode .cmp-node.selected {
  z-index: 6;
  border-color: transparent !important;
  background: #fff !important;
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--ow-node-accent) 76%, #252724),
    0 0 0 5px color-mix(in srgb, var(--ow-node-accent) 9%, transparent),
    var(--ow-smooth-shadow-lg) !important;
}

body.content-editor-mode .cm-node.dragging {
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--ow-node-accent) 38%, var(--ow-depth-ring)),
    var(--ow-smooth-shadow-xl) !important;
}

body.content-editor-mode .cm-node.matched,
body.content-review-mode .cm-node.matched {
  box-shadow:
    0 0 0 2px rgba(49, 87, 213, .48),
    0 0 0 6px rgba(49, 87, 213, .08),
    var(--ow-smooth-shadow-lg) !important;
}

/* Die bestehende starke Farbpassage aus v0.104 wird vollständig neutralisiert. */
body.content-editor-mode :is(.cm-node-page, .cm-node-opportunity, .cm-node-cluster),
body.content-review-mode :is(.cm-node-page, .cm-node-opportunity, .cm-node-cluster),
body.content-presenter-mode :is(.cmp-node-page, .cmp-node-opportunity, .cmp-node-cluster) {
  border-color: transparent !important;
  background: #fff !important;
}

body.content-editor-mode .cm-node-root,
body.content-review-mode .cm-node-root,
body.content-presenter-mode .cmp-node-root {
  --ow-node-accent: #262824;
  border-color: transparent !important;
  background: linear-gradient(145deg, #2b2e29 0%, #20221f 100%) !important;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, .08),
    var(--ow-smooth-shadow-lg) !important;
}

body.content-editor-mode .cm-node-root:hover,
body.content-review-mode .cm-node-root:hover,
body.content-presenter-mode .cmp-node-root:hover {
  border-color: transparent !important;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, .13),
    var(--ow-smooth-shadow-xl) !important;
}

body.content-editor-mode .cm-node-root.selected,
body.content-review-mode .cm-node-root.selected,
body.content-presenter-mode .cmp-node-root.selected {
  border-color: transparent !important;
  box-shadow:
    0 0 0 2px #3157d5,
    0 0 0 5px rgba(49, 87, 213, .11),
    var(--ow-smooth-shadow-xl) !important;
}

body.content-editor-mode .cm-node-kind,
body.content-review-mode .cm-node-kind,
body.content-presenter-mode .cmp-node-kind {
  color: var(--ow-node-accent);
  font-size: 9.5px !important;
  font-weight: 600 !important;
  letter-spacing: .025em !important;
}

body.content-editor-mode .cm-node-kind i,
body.content-review-mode .cm-node-kind i,
body.content-presenter-mode .cmp-node-kind i {
  width: 7px;
  height: 7px;
  background: var(--ow-node-accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--ow-node-accent) 9%, transparent);
}

body.content-editor-mode .cm-node h3,
body.content-review-mode .cm-node h3,
body.content-presenter-mode .cmp-node h3 {
  margin-top: 8px;
  color: #292b27 !important;
  font-weight: 600 !important;
  letter-spacing: -.18px !important;
}

body.content-editor-mode .cm-node-cluster footer,
body.content-review-mode .cm-node-cluster footer,
body.content-presenter-mode .cmp-node-cluster footer {
  margin-top: 10px;
  padding-top: 9px;
  gap: 7px;
  border-top: 1px solid rgba(31, 34, 29, .07);
}

body.content-editor-mode .cm-node-cluster footer span,
body.content-review-mode .cm-node-cluster footer span,
body.content-presenter-mode .cmp-node-cluster footer span {
  min-height: 20px;
  padding: 0 6px;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  color: #777a74;
  background: #f4f4f1;
  box-shadow: inset 0 0 0 1px rgba(31, 34, 29, .045);
  font-size: 9px !important;
}

body.content-editor-mode .cm-node-cluster footer span + span::before,
body.content-review-mode .cm-node-cluster footer span + span::before,
body.content-presenter-mode .cmp-node-cluster footer span + span::before {
  content: none;
}

body.content-editor-mode .cm-node-collapse,
body.content-review-mode .cm-node-collapse {
  border: 0;
  background: #fff;
  box-shadow: 0 0 0 1px var(--ow-depth-ring), var(--ow-smooth-shadow-xs);
}

body.content-editor-mode .cm-node-collapse:hover,
body.content-review-mode .cm-node-collapse:hover {
  color: #252724;
  box-shadow: 0 0 0 1px var(--ow-depth-ring-strong), var(--ow-smooth-shadow-sm);
}

body.content-editor-mode :is(.cm-node-state, .cm-node-role, .cm-node-action, .cm-content-type-badge, .cm-locale-badge, .cm-planned-period),
body.content-review-mode :is(.cm-node-state, .cm-node-role, .cm-node-action, .cm-content-type-badge, .cm-locale-badge, .cm-planned-period) {
  border-color: transparent !important;
  box-shadow: inset 0 0 0 1px rgba(31, 34, 29, .055);
}

/* Sprachstatus bleibt sichtbar, aber nicht mehr als zweite Karteneinfassung. */
body.content-editor-mode :is(.cm-node-page, .cm-node-opportunity).locale-complete,
body.content-editor-mode :is(.cm-node-page, .cm-node-opportunity).locale-incomplete,
body.content-review-mode :is(.cm-node-page, .cm-node-opportunity).locale-complete,
body.content-review-mode :is(.cm-node-page, .cm-node-opportunity).locale-incomplete {
  border-color: transparent !important;
  background: #fff !important;
  box-shadow: 0 0 0 1px var(--ow-depth-ring), var(--ow-smooth-shadow-md) !important;
}

body.content-editor-mode :is(.cm-node-page, .cm-node-opportunity).locale-complete:hover,
body.content-editor-mode :is(.cm-node-page, .cm-node-opportunity).locale-incomplete:hover,
body.content-review-mode :is(.cm-node-page, .cm-node-opportunity).locale-complete:hover,
body.content-review-mode :is(.cm-node-page, .cm-node-opportunity).locale-incomplete:hover {
  border-color: transparent !important;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--ow-node-accent) 24%, var(--ow-depth-ring)),
    var(--ow-smooth-shadow-lg) !important;
}

body.content-editor-mode :is(.cm-node-page, .cm-node-opportunity).locale-complete.selected,
body.content-editor-mode :is(.cm-node-page, .cm-node-opportunity).locale-incomplete.selected,
body.content-review-mode :is(.cm-node-page, .cm-node-opportunity).locale-complete.selected,
body.content-review-mode :is(.cm-node-page, .cm-node-opportunity).locale-incomplete.selected {
  border-color: transparent !important;
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--ow-node-accent) 76%, #252724),
    0 0 0 5px color-mix(in srgb, var(--ow-node-accent) 9%, transparent),
    var(--ow-smooth-shadow-lg) !important;
}

/* Mittlere und weite Zoomstufen behalten eine ruhige, skalierbare Kontur. */
body.content-editor-mode .cm-world.cm-zoom-medium :is(.cm-node-page, .cm-node-opportunity, .cm-node-cluster),
body.content-review-mode .cm-world.cm-zoom-medium :is(.cm-node-page, .cm-node-opportunity, .cm-node-cluster) {
  border-width: 1px !important;
  border-color: transparent !important;
}

body.content-editor-mode .cm-world.cm-zoom-far :is(.cm-node-page, .cm-node-opportunity, .cm-node-cluster),
body.content-review-mode .cm-world.cm-zoom-far :is(.cm-node-page, .cm-node-opportunity, .cm-node-cluster) {
  --ow-far-hairline: clamp(3px, calc(.68px * var(--cm-screen-scale-inverse, 1)), 9px);
  border-width: 1px !important;
  border-color: transparent !important;
  background: #fff !important;
  box-shadow:
    0 0 0 var(--ow-far-hairline) rgba(31, 34, 29, .11),
    0 18px 42px rgba(31, 34, 29, .11) !important;
}

body.content-editor-mode .cm-world.cm-zoom-far .cm-node.selected,
body.content-review-mode .cm-world.cm-zoom-far .cm-node.selected {
  box-shadow:
    0 0 0 var(--ow-far-hairline) color-mix(in srgb, var(--ow-node-accent) 68%, #252724),
    0 0 0 calc(var(--ow-far-hairline) * 2.2) color-mix(in srgb, var(--ow-node-accent) 8%, transparent),
    0 20px 46px rgba(31, 34, 29, .14) !important;
}

/* --------------------------------------------------------------------------
   Schwebende Canvas-Bedienung
   -------------------------------------------------------------------------- */
body.content-editor-mode .cm-toolbar-group,
body.content-editor-mode .cm-zoom-controls,
body.content-editor-mode .cm-canvas-hint,
body.content-review-mode :is(.owr-stage-toolbar, .owr-zoom, .owr-canvas-hint) {
  border: 0 !important;
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 0 0 1px var(--ow-depth-ring), var(--ow-smooth-shadow-md);
  backdrop-filter: blur(18px) saturate(1.05);
  -webkit-backdrop-filter: blur(18px) saturate(1.05);
}

body.content-editor-mode .cm-map-toolbar button {
  color: #62655f;
}

body.content-editor-mode .cm-map-toolbar button:hover {
  color: #252724;
  background: #f3f4f1;
}

body.content-editor-mode .cm-map-toolbar button.active {
  color: #3157d5;
  background: #f1f4ff;
  box-shadow: inset 0 0 0 1px rgba(49, 87, 213, .1);
}

body.content-editor-mode .cm-map-toolbar [data-action="reset-layout"] {
  border-color: transparent !important;
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(49, 87, 213, .12);
}

body.content-editor-mode .cm-zoom-controls button:hover {
  background: #f3f4f1;
}

body.content-editor-mode .ow-canvas-minimap,
body.content-review-mode .ow-canvas-minimap {
  border: 0 !important;
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 0 0 1px var(--ow-depth-ring), var(--ow-smooth-shadow-md);
}

/* --------------------------------------------------------------------------
   Inspector, Dialoge und Hinweise
   -------------------------------------------------------------------------- */
body.content-editor-mode .cm-inspector-header {
  border-bottom: 0;
  box-shadow: inset 0 -1px 0 var(--ow-depth-divider);
  background: rgba(255, 255, 255, .74);
}

body.content-editor-mode .cm-inspector-stats,
body.content-editor-mode .cm-callout,
body.content-editor-mode .cm-prompt-inspector-card,
body.content-editor-mode .cm-logo-upload-card {
  border-color: transparent !important;
  background: #fff;
  box-shadow: 0 0 0 1px var(--ow-depth-ring), var(--ow-smooth-shadow-xs);
}

body.content-editor-mode .cm-form-section + .cm-form-section {
  border-top-color: var(--ow-depth-divider);
}

body.content-editor-mode .cm-modal {
  border: 0 !important;
  box-shadow: 0 0 0 1px var(--ow-depth-ring), var(--ow-smooth-shadow-2xl);
}

body.content-editor-mode .cm-modal > header {
  border-color: transparent !important;
  box-shadow: inset 0 -1px 0 var(--ow-depth-divider);
}

body.content-editor-mode .cm-modal > footer {
  border-color: transparent !important;
  box-shadow: inset 0 1px 0 var(--ow-depth-divider);
}

body.content-editor-mode .cm-modal-backdrop {
  background: rgba(25, 27, 24, .28);
  backdrop-filter: blur(10px) saturate(.9);
  -webkit-backdrop-filter: blur(10px) saturate(.9);
}

body.content-editor-mode .cm-toast {
  border: 0;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), var(--ow-smooth-shadow-lg);
}

body.content-review-mode .owr-detail-toggle {
  border: 0 !important;
  box-shadow: 0 0 0 1px var(--ow-depth-ring), var(--ow-smooth-shadow-md);
}

/* --------------------------------------------------------------------------
   Responsive Details
   -------------------------------------------------------------------------- */
@container cm-sidebar (max-width: 315px) {
  body.content-editor-mode .cm-cluster-overview-card {
    min-height: 72px !important;
    padding-inline: 11px 9px !important;
    grid-template-columns: 9px minmax(0, 1fr) 14px !important;
  }

  body.content-editor-mode .cm-cluster-overview-card > b {
    display: none !important;
  }

  body.content-editor-mode .cm-cluster-overview-copy small {
    display: none !important;
  }
}

@media (max-width: 1120px) {
  body.content-editor-mode .cm-sidebar {
    box-shadow: 1px 0 0 var(--ow-depth-divider), var(--ow-smooth-shadow-xl);
  }
}

@media (max-width: 700px) {
  body.content-editor-mode .cm-cluster-overview,
  body.content-review-mode .owr-cluster-overview-list {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body.content-editor-mode .cm-cluster-overview-card,
  body.content-review-mode .owr-cluster-overview-card {
    min-height: 76px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.content-editor-mode :is(.cm-site-card, .cm-sidebar-prompt-entry, .cm-cluster-overview-card, .cm-sidebar-content-item, .cm-node),
  body.content-review-mode :is(.owr-cluster-overview-card, .owr-sidebar-item, .owr-cluster-content-item, .cm-node) {
    transition: none !important;
  }
}

/* --------------------------------------------------------------------------
   v0.109.0 finishing pass
   -------------------------------------------------------------------------- */
body.content-editor-mode .cm-stage,
body.content-review-mode .owr-stage {
  background-image: radial-gradient(circle at center, rgba(62, 67, 59, .115) .7px, transparent .85px) !important;
  background-size: 24px 24px !important;
}

body.content-editor-mode .cm-node-root.selected,
body.content-review-mode .cm-node-root.selected,
body.content-presenter-mode .cmp-node-root.selected {
  background: linear-gradient(145deg, #2b2e29 0%, #20221f 100%) !important;
  box-shadow:
    0 0 0 1.5px #3157d5,
    0 0 0 4px rgba(49, 87, 213, .105),
    var(--ow-smooth-shadow-xl) !important;
}

body.content-editor-mode .cm-sidebar-content-item,
body.content-review-mode .owr-sidebar-item,
body.content-review-mode .owr-cluster-content-item {
  position: relative;
  overflow: hidden;
}

/* Inhaltstyp- und Sprachklassen aus älteren Versionen dürfen die neue
   neutrale Surface-Hierarchie nicht erneut mit Vollflächen oder 3-px-Rails
   überschreiben. DE/EN bleibt über die vorhandenen Pills sichtbar. */
body.content-editor-mode .cm-sidebar-status-section .cm-sidebar-content-item.existing.locale-complete,
body.content-editor-mode .cm-sidebar-status-section .cm-sidebar-content-item.existing.locale-incomplete,
body.content-editor-mode .cm-sidebar-status-section .cm-sidebar-content-item.planned.locale-complete,
body.content-editor-mode .cm-sidebar-status-section .cm-sidebar-content-item.planned.locale-incomplete,
body.content-editor-mode .cm-sidebar-content-item.existing.locale-complete,
body.content-editor-mode .cm-sidebar-content-item.existing.locale-incomplete,
body.content-editor-mode .cm-sidebar-content-item.planned.locale-complete,
body.content-editor-mode .cm-sidebar-content-item.planned.locale-incomplete,
body.content-review-mode .owr-status-section .owr-sidebar-item.existing.locale-complete,
body.content-review-mode .owr-status-section .owr-sidebar-item.existing.locale-incomplete,
body.content-review-mode .owr-status-section .owr-sidebar-item.planned.locale-complete,
body.content-review-mode .owr-status-section .owr-sidebar-item.planned.locale-incomplete,
body.content-review-mode .owr-sidebar-item.existing.locale-complete,
body.content-review-mode .owr-sidebar-item.existing.locale-incomplete,
body.content-review-mode .owr-sidebar-item.planned.locale-complete,
body.content-review-mode .owr-sidebar-item.planned.locale-incomplete {
  border: 0 !important;
  border-style: solid !important;
  background: #fff !important;
  box-shadow: 0 0 0 1px var(--ow-depth-ring), var(--ow-smooth-shadow-xs) !important;
}

body.content-editor-mode .cm-sidebar-status-section .cm-sidebar-content-item.existing.locale-complete.active,
body.content-editor-mode .cm-sidebar-status-section .cm-sidebar-content-item.existing.locale-incomplete.active,
body.content-editor-mode .cm-sidebar-status-section .cm-sidebar-content-item.planned.locale-complete.active,
body.content-editor-mode .cm-sidebar-status-section .cm-sidebar-content-item.planned.locale-incomplete.active,
body.content-editor-mode .cm-sidebar-content-item.existing.locale-complete.active,
body.content-editor-mode .cm-sidebar-content-item.existing.locale-incomplete.active,
body.content-editor-mode .cm-sidebar-content-item.planned.locale-complete.active,
body.content-editor-mode .cm-sidebar-content-item.planned.locale-incomplete.active,
body.content-review-mode .owr-status-section .owr-sidebar-item.active.locale-complete,
body.content-review-mode .owr-status-section .owr-sidebar-item.active.locale-incomplete,
body.content-review-mode .owr-sidebar-item.active.locale-complete,
body.content-review-mode .owr-sidebar-item.active.locale-incomplete {
  color: #292b27 !important;
  border: 0 !important;
  background: #fff !important;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--cluster-color, #292929) 38%, var(--ow-depth-ring)),
    0 0 0 3px color-mix(in srgb, var(--cluster-color, #292929) 6%, transparent),
    var(--ow-smooth-shadow-sm) !important;
}