/**
 * OW Onboarding Tool — Interface Design System
 * Version 0.73.0
 *
 * Zielbild:
 * - SF Pro, ausschließlich Regular (400) und Medium (500)
 * - Typografie nur in 12px, 13px, 14px und 24px
 * - Text-Hierarchie über #292929, #5D5D5D und #9E9E9E
 * - Navigation mit 14px-Icons und 8px-Radius
 * - Karten mit 20px-Icons und 16px-Radius
 * - Primäre CTAs als vollständig gerundete Pills
 */

:root {
  --color-bg: #f7f7f5;
  --color-surface: #ffffff;
  --color-surface-alt: #f4f4f2;
  --color-border: #e7e7e3;
  --color-border-strong: #d7d7d2;
  --color-text: #292929;
  --color-text-muted: #5d5d5d;
  --color-text-soft: #9e9e9e;
  --color-accent: #292929;

  --radius-nav: 8px;
  --radius-card: 16px;
  --radius-pill: 999px;
  --radius-sm: 8px;
  --radius-md: 8px;
  --radius-lg: 16px;

  --shadow-sm: 0 1px 2px rgba(41, 41, 41, 0.04);
  --shadow-md: 0 8px 24px rgba(41, 41, 41, 0.06);
  --shadow-lg: 0 20px 56px rgba(41, 41, 41, 0.09);

  --font-display: "SF Pro Text", "SF Pro Display", -apple-system,
    BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "SF Pro Text", "SF Pro Display", -apple-system,
    BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
}

/* --------------------------------------------------------------------------
   Typografie
   -------------------------------------------------------------------------- */
html {
  font-family: var(--font-display);
  font-size: 13px;
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-synthesis: none;
}

html body,
html body *,
html body *::before,
html body *::after {
  font-family: var(--font-display) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  letter-spacing: -0.15px !important;
}

html body {
  color: var(--color-text);
  background: var(--color-bg);
}

/* 24px — Seitentitel, große Kennzahlen und Präsentations-Titel */
html body :is(
  .login-title,
  .dashboard-title,
  .stat-card-value,
  .ow-onboarding-pkg-hero-title,
  .ow-onboarding-pkg-hstat-num,
  .ow-onboarding-slide-platname,
  .ow-onboarding-slide-zugintro-name,
  .ow-onboarding-slide-fnhead-name,
  .ow-onboarding-slide-fn-name,
  .ow-onboarding-slide-fn-main .ow-onboarding-slide-fn-name,
  .ow-onboarding-pf-empty-title,
  .present-info-panel-title,
  .effort-summary-value,
  .step-2-title,
  .editor-page-title
) {
  font-size: 24px !important;
  line-height: 1.16 !important;
}

/* 14px — Navigation, Karten-Titel, Feldwerte und lokale Überschriften */
html body :is(
  h2,
  h3,
  h4,
  h5,
  h6,
  .login-brand-name,
  .brand,
  .btn,
  .login-submit,
  .dashboard-subtitle,
  .dashboard-search input,
  .filter-pill,
  .ob-card-title,
  .onboarding-card-title,
  .calendar-month-label,
  .modal-title,
  .ow-modal-title,
  .admin-notes-title,
  .sitemap-drawer-title,
  .page-card-title,
  .effort-card-title,
  .sitemap-card-title,
  .node-preview-title,
  .ow-onboarding-pkg-title,
  .ow-onboarding-pkg-head .ow-onboarding-pkg-title,
  .ow-onboarding-pf-new-title,
  .ow-onboarding-slide-zugang-name,
  .ow-onboarding-slide-zugintro-meta,
  .ow-onboarding-slide-fn-desc,
  .ow-onboarding-slide-fn-main .ow-onboarding-slide-fn-desc,
  .ow-onboarding-slide-list-head-name,
  .ow-onboarding-slide-listrow-name,
  .ow-onboarding-slide-info-item,
  input,
  textarea,
  select
) {
  font-size: 14px !important;
}

/* 12px — Labels, Metadaten, Hinweise, Badges und Status */
html body :is(
  label,
  small,
  .login-brand-tag,
  .login-footer,
  .dashboard-user,
  .panel-title,
  .form-label,
  .form-helper,
  .form-hint,
  .field-hint,
  .modal-subtitle,
  .dashboard-search input::placeholder,
  .client-field-label,
  .client-field-value,
  .save-indicator,
  .live-indicator,
  .step-number,
  .step-label,
  .ob-card-kind,
  .ob-card-sub,
  .ob-card-block-label,
  .ob-card-block-empty,
  .ob-meeting-type,
  .ob-card-footer-label,
  .prep-status-btn,
  .stat-card-label,
  .calendar-weekday,
  .calendar-day,
  .calendar-day-num,
  .calendar-legend-label,
  .calendar-upcoming-title,
  .calendar-upcoming-date,
  .claude-template-hint,
  .claude-template-instructions,
  .claude-template-copy-btn,
  .empty-state p,
  .page-card-meta,
  .page-card-level-badge,
  .effort-card-level,
  .effort-card-hierarchy,
  .effort-card-tag,
  .sitemap-card-level,
  .sitemap-card-meta,
  .sitemap-card-tag,
  .detail-content-section-sub,
  .tags-field-header,
  .tag-chip,
  .tag-toggle,
  .status-draft,
  .status-in_progress,
  .status-completed,
  .ow-onboarding-pkg-hero-eyebrow,
  .ow-onboarding-pkg-hero-stats,
  .ow-onboarding-pkg-hstat-label,
  .ow-onboarding-pkg-meta,
  .ow-onboarding-pkg-fn-desc,
  .ow-onboarding-slide-eyebrow,
  .ow-onboarding-slide-zugang-meta,
  .ow-onboarding-slide-list-head-meta,
  .ow-onboarding-slide-listrow-desc,
  .ow-onboarding-slide-info-head,
  .ow-onboarding-pf-danger-hint,
  .zoom-level,
  #zoom-level
) {
  font-size: 12px !important;
}

