/* ==========================================================================
   VIRTUELLES SYSTEMBRETT - SYSTEMISCHE AUFSTELLUNGEN & COACHING
   Styles & Skeuomorph-Modernes Design
   ========================================================================== */

:root {
  /* Farbpalette */
  --bg-app: #faf9f6;
  --bg-sidebar: #faf9f6;
  --bg-card: #faf9f6;
  --bg-card-hover: #d4a373;
  --bg-stage: #faf9f6;
  
  --text-main: #0e0e0c;
  --text-muted: #9ba1b0;
  --text-subtle: #0e0e0c;
  
  --border-main: #3a3e4b;
  --border-subtle: #9ba1b0;
  
  --primary: #c2955d;         /* Warmes Holz-Gold */
  --primary-hover: #d4a76f;
  --primary-dark: #8c6536;
  --accent-blue: #3b82f6;
  --accent-red: #ef4444;
  --accent-green: #10b981;
  --accent-purple: #8b5cf6;
  --accent-amber: #f59e0b;

  --wood-light: #deb887;
  --wood-medium: #b48a56;
  --wood-dark: #5c3a21;
  --wood-slate: #334155;

  --shadow-sm: 0 2px 4px rgba(0,0,0,0.25);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.35);
  --shadow-lg: 0 8px 24px rgba(0,0,0,0.5);

  --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
}

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

body {
  font-family: var(--font-family);
  background-color: var(--bg-app);
  color: var(--text-main);
  overflow: hidden;
  height: 100vh;
  width: 100vw;
  user-select: none;
  -webkit-font-smoothing: antialiased;
}

/* APP SHELL */
.app-layout {
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: 100vw;
}

/* ==========================================================================
   HEADER / TOOLBAR
   ========================================================================== */
.app-header {
  height: 60px;
  background: var(--bg-sidebar);
  border-bottom: 1px solid var(--border-main);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  z-index: 50;
  gap: 16px;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 20px;
}

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

.brand-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

.brand-title {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.3px;
  color: #9ba1b0;
  line-height: 1.2;
}

.brand-subtitle {
  font-size: 11px;
  color: var(--text-muted);
  display: block;
}

.session-title-wrapper {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding-left: 12px;
  border-left: 1px solid var(--border-subtle);
}

.session-title-input {
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--primary);
  font-size: 14px;
  font-weight: 600;
  padding: 4px 8px;
  outline: none;
  transition: all 0.2s;
  width: 25rem;
}

.session-title-input:hover, .session-title-input:focus {
  background: var(--bg-card);
  border-color: var(--border-main);
  color: #9ba1b0;
}

.session-meta {
  font-size: 11px;
  color: var(--text-subtle);
}

.header-center {
  display: flex;
  align-items: center;
  gap: 12px;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* BUTTONS & GROUPS */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: left;
  gap: 6px;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 500;
  border: 1px solid transparent;
  cursor: pointer;
  background: var(--bg-card);
  color: var(--text-main);
  transition: all 0.15s ease-in-out;
  white-space: nowrap;
}

.btn:hover {
  background: var(--bg-card-hover);
  border-color: var(--border-main);
}

.btn:active {
  transform: translateY(1px);
}

.btn-primary {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  color: #fff;
  border-color: rgba(255,255,255,0.15);
  box-shadow: 0 2px 6px rgba(194, 149, 93, 0.3);
}

.btn-primary:hover {
  background: linear-gradient(135deg, var(--primary-hover) 0%, var(--primary) 100%);
  color: #fff;
}

.btn-secondary {
  background: var(--bg-card);
  border-color: var(--border-main);
}

.btn-outline {
  background: transparent;
  color: var(--text-main);
}

.btn-outline:hover {
  background: var(--bg-card);
  border-color: var(--text-muted);
}

.btn-outline-danger {
  background: transparent;
  border-color: rgba(239, 68, 68, 0.4);
  color: #ef4444;
}

.btn-outline-danger:hover {
  background: rgba(239, 68, 68, 0.15);
  border-color: #ef4444;
}

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

.btn-icon {
  padding: 6px 8px;
  background: var(--bg-card);
  color: var(--text-muted);
  border: 1px solid var(--border-subtle);
}

.btn-icon:hover {
  color: var(--text-main);
  border-color: var(--border-main);
}

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

.btn-xs {
  padding: 3px 8px;
  font-size: 11px;
  color: var(--text-subtle);
}

.btn-block {
  width: 100%;
}

.btn-group {
  display: inline-flex;
  background: var(--bg-app);
  padding: 2px;
  gap: 2px;
}

.btn-group .btn {
  background: transparent;
  border: none;
  padding: 4px 10px;
  border-radius: 4px;
}

.btn-group .btn.active {
  background: var(--bg-card);
  color: #000;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

.btn-group .btn-toggle.active {
/*  background: var(--primary);*/
  color: var(--primary-hover);
  border: 1px solid rgba(194, 149, 93, 0.35);
}

/* ==========================================================================
   WORKSPACE BODY (LEFT, BOARD, RIGHT)
   ========================================================================== */
.workspace-body {
  display: flex;
  flex: 1;
  overflow: hidden;
  position: relative;
}

/* SIDEBARS COMMON */
.sidebar-left, .sidebar-right {
  width: 18rem;
  background: var(--bg-sidebar);
  display: flex;
  flex-direction: column;
  z-index: 20;
  border-color: var(--border-main);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}

.sidebar-left {
  border-right: 1px solid var(--border-main);
}

.sidebar-right {
  width: 280px;
  border-left: 1px solid var(--border-main);
}

.sidebar-tabs {
  display: flex;
  background: var(--bg-app);
  border-bottom: 1px solid var(--border-main);
  padding: 4px 8px 0;
  gap: 4px;
  overflow-x: auto;
}

.tab-btn {
  background: transparent;
  border: none;
  color: var(--text-muted);
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
 /* border-radius: var(--radius-sm) var(--radius-sm) 0 0;*/
  transition: all 0.15s;
  white-space: nowrap;
}

.tab-btn:hover {
  color: var(--text-main);
}

.tab-btn.active {
/*  background: var(--bg-sidebar);*/
  color: var(--primary);
  border-top: 2px solid var(--primary);
}

.sidebar-tab-content {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
}

.tab-pane {
  display: none;
}

.tab-pane.active {
  display: block;
}

.pane-header {
  margin-bottom: 14px;
}

.pane-header h3 {
  font-size: 14px;
  font-weight: 700;
  color: #000;
}

.pane-header h4 {
  font-size: 12px;
  font-weight: 700;
  color: #000;
  margin-bottom: 2px;
}

.pane-hint {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
}

.section-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-subtle);
  font-weight: 700;
  margin: 14px 0 8px;
}

