/* Whiteboard-Engine 1.0 – Oberfläche. Farben über Variablen anpassbar (--wb-accent usw.). */
.wb-root {
  --wb-accent: #2563eb; --wb-bar: rgba(255,255,255,.96); --wb-fg: #111827; --wb-muted: #6b7280;
  --wb-line: rgba(15,23,42,.12); --wb-on: rgba(37,99,235,.14); --wb-shadow: 0 4px 18px rgba(15,23,42,.16);
  position: relative; overflow: hidden; background: #fff; touch-action: none; user-select: none;
  -webkit-user-select: none; -webkit-touch-callout: none; outline: none; width: 100%; height: 100%; min-height: 320px;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
@media (prefers-color-scheme: dark) {
  .wb-root:not([data-theme="light"]) { --wb-bar: rgba(30,41,59,.96); --wb-fg: #e5e7eb; --wb-muted: #9ca3af; --wb-line: rgba(255,255,255,.14); --wb-on: rgba(96,165,250,.22); --wb-accent: #60a5fa; }
}
.wb-root[data-theme="dark"] { --wb-bar: rgba(30,41,59,.96); --wb-fg: #e5e7eb; --wb-muted: #9ca3af; --wb-line: rgba(255,255,255,.14); --wb-on: rgba(96,165,250,.22); --wb-accent: #60a5fa; }
.wb-canvas { position: absolute; inset: 0; display: block; touch-action: none; cursor: crosshair; }
.wb-root[data-tool="pan"] .wb-canvas, .wb-root.wb-space .wb-canvas { cursor: grab; }
.wb-root.wb-panning .wb-canvas { cursor: grabbing; }
.wb-root[data-tool="select"] .wb-canvas { cursor: default; }
.wb-root[data-tool="text"] .wb-canvas { cursor: text; }
.wb-root[data-tool="eraser"] .wb-canvas { cursor: none; }

.wb-toolbar, .wb-subbar, .wb-zoombar, .wb-selbar {
  position: absolute; display: flex; align-items: center; gap: 2px; padding: 4px; background: var(--wb-bar);
  color: var(--wb-fg); border: 1px solid var(--wb-line); border-radius: 12px; box-shadow: var(--wb-shadow); z-index: 3;
  max-width: calc(100% - 16px); overflow-x: auto; scrollbar-width: none;
}
.wb-toolbar::-webkit-scrollbar, .wb-subbar::-webkit-scrollbar { display: none; }
.wb-toolbar { left: 50%; transform: translateX(-50%); bottom: calc(10px + env(safe-area-inset-bottom, 0px)); }
.wb-subbar { left: 50%; transform: translateX(-50%); bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }
.wb-zoombar { right: 10px; top: 10px; }
.wb-selbar { z-index: 4; }
.wb-root.wb-ro .wb-hist { display: none; }
.wb-toolbar[hidden], .wb-subbar[hidden], .wb-selbar[hidden], .wb-readonly[hidden] { display: none; }
.wb-btn, .wb-pct, .wb-swatch, .wb-width, .wb-size {
  flex: 0 0 auto; border: 0; background: transparent; color: inherit; border-radius: 9px; cursor: pointer;
  min-width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; padding: 0 6px;
  font: inherit; touch-action: manipulation;
}
.wb-btn:hover, .wb-pct:hover, .wb-width:hover, .wb-size:hover { background: var(--wb-on); }
.wb-btn.wb-on, .wb-width.wb-on, .wb-size.wb-on { background: var(--wb-on); color: var(--wb-accent); }
.wb-btn:disabled { opacity: .35; cursor: default; background: transparent; }
.wb-btn:focus-visible, .wb-pct:focus-visible, .wb-swatch:focus-visible { outline: 2px solid var(--wb-accent); outline-offset: 1px; }
.wb-pct { font-size: 13px; font-variant-numeric: tabular-nums; min-width: 58px; }
.wb-swatch { min-width: 26px; width: 26px; height: 26px; padding: 0; margin: 0 3px; border-radius: 50%; border: 2px solid var(--wb-line); }
.wb-swatch.wb-on { box-shadow: 0 0 0 2px var(--wb-bar), 0 0 0 4px var(--wb-accent); }
.wb-width span { display: block; border-radius: 50%; background: currentColor; }
.wb-size { min-width: 34px; font-weight: 600; }
.wb-sep { flex: 0 0 auto; width: 1px; height: 24px; margin: 0 4px; background: var(--wb-line); }
.wb-readonly { position: absolute; left: 10px; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); z-index: 3; padding: 6px 10px; border-radius: 999px; font-size: 13px;
  background: var(--wb-bar); color: var(--wb-muted); border: 1px solid var(--wb-line); }
.wb-textedit {
  position: absolute; z-index: 5; margin: 0; padding: 0; border: 1px dashed var(--wb-accent); background: rgba(255,255,255,.7);
  resize: none; overflow: hidden; outline: none; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  box-sizing: border-box; white-space: pre-wrap; user-select: text; -webkit-user-select: text; touch-action: auto;
}
.wb-noteedit { border-style: solid; box-shadow: 3px 4px 0 rgba(0,0,0,.12); overflow: auto; }
@media (max-width: 560px) {
  .wb-btn, .wb-pct, .wb-width, .wb-size { min-width: 38px; height: 38px; }
  .wb-zoombar { right: 6px; top: 6px; }
  .wb-pct { min-width: 50px; }
  .wb-subbar { bottom: calc(62px + env(safe-area-inset-bottom, 0px)); }
}
@media print { .wb-toolbar, .wb-subbar, .wb-zoombar, .wb-selbar { display: none; } }

/* ---- Listen- und Editor-Oberfläche (whiteboard-app.js) ---- */
.wba { --wba-accent: #2563eb; --wba-bg: #fff; --wba-fg: #111827; --wba-muted: #6b7280; --wba-line: #e5e7eb; --wba-card: #fff; --wba-danger: #b91c1c;
  font-family: inherit; color: var(--wba-fg); display: flex; flex-direction: column; height: 100%; min-height: 0; }
@media (prefers-color-scheme: dark) {
  .wba:not([data-theme="light"]) { --wba-bg: #0f172a; --wba-fg: #e5e7eb; --wba-muted: #9ca3af; --wba-line: #334155; --wba-card: #1e293b; --wba-accent: #60a5fa; }
}
.wba[data-theme="dark"] { --wba-bg: #0f172a; --wba-fg: #e5e7eb; --wba-muted: #9ca3af; --wba-line: #334155; --wba-card: #1e293b; --wba-accent: #60a5fa; }
.wba-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 0; }
.wba-head h1, .wba-head h2 { margin: 0; font-size: 1.25rem; flex: 1 1 120px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wba-btn { border: 1px solid var(--wba-line); background: var(--wba-card); color: var(--wba-fg); border-radius: 8px; padding: 8px 12px;
  font: inherit; cursor: pointer; min-height: 38px; }
.wba-btn:hover { border-color: var(--wba-accent); }
.wba-btn.wba-primary { background: var(--wba-accent); border-color: var(--wba-accent); color: #fff; }
.wba-btn.wba-danger { color: var(--wba-danger); }
.wba-btn:disabled { opacity: .5; cursor: default; }
.wba-toggle { display: inline-flex; align-items: center; gap: 6px; font-size: .9rem; color: var(--wba-muted); }
.wba-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; padding-bottom: 16px; }
.wba-card { border: 1px solid var(--wba-line); background: var(--wba-card); border-radius: 12px; padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.wba-card h3 { margin: 0; font-size: 1.05rem; overflow-wrap: anywhere; }
.wba-card .wba-open { all: unset; cursor: pointer; display: block; }
.wba-card .wba-open:focus-visible { outline: 2px solid var(--wba-accent); border-radius: 6px; }
.wba-meta { color: var(--wba-muted); font-size: .85rem; }
.wba-badge { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: .75rem; background: var(--wba-line); color: var(--wba-fg); margin-right: 4px; }
.wba-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; }
.wba-actions .wba-btn { padding: 6px 10px; min-height: 34px; font-size: .9rem; }
.wba-empty { color: var(--wba-muted); padding: 32px 0; text-align: center; }
.wba-status { font-size: .85rem; color: var(--wba-muted); white-space: nowrap; }
.wba-status.wba-warn { color: #b45309; }
.wba-editor { flex: 1 1 auto; min-height: 360px; border: 1px solid var(--wba-line); border-radius: 12px; overflow: hidden; position: relative; }
.wba-select { border: 1px solid var(--wba-line); background: var(--wba-card); color: var(--wba-fg); border-radius: 8px; padding: 7px 8px; font: inherit; min-height: 38px; }
.wba-menu { position: relative; }
.wba-menu-list { position: absolute; right: 0; top: calc(100% + 4px); z-index: 20; background: var(--wba-card); border: 1px solid var(--wba-line);
  border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.18); padding: 4px; min-width: 230px; max-height: 70vh; overflow: auto; display: flex; flex-direction: column; }
.wba-menu-list[hidden] { display: none; }
.wba-menu-list button { all: unset; padding: 9px 12px; border-radius: 7px; cursor: pointer; }
.wba-menu-label { padding: 8px 12px 2px; font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; color: var(--wba-muted); }
.wba-menu-list hr { border: 0; border-top: 1px solid var(--wba-line); margin: 4px 0; width: 100%; }
.wba-menu-list button:hover, .wba-menu-list button:focus-visible { background: var(--wba-line); }
.wba-dialog { border: 1px solid var(--wba-line); border-radius: 14px; padding: 0; background: var(--wba-card); color: var(--wba-fg); width: min(460px, calc(100vw - 32px)); }
.wba-dialog::backdrop { background: rgba(15,23,42,.45); }
.wba-dialog form { padding: 18px; display: flex; flex-direction: column; gap: 12px; }
.wba-dialog h2 { margin: 0; font-size: 1.15rem; }
.wba-dialog input[type="text"], .wba-dialog input[type="search"] { border: 1px solid var(--wba-line); border-radius: 8px; padding: 9px 10px; font: inherit; background: var(--wba-bg); color: var(--wba-fg); }
.wba-dialog .wba-row { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.wba-people { max-height: 46vh; overflow: auto; display: flex; flex-direction: column; gap: 2px; border: 1px solid var(--wba-line); border-radius: 8px; padding: 6px; }
.wba-people label { display: flex; gap: 8px; align-items: center; padding: 6px; border-radius: 6px; cursor: pointer; }
.wba-people label:hover { background: var(--wba-line); }
.wba-hint { color: var(--wba-muted); font-size: .85rem; margin: 0; }
.wba-error { color: var(--wba-danger); }
.wba-full .wba-editor { border-radius: 0; border: 0; }
.wba.wba-fs { position: fixed; inset: 0; z-index: 2000; background: var(--wba-bg); padding: 0 8px 8px; height: 100dvh; }
.wba.wba-fs .wba-editor { min-height: 0; }