/* Regular und Medium sind die einzigen verwendeten Schnitte. */
html body :is(
  strong,
  b,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  button,
  .btn,
  .login-submit,
  .login-brand-name,
  .brand,
  .dashboard-title,
  .stat-card-value,
  .ob-card-title,
  .onboarding-card-title,
  .modal-title,
  .ow-modal-title,
  .panel-title,
  .step.active,
  .step.active *,
  .filter-pill.active,
  .prep-status-btn.active,
  .page-card-title,
  .effort-card-title,
  .sitemap-card-title,
  .ow-onboarding-pkg-title,
  .ow-onboarding-pkg-head .ow-onboarding-pkg-title,
  .ow-onboarding-slide-platname,
  .ow-onboarding-slide-zugintro-name,
  .ow-onboarding-slide-fn-name,
  .ow-onboarding-slide-list-head-name,
  .ow-onboarding-slide-listrow-name
) {
  font-weight: 500 !important;
}

/* --------------------------------------------------------------------------
   Text-Hierarchie
   -------------------------------------------------------------------------- */
html body :is(
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  .login-brand-name,
  .brand,
  .dashboard-title,
  .stat-card-value,
  .ob-card-title,
  .onboarding-card-title,
  .modal-title,
  .ow-modal-title,
  .panel-title,
  .calendar-month-label,
  .page-card-title,
  .effort-card-title,
  .sitemap-card-title,
  .ow-onboarding-pkg-title,
  .ow-onboarding-pkg-hero-title,
  .ow-onboarding-pkg-hstat-num,
  .ow-onboarding-slide-platname,
  .ow-onboarding-slide-zugintro-name,
  .ow-onboarding-slide-fnhead-name,
  .ow-onboarding-slide-fn-name,
  .ow-onboarding-slide-list-head-name,
  .ow-onboarding-slide-listrow-name,
  .present-info-panel-title,
  input,
  textarea,
  select
) {
  color: #292929 !important;
}

html body :is(
  p,
  .login-subtitle,
  .dashboard-subtitle,
  .ob-card-company,
  .ob-card-name,
  .ob-card-block-value,
  .ob-meeting-type,
  .calendar-upcoming-date,
  .claude-template-instructions,
  .empty-state p,
  .modal-subtitle,
  .detail-content-section-sub,
  .page-card-parent,
  .effort-card-hierarchy,
  .sitemap-card-meta,
  .ow-onboarding-pkg-hero-sub,
  .ow-onboarding-pkg-fn-desc,
  .ow-onboarding-pkg-detail-desc,
  .ow-onboarding-slide-zugang-meta,
  .ow-onboarding-slide-zugintro-meta,
  .ow-onboarding-slide-fn-desc,
  .ow-onboarding-slide-list-head-meta,
  .ow-onboarding-slide-listrow-desc,
  .ow-onboarding-pf-empty-text,
  .present-info-section-text
) {
  color: #5d5d5d !important;
}

html body :is(
  .login-brand-tag,
  .login-footer,
  .dashboard-user,
  .form-label,
  .form-helper,
  .form-hint,
  .field-hint,
  .client-field-label,
  .save-indicator,
  .stat-card-label,
  .ob-card-block-label,
  .ob-card-block-empty,
  .ob-card-footer-label,
  .calendar-weekday,
  .calendar-legend-label,
  .calendar-upcoming-title,
  .claude-template-hint,
  .page-card-meta,
  .sitemap-card-level,
  .sitemap-card-meta,
  .ow-onboarding-pkg-hero-eyebrow,
  .ow-onboarding-pkg-hstat-label,
  .ow-onboarding-pkg-meta,
  .ow-onboarding-slide-eyebrow,
  .ow-onboarding-slide-list-head-meta,
  .ow-onboarding-pf-danger-hint,
  input::placeholder,
  textarea::placeholder
) {
  color: #9e9e9e !important;
}

/* Aktive Navigation bleibt primär, inaktive Navigation tertiär. */
html body :is(.step, .filter-pill, .layout-toggle-btn, .client-bar-toggle) {
  color: #9e9e9e;
}

html body :is(
  .step.active,
  .step.active *,
  .filter-pill.active,
  .layout-toggle-btn.active,
  .client-bar-toggle:hover
) {
  color: #292929 !important;
}

/* --------------------------------------------------------------------------
   Grundelemente und Interaktion
   -------------------------------------------------------------------------- */
button,
a,
input,
textarea,
select {
  -webkit-tap-highlight-color: transparent;
}

input,
textarea,
select {
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-nav) !important;
  background: #ffffff !important;
  box-shadow: none !important;
}

input:focus,
textarea:focus,
select:focus,
button:focus-visible,
a:focus-visible {
  outline: none !important;
  border-color: #292929 !important;
  box-shadow: 0 0 0 3px rgba(41, 41, 41, 0.1) !important;
}

::selection {
  background: rgba(41, 41, 41, 0.14);
  color: #292929;
}

/* Navigation und sekundäre Controls: 8px Radius. */
html body :is(
  .btn,
  .filter-pill,
  .step,
  .client-bar-toggle,
  .client-bar-edit,
  .calendar-nav,
  .dashboard-search,
  .dashboard-search-clear,
  .panel-collapse-btn,
  .canvas-controls,
  .canvas-control-btn,
  .layout-toggle,
  .layout-toggle-btn,
  .area-list-toggle,
  .area-list-item,
  .area-list-item-delete,
  .tags-manage-btn,
  .level-btn,
  .color-swatch,
  .touchbar-btn,
  .sitemap-drawer-close,
  .sitemap-search-clear,
  .sitemap-filter-pill,
  .ow-onboarding-netviz-zoom,
  .ow-onboarding-netviz-zoom button,
  .admin-note-action,
  .ob-card-action-btn,
  .meeting-type-card,
  .new-onboarding-more,
  .file-upload,
  .import-textarea
) {
  border-radius: var(--radius-nav) !important;
}