/* ==========================================================================
   FIGUREN PALETTE & BUILDER
   ========================================================================== */
.figure-quick-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-bottom: 14px;
}

.quick-figure-btn {
  background: var(--bg-card);
  border: 0px solid var(--border-subtle);
  padding: 10px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  color: var(--text-main);
  font-size: 11px;
  font-weight: 500;
  transition: all 0.15s;
}

.quick-figure-btn:hover {
  background: var(--bg-card-hover);
  border-color: var(--primary);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}

/* FIG PREVIEWS */
.fig-preview {
  position: relative;
  background: var(--wood-medium);
  box-shadow: 0 3px 6px rgba(0,0,0,0.4);
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.fig-preview.wood {
  background: linear-gradient(135deg, #e4be8c 0%, #b48a56 50%, #876033 100%);
  border: 1px solid #704e26;
}

.fig-preview.eckig {
  border-radius: 4px;
}

.fig-preview.rund {
  border-radius: 50%;
}

.fig-preview.gross {
  width: 38px;
  height: 38px;
}

.fig-preview.mittel {
  width: 30px;
  height: 30px;
}

.fig-preview.klein {
  width: 22px;
  height: 22px;
}

.fig-preview.pegdoll {
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,0.3);
}

.fig-preview.zylinder {
  border-radius: 6px;
  border: 1px solid rgba(0,0,0,0.3);
}

.fig-preview.block {
  border-radius: 2px;
  border: 1px solid rgba(0,0,0,0.3);
}

.fig-preview .eyes {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 2px;
  color: #1a1a1a;
  line-height: 1;
  margin-top: 4px;
}

.fig-preview.gross .eyes {
  font-size: 13px;
  margin-top: 5px;
}

.fig-preview.klein .eyes {
  font-size: 8px;
  letter-spacing: 1px;
  margin-top: 2px;
}

.laser-border-line {
  stroke: #6d4826;
  stroke-width: 2px;
  fill: none;
  pointer-events: none;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.highlight-template {
  border-color: rgba(194, 149, 93, 0.6) !important;
  background: linear-gradient(135deg, rgba(194, 149, 93, 0.15) 0%, var(--bg-card) 100%) !important;
}

.fig-preview .notch {
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 7px solid #422915;
  margin-top: -1px;
}

/* COLOR SELECTOR */
.color-palette-selector {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}

.color-dot {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid transparent;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
  transition: transform 0.15s;
}

.color-dot:hover {
  transform: scale(1.15);
}

.color-dot.active {
  border-color: #fff;
  transform: scale(1.2);
  box-shadow: 0 0 0 2px var(--primary);
}

.color-palette-selector.compact .color-dot {
  width: 18px;
  height: 18px;
}

/* SHAPE & SIZE BUILDER */
.card-subtle {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.builder-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.builder-row label {
  font-size: 11px;
  color: var(--text-muted);
  min-width: 45px;
}

.input-text, .input-text-sm, .textarea-sm, .select-sm {
  width: 100%;
  background: var(--bg-app);
  border: 1px solid var(--border-main);
  color: var(--text-main);
  padding: 6px 8px;
  font-size: 10px;
  outline: none;
  font-family: inherit;
}

.input-text:focus, .input-text-sm:focus, .textarea-sm:focus, .select-sm:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(194, 149, 93, 0.25);
}

.textarea-sm {
  resize: vertical;
  min-height: 50px;
}

.quick-helpers {
  margin-top: 14px;
}

/* SYMBOL GRID */
.symbol-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

.symbol-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  padding: 10px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  color: var(--text-main);
  transition: all 0.15s;
}

.symbol-card:hover {
  background: var(--bg-card-hover);
  border-color: var(--primary);
  transform: translateY(-2px);
}

.symbol-icon {
  font-size: 20px;
}

.symbol-name {
  font-size: 11px;
  font-weight: 500;
  text-align: center;
}

/* RELATION TOOL */
.relation-tool-buttons {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.relation-mode-btn {
  text-align: left;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
}

.relation-mode-btn.active {
  background: rgba(194, 149, 93, 0.25);
  border-color: var(--primary);
}

.line-sample {
  display: inline-block;
  width: 32px;
  height: 2px;
}

.line-sample.solid { background: #fff; }
.line-sample.dashed { border-bottom: 2px dashed #999; }
.line-sample.zigzag { background: repeating-linear-gradient(90deg, #ef4444 0, #ef4444 4px, transparent 4px, transparent 6px); }
.line-sample.arrow { background: #3b82f6; position: relative; }
.line-sample.mutual { background: #10b981; }
.line-sample.barrier { background: #e67e22; border-top: 2px solid #e67e22; border-bottom: 2px solid #e67e22; }

.relation-active-banner {
  background: rgba(245, 158, 11, 0.15);
  border: 1px solid var(--accent-amber);
  padding: 8px;
  margin-top: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: var(--accent-amber);
}

.relation-list-container {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 200px;
  overflow-y: auto;
}

.relation-item-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 8px;
  background: var(--bg-card);
  border-radius: var(--radius-sm);
  font-size: 11px;
}

.empty-hint {
  font-size: 11px;
  color: var(--text-subtle);
  font-style: italic;
  padding: 8px 0;
}

/* TEMPLATES LIST */
.template-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.template-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  padding: 10px;
  cursor: pointer;
  transition: all 0.15s;
}

.template-card:hover {
  background: var(--bg-card-hover);
  border-color: var(--primary);
  transform: translateX(3px);
}

.template-name {
  font-size: 12px;
  font-weight: 700;
  color: #000;
  margin-bottom: 3px;
}

.template-desc {
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.3;
}

/* WOOD & BOARD PICKER */
.wood-picker-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-top: 6px;
}

.wood-choice {
  padding: 12px 8px;
  border-radius: var(--radius-sm);
  border: 2px solid transparent;
  cursor: pointer;
  font-size: 11px;
  font-weight: 600;
  color: #2b1d0c;
  box-shadow: var(--shadow-sm);
  transition: transform 0.15s;
}

.wood-choice:hover {
  transform: scale(1.02);
}

.wood-choice.active {
  border-color: #fff;
  box-shadow: 0 0 0 2px var(--primary);
}

.slider-header {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 4px;
}

.slider-input {
  width: 100%;
  accent-color: var(--primary);
  cursor: pointer;
}

.field-hint {
  font-size: 11px;
  color: var(--text-subtle);
  margin-top: 4px;
  line-height: 1.3;
}

/* ==========================================================================
   CENTER BOARD STAGE
   ========================================================================== */
.board-stage-wrapper {
  flex: 1;
  background-color: var(--bg-stage);
  background-image: 
    radial-gradient(circle at 50% 50%, rgba(255,255,255,0.03) 0%, transparent 65%),
    linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
  background-size: 100% 100%, 40px 40px, 40px 40px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.stage-overlay-top {
  position: absolute;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 30;
  pointer-events: none;
}

.pov-banner {
  background: rgba(15, 23, 42, 0.9);
  backdrop-filter: blur(8px);
  border: 1px solid var(--accent-blue);
  color: #fff;
  padding: 6px 14px;
  border-radius: 30px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  box-shadow: var(--shadow-md);
  pointer-events: auto;
  animation: fadeInDown 0.25s ease-out;
}

.pov-badge {
  background: var(--accent-blue);
  color: #000;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 10px;
  text-transform: uppercase;
}

.zoom-controls {
  display: flex;
  align-items: center;
  padding: 2px;
  gap: 2px;
  flex-shrink: 0;
}

.zoom-controls span {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  min-width: 38px;
  text-align: center;
}

.board-viewport {
  flex: 1;
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  cursor: grab;
  perspective: 1200px;
}

.board-viewport:active {
  cursor: grabbing;
}

.board-transform-container {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1600px;
  height: 1200px;
  transform-origin: center center;
  transition: none;
  transform-style: preserve-3d;
  will-change: transform;
}

.board-transform-container.animating {
  transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}

.board-fit-proxy {
  position: absolute;
  left: 0;
  top: 0;
  width: 10px;
  height: 10px;
  visibility: hidden;
  pointer-events: none;
}


.board-svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* SVG INTERACTIVE STYLING */
.board-half {
  cursor: pointer;
  transition: fill 0.2s;
}

.board-border-ring {
  stroke-linecap: round;
}

/* FIGURES SVG STYLING */
.system-figure {
  cursor: grab;
  transition: transform 0.1s;
}

.system-figure:active {
  cursor: grabbing;
}

.system-figure.selected .fig-body {
  stroke: #3b82f6 !important;
  stroke-width: 3.5px !important;
  filter: drop-shadow(0 0 8px rgba(59, 130, 246, 0.8));
}

.figure-label-text {
  font-family: var(--font-family);
  font-size: 11px;
  font-weight: 600;
  fill: #f0f2f5;
  text-anchor: middle;
  pointer-events: none;
  text-shadow: 0 1px 3px rgba(0,0,0,0.85);
}

.figure-scale-badge {
  font-family: var(--font-family);
  font-size: 9px;
  font-weight: 700;
  fill: #fff;
  text-anchor: middle;
  pointer-events: none;
}

.figure-gaze-notch {
  cursor: pointer;
  transition: transform 0.1s;
}

/* ROTATION HANDLE */
.rotation-handle-ring {
  fill: none;
  stroke: rgba(194, 149, 93, 0.6);
  stroke-width: 1.5;
  stroke-dasharray: 4 3;
}

.rotation-handle-knob {
  fill: var(--primary);
  stroke: #fff;
  stroke-width: 2;
  cursor: grab;
}

.rotation-handle-knob:active {
  cursor: grabbing;
  fill: var(--primary-hover);
}

/* VISION CONE */
.vision-cone {
  pointer-events: none;
  opacity: 0.35;
  transition: opacity 0.2s;
}

.vision-cone.highlighted {
  opacity: 0.65;
}

/* SIGHT LINES & RELATIONS */
.sight-line {
  stroke: rgba(59, 130, 246, 0.45);
  stroke-width: 1.5;
  stroke-dasharray: 4 4;
  pointer-events: none;
}

.relation-wire {
  cursor: pointer;
  transition: stroke-width 0.15s;
}

.relation-wire:hover {
  stroke-width: 4 !important;
}

/* STAGE FOOTER */
.stage-footer-bar {
  position: absolute;
  bottom: 12px;
  left: 16px;
  z-index: 20;
  pointer-events: none;
}

.keyboard-hints {
  display: flex;
  gap: 10px;
  font-size: 11px;
  color: var(--text-subtle);
  background: rgba(24, 25, 28, 0.7);
  backdrop-filter: blur(6px);
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-subtle);
}

kbd {
  background: var(--bg-card);
  border: 1px solid var(--border-main);
  padding: 1px 4px;
  border-radius: 3px;
  color: var(--text-main);
  font-size: 10px;
}

/* ==========================================================================
   RIGHT SIDEBAR (INSPECTOR, IMPULSES, NOTES)
   ========================================================================== */
.empty-inspector-state {
  text-align: center;
  padding: 40px 16px;
  color: var(--text-muted);
}

.empty-icon {
  font-size: 36px;
  margin-bottom: 12px;
}

.empty-inspector-state h4 {
  color: #fff;
  font-size: 14px;
  margin-bottom: 6px;
}

.empty-inspector-state p {
  font-size: 12px;
  line-height: 1.4;
}

.inspector-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.inspector-fig-preview {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-sm);
}

.inspector-fig-title {
  flex: 1;
}

.fig-type-badge {
  font-size: 10px;
  color: var(--primary);
  font-weight: 600;
  text-transform: uppercase;
  margin-top: 2px;
  display: block;
}

.inspector-card {
  background: var(--bg-card);
  border: 0.5px solid var(--border-subtle);
 /* border-radius: var(--radius-md);*/
  padding: 12px;
  margin-bottom: 12px;
}

.inspector-card.highlight-card {
  border-color: rgba(59, 130, 246, 0.4);
  background: linear-gradient(180deg, rgba(59, 130, 246, 0.08) 0%, var(--bg-card) 100%);
}

.card-title-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.card-title {
  font-size: 12px;
  font-weight: 700;
  color: #000;
}

.card-desc {
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.3;
  margin-bottom: 8px;
}

.badge-angle, .badge-scale, .badge-systemic {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 10px;
}

.badge-angle {
  background: rgba(194, 149, 93, 0.2);
  color: var(--primary);
}

.badge-scale {
  background: rgba(16, 185, 129, 0.2);
  color: var(--accent-green);
}

.badge-systemic {
  background: rgba(59, 130, 246, 0.2);
  color: var(--accent-blue);
}

/* ROTATION DIAL COMPASS */
.rotation-dial-container {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 8px;
}

.rotation-dial {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: var(--bg-app);
  border: 2px solid var(--border-main);
  position: relative;
  cursor: pointer;
  box-shadow: inset 0 2px 6px rgba(0,0,0,0.4);
}

.dial-needle {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 2px;
  height: 28px;
  background: linear-gradient(to top, transparent 50%, var(--accent-red) 50%);
  transform-origin: bottom center;
  transform: translate(-50%, -100%) rotate(0deg);
  transition: transform 0.05s linear;
}

.dial-marker {
  position: absolute;
  top: 6px;
  left: 50%;
  width: 6px;
  height: 6px;
  background: var(--primary);
  border-radius: 50%;
  transform: translateX(-50%);
}

.dial-compass-points span {
  position: absolute;
  font-size: 8px;
  font-weight: 700;
  color: var(--text-subtle);
}

.dial-compass-points .cp.n { top: 2px; left: 50%; transform: translateX(-50%); color: var(--accent-red); }
.dial-compass-points .cp.o { right: 3px; top: 50%; transform: translateY(-50%); }
.dial-compass-points .cp.s { bottom: 2px; left: 50%; transform: translateX(-50%); }
.dial-compass-points .cp.w { left: 3px; top: 50%; transform: translateY(-50%); }

.quick-turn-buttons {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.target-look-row {
  border-top: 1px solid var(--border-subtle);
  padding-top: 8px;
}

/* POV SUMMARY */
.pov-summary-box {
  background: var(--bg-app);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 8px;
  font-size: 11px;
}

.pov-field {
  display: flex;
  justify-content: space-between;
  margin-bottom: 4px;
}

.pov-field:last-child {
  margin-bottom: 0;
}

.pov-field .label {
  color: var(--text-muted);
}

.pov-field .val {
  color: #000;
  font-weight: 600;
}

/* SCALE */
.scale-labels {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  color: var(--text-subtle);
  margin-top: 4px;
}

.inspector-actions {
  display: flex;
  gap: 8px;
  margin-top: 14px;
}

.inspector-actions button {
  flex: 1;
}

/* SYSTEMIC COACH CARD */
.coach-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  padding: 12px;
}

.coach-card-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  font-weight: 700;
  color: #000;
  margin-bottom: 10px;
}

.pulse-indicator {
  width: 8px;
  height: 8px;
  background: var(--accent-green);
  border-radius: 50%;
  display: inline-block;
  margin-right: 6px;
  box-shadow: 0 0 6px var(--accent-green);
  animation: pulse 2s infinite;
}

.observations-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.obs-item {
  font-size: 11px;
  line-height: 1.4;
  padding: 6px 8px;
  background: var(--bg-app);
  border-left: 3px solid var(--primary);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  color: var(--text-main);
}

.obs-item.warning {
  border-left-color: var(--accent-amber);
}

.obs-item.solution {
  border-left-color: var(--accent-green);
}

.question-box {
/*  background: linear-gradient(135deg, rgba(194, 149, 93, 0.15) 0%, rgba(34, 36, 42, 0.6) 100%);*/
  border: 1px solid rgba(194, 149, 93, 0.35);
  border-radius: var(--radius-sm);
  padding: 12px;
  margin: 8px 0;
}

.question-category {
  font-size: 10px;
  font-weight: 700;
  color: var(--primary);
  text-transform: uppercase;
  margin-bottom: 4px;
}

.question-text {
  font-size: 12px;
  font-style: italic;
  line-height: 1.45;
  color: #000;
}

.question-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 8px;
}

.tag-filter {
  background: var(--bg-app);
  border: 1px solid var(--border-subtle);
  color: var(--text-muted);
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 4px;
  cursor: pointer;
}

.tag-filter:hover {
  color: #fff;
}

.tag-filter.active {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}

.intervention-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.intervention-list li {
  font-size: 11px;
  line-height: 1.4;
  color: var(--text-muted);
}

.intervention-list strong {
  color: var(--primary);
}

/* ==========================================================================
   TIMELINE / PHASEN-MANAGER
   ========================================================================== */
.app-timeline {
  height: 54px;
  background: var(--bg-sidebar);
  border-top: 1px solid var(--border-main);
  display: flex;
  align-items: center;
  padding: 0 16px;
  gap: 16px;
  z-index: 40;
}

.timeline-left {
  display: flex;
  align-items: center;
}

.timeline-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
  white-space: nowrap;
}

.timeline-phases {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  overflow-x: auto;
  padding: 4px 0;
}

.phase-pill {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  color: var(--text-muted);
  padding: 5px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  transition: all 0.15s;
}

.phase-pill:hover {
  background: var(--bg-card-hover);
  color: var(--text-main);
  border-color: var(--border-main);
}

.phase-pill.active {
  background: linear-gradient(135deg, rgba(194, 149, 93, 0.25) 0%, rgba(140, 101, 54, 0.4) 100%);
  color: #fff;
  border-color: var(--primary);
  box-shadow: 0 2px 6px rgba(194, 149, 93, 0.2);
}

.phase-pill-remove {
  font-size: 14px;
  color: var(--text-subtle);
  cursor: pointer;
  margin-left: 2px;
}

.phase-pill-remove:hover {
  color: var(--accent-red);
}

.timeline-actions {
  display: flex;
  gap: 8px;
}

/* ==========================================================================
   MODAL DIALOGS
   ========================================================================== */
.modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0,0,0,0.7);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  animation: fadeIn 0.2s ease-out;
}