/* Primäre und destruktive CTAs: Pill-Radius. */
html body :is(
  .btn-primary,
  .btn-danger,
  .login-submit,
  .claude-template-copy-btn,
  .touchbar-btn-primary,
  .ow-onboarding-pf-clear-btn,
  .sync-btn
) {
  border-radius: var(--radius-pill) !important;
}

.btn {
  min-height: 34px;
  padding: 8px 13px;
  gap: 7px;
  border-color: var(--color-border) !important;
  background: #ffffff;
  color: #292929;
  box-shadow: none;
}

.btn:hover {
  border-color: var(--color-border-strong) !important;
  background: var(--color-surface-alt) !important;
  transform: none !important;
}

.btn-primary {
  background: #292929 !important;
  border-color: #292929 !important;
  color: #ffffff !important;
  padding-left: 16px;
  padding-right: 16px;
}

.btn-primary:hover {
  background: #171717 !important;
  border-color: #171717 !important;
  color: #ffffff !important;
  opacity: 1 !important;
}

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

.btn-danger {
  color: #ffffff !important;
}

/* --------------------------------------------------------------------------
   Icon-System
   -------------------------------------------------------------------------- */
.icon,
.icon-svg {
  display: block;
  flex: 0 0 auto;
}

/* Navigations-Icons: exakt 14px. */
html body :is(
  .btn,
  .dashboard-header,
  .dashboard-toolbar,
  .top-bar,
  .stepper,
  .client-bar,
  .panel-header,
  .calendar-header,
  .calendar-nav,
  .canvas-controls,
  .layout-toggle,
  .panel-collapse-btn,
  .presenter-touchbar,
  .touchbar-btn,
  .sitemap-drawer-header,
  .sitemap-drawer-search,
  .sitemap-drawer-filters,
  .area-list-header,
  .tags-field-header,
  .ow-onboarding-netviz-zoom,
  .ob-card-actions
) svg {
  width: 14px !important;
  height: 14px !important;
}

/* Karten-Icons: exakt 20px. */
html body :is(
  .stat-card-icon,
  .empty-state-icon,
  .meeting-type-card,
  .page-card-icon,
  .effort-card-icon,
  .sitemap-card-icon,
  .ow-onboarding-pkg-head-icon,
  .ow-onboarding-pkg-iconwrap,
  .ow-onboarding-slide-zugang-icon,
  .ow-onboarding-slide-zugintro-icon,
  .ow-onboarding-slide-fn-icon,
  .ow-onboarding-slide-list-head-icon,
  .ow-onboarding-slide-listrow-icon,
  .ow-onboarding-pf-empty-icon
) svg {
  width: 20px !important;
  height: 20px !important;
}

/* --------------------------------------------------------------------------
   Karten und Flächen
   -------------------------------------------------------------------------- */
html body :is(
  .login-card,
  .onboarding-card,
  .ob-card,
  .stat-card,
  .calendar-widget,
  .claude-template-box,
  .empty-state,
  .dashboard-error,
  .modal,
  .ow-modal,
  .cal-popover,
  .page-card,
  .effort-card,
  .sitemap-card,
  .present-info-panel,
  .admin-notes-panel,
  .admin-note,
  .tag-manager-modal,
  .node-tags-popover,
  .ow-onboarding-pkg,
  .ow-onboarding-slide-zugang,
  .ow-onboarding-pf-panel,
  .ow-onboarding-netviz-panel,
  .ow-onboarding-pf-empty-state
) {
  border-radius: var(--radius-card) !important;
}

html body :is(
  .login-card,
  .onboarding-card,
  .ob-card,
  .stat-card,
  .calendar-widget,
  .claude-template-box,
  .empty-state,
  .dashboard-error,
  .modal,
  .ow-modal,
  .cal-popover,
  .page-card,
  .effort-card,
  .sitemap-card,
  .present-info-panel,
  .admin-notes-panel,
  .admin-note,
  .ow-onboarding-pkg,
  .ow-onboarding-slide-zugang
) {
  border-color: var(--color-border) !important;
  box-shadow: var(--shadow-sm) !important;
}

html body :is(
  .onboarding-card,
  .ob-card,
  .stat-card,
  .page-card,
  .effort-card,
  .sitemap-card,
  .ow-onboarding-pkg
):hover {
  border-color: var(--color-border-strong) !important;
  box-shadow: var(--shadow-md) !important;
  transform: none !important;
}

/* --------------------------------------------------------------------------
   Login
   -------------------------------------------------------------------------- */
.login-wrap {
  padding: 32px;
  background:
    radial-gradient(circle at 20% 0%, rgba(41, 41, 41, 0.04), transparent 34%),
    var(--color-bg);
}

.login-card {
  max-width: 408px;
  padding: 32px;
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-lg) !important;
}

.login-title {
  margin-top: 32px;
  margin-bottom: 8px;
}

.login-field label {
  text-transform: none !important;
  margin-bottom: 7px;
}

.login-field input {
  min-height: 42px;
  padding: 10px 12px;
}

.login-submit {
  min-height: 42px;
  background: #292929 !important;
  color: #ffffff !important;
}

.login-brand-tag {
  border-radius: var(--radius-pill) !important;
  padding: 3px 8px;
}

/* --------------------------------------------------------------------------
   Dashboard
   -------------------------------------------------------------------------- */
.dashboard-wrap {
  max-width: 1280px;
  padding: 32px 28px 56px;
}