.modal-card {
  background: var(--bg-sidebar);
  border: 1px solid var(--border-main);
  border-radius: var(--radius-lg);
  width: 90%;
  max-width: 580px;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

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

.modal-header h3 {
  font-size: 16px;
  font-weight: 700;
  color: #000;
}

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

.modal-close:hover {
  color: #fff;
}

.modal-body {
  padding: 20px;
}

.modal-footer {
  padding: 12px 20px;
  border-top: 1px solid var(--border-main);
  display: flex;
  justify-content: flex-end;
  background: var(--bg-app);
}

.export-options-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.export-option-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  padding: 16px;
  cursor: pointer;
  transition: all 0.15s;
  text-align: center;
}

.export-option-card:hover {
  background: var(--bg-card-hover);
  border-color: var(--primary);
  transform: translateY(-2px);
}

.export-icon {
  font-size: 28px;
  margin-bottom: 8px;
}

.export-option-card h4 {
  font-size: 13px;
  font-weight: 700;
  color: #000;
  margin-bottom: 4px;
}

.export-option-card p {
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.3;
}

/* ==========================================================================
   PRINT / PDF PROTOCOL VIEW
   ========================================================================== */
.print-only {
  display: none;
}

@media print {
  body {
    background: #fff !important;
    color: #111 !important;
    overflow: visible !important;
    height: auto !important;
  }

  .app-header, .workspace-body, .app-timeline, .modal-backdrop {
    display: none !important;
  }

  .print-only {
    display: block !important;
    padding: 20px;
  }

  .print-header {
    border-bottom: 2px solid #333;
    padding-bottom: 10px;
    margin-bottom: 20px;
  }

  .print-header h1 {
    font-size: 22px;
    color: #111;
  }

  .print-meta {
    font-size: 12px;
    color: #666;
    margin-top: 4px;
  }

  .print-section {
    margin-bottom: 24px;
    page-break-inside: avoid;
  }

  .print-section h2 {
    font-size: 15px;
    border-bottom: 1px solid #ccc;
    padding-bottom: 4px;
    margin-bottom: 10px;
  }

  .print-image-box {
    border: 1px solid #ddd;
    border-radius: 4px;
    text-align: center;
    padding: 10px;
    max-height: 400px;
  }

  .print-image-box img {
    max-width: 100%;
    max-height: 380px;
    object-fit: contain;
  }

  .print-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
  }

  .print-table th, .print-table td {
    border: 1px solid #ddd;
    padding: 6px 10px;
    text-align: left;
  }

  .print-table th {
    background: #f5f5f5;
  }

  .print-notes-block {
    font-size: 12px;
    line-height: 1.6;
    white-space: pre-wrap;
    background: #fafafa;
    border: 1px solid #eee;
    padding: 12px;
    border-radius: 4px;
  }
}

/* ==========================================================================
   ANIMATIONS & HELPERS
   ========================================================================== */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.9); }
}

.flex { display: flex; }
.flex-1 { flex: 1; }
.gap-1 { gap: 4px; }
.mt-2 { margin-top: 8px; }
.mt-3 { margin-top: 12px; }
.mt-4 { margin-top: 16px; }

/* ==========================================================================
   FOKUS-MODUS (FULLSCREEN, MINIMAL, BRETT & NOTIZEN)
   ========================================================================== */
#btnExitFocus {
  display: none;
  background: #2563eb;
  color: #000;
  border: 1px solid #3b82f6;
  font-weight: 600;
  box-shadow: 0 0 10px rgba(37, 99, 235, 0.4);
}

#btnExitFocus:hover {
  background: #1d4ed8;
}

body.focus-mode #btnExitFocus {
  display: inline-flex !important;
}

body.focus-mode #btnEnterFocus {
  display: none !important;
}

body.focus-mode .sidebar-left {
  display: none !important;
}

body.focus-mode .app-timeline {
  display: none !important;
}

body.focus-mode .app-header #btnExportMenu,
body.focus-mode .app-header #btnSaveSession {
  display: none !important;
}

body.focus-mode .sidebar-right:not(.collapsed) {
  width: 420px !important;
  max-width: 440px;
  border-left: 2px solid var(--border-main);
  background: var(--bg-sidebar);
  box-shadow: -6px 0 24px rgba(0, 0, 0, 0.45);
}