.dashboard-header {
  margin-bottom: 40px;
}

.dashboard-hero {
  align-items: center;
  margin-bottom: 24px;
}

.dashboard-title {
  margin-bottom: 5px;
}

.dashboard-user {
  padding: 6px 10px;
  border: 0;
  background: transparent;
}

.stats-grid {
  gap: 12px;
  margin-bottom: 20px;
}

.stat-card {
  min-height: 84px;
  padding: 16px;
  gap: 12px;
  background: #ffffff;
}

.stat-card-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px !important;
}

.stat-card-value {
  margin-bottom: 1px;
}

.dashboard-toolbar {
  padding: 8px;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  background: #ffffff;
  box-shadow: var(--shadow-sm);
  gap: 8px;
}

.dashboard-search {
  min-height: 36px;
  border: 0 !important;
  background: var(--color-surface-alt) !important;
}

.dashboard-search input {
  min-height: 36px;
  border: 0 !important;
  background: transparent !important;
  padding-top: 8px;
  padding-bottom: 8px;
}

.dashboard-search input:focus {
  box-shadow: none !important;
}

.dashboard-filters {
  gap: 4px;
}

.filter-pill {
  min-height: 32px;
  padding: 7px 10px;
  border: 1px solid transparent !important;
  background: transparent;
}

.filter-pill:hover {
  background: var(--color-surface-alt) !important;
  color: #292929 !important;
}

.filter-pill.active {
  background: #292929 !important;
  color: #ffffff !important;
  border-color: #292929 !important;
  box-shadow: none !important;
}

.dashboard-grid {
  gap: 20px;
}

.onboardings-list {
  gap: 12px;
}

.ob-card {
  overflow: hidden;
}

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

.ob-card-accent {
  width: 3px;
}

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

.ob-card-avatar {
  width: 40px;
  height: 40px;
  border-radius: 12px !important;
  box-shadow: none;
}

.ob-card-kind {
  border-radius: var(--radius-pill) !important;
}

.ob-card-action-btn {
  width: 30px;
  height: 30px;
  padding: 8px;
}

.ob-card-footer {
  background: var(--color-surface-alt);
  padding: 10px 20px;
}

.prep-status-buttons,
.prep-status-btn,
.ob-deadline,
.status-draft,
.status-in_progress,
.status-completed {
  border-radius: var(--radius-pill) !important;
}

.calendar-widget {
  padding: 16px;
}

.calendar-day {
  border-radius: var(--radius-nav) !important;
}

.claude-template-box {
  margin-top: 32px;
}

.claude-template-toggle {
  padding: 16px 18px;
}

/* --------------------------------------------------------------------------
   Editor-Navigation und Panels
   -------------------------------------------------------------------------- */
.top-bar {
  min-height: 58px;
  padding: 10px 20px;
}

.brand {
  gap: 9px;
}

.brand-tag {
  border-radius: var(--radius-pill) !important;
  color: #9e9e9e !important;
  background: var(--color-surface-alt);
}

.brand-back {
  padding: 7px 9px;
  border-radius: var(--radius-nav);
}

.brand-back:hover {
  color: #292929 !important;
  background: var(--color-surface-alt);
  text-decoration: none;
}

.top-bar-actions {
  gap: 8px;
}

.save-indicator {
  min-width: 96px;
}

.stepper {
  padding: 8px 20px;
  gap: 4px;
  justify-content: flex-start;
}

.step {
  padding: 7px 10px;
  gap: 7px;
}

.step:hover {
  opacity: 1;
  background: var(--color-surface-alt);
}

.step.active {
  background: var(--color-surface-alt);
}

.step-number {
  width: 20px;
  height: 20px;
  border-radius: 6px !important;
}

.step.active .step-number {
  background: #292929;
  color: #ffffff !important;
}

.step-divider {
  width: 24px;
  margin: 0 4px;
}

.client-bar:not(.collapsed) {
  padding: 8px 20px;
}

.client-bar.collapsed {
  padding: 0 20px;
}

.client-bar-edit {
  padding: 7px 9px;
}

.panel-header {
  min-height: 48px;
  padding: 12px 16px;
}

.panel-title {
  text-transform: none !important;
}

.panel-body {
  padding: 16px;
}

.editor-panel {
  border-color: var(--color-border);
}

.canvas-container {
  background-color: #f8f8f6;
  background-image: radial-gradient(circle at 1px 1px, #ddddda 1px, transparent 1.2px);
  background-size: 24px 24px;
}

.canvas-controls {
  overflow: hidden;
  box-shadow: var(--shadow-md);
}

.canvas-control-btn {
  width: 36px;
  height: 36px;
}

.layout-toggle {
  padding: 4px;
  box-shadow: var(--shadow-sm);
}

.page-card,
.effort-card {
  background: #ffffff;
}

.page-card-title,
.effort-card-title {
  line-height: 1.3 !important;
}

.form-label,
.client-field-label,
.ob-card-block-label,
.ob-card-footer-label,
.calendar-weekday,
.calendar-upcoming-title,
.ow-onboarding-pkg-hero-eyebrow,
.ow-onboarding-slide-eyebrow {
  text-transform: none !important;
}

/* --------------------------------------------------------------------------
   Modale, Notizen und Popover
   -------------------------------------------------------------------------- */
.modal-backdrop,
.ow-modal-backdrop {
  background: rgba(41, 41, 41, 0.28) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.modal,
.ow-modal {
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-lg) !important;
}

.modal-header,
.ow-modal-header,
.modal-footer,
.ow-modal-footer {
  border-color: var(--color-border) !important;
}

.modal-close,
.ow-modal-close {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-nav) !important;
  color: #5d5d5d !important;
}

.modal-close:hover,
.ow-modal-close:hover {
  background: var(--color-surface-alt);
  color: #292929 !important;
}