body.focus-mode .sidebar-right .sidebar-tabs {
  display: none !important;
}

body.focus-mode #tab-notes {
  display: block !important;
  padding: 24px 20px;
  height: 100%;
  overflow-y: auto;
}

body.focus-mode #tab-impulses {
  display: none !important;
}

/* ==========================================================================
   RUBBERBAND BEZIEHUNGSLINIE & ANIMATION
   ========================================================================== */
.rubberband-line {
  stroke-dasharray: 8 6;
  animation: rubberbandFlow 0.6s linear infinite;
  pointer-events: none;
}

@keyframes rubberbandFlow {
  from { stroke-dashoffset: 28; }
  to { stroke-dashoffset: 0; }
}

.relation-target-candidate .fig-body {
  stroke: #10b981 !important;
  stroke-width: 4px !important;
  filter: drop-shadow(0 0 12px rgba(16, 185, 129, 0.9)) !important;
  animation: targetCandidatePulse 0.8s ease-in-out infinite alternate;
}

@keyframes targetCandidatePulse {
  0% { transform: scale(1); }
  100% { transform: scale(1.08); }
}

/* ==========================================================================
   DRAG & DROP FIGUREN-PALETTE
   ========================================================================== */
.quick-figure-btn,
.symbol-card {
  cursor: grab;
  user-select: none;
  -webkit-user-drag: element;
}

.quick-figure-btn:active,
.symbol-card:active {
  cursor: grabbing;
}

.board-viewport.drag-over {
  box-shadow: inset 0 0 0 3px #3b82f6, inset 0 0 40px rgba(59, 130, 246, 0.25) !important;
}

/* ==========================================================================
   PERSPEKTIVEN-MODUS (POV & SUBJEKTIVE SICHT)
   ========================================================================== */
.pov-banner {
  background: linear-gradient(135deg, rgba(30, 41, 59, 0.96), rgba(15, 23, 42, 0.98));
  border: 1px solid #3b82f6;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5), 0 0 15px rgba(59, 130, 246, 0.35);
  border-radius: 9999px;
  padding: 8px 20px;
  color: #f1f5f9;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 12px;
  animation: fadeInDown 0.3s ease-out;
}

.pov-badge {
  background: #2563eb;
  color: white;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 3px 9px;
  border-radius: 9999px;
}

.figure-in-pov {
  filter: drop-shadow(0 0 10px rgba(59, 130, 246, 0.9)) !important;
}

.figure-in-sight {
  filter: drop-shadow(0 0 9px rgba(245, 158, 11, 0.9)) !important;
  animation: sightPulse 1.8s ease-in-out infinite alternate;
}

@keyframes sightPulse {
  0% { filter: drop-shadow(0 0 5px rgba(245, 158, 11, 0.6)); }
  100% { filter: drop-shadow(0 0 12px rgba(245, 158, 11, 1)); }
}

.figure-in-blindspot {
  opacity: 0.42 !important;
  filter: grayscale(60%) !important;
  transition: opacity 0.3s, filter 0.3s;
}


/* ==========================================================================
   FOKUS-MODUS: ZUSATZ
   ========================================================================== */
body.focus-mode .stage-footer-bar {
  display: none !important;
}

body.focus-mode .app-header .brand-subtitle,
body.focus-mode .app-header #btnSoundToggle {
  display: none !important;
}

body.focus-mode #tab-notes .pane-header h3::before {
  content: "📝 ";
}

/* ==========================================================================
   BEZIEHUNG WÄHLEN: START-FIGUR
   ========================================================================== */
.system-figure.relation-source .fig-body {
  stroke: #f59e0b !important;
  stroke-width: 4px !important;
  filter: drop-shadow(0 0 10px rgba(245, 158, 11, 0.95)) !important;
}

.rubberband-dot {
  animation: rubberbandDot 0.9s ease-in-out infinite alternate;
}