.cal-popover {
  box-shadow: var(--shadow-lg) !important;
}

/* --------------------------------------------------------------------------
   Plattform- und Kundenansicht
   -------------------------------------------------------------------------- */
.ow-onboarding-pkg-hero {
  padding-top: 40px;
}

.ow-onboarding-packages .ow-onboarding-pkg-grid {
  gap: 16px;
  max-width: 880px;
}

.ow-onboarding-packages .ow-onboarding-pkg {
  border-radius: var(--radius-card) !important;
  box-shadow: var(--shadow-sm) !important;
}

.ow-onboarding-pkg-head {
  padding: 18px 20px 16px;
}

.ow-onboarding-pkg-head-icon,
.ow-onboarding-pkg-iconwrap,
.ow-onboarding-slide-zugang-icon,
.ow-onboarding-slide-zugintro-icon,
.ow-onboarding-slide-fn-icon,
.ow-onboarding-slide-list-head-icon,
.ow-onboarding-slide-listrow-icon {
  border-radius: 10px !important;
}

.ow-onboarding-packages .ow-onboarding-pkg-fn {
  border-radius: var(--radius-nav) !important;
}

.ow-onboarding-slides {
  background: var(--color-bg);
}

.ow-onboarding-slide-zugang,
.ow-onboarding-slide-listrow {
  border-radius: var(--radius-card) !important;
}

.ow-onboarding-slide-listrow-current {
  background: var(--color-surface-alt) !important;
}

.presenter-touchbar,
.present-info-panel,
.sitemap-drawer {
  border-color: var(--color-border) !important;
  box-shadow: var(--shadow-md) !important;
}

.touchbar-btn {
  color: #5d5d5d !important;
}

.touchbar-btn-primary {
  background: #292929 !important;
  color: #ffffff !important;
}

/* --------------------------------------------------------------------------
   Responsive Feinschliff
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .dashboard-wrap {
    padding: 24px 18px 40px;
  }

  .dashboard-header {
    margin-bottom: 28px;
  }

  .top-bar {
    padding-left: 14px;
    padding-right: 14px;
  }

  .brand-back,
  .save-indicator {
    display: none;
  }
}

@media (max-width: 640px) {
  .login-wrap {
    padding: 16px;
  }

  .login-card {
    padding: 24px;
  }

  .dashboard-toolbar {
    padding: 8px;
  }

  .dashboard-filters {
    width: 100%;
    overflow-x: auto;
    padding-bottom: 2px;
  }

  .filter-pill {
    flex: 0 0 auto;
  }
}

/* --------------------------------------------------------------------------
   Verbindliche Abschlussregeln
   Höhere Spezifität verhindert, dass ältere Komponenten-Regeln die drei
   zentralen Radius- und Aktivzustände überschreiben.
   -------------------------------------------------------------------------- */
html body .btn.btn-primary,
html body .btn.btn-danger,
html body button.login-submit,
html body button.claude-template-copy-btn,
html body button.touchbar-btn-primary,
html body button.ow-onboarding-pf-clear-btn {
  border-radius: var(--radius-pill) !important;
}

html body .dashboard-filters .filter-pill.active {
  color: #ffffff !important;
}

html body .dashboard-filters .filter-pill.active svg,
html body .dashboard-filters .filter-pill.active span {
  color: currentColor !important;
}

/* Mindmap-Knoten und schwebende Übersichten verhalten sich visuell wie Karten. */
html body .node,
html body .area-list-panel,
html body .minimap,
html body #hierarchy-legend {
  border-radius: var(--radius-card) !important;
}

html body .node .node-title {
  font-size: 14px !important;
  font-weight: 500 !important;
}

/* Lesbare Knotenkarten: Titel bleiben auch mit Inhaltsindikatoren möglichst einzeilig. */
html body .node:not(.home):not(.legal):not(.root) {
  min-width: 200px !important;
  max-width: 260px !important;
}

html body .node .node-title {
  word-break: normal !important;
  overflow-wrap: anywhere;
}

/* Kundenansicht: auch Detailtexte folgen der neutralen Drei-Stufen-Hierarchie. */
html body .ow-onboarding-pkg-fn-name,
html body .ow-onboarding-netviz-title {
  color: #292929 !important;
}

html body .ow-onboarding-pkg-sub .ow-onboarding-pkg-fn-name,
html body .ow-onboarding-pkg-detail-itext,
html body .ow-onboarding-pkg-detail-chip,
html body .ow-onboarding-pkg-detail-notetext,
html body .ow-onboarding-netviz-tab-label {
  color: #5d5d5d !important;
}

html body .ow-onboarding-pkg-detail-btitle,
html body .ow-onboarding-pkg-detail-useslabel,
html body .ow-onboarding-netviz-sub,
html body #zoom-level {
  color: #9e9e9e !important;
}

html body .node.level-2 .node-level-badge {
  color: #5d5d5d !important;
}

/* Aufwand-Board: jede Spalte ist eine 16px-Karte. */
html body .effort-unassigned-panel,
html body .effort-group-column {
  border-radius: var(--radius-card) !important;
  border-color: var(--color-border) !important;
  box-shadow: var(--shadow-sm) !important;
}

/* Tablet-Dashboard: der Kalender bleibt eine kompakte Karte statt auf volle Breite zu wachsen. */
@media (max-width: 1100px) {
  .dashboard-side-col {
    width: 100%;
    max-width: 420px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* --------------------------------------------------------------------------
   Plattform-Präsentation: professionelle Kundenansicht

   Bewusst ohne zusätzlichen Header: Die Präsentationsfläche besteht aus einem
   ruhigen Rahmen mit zwei exakt ausgerichteten Karten. Der Inhalt beginnt oben,
   die Modulliste wächst nach unten und der bisher versetzte Leerraum entfällt.
   -------------------------------------------------------------------------- */
body.presenter-mode.ow-platform-present .ow-onboarding-slides {
  --ow-present-stage-y: clamp(24px, 3.5vh, 36px);
  box-sizing: border-box;
  align-items: flex-start !important;
  justify-content: center !important;
  padding: var(--ow-present-stage-y) clamp(64px, 5vw, 80px)
    var(--ow-present-stage-y) clamp(24px, 5vw, 72px) !important;
  background:
    radial-gradient(circle at 10% 10%, rgba(41, 41, 41, 0.025), transparent 34rem),
    radial-gradient(circle at 90% 92%, rgba(93, 93, 93, 0.022), transparent 38rem),
    var(--color-bg) !important;
  scroll-padding-top: var(--ow-present-stage-y) !important;
  scrollbar-gutter: stable;
}

body.presenter-mode.ow-platform-present .ow-onboarding-slide {
  margin: 0 auto !important;
  animation-duration: 0.34s;
}

/* Äußerer Präsentationsrahmen — keine Kopfzeile, nur die beiden Kundenkarten. */
body.presenter-mode.ow-platform-present .ow-onboarding-slide-split {
  width: 100% !important;
  max-width: 1280px !important;
  min-height: min(640px, calc(100vh - 64px));
  min-height: min(640px, calc(100dvh - var(--ow-present-stage-y) - var(--ow-present-stage-y)));
  height: auto !important;
  max-height: none !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1.03fr) minmax(0, 0.97fr) !important;
  gap: 16px !important;
  align-items: stretch !important;
  padding: 16px !important;
  border: 1px solid rgba(215, 215, 210, 0.92);
  border-radius: var(--radius-card) !important;
  background: rgba(255, 255, 255, 0.74);
  box-shadow: var(--shadow-lg);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

body.presenter-mode.ow-platform-present .ow-onboarding-slide-split-left,
body.presenter-mode.ow-platform-present .ow-onboarding-slide-split-right {
  min-width: 0;
  min-height: 100%;
  height: auto !important;
  padding: clamp(30px, 3.2vw, 44px);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card) !important;
  background: #ffffff;
  box-shadow: var(--shadow-sm);
}

/* Aktuelle Funktion */
body.presenter-mode.ow-platform-present .ow-onboarding-slide-split-left {
  display: flex !important;
  flex-direction: column;
  justify-content: flex-start !important;
  overflow: hidden;
}

body.presenter-mode.ow-platform-present .ow-onboarding-slide-fn-main {
  width: 100%;
  max-width: 640px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

body.presenter-mode.ow-platform-present .ow-onboarding-slide-fn-main .ow-onboarding-slide-fn-icon {
  width: 52px !important;
  height: 52px !important;
  margin: 0 0 22px !important;
  border-radius: 14px !important;
  box-shadow: inset 0 0 0 1px rgba(41, 41, 41, 0.025);
}

body.presenter-mode.ow-platform-present .ow-onboarding-slide-fn-main .ow-onboarding-slide-fn-icon svg {
  width: 20px !important;
  height: 20px !important;
}

body.presenter-mode.ow-platform-present .ow-onboarding-slide-fn-main .ow-onboarding-slide-fn-name {
  width: 100%;
  max-width: 590px;
  margin: 0 0 12px !important;
  line-height: 1.18 !important;
  text-wrap: balance;
}

body.presenter-mode.ow-platform-present .ow-onboarding-slide-fn-main .ow-onboarding-slide-fn-desc {
  width: 100%;
  max-width: 590px;
  margin: 0 !important;
  line-height: 1.55 !important;
}

/* Nutzer- und Hintergrundinformationen als klar gegliederte Leistungsblöcke. */
body.presenter-mode.ow-platform-present .ow-onboarding-slide-info {
  width: 100%;
  margin-top: 24px !important;
  padding-top: 24px;
  gap: 0 !important;
  border-top: 1px solid var(--color-border);
}

body.presenter-mode.ow-platform-present .ow-onboarding-slide-info-block {
  position: relative;
  min-height: 36px;
  padding-left: 52px;
}

body.presenter-mode.ow-platform-present .ow-onboarding-slide-info-block + .ow-onboarding-slide-info-block {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--color-border);
}

body.presenter-mode.ow-platform-present .ow-onboarding-slide-info-head {
  min-height: 36px;
  margin: 0 0 8px !important;
  display: flex;
  align-items: center;
  line-height: 1.3 !important;
}

body.presenter-mode.ow-platform-present .ow-onboarding-slide-info-headicon {
  position: absolute;
  top: 0;
  left: 0;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
}

body.presenter-mode.ow-platform-present .ow-onboarding-slide-info-block + .ow-onboarding-slide-info-block .ow-onboarding-slide-info-headicon {
  top: 20px;
}

body.presenter-mode.ow-platform-present .ow-onboarding-slide-info-head-content .ow-onboarding-slide-info-headicon {
  color: #2563eb;
  background: #eff6ff;
}

body.presenter-mode.ow-platform-present .ow-onboarding-slide-info-head-feature .ow-onboarding-slide-info-headicon {
  color: #16a34a;
  background: #f0fdf4;
}

body.presenter-mode.ow-platform-present .ow-onboarding-slide-info-headicon svg {
  width: 16px !important;
  height: 16px !important;
}

body.presenter-mode.ow-platform-present .ow-onboarding-slide-info-list {
  gap: 7px !important;
  padding-left: 0 !important;
}

body.presenter-mode.ow-platform-present .ow-onboarding-slide-info-item {
  gap: 10px !important;
  line-height: 1.45 !important;
}

body.presenter-mode.ow-platform-present .ow-onboarding-slide-info-ico {
  width: 20px !important;
  height: 20px !important;
  margin-top: 0 !important;
  border-radius: 7px !important;
}

body.presenter-mode.ow-platform-present .ow-onboarding-slide-info-ico svg {
  width: 12px !important;
  height: 12px !important;
}

/* Modulnavigation — oben beginnend statt am unteren Kartenrand verankert. */
body.presenter-mode.ow-platform-present .ow-onboarding-slide-split-right {
  display: flex !important;
  flex-direction: column;
  justify-content: flex-start !important;
  padding-left: clamp(24px, 2.7vw, 36px);
  padding-right: clamp(24px, 2.7vw, 36px);
  overflow: hidden;
}

body.presenter-mode.ow-platform-present .ow-onboarding-slide-list {
  width: 100%;
  height: 100%;
  max-height: none !important;
  min-height: 0;
}

body.presenter-mode.ow-platform-present .ow-onboarding-slide-list-head {
  min-height: 52px;
  gap: 14px !important;
  margin: 0 0 10px !important;
  padding: 0 0 20px !important;
  border-bottom: 1px solid var(--color-border) !important;
}

body.presenter-mode.ow-platform-present .ow-onboarding-slide-list-head-icon {
  width: 48px !important;
  height: 48px !important;
  border-radius: 13px !important;
}

body.presenter-mode.ow-platform-present .ow-onboarding-slide-list-head-icon svg {
  width: 20px !important;
  height: 20px !important;
}

body.presenter-mode.ow-platform-present .ow-onboarding-slide-list-head-txt {
  min-width: 0;
  gap: 3px;
}

body.presenter-mode.ow-platform-present .ow-onboarding-slide-list-head-name,
body.presenter-mode.ow-platform-present .ow-onboarding-slide-list-head-meta {
  margin: 0 !important;
}

body.presenter-mode.ow-platform-present .ow-onboarding-slide-list-rows {
  flex: 1 1 auto;
  min-height: 0;
  padding: 0 !important;
  gap: 0 !important;
  justify-content: flex-start !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  -webkit-mask-image: none !important;
  mask-image: none !important;
  scrollbar-width: thin;
  scrollbar-color: var(--color-border-strong) transparent;
}

body.presenter-mode.ow-platform-present .ow-onboarding-slide-listrow {
  position: relative;
  min-height: 74px;
  gap: 14px !important;
  padding: 14px 12px !important;
  border-radius: 0 !important;
  border-bottom: 1px solid #ededeb;
  animation-duration: 0.32s;
}

body.presenter-mode.ow-platform-present .ow-onboarding-slide-listrow:last-child {
  border-bottom-color: transparent;
}

body.presenter-mode.ow-platform-present .ow-onboarding-slide-listrow-icon {
  width: 44px !important;
  height: 44px !important;
  border-radius: 12px !important;
}

body.presenter-mode.ow-platform-present .ow-onboarding-slide-listrow-icon svg {
  width: 20px !important;
  height: 20px !important;
}

body.presenter-mode.ow-platform-present .ow-onboarding-slide-listrow-txt {
  flex: 1 1 auto;
  gap: 3px;
}

body.presenter-mode.ow-platform-present .ow-onboarding-slide-listrow-name,
body.presenter-mode.ow-platform-present .ow-onboarding-slide-listrow-desc {
  white-space: normal !important;
  text-overflow: clip !important;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden !important;
}

body.presenter-mode.ow-platform-present .ow-onboarding-slide-listrow-name {
  -webkit-line-clamp: 2;
  line-height: 1.3 !important;
}

body.presenter-mode.ow-platform-present .ow-onboarding-slide-listrow-desc {
  -webkit-line-clamp: 2;
  margin-top: 0 !important;
  line-height: 1.4 !important;
}

body.presenter-mode.ow-platform-present .ow-onboarding-slide-listrow-current {
  margin: 6px 0;
  padding-left: 16px !important;
  border: 1px solid color-mix(in srgb, var(--ow-slide-accent, #5d5d5d) 18%, white) !important;
  border-radius: var(--radius-card) !important;
  background: var(--ow-slide-accent-soft, var(--color-surface-alt)) !important;
  box-shadow: 0 10px 28px color-mix(in srgb, var(--ow-slide-accent, #292929) 8%, transparent);
}

body.presenter-mode.ow-platform-present .ow-onboarding-slide-listrow-current::before {
  content: "";
  position: absolute;
  left: -1px;
  top: 12px;
  bottom: 12px;
  width: 3px;
  border-radius: var(--radius-pill);
  background: var(--ow-slide-accent, #5d5d5d);
}

body.presenter-mode.ow-platform-present .ow-onboarding-slide-listrow-current .ow-onboarding-slide-listrow-name {
  color: #292929 !important;
}

body.presenter-mode.ow-platform-present .ow-onboarding-slide-split-left::-webkit-scrollbar,
body.presenter-mode.ow-platform-present .ow-onboarding-slide-list-rows::-webkit-scrollbar {
  width: 7px;
}

body.presenter-mode.ow-platform-present .ow-onboarding-slide-split-left::-webkit-scrollbar-thumb,
body.presenter-mode.ow-platform-present .ow-onboarding-slide-list-rows::-webkit-scrollbar-thumb {
  background: var(--color-border-strong);
  border: 2px solid transparent;
  border-radius: var(--radius-pill);
  background-clip: padding-box;
}

body.presenter-mode.ow-platform-present .ow-onboarding-slide-split-left::-webkit-scrollbar-track,
body.presenter-mode.ow-platform-present .ow-onboarding-slide-list-rows::-webkit-scrollbar-track {
  background: transparent;
}

/* Titel- und Kategorie-Schritte folgen derselben Kartensprache — ohne Header. */
body.presenter-mode.ow-platform-present .ow-onboarding-slide-title {
  max-width: 960px !important;
  min-height: min(600px, calc(100vh - 64px));
  min-height: min(600px, calc(100dvh - var(--ow-present-stage-y) - var(--ow-present-stage-y)));
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(36px, 5vw, 64px);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card) !important;
  background: #ffffff;
  box-shadow: var(--shadow-lg);
}

body.presenter-mode.ow-platform-present .ow-onboarding-slide-title .ow-onboarding-slide-platname {
  margin-bottom: 28px !important;
}

body.presenter-mode.ow-platform-present .ow-onboarding-slide-zugaenge {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px !important;
}

body.presenter-mode.ow-platform-present .ow-onboarding-slide-zugang {
  min-width: 0;
  padding: 16px 18px !important;
  border-color: var(--color-border) !important;
  background: #ffffff !important;
  box-shadow: var(--shadow-sm) !important;
}

body.presenter-mode.ow-platform-present .ow-onboarding-slide-zugintro {
  width: min(100%, 720px);
  min-height: min(460px, calc(100vh - 64px));
  min-height: min(460px, calc(100dvh - var(--ow-present-stage-y) - var(--ow-present-stage-y)));
  justify-content: center;
  padding: clamp(36px, 5vw, 64px);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card) !important;
  background: #ffffff;
  box-shadow: var(--shadow-lg);
}

body.presenter-mode.ow-platform-present .ow-onboarding-slide-zugintro-icon {
  width: 64px !important;
  height: 64px !important;
  margin-bottom: 20px !important;
  border-radius: 16px !important;
}

body.presenter-mode.ow-platform-present .ow-onboarding-slide-zugintro-icon svg {
  width: 20px !important;
  height: 20px !important;
}

/* Der Architektur-Reiter bleibt erreichbar, wirkt aber wie Teil der Bühne. */
body.presenter-mode.ow-platform-present .ow-onboarding-netviz-tab {
  border-color: var(--color-border) !important;
  box-shadow: var(--shadow-md) !important;
}

/* Laptop und iPad quer */
@media (max-width: 1120px) {
  body.presenter-mode.ow-platform-present .ow-onboarding-slides {
    padding-left: 24px !important;
    padding-right: 56px !important;
  }

  body.presenter-mode.ow-platform-present .ow-onboarding-slide-split {
    grid-template-columns: minmax(0, 0.96fr) minmax(0, 1.04fr) !important;
    padding: 12px !important;
    gap: 12px !important;
  }

  body.presenter-mode.ow-platform-present .ow-onboarding-slide-split-left,
  body.presenter-mode.ow-platform-present .ow-onboarding-slide-split-right {
    padding: 28px 24px;
  }
}

/* iPad hochkant und kleinere Fenster */
@media (max-width: 900px) {
  body.presenter-mode.ow-platform-present .ow-onboarding-slides {
    --ow-present-stage-y: 16px;
    padding-left: 16px !important;
    padding-right: 48px !important;
  }

  body.presenter-mode.ow-platform-present .ow-onboarding-slide-split {
    min-height: 0 !important;
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body.presenter-mode.ow-platform-present .ow-onboarding-slide-split-left,
  body.presenter-mode.ow-platform-present .ow-onboarding-slide-split-right {
    min-height: 0;
    overflow: visible;
  }

  body.presenter-mode.ow-platform-present .ow-onboarding-slide-list-rows {
    overflow: visible !important;
  }

  body.presenter-mode.ow-platform-present .ow-onboarding-slide-zugaenge {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Niedrige Displays: Inhaltshöhe statt künstlicher Viewport-Streckung. */
@media (max-height: 720px) {
  body.presenter-mode.ow-platform-present .ow-onboarding-slides {
    --ow-present-stage-y: 16px;
  }

  body.presenter-mode.ow-platform-present .ow-onboarding-slide-split,
  body.presenter-mode.ow-platform-present .ow-onboarding-slide-title,
  body.presenter-mode.ow-platform-present .ow-onboarding-slide-zugintro {
    min-height: 0 !important;
  }

  body.presenter-mode.ow-platform-present .ow-onboarding-slide-split-left {
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}

/* Abschließender Dichte- und Ausrichtungsabgleich der Kundenbühne. */
body.presenter-mode.ow-platform-present .ow-onboarding-slide {
  margin-top: auto !important;
  margin-bottom: auto !important;
}

body.presenter-mode.ow-platform-present .ow-onboarding-slide-split {
  height: min(640px, calc(100dvh - var(--ow-present-stage-y) - var(--ow-present-stage-y))) !important;
  min-height: 540px !important;
}

body.presenter-mode.ow-platform-present .ow-onboarding-slide-split-left,
body.presenter-mode.ow-platform-present .ow-onboarding-slide-split-right {
  height: 100% !important;
  min-height: 0 !important;
}

body.presenter-mode.ow-platform-present .ow-onboarding-slide-split-left {
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
}

body.presenter-mode.ow-platform-present .ow-onboarding-slide-list-head-name {
  font-size: 24px !important;
  line-height: 1.16 !important;
}

body.presenter-mode.ow-platform-present .ow-onboarding-slide-list-rows {
  padding-top: 12px !important;
}

@media (max-height: 720px) and (min-width: 901px) {
  body.presenter-mode.ow-platform-present .ow-onboarding-slide-split {
    height: calc(100dvh - 32px) !important;
    min-height: 520px !important;
  }
}

@media (max-width: 900px) {
  body.presenter-mode.ow-platform-present .ow-onboarding-slide-split {
    height: auto !important;
    min-height: 0 !important;
  }

  body.presenter-mode.ow-platform-present .ow-onboarding-slide-split-left,
  body.presenter-mode.ow-platform-present .ow-onboarding-slide-split-right {
    height: auto !important;
  }
}