@keyframes rubberbandDot {
  from { opacity: 0.55; }
  to { opacity: 1; }
}

/* ==========================================================================
   PERSPEKTIVEN-MODUS: EGO-VIEW (SICHT AUS DEN AUGEN DER FIGUR)
   ========================================================================== */
.ego-view {
  position: absolute;
  left: 50%;
  bottom: 46px;
  transform: translateX(-50%);
  width: min(680px, calc(100% - 32px));
  z-index: 40;
  background: rgba(15, 23, 42, 0.92);
  backdrop-filter: blur(8px);
  border: 1px solid #3b82f6;
  border-radius: 14px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.55), 0 0 16px rgba(59, 130, 246, 0.3);
  padding: 8px 12px 6px;
  animation: fadeIn 0.3s ease-out;
  pointer-events: none;
}

.ego-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 11px;
  color: #cbd5e1;
  margin-bottom: 4px;
}

.ego-title strong {
  color: #fff;
}

.ego-summary {
  color: #94a3b8;
  text-align: right;
}

.ego-view svg {
  width: 100%;
  height: auto;
  max-height: 170px;
  display: block;
  border-radius: 8px;
}

.ego-label {
  font-family: var(--font-family);
  font-size: 11px;
  font-weight: 600;
  fill: #f1f5f9;
  text-anchor: middle;
  paint-order: stroke;
  stroke: rgba(0, 0, 0, 0.7);
  stroke-width: 3px;
}

.figure-in-periphery {
  opacity: 0.82;
}

/* Beziehungswahl: Fadenkreuz-Cursor */
body.relation-mode .board-viewport,
body.relation-mode .system-figure {
  cursor: crosshair;
}

/* ==========================================================================
   KOPFZEILE: PASST SICH SCHMALEREN FENSTERN AN (nichts läuft mehr über)
   ========================================================================== */
.brand-title { white-space: nowrap; }
.header-left { min-width: 0; flex-shrink: 1; }
.header-center, .header-right { flex-shrink: 0; }

@media (max-width: 1750px) {
  .brand-subtitle, .session-meta { display: none; }
  .session-title-input { width: 150px; }
  .header-center { gap: 8px; }
  .header-center .btn, .header-right .btn { padding-left: 8px; padding-right: 8px; }
}

@media (max-width: 1560px) {
  .brand-title { display: none; }
  .session-title-wrapper { border-left: none; padding-left: 0; }
  .session-title-input { width: 120px; }
  .header-center .btn svg { display: none; }
}

@media (max-width: 1320px) {
  .session-title-wrapper { display: none; }
}

/* ==========================================================================
   SEITENLEISTEN: EINKLAPPBAR, LINKS AKKORDEON, INSPEKTOR ALS ÜBERLAGERUNG
   ========================================================================== */
.sidebar-left { position: relative; }
.sidebar-right { position: relative; }

.sidebar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px 8px 16px;
  background: var(--bg-app);
  border-bottom: 1px solid var(--border-main);
  flex-shrink: 0;
}

.sidebar-right .sidebar-head {
  justify-content: flex-start;
  padding: 8px 16px 8px 10px;
}

.sidebar-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.sidebar-collapse-btn {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--border-main);
  border-radius: 8px;
  color: var(--text-main);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
}

.sidebar-collapse-btn:hover,
.sidebar-rail-btn:hover {
  background: var(--bg-sidebar);
  color: var(--primary);
}

/* Schmale Leiste im eingeklappten Zustand */
.sidebar-rail-btn {
  display: none;
  background: var(--bg-sidebar);
  border: none;
  color: var(--text-main);
  cursor: pointer;
}

.sidebar-left.collapsed,
.sidebar-right.collapsed {
  width: 44px;
}

.sidebar-left.collapsed > *:not(.sidebar-rail-btn),
.sidebar-right.collapsed > *:not(.sidebar-rail-btn) {
  display: none !important;
}

.sidebar-left.collapsed .sidebar-rail-btn,
.sidebar-right.collapsed .sidebar-rail-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  width: 100%;
  height: 100%;
  padding: 14px 0;
}

.rail-icon {
  font-size: 18px;
  line-height: 1;
}

.rail-label {
  writing-mode: vertical-rl;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* Akkordeon (linke Leiste) */
.sidebar-tab-content.accordion {
  padding: 0;
}

.acc-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 13px 16px;
  background: var(--bg-sidebar);
  border: none;
  border-bottom: 1px solid var(--border-main);
  font-size: 13px;
  font-weight: 700;
  color: var(--text-main);
  cursor: pointer;
  text-align: left;
}

.acc-header:hover {
  background: var(--bg-app);
}

.acc-header.open {
  color: var(--primary);
}

.acc-chevron {
  font-size: 12px;
  color: var(--text-muted);
  transition: transform 0.2s;
}

.acc-header.open .acc-chevron {
  transform: rotate(180deg);
}

.acc-body {
  display: none;
  padding: 14px 16px 18px;
  border-bottom: 1px solid var(--border-main);
}

.acc-body.open {
  display: block;
}

/* Titel steckt bereits in der Akkordeon-Kopfzeile */
.acc-body > .pane-header:first-child h3 {
  display: none;
}

/* Inspektor überlagert das linke Menü, solange eine Figur ausgewählt ist */
.inspector-overlay {
  position: absolute;
  inset: 0;
  z-index: 40;
  display: none;
  flex-direction: column;
  background: var(--bg-sidebar);
}

.sidebar-left.inspector-open .inspector-overlay {
  display: flex;
}

.inspector-overlay-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: var(--bg-app);
  border-bottom: 1px solid var(--border-main);
  flex-shrink: 0;
}

.inspector-overlay-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
}

/* Fokus-Modus: rechte Leiste immer offen, ohne Einklapp-Elemente */
body.focus-mode .sidebar-left .sidebar-head,
body.focus-mode .sidebar-left .sidebar-rail-btn {
  display: none !important;
}


.hint-3d { display: none; }
body.view-25d .hint-3d { display: inline; }

/* 3D: Eck-Griffe zum Drehen */
.board-transform-container.no-transition { transition: none !important; }
.view-handle { cursor: grab; }
.view-handle:hover circle { fill: #fff; stroke-width: 3; }
body.view-rotating, body.view-rotating .view-handle, body.view-rotating .board-viewport { cursor: grabbing; }

/* Brett-Typ-Auswahl: 2 x 2 Raster, nichts läuft mehr über die Seitenleiste hinaus */
.board-shape-group {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
}
.sidebar-tab-content { overflow-x: hidden; }

/* 3D-Navigation (Kompass, Drehen, Neigen) */
.nav3d {
  position: absolute;
  right: 16px;
  bottom: 56px;
  z-index: 35;
  display: none;
  align-items: center;
  gap: 4px;
  padding: 4px;
  background: rgba(250, 249, 246, 0.92);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
}
body.view-25d .nav3d { display: flex; }
.nav3d-btn {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 8px;
  font-size: 17px;
  color: var(--text-main);
  cursor: pointer;
}
.nav3d-btn:hover { background: rgba(194, 149, 93, 0.22); }
.nav3d-compass svg { transition: none; }
.nav3d-sep { width: 1px; height: 22px; background: var(--border-subtle); margin: 0 2px; }
body.view-rotating, body.view-rotating .board-viewport { cursor: grabbing; }

/* Paletten-Vorschau: gleiche 3D-Zeichnung wie auf dem Brett */
.color-figures-row { grid-template-columns: repeat(3, 1fr); }
.preview-slot, .symbol-icon { display: flex; align-items: center; justify-content: center; }
.palette-preview { width: 60px; height: 62px; display: block; overflow: visible; pointer-events: none; }
.quick-figure-btn .palette-preview { width: 56px; height: 58px; }

/* ==========================================================================
   FOKUS-MODUS: INSPEKTOR BEI AUSGEWÄHLTEM OBJEKT, OHNE PROTOKOLL
   ========================================================================== */
/* Das linke Menü bleibt im Fokus-Modus ausgeblendet – nur der Inspektor erscheint, solange ein Objekt ausgewählt ist */
body.focus-mode .sidebar-left.inspector-open {
  display: flex !important;
  width: 18rem !important;
}
body.focus-mode .sidebar-left.inspector-open > .sidebar-head,
body.focus-mode .sidebar-left.inspector-open > .sidebar-rail-btn,
body.focus-mode .sidebar-left.inspector-open > .sidebar-tab-content {
  display: none !important;
}
body.focus-mode .sidebar-left.inspector-open > .inspector-overlay {
  display: flex !important;
}

/* Beschriftung des Schließen-Buttons: im Fokus-Modus gibt es kein Werkzeug-Menü zum Zurückkehren */
.lbl-focus { display: none; }
body.focus-mode .lbl-focus { display: inline; }
body.focus-mode .lbl-normal { display: none; }

/* Das Protokoll (Titel und Druck-/PDF-Button) ist im Fokus-Modus ausgeblendet, die Notizfelder bleiben */
body.focus-mode #btnExportProtocol,
body.focus-mode #tab-notes > .pane-header:first-child {
  display: none !important;
}

/* Fokus-Modus: Overlay-Schalter ausgeblendet, 2D/3D-Umschalter bleibt */
body.focus-mode .header-center .overlays {
  display: none !important;
}

/* Fokus-Modus: Der Inspektor liegt über der Bühne statt sie zu verschmälern – das Brett springt nicht */
body.focus-mode .sidebar-left.inspector-open {
  position: absolute !important;
  left: 0;
  top: 0;
  bottom: 0;
  z-index: 70;
  box-shadow: 6px 0 24px rgba(0, 0, 0, 0.18);
}

/* ==========================================================================
   MOBIL: TOUCH, TABLET (≤ 900 px) UND HANDY (≤ 600 px)
   Die Breakpoints entsprechen denen der einbindenden Seite.
   ========================================================================== */
html, body { overscroll-behavior: none; }
body {
  height: 100vh;
  height: 100dvh;
  width: 100%;
  -webkit-tap-highlight-color: transparent;
}
.app-layout {
  height: 100vh;
  height: 100dvh;
  width: 100%;
}
.board-viewport,
.board-viewport svg {
  touch-action: none;                 /* Wischen und Pinch gehören dem Brett, nicht dem Browser */
  -webkit-touch-callout: none;
}
input, textarea, select, [contenteditable] {
  user-select: text;
  -webkit-user-select: text;
}
.inspector-overlay-body, .sidebar-tab-content, .timeline-phases {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.drawer-scrim { display: none; }

/* Schwebendes Bild beim Ziehen aus der Palette (Touch) */
.palette-ghost {
  position: fixed;
  left: 0;
  top: 0;
  width: 72px;
  height: 72px;
  z-index: 3000;
  pointer-events: none;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.35));
  opacity: 0.95;
}
.palette-ghost svg { width: 100%; height: 100%; overflow: visible; }
body.palette-dragging .sidebar-left,
body.palette-dragging .sidebar-right,
body.palette-dragging .drawer-scrim {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s;
}

/* ---- Touch-Geräte: größere Bedienflächen ---- */
@media (pointer: coarse) {
  .stage-footer-bar { display: none; }            /* Tastaturhinweise sind ohne Tastatur sinnlos */
  .btn-sm { min-height: 38px; }
  .btn-icon { min-width: 38px; min-height: 38px; }
  .acc-header { min-height: 50px; }
  .tab-btn { min-height: 44px; padding: 10px 14px; }
  .phase-pill { min-height: 36px; }
  .sidebar-collapse-btn { width: 40px; height: 40px; }
  .nav3d-btn { width: 42px; height: 42px; }
  .symbol-card, .quick-figure-btn { min-height: 92px; }
  input, textarea, select { font-size: 16px; }      /* verhindert das automatische Hineinzoomen auf iOS */
  input[type="range"] { height: 30px; }
  .zoom-controls .btn { min-width: 38px; min-height: 38px; }
}

/* ==========================================================================
   TABLET und kleiner (≤ 900 px): Seitenleisten werden Schubladen über dem Brett
   ========================================================================== */
@media (max-width: 900px) {
  .stage-footer-bar { display: none; }

  .sidebar-left,
  .sidebar-right {
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 60;
    box-shadow: 0 0 32px rgba(0, 0, 0, 0.28);
  }
  .sidebar-left { left: 0; width: min(330px, 88vw); }
  .sidebar-right { right: 0; width: min(370px, 90vw); }

  /* Eingeklappt: keine Breite, nur ein schwebender Knopf am Rand */
  .sidebar-left.collapsed,
  .sidebar-right.collapsed {
    width: 0;
    border: none;
    box-shadow: none;
    overflow: visible;
  }
  .sidebar-left.collapsed .sidebar-rail-btn,
  .sidebar-right.collapsed .sidebar-rail-btn {
    position: absolute;
    top: 10px;
    width: auto;
    height: 42px;
    flex-direction: row;
    gap: 8px;
    padding: 0 16px;
    border: 1px solid var(--border-main);
    border-radius: 21px;
    background: var(--bg-sidebar);
    box-shadow: var(--shadow-md);
    z-index: 61;
  }
  .sidebar-left.collapsed .sidebar-rail-btn { left: 10px; }
  .sidebar-right.collapsed .sidebar-rail-btn { right: 10px; }
  .rail-label { writing-mode: horizontal-tb; white-space: nowrap; }

  /* Ist eine Schublade offen, verschwinden die schwebenden Knöpfe der anderen */
  body.drawer-open .sidebar-left.collapsed .sidebar-rail-btn,
  body.drawer-open .sidebar-right.collapsed .sidebar-rail-btn { display: none; }

  /* Abdunklung hinter geöffneten Schubladen; Tippen daneben schließt sie */
  body.drawer-open .drawer-scrim {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 55;
    background: rgba(20, 14, 6, 0.38);
  }

  /* Inspektor: seitliches Feld über dem Brett, auch bei eingeklappter Schublade */
  .sidebar-left.inspector-open {
    display: flex !important;
    position: absolute !important;
    left: 0;
    top: 0;
    bottom: 0;
    width: min(340px, 88vw) !important;
    overflow: hidden !important;
    z-index: 70;
  }
  .sidebar-left.inspector-open > .sidebar-head,
  .sidebar-left.inspector-open > .sidebar-rail-btn,
  .sidebar-left.inspector-open > .sidebar-tab-content { display: none !important; }
  .sidebar-left.inspector-open > .inspector-overlay { display: flex !important; }

  /* Kopfzeile kompakt */
  .app-header { height: 54px; padding: 0 10px; gap: 8px; }
  .brand-title, .brand-subtitle, .session-meta { display: none; }
  .app-header .session-title-wrapper { display: block; border: none; padding: 0; margin: 0; }
  .session-title-input { width: 130px; font-size: 14px; }
  .header-left { gap: 8px; }
  .header-center { gap: 6px; }
  .header-right { gap: 6px; }

  /* Schalter nur als Symbole */
  .header-center .overlays .btn { font-size: 0; gap: 0; padding: 6px 11px; min-width: 40px; justify-content: center; }
  .header-center .overlays .btn svg { display: block; width: 18px; height: 18px; }
  #btnExportMenu, #btnSaveSession, #btnEnterFocus {
    font-size: 0;
    gap: 0;
    min-width: 40px;
    padding: 6px 10px;
    justify-content: center;
  }
  #btnExportMenu svg, #btnSaveSession svg { display: block; width: 18px; height: 18px; }
  #btnEnterFocus span { font-size: 17px; }
  body.focus-mode #btnExitFocus { font-size: 13px; }

  /* Zeitleiste kompakt */
  .app-timeline { padding: 0 10px; gap: 8px; }
  .timeline-label { display: none; }

  /* Hinweise und Banner unter den schwebenden Knöpfen */
  .stage-overlay-top { top: 62px; max-width: calc(100% - 24px); }
  .nav3d { bottom: 14px; right: 10px; }
  .ego-view { bottom: 14px; }
}

/* ==========================================================================
   HANDY (≤ 600 px)
   ========================================================================== */
@media (max-width: 600px) {
  /* Kopfzeile in zwei Reihen: oben Titel und Aktionen, darunter Ansicht-Schalter */
  .app-header {
    height: auto;
    flex-wrap: wrap;
    padding: 6px 10px;
    row-gap: 6px;
  }
  .header-left { order: 1; flex: 1; min-width: 0; }
  .header-right { order: 2; }
  .header-center { order: 3; width: 100%; justify-content: center; }
  .brand > div:not(.brand-icon) { display: none; }
  .session-title-input { width: 100%; max-width: 46vw; }
  #btnSoundToggle { display: none; }
  .zoom-controls #btnZoomIn,
  .zoom-controls #btnZoomOut,
  .zoom-controls #zoomLevel { display: none; }      /* gezoomt wird mit zwei Fingern */

  /* Zeitleiste: nur Symbole für die Aktionen */
  .app-timeline { height: 50px; padding-bottom: env(safe-area-inset-bottom, 0px); }
  #btnAddPhase, #btnPlayPhases { font-size: 0; gap: 0; min-width: 40px; padding: 0; justify-content: center; }
  #btnAddPhase::before { content: "+"; font-size: 20px; line-height: 1; }
  #btnPlayPhases::before { content: "▶"; font-size: 14px; }

  /* Schubladen: fast volle Breite; Inspektor als untere Schublade */
  .sidebar-left { width: min(360px, 92vw); }
  .sidebar-right { width: min(380px, 94vw); }
  .sidebar-left.inspector-open {
    top: auto !important;
    left: 0;
    right: 0;
    bottom: 0;
    width: auto !important;
    height: min(58%, 470px);
    border-radius: 18px 18px 0 0;
    border-top: 1px solid var(--border-main);
    box-shadow: 0 -10px 34px rgba(0, 0, 0, 0.3);
  }

  .stage-overlay-top { top: 64px; }
  .ego-view { bottom: 10px; width: calc(100% - 16px); }
  .ego-head { flex-direction: column; gap: 2px; }
  .ego-summary { text-align: left; }
  .nav3d { gap: 2px; padding: 3px; }
  .nav3d-btn { width: 38px; height: 38px; }

  /* Dialoge */
  .modal-card { width: 94%; max-height: 90vh; max-height: 90dvh; overflow-y: auto; }
  .export-options-grid { grid-template-columns: 1fr; }
}

/* Querformat auf dem Handy: wenig Höhe -> alles in eine schmale Kopfzeile */
@media (max-height: 520px) and (max-width: 900px) {
  .app-header { height: 46px; flex-wrap: nowrap; padding: 0 8px; row-gap: 0; }
  .header-center { order: 0; width: auto; }
  .header-left { flex: 0 1 auto; }
  .session-title-input { width: 110px; }
  .app-timeline { height: 42px; }
  .stage-overlay-top { top: 54px; }
  .ego-view { display: none !important; }
}

/* Schwebendes Banner bei der Beziehungswahl (nur mit geschlossenem Menü, Handy/Tablet) */
.relation-floating {
  position: absolute;
  top: 62px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 52;
  display: none;
  align-items: center;
  gap: 10px;
  padding: 8px 8px 8px 14px;
  max-width: calc(100% - 24px);
  background: rgba(34, 24, 12, 0.94);
  color: #fff;
  border-radius: 22px;
  font-size: 13px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
}
.relation-floating .btn { background: #fff; color: #222; min-height: 32px; }
@media (max-width: 600px) { .relation-floating { top: 66px; } }

.nav3d-toggle { width: auto; padding: 0 12px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.nav3d-toggle.active { background: var(--primary); color: #2b1d0c; }