*{box-sizing:border-box;margin:0;padding:0}
body{overflow:hidden;font-family:system-ui,-apple-system,sans-serif;user-select:none}

/* ─── Connection SVG Layer ───────────────────────────── */
#conn-svg{
  position:fixed;inset:0;pointer-events:none;z-index:5;
  width:100%;height:100%;overflow:visible}
.conn-line{
  fill:none;stroke-linecap:round;stroke-linejoin:round;
  cursor:pointer;pointer-events:stroke}
.conn-line:hover{filter:brightness(.7)}
.conn-from{
  box-shadow:0 0 0 3px #f59e0b,0 6px 24px rgba(245,158,11,.3)!important;
  border-color:transparent!important}
#conn-delete-popup{
  position:fixed;z-index:9999;background:#fff;border:1px solid #e2e8f0;
  border-radius:10px;box-shadow:0 4px 20px rgba(0,0,0,.12);padding:6px;
  display:none;align-items:center;gap:6px}
#conn-delete-popup.open{display:flex}
#conn-delete-popup button{
  background:#fee2e2;color:#dc2626;border:none;border-radius:7px;
  padding:5px 12px;font-size:13px;font-weight:600;cursor:pointer;white-space:nowrap}
#conn-delete-popup button:hover{background:#fecaca}
.connect-mode .widget{cursor:crosshair}
.connect-mode .widget:hover{
  box-shadow:0 0 0 2px #f59e0b,0 4px 16px rgba(245,158,11,.2)!important;
  border-color:transparent}

/* ─── Canvas ──────────────────────────────────────────── */
#canvas-wrap{position:fixed;inset:0;overflow:hidden;background:#f8fafc}
#canvas{
  position:absolute;inset:0;transition:background-color .3s;
  transform-origin:0 0;z-index:1}
/* canvas-grid entfernt – Raster als background-image direkt auf #canvas */
/* ─── Zeichen-Canvas ──────────────────────────────────── */
#draw-canvas{
  position:fixed;inset:0;z-index:60;display:none;
  cursor:crosshair;touch-action:none}
#draw-canvas.active{display:block}
body.draw-mode #canvas{pointer-events:none}
body.draw-mode .widget{pointer-events:none}
/* Zeichen-SVG (persistente Striche) */
#draw-svg{
  position:absolute;inset:0;pointer-events:none;z-index:0;
  width:100%;height:100%;overflow:visible}
/* ─── Floating Stift-Toolbar ─────────────────────────────── */
#pen-toolbar{
  position:fixed;bottom:90px;left:50%;transform:translateX(-50%);
  background:rgba(10,16,32,.97);backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,.14);border-radius:22px;
  padding:7px 14px;display:none;align-items:center;gap:6px;
  z-index:200;box-shadow:0 10px 40px rgba(0,0,0,.55);user-select:none}
#pen-toolbar.open{display:flex}
#pen-toolbar.dragged{bottom:auto;transform:none}
.pen-tb-handle{
  cursor:grab;color:#475569;font-size:17px;
  display:flex;align-items:center;padding:0 2px;margin-right:3px}
.pen-tb-handle:active{cursor:grabbing}
.pen-tb-ctx{
  font-size:12px;font-weight:700;color:#64748b;
  min-width:48px;text-align:center;letter-spacing:.3px}
.pen-tb-sep{width:1px;height:24px;background:rgba(255,255,255,.13);flex-shrink:0}
.pen-color{
  width:24px;height:24px;border-radius:50%;cursor:pointer;
  border:2px solid transparent;flex-shrink:0;transition:all .13s}
.pen-color:hover{border-color:rgba(255,255,255,.7);transform:scale(1.15)}
.pen-color.active{border-color:#fff;transform:scale(1.2)}
.pen-color-custom{
  width:24px;height:24px;border-radius:50%;cursor:pointer;position:relative;
  background:rgba(255,255,255,.15);display:flex;align-items:center;
  justify-content:center;font-size:12px;font-weight:700;color:#94a3b8;
  border:2px solid transparent;transition:all .13s;flex-shrink:0}
.pen-color-custom:hover{border-color:rgba(255,255,255,.7);background:rgba(255,255,255,.25)}
.pen-tb-btn{
  background:none;border:none;color:#64748b;cursor:pointer;
  font-size:16px;padding:5px 8px;border-radius:9px;transition:all .13s;
  display:flex;align-items:center;justify-content:center;
  min-width:38px;min-height:38px}
.pen-tb-btn:hover{color:#fff;background:rgba(255,255,255,.13)}
.pen-tb-btn.active{color:#fff;background:rgba(0,108,132,.6)}
.pen-tb-btn:disabled{opacity:.25;cursor:not-allowed;pointer-events:none}
/* Popovers in der Stift-Toolbar */
.pen-popover{
  position:absolute;bottom:calc(100% + 10px);left:50%;transform:translateX(-50%);
  background:rgba(10,18,38,.97);border:1px solid rgba(255,255,255,.1);
  border-radius:12px;padding:8px;z-index:202;
  backdrop-filter:blur(18px);box-shadow:0 8px 28px rgba(0,0,0,.5)}
/* SVG-Element Selektions-Highlight */
/* select-mode: SVG selbst bleibt click-through, nur [data-zid]-Elemente bekommen Events */
#draw-svg.select-mode [data-zid]{cursor:pointer;pointer-events:auto}
#draw-svg.select-mode [data-zid]:hover{filter:drop-shadow(0 0 3px rgba(99,102,241,.7))}
[data-zid].zeid-sel{filter:drop-shadow(0 0 5px rgba(99,102,241,.9)) !important}

/* ─── Seiten-Tabs ─────────────────────────────────────── */
#seiten-bar{
  position:fixed;top:14px;left:50%;transform:translateX(-50%);
  display:flex;align-items:center;gap:4px;z-index:150;
  background:rgba(15,23,42,.82);backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.07);border-radius:16px;
  padding:4px 6px;display:none}
#seiten-bar.visible{display:flex}
.seite-tab{
  padding:4px 12px;border-radius:10px;font-size:12px;font-weight:700;
  color:#94a3b8;cursor:pointer;border:none;background:none;
  transition:all .15s;white-space:nowrap}
.seite-tab:hover{background:rgba(255,255,255,.1);color:#fff}
.seite-tab.active{background:rgba(0,108,132,.35);color:#6EB0BC}
.seite-add{
  width:26px;height:26px;border-radius:8px;background:rgba(255,255,255,.07);
  border:none;color:#64748b;cursor:pointer;font-size:16px;
  display:flex;align-items:center;justify-content:center;
  transition:all .15s}
.seite-add:hover{background:rgba(255,255,255,.14);color:#fff}

/* Zoom-Anzeige */
#zoom-indicator{
  position:fixed;bottom:76px;right:16px;
  background:rgba(15,23,42,.82);backdrop-filter:blur(8px);
  color:#94a3b8;border:1px solid rgba(255,255,255,.07);
  border-radius:10px;padding:5px 10px;font-size:11px;font-weight:700;
  z-index:150;opacity:0;transition:opacity .3s;pointer-events:none}

/* ─── Widgets ─────────────────────────────────────────── */
.widget{
  position:absolute;border-radius:18px;
  box-shadow:0 1px 4px rgba(0,0,0,.06);
  border:1px solid rgba(0,0,0,.07);
  cursor:grab;overflow:hidden;display:flex;flex-direction:column;
  transition:box-shadow .15s,border-color .15s;touch-action:none}
.widget:hover{
  box-shadow:0 4px 16px rgba(0,0,0,.11);
  border-color:rgba(0,0,0,.10)}
.widget:active{cursor:grabbing}
.widget.selected{
  box-shadow:0 0 0 2px #006C84,0 6px 24px rgba(0,108,132,.2);
  border-color:transparent}

/* Transparent-Modus (Würfel freistellen, Überschrift, Pfeil) */
.widget-ghost{
  background:transparent!important;
  box-shadow:none!important;
  border-color:transparent!important}
.widget-ghost:hover{
  border-color:rgba(79,70,229,.35)!important;
  box-shadow:0 1px 8px rgba(0,0,0,.06)!important}
.widget-ghost.selected{
  box-shadow:0 0 0 1px rgba(79,70,229,.4)!important}
.widget-ghost .widget-header{display:none!important}
.widget-ghost .dice-roll-btn{display:none!important}

/* Global clean mode (alle Widget-Beschriftungen ausblenden) */
body.global-clean .widget-header{display:none!important}
/* Global Widget-Hintergrund (transparent-Modus) */
body.global-widget-transparent .widget:not(.widget-ghost){
  background:transparent!important;box-shadow:none!important;border-color:transparent!important}
/* Widget-BG-Swatches */
.wbg-swatch{
  width:28px;height:28px;border-radius:8px;cursor:pointer;
  border:2px solid transparent;transition:all .1s;flex-shrink:0}
.wbg-swatch:hover{transform:scale(1.1)}
.wbg-swatch.active{border-color:#006C84!important}

.widget-header{
  display:flex;align-items:center;gap:6px;padding:6px 10px;
  font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  background:rgba(0,0,0,.06);flex-shrink:0;backdrop-filter:blur(4px);touch-action:none}
.widget-header .drag-hint{margin-left:auto;opacity:.25;font-size:12px}
.widget-body{flex:1;display:flex;align-items:center;justify-content:center;overflow:hidden}

/* Resize handle */
.resize-handle{
  position:absolute;bottom:2px;right:2px;width:12px;height:12px;
  cursor:se-resize;z-index:5;
  background:radial-gradient(circle, rgba(0,0,0,0.2) 40%, transparent 40%)}
.widget:hover .resize-handle{background:radial-gradient(circle, rgba(0,0,0,0.45) 40%, transparent 40%)}
.widget-ghost .resize-handle{background:radial-gradient(circle, rgba(0,0,0,0.1) 40%, transparent 40%)}
.widget-ghost:hover .resize-handle{background:radial-gradient(circle, rgba(0,0,0,0.3) 40%, transparent 40%)}
/* Widget Einstellungs-Button (⚙ sichtbar bei Hover) */
.widget-gear-btn{
  position:absolute;top:5px;right:28px;z-index:6;
  opacity:0;pointer-events:none;transition:opacity .15s;
  background:rgba(0,0,0,.1);border:none;border-radius:7px;
  width:22px;height:22px;cursor:pointer;font-size:10px;
  color:inherit;display:flex;align-items:center;justify-content:center}
.widget:hover .widget-gear-btn{opacity:1;pointer-events:auto}
.widget.selected .widget-gear-btn{opacity:1;pointer-events:auto}
/* Widget Schließen-Button (✕ sichtbar bei Hover) */
.widget-close-btn{
  position:absolute;top:5px;right:5px;z-index:6;
  opacity:0;pointer-events:none;transition:opacity .15s;
  background:rgba(0,0,0,.1);border:none;border-radius:7px;
  width:22px;height:22px;cursor:pointer;font-size:10px;
  color:inherit;display:flex;align-items:center;justify-content:center}
.widget:hover .widget-close-btn{opacity:1;pointer-events:auto}
.widget.selected .widget-close-btn{opacity:1;pointer-events:auto}
.widget-close-btn:hover{background:rgba(220,38,38,.7);color:#fff}
/* Widget Minimieren-Button (− sichtbar bei Hover) */
.widget-minimize-btn{
  position:absolute;top:5px;right:51px;z-index:6;
  opacity:0;pointer-events:none;transition:opacity .15s;
  background:rgba(0,0,0,.1);border:none;border-radius:7px;
  width:22px;height:22px;cursor:pointer;font-size:10px;
  color:inherit;display:flex;align-items:center;justify-content:center}
.widget:hover .widget-minimize-btn{opacity:1;pointer-events:auto}
.widget.selected .widget-minimize-btn{opacity:1;pointer-events:auto}
/* Widget minimiert */
.widget.minimized .widget-body{display:none}
.widget.minimized .resize-handle{display:none}
.widget.minimized .widget-mini-preview{display:flex}
.widget-mini-preview{
  display:none;width:100%;height:32px;
  border-radius:0 0 8px 8px;overflow:hidden;background:rgba(0,0,0,.04);
  align-items:center;position:relative}
.widget-mini-preview img{width:100%;height:100%;object-fit:cover;opacity:.75}
.widget-mini-preview .zf-mini-name{
  position:absolute;left:6px;top:50%;transform:translateY(-50%);
  font-size:10px;font-weight:600;color:#1e293b;
  background:rgba(255,255,255,.82);padding:1px 6px;border-radius:4px;
  white-space:nowrap;max-width:60%;overflow:hidden;text-overflow:ellipsis;pointer-events:none}
/* ─── Zeichenfeld-Widget ────────────────────────────────── */
.zf-wrap{position:relative;width:100%;height:100%;overflow:hidden}
.zf-bg-canvas{position:absolute;top:0;left:0;pointer-events:none;display:block}
.zf-canvas{position:absolute;top:0;left:0;cursor:crosshair;touch-action:none;display:block}
.zf-bg-btn{
  background:rgba(0,0,0,.05);border:1px solid rgba(0,0,0,.1);border-radius:6px;
  padding:4px 7px;cursor:pointer;font-size:11px;color:#374151;
  display:flex;align-items:center;gap:4px;transition:all .1s}
.zf-bg-btn:hover{background:rgba(0,0,0,.1)}
.zf-bg-btn.active{background:rgba(0,108,132,.14);border-color:#006C84;color:#006C84;font-weight:600}

/* ─── Bottom Bar ──────────────────────────────────────── */
#bottom-bar{
  position:fixed;bottom:16px;left:50%;transform:translateX(-50%);
  background:rgba(10,16,32,.97);backdrop-filter:blur(18px);
  border-radius:26px;padding:10px 14px;
  display:flex;align-items:center;gap:3px;
  box-shadow:0 10px 40px rgba(0,0,0,.5),0 1px 0 rgba(255,255,255,.08) inset;
  z-index:100;border:1px solid rgba(255,255,255,.12);
  transition:transform .2s, opacity .2s}
#bottom-bar.minimized{
  transform:translateX(-50%) translateY(calc(100% + 24px));
  opacity:0;pointer-events:none}
/* FAB zum Ausklappen der Toolbar */
#bar-fab{
  position:fixed;bottom:16px;right:16px;
  width:46px;height:46px;border-radius:50%;
  background:rgba(15,23,42,.93);backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.1);
  color:#94a3b8;font-size:18px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 16px rgba(0,0,0,.3);
  z-index:100;transition:all .15s}
#bar-fab:hover{color:#fff;background:rgba(30,40,70,.95)}
.bar-btn{
  display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:8px 13px;border-radius:16px;color:#94a3b8;cursor:pointer;
  transition:all .15s;font-size:10px;font-weight:700;letter-spacing:.05em;
  border:none;background:none;white-space:nowrap;min-width:44px}
.bar-btn:hover{background:rgba(255,255,255,.13);color:#fff}
.bar-btn.active{background:rgba(0,108,132,.32);color:#6EB0BC}
.bar-btn.active:hover{background:rgba(0,108,132,.48);color:#a8d4dc}
.bar-btn i{font-size:22px;display:block}
.bar-sep{width:1px;height:36px;background:rgba(255,255,255,.1);margin:0 3px;flex-shrink:0}

/* Mehr-Menü */
#mehr-menu{
  position:fixed;bottom:90px;left:50%;transform:translateX(-50%);
  background:rgba(15,23,42,.96);backdrop-filter:blur(16px);
  border-radius:18px;padding:10px;
  display:none;gap:4px;
  box-shadow:0 12px 40px rgba(0,0,0,.4);
  z-index:99;border:1px solid rgba(255,255,255,.07)}
#mehr-menu.open{display:grid}

/* ─── Right Panel (HELL) ──────────────────────────────── */
#right-panel{
  position:fixed;top:0;right:-310px;width:290px;height:100%;
  background:#fff;border-left:1px solid #e2e8f0;
  transition:right .25s cubic-bezier(.4,0,.2,1);
  z-index:200;display:flex;flex-direction:column;
  color:#1e293b;box-shadow:-4px 0 24px rgba(0,0,0,.06)}
#right-panel.open{right:0}
.panel-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 16px;border-bottom:1px solid #f1f5f9;flex-shrink:0}
.panel-header span{font-weight:700;font-size:14px;color:#0f172a}
.panel-close{
  width:28px;height:28px;border-radius:8px;border:none;background:#f1f5f9;
  color:#64748b;cursor:pointer;font-size:16px;display:flex;align-items:center;
  justify-content:center;transition:all .15s}
.panel-close:hover{background:#e2e8f0;color:#1e293b}
.panel-body{flex:1;overflow-y:auto}
.panel-footer{padding:12px 16px;border-top:1px solid #f1f5f9;flex-shrink:0}
.panel-section{padding:12px 16px;border-bottom:1px solid #f8fafc}
.panel-label{
  font-size:10px;font-weight:700;letter-spacing:.07em;color:#64748b;
  text-transform:uppercase;margin-bottom:8px;display:block}
.panel-input{
  width:100%;background:#f8fafc;border:1px solid #e2e8f0;
  border-radius:8px;padding:7px 10px;color:#1e293b;font-size:13px;outline:none;
  transition:border .15s}
.panel-input:focus{border-color:#006C84;background:#fff}
.panel-textarea{
  width:100%;background:#f8fafc;border:1px solid #e2e8f0;
  border-radius:8px;padding:8px 10px;color:#1e293b;font-size:13px;
  outline:none;resize:vertical;min-height:70px;font-family:inherit;transition:border .15s}
.panel-textarea:focus{border-color:#006C84;background:#fff}
.panel-btn{
  width:100%;padding:8px 12px;border-radius:9px;font-size:12px;font-weight:600;
  cursor:pointer;border:1px solid #e2e8f0;background:#f8fafc;
  color:#374151;transition:all .15s;text-align:center;display:block}
.panel-btn:hover{background:#f1f5f9;border-color:#cbd5e1}
.panel-btn.primary{background:#006C84;border-color:#006C84;color:#fff}
.panel-btn.primary:hover{background:#004e60}
.panel-btn.danger{border-color:#fecaca;color:#dc2626}
.panel-btn.danger:hover{background:#fef2f2}
.panel-section input[type="checkbox"],.panel-section input[type="range"]{accent-color:#006C84}

/* Farb-Swatches */
.color-row{display:flex;flex-wrap:wrap;gap:5px;align-items:center}
.swatch{
  width:24px;height:24px;border-radius:6px;cursor:pointer;
  border:2px solid transparent;transition:transform .1s,border-color .1s;flex-shrink:0}
.swatch:hover{transform:scale(1.15)}
.swatch.active{border-color:#006C84}
.swatch.add-fav{
  background:#f1f5f9;border:2px dashed #cbd5e1;
  display:flex;align-items:center;justify-content:center;
  color:#94a3b8;font-size:13px}
.swatch.add-fav:hover{border-color:#006C84;color:#006C84}

/* ─── Top UI ──────────────────────────────────────────── */
#back-btn{
  position:fixed;top:14px;left:14px;z-index:150;
  background:rgba(15,23,42,.82);backdrop-filter:blur(8px);
  color:#94a3b8;border:1px solid rgba(255,255,255,.07);
  border-radius:12px;padding:7px 13px;
  font-size:12px;font-weight:600;cursor:pointer;
  display:flex;align-items:center;gap:6px;transition:all .15s;text-decoration:none}
#back-btn:hover{color:#fff}
#board-title{
  position:fixed;top:14px;left:50%;transform:translateX(-50%);
  background:rgba(15,23,42,.7);backdrop-filter:blur(8px);
  color:#cbd5e1;border:1px solid rgba(255,255,255,.06);
  border-radius:12px;padding:6px 16px;
  font-size:13px;font-weight:700;z-index:50;pointer-events:none;white-space:nowrap}

/* ─── Tafel-Menü (rechts, hell) ──────────────────────── */
#tafel-menu-overlay{
  display:none;position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:299}
#tafel-menu-overlay.open{display:block}
#tafel-menu{
  position:fixed;top:0;width:300px;height:100%;
  background:#fff;
  transition:left .25s cubic-bezier(.4,0,.2,1), right .25s cubic-bezier(.4,0,.2,1);
  z-index:300;display:flex;flex-direction:column;
  color:#1e293b}
#tafel-menu.from-left{
  left:-320px;right:auto;
  border-right:1px solid #e2e8f0;
  box-shadow:4px 0 24px rgba(0,0,0,.06)}
#tafel-menu.from-right{
  right:-320px;left:auto;
  border-left:1px solid #e2e8f0;
  box-shadow:-4px 0 24px rgba(0,0,0,.06)}
#tafel-menu.from-left.open{left:0}
#tafel-menu.from-right.open{right:0}
.tm-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 16px 12px;border-bottom:1px solid #f1f5f9;flex-shrink:0}
.tm-header span{font-weight:700;font-size:15px;color:#0f172a}
.tm-close{
  background:#f1f5f9;border:none;border-radius:8px;
  color:#64748b;cursor:pointer;width:28px;height:28px;
  display:flex;align-items:center;justify-content:center;font-size:16px;transition:all .15s}
.tm-close:hover{background:#e2e8f0;color:#1e293b}
.tm-body{flex:1;overflow-y:auto;padding:8px 0}
.tm-section{padding:10px 16px;border-bottom:1px solid #f8fafc}
.tm-label{
  font-size:9px;font-weight:700;letter-spacing:.08em;color:#94a3b8;
  text-transform:uppercase;margin-bottom:8px;display:block}
.tm-btn{
  display:flex;align-items:center;gap:10px;padding:9px 12px;
  border-radius:10px;cursor:pointer;font-size:13px;color:#374151;
  transition:background .1s;border:none;background:none;width:100%;text-align:left}
.tm-btn:hover{background:#f1f5f9;color:#0f172a}
.tm-btn.danger{color:#dc2626}
.tm-btn.danger:hover{background:#fef2f2;color:#dc2626}
.tm-btn.success{color:#16a34a}
.tm-btn.success:hover{background:#f0fdf4}
.tm-btn.active-conn{background:rgba(245,158,11,.1);color:#d97706}
.hg-swatch{
  width:28px;height:28px;border-radius:8px;cursor:pointer;
  border:2px solid transparent;transition:all .1s;flex-shrink:0}
.hg-swatch:hover{transform:scale(1.1)}
.hg-swatch.active{border-color:#006C84!important}
.conn-color-dot{
  width:22px;height:22px;border-radius:50%;cursor:pointer;
  border:2px solid transparent;transition:all .15s;flex-shrink:0}
.conn-color-dot.active,.conn-color-dot:hover{border-color:#1e293b;transform:scale(1.15)}

/* Abwesend-Liste im Tafel-Menü */
.schueler-row{
  display:flex;align-items:center;gap:8px;padding:5px 0;
  font-size:13px;border-bottom:1px solid #f1f5f9}
.schueler-row:last-child{border-bottom:none}
.schueler-toggle{
  width:36px;height:20px;border-radius:10px;cursor:pointer;
  border:none;transition:background .2s;flex-shrink:0;position:relative}
.schueler-toggle.anwesend{background:#22c55e}
.schueler-toggle.abwesend{background:#475569}
.schueler-toggle::after{
  content:'';position:absolute;width:16px;height:16px;
  border-radius:50%;background:#fff;top:2px;transition:left .2s;
  box-shadow:0 1px 3px rgba(0,0,0,.2)}
.schueler-toggle.anwesend::after{left:18px}
.schueler-toggle.abwesend::after{left:2px}

/* ─── Toolbar-Config-Modal ────────────────────────────── */
#toolbar-modal{
  display:none;position:fixed;inset:0;background:rgba(0,0,0,.35);
  z-index:300;align-items:flex-end;justify-content:center;padding:16px}
#toolbar-modal.open{display:flex}
#toolbar-modal-inner{
  background:#fff;border-radius:20px;padding:20px;
  width:100%;max-width:420px;box-shadow:0 20px 60px rgba(0,0,0,.25)}

/* ─── Fullscreen-Modal ────────────────────────────────── */
#fs-modal{
  display:none;position:fixed;inset:0;background:rgba(0,0,0,.82);
  z-index:10000;align-items:center;justify-content:center}
#fs-modal.open{display:flex}
#fs-modal-inner{
  background:#fff;border-radius:24px;padding:32px;
  width:90vw;max-width:600px;max-height:88vh;
  display:flex;flex-direction:column;align-items:center;gap:20px;
  box-shadow:0 32px 80px rgba(0,0,0,.5);overflow-y:auto}
#fs-modal-inner.dark{background:#1e293b;color:#e2e8f0}
.fs-close{
  position:fixed;top:20px;right:20px;width:40px;height:40px;
  border-radius:50%;background:rgba(255,255,255,.12);border:none;
  color:#fff;font-size:22px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background .15s;z-index:10001}
.fs-close:hover{background:rgba(255,255,255,.25)}

/* ─── Picker-Modal ────────────────────────────────────── */
#picker-modal{
  display:none;position:fixed;inset:0;background:rgba(0,0,0,.35);
  z-index:310;align-items:center;justify-content:center;padding:16px}
#picker-modal.open{display:flex}
#picker-modal-inner{
  background:#fff;border-radius:20px;padding:0;
  width:100%;max-width:440px;box-shadow:0 20px 60px rgba(0,0,0,.25);
  max-height:80vh;display:flex;flex-direction:column}
.picker-header{padding:16px 20px;border-bottom:1px solid #f1f5f9;display:flex;align-items:center;justify-content:space-between}
.picker-list{overflow-y:auto;flex:1}
.picker-item{
  padding:12px 20px;border-bottom:1px solid #f8fafc;cursor:pointer;
  transition:background .1s;display:flex;align-items:center;gap:12px}
.picker-item:hover{background:#f8fafc}
.picker-item:last-child{border-bottom:none}

/* ─── QR-Setup-Modal ─────────────────────────────────── */
#qr-setup-modal{display:none;position:fixed;inset:0;background:rgba(15,23,42,.55);backdrop-filter:blur(4px);z-index:350;align-items:center;justify-content:center;padding:16px}
#qr-setup-modal.open{display:flex}
#qr-setup-inner{background:#fff;border-radius:20px;width:100%;max-width:560px;max-height:86vh;display:flex;flex-direction:column;box-shadow:0 24px 64px rgba(0,0,0,.22);overflow:hidden}
#qrm-header{display:flex;align-items:center;justify-content:space-between;padding:18px 22px 14px;border-bottom:1px solid #f1f5f9;flex-shrink:0}
#qrm-body{overflow-y:auto;flex:1;padding:18px 22px;display:flex;flex-direction:column;gap:14px}
#qrm-footer{display:flex;gap:8px;justify-content:flex-end;padding:14px 22px;border-top:1px solid #f1f5f9;flex-shrink:0}
.qrm-label{font-size:11px;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:.05em;margin-bottom:5px}
.qrm-input{width:100%;padding:9px 12px;border:1.5px solid #e2e8f0;border-radius:10px;font-size:13px;outline:none;transition:border-color .15s;box-sizing:border-box;font-family:inherit}
.qrm-input:focus{border-color:#006C84}
.qrm-divider{display:flex;align-items:center;gap:10px;color:#94a3b8;font-size:11px;font-weight:600;letter-spacing:.03em;flex-shrink:0}
.qrm-divider::before,.qrm-divider::after{content:'';flex:1;height:1px;background:#e2e8f0}
.qrm-tabs{display:flex;gap:3px;background:#f8fafc;border-radius:10px;padding:3px;flex-shrink:0}
.qrm-tab{flex:1;padding:6px 4px;font-size:11px;font-weight:600;border:none;border-radius:7px;background:transparent;color:#64748b;cursor:pointer;transition:all .15s;white-space:nowrap}
.qrm-tab.active{background:#fff;color:#006C84;box-shadow:0 1px 4px rgba(0,0,0,.1)}
.qrm-search{margin-bottom:8px;padding-left:12px}
.qrm-list{max-height:186px;overflow-y:auto;border:1.5px solid #f1f5f9;border-radius:10px}
.qrm-item{padding:9px 14px;border-bottom:1px solid #f8fafc;cursor:pointer;display:flex;align-items:center;gap:10px;transition:background .1s}
.qrm-item:hover{background:#f0f9ff}
.qrm-item.qrm-selected{background:#e0f2fe}
.qrm-item:last-child{border-bottom:none}
.qrm-item-title{flex:1;font-size:13px;font-weight:500;color:#1e293b;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.qrm-badge{font-size:10px;font-weight:700;padding:2px 7px;border-radius:99px;flex-shrink:0}
.qrm-badge-green{background:#dcfce7;color:#15803d}
.qrm-badge-blue{background:#dbeafe;color:#1d4ed8}
.qrm-badge-amber{background:#fef3c7;color:#92400e}
.qrm-badge-gray{background:#f1f5f9;color:#64748b}
.qrm-empty{padding:20px;text-align:center;color:#94a3b8;font-size:12px}

/* ─── Widget-Stile ────────────────────────────────────── */

/* Timer – Analog */
.analog-clock{display:block;margin:auto}
.analog-hand{transform-origin:50% 100%;transition:transform .9s cubic-bezier(.4,2.1,.5,1)}
/* Timer – Sanduhr */
.sanduhr-svg{display:block;margin:auto}
.sanduhr-sand-top{transition:height .9s linear, y .9s linear}
.sanduhr-sand-bot{transition:height .9s linear}

/* Timer – Digital */
.timer-display{
  font-family:'SF Mono','Fira Code',monospace;
  font-size:clamp(26px,6vw,56px);font-weight:700;letter-spacing:.03em;text-align:center}
.timer-running .timer-display{animation:pulse-timer 1s ease-in-out infinite}
@keyframes pulse-timer{0%,100%{opacity:1}50%{opacity:.7}}
.timer-controls{display:flex;gap:8px;justify-content:center;margin-top:10px}
.timer-btn{
  background:rgba(255,255,255,.12);border:none;border-radius:9px;
  color:inherit;cursor:pointer;padding:7px 16px;font-size:15px;transition:background .1s}
.timer-btn:hover{background:rgba(255,255,255,.22)}
.timer-extend-btn{
  background:#006C84;color:#fff!important;border-radius:20px;
  font-size:12px;font-weight:700;padding:5px 13px;letter-spacing:.02em}
.timer-extend-btn:hover{background:#004e60!important}
.timer-dot{
  width:7px;height:7px;border-radius:50%;background:#006C84;
  display:inline-block;margin-right:6px;opacity:0}
.timer-running .timer-dot{animation:blink 1s step-start infinite}
@keyframes blink{0%,100%{opacity:0}50%{opacity:1}}

/* Text-Format-Bar */
/* ─── Floating Text-Formatierungs-Toolbar ─────────────────── */
#text-fmt-float{
  position:fixed;left:50%;top:50%;
  background:rgba(10,16,32,.97);backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,.14);border-radius:20px;
  padding:7px 14px;display:none;align-items:center;gap:5px;
  z-index:200;box-shadow:0 10px 40px rgba(0,0,0,.55);user-select:none}
#text-fmt-float.open{display:flex}
.tfb-handle{
  cursor:grab;color:#475569;font-size:16px;
  display:flex;align-items:center;padding:0 2px;margin-right:3px}
.tfb-handle:active{cursor:grabbing}
.tfb-btn{
  background:none;border:none;cursor:pointer;padding:6px 9px;
  border-radius:8px;color:rgba(255,255,255,.6);font-size:14px;font-weight:700;
  line-height:1;transition:all .1s;flex-shrink:0;min-width:36px;min-height:36px;
  display:flex;align-items:center;justify-content:center}
.tfb-btn:hover{background:rgba(255,255,255,.14);color:#fff}
.tfb-btn.active{background:rgba(0,108,132,.45);color:#6EB0BC}
.tfb-sep{width:1px;height:22px;background:rgba(255,255,255,.13);flex-shrink:0;margin:0 4px}
.tfb-size-input{
  font-size:12px;color:rgba(255,255,255,.85);width:38px;text-align:center;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);
  border-radius:6px;padding:3px 2px;font-variant-numeric:tabular-nums;
  letter-spacing:.02em;-moz-appearance:textfield;appearance:textfield;outline:none;
  font-family:inherit;cursor:text}
.tfb-size-input::-webkit-outer-spin-button,.tfb-size-input::-webkit-inner-spin-button{-webkit-appearance:none}
.tfb-size-input:focus{border-color:rgba(0,108,132,.8);background:rgba(0,108,132,.18)}
.tfb-color{
  width:20px;height:20px;border-radius:50%;cursor:pointer;
  border:2px solid transparent;flex-shrink:0;transition:all .13s}
.tfb-color:hover{border-color:rgba(255,255,255,.8);transform:scale(1.2)}
.tfb-hl-color{
  width:20px;height:20px;border-radius:4px;cursor:pointer;
  border:2px solid transparent;flex-shrink:0;transition:all .13s;opacity:.85}
.tfb-hl-color:hover{border-color:rgba(255,255,255,.8);transform:scale(1.15);opacity:1}
.tfb-color-custom{
  width:22px;height:22px;border-radius:50%;cursor:pointer;
  border:2px solid rgba(255,255,255,.25);padding:0;flex-shrink:0;
  background:#475569}
.tfb-color-custom:hover{border-color:rgba(255,255,255,.65)}
/* Popover in der Text-Toolbar */
.tfb-popover{
  position:absolute;bottom:calc(100% + 10px);left:50%;transform:translateX(-50%);
  background:rgba(10,16,32,.97);border:1px solid rgba(255,255,255,.14);
  border-radius:14px;padding:10px;z-index:202;
  backdrop-filter:blur(20px);box-shadow:0 8px 28px rgba(0,0,0,.55);
  white-space:nowrap}

/* Text contenteditable */
.text-ce{
  width:100%;height:100%;background:none;border:none;outline:none;
  font-family:inherit;padding:10px;line-height:1.55;
  overflow-y:auto;user-select:text}
.text-ce ul,.text-ce ol{padding-left:1.6em;margin:.15em 0}
.text-ce ul{list-style-type:disc}
.text-ce ol{list-style-type:decimal}
.text-ce li{display:list-item}
/* Font-Buttons im Popover */
.tfb-font-btn{
  background:none;border:none;cursor:pointer;padding:5px 10px;
  border-radius:6px;color:rgba(255,255,255,.7);font-size:13px;
  text-align:left;width:100%;transition:all .1s;white-space:nowrap}
.tfb-font-btn:hover{background:rgba(255,255,255,.12);color:#fff}

/* 3D Würfel */
.dice-row{flex:1;min-height:0;display:flex;gap:10px;align-items:center;justify-content:center;cursor:pointer}
.dice-slot{display:flex;align-items:center;justify-content:center;flex-shrink:0}
.dice-scene{
  width:100px;height:100px;perspective:300px;cursor:pointer;
  margin:auto;transform-origin:center center}
.dice-cube{
  width:100px;height:100px;position:relative;transform-style:preserve-3d;
  transform:rotateX(15deg) rotateY(25deg);
  transition:transform .75s cubic-bezier(.25,.46,.45,.94)}
.dice-face{
  position:absolute;width:100px;height:100px;
  background:#fff;border:2px solid rgba(0,0,0,.07);border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.04)}
.df1{transform:rotateY(0deg) translateZ(50px)}
.df2{transform:rotateY(90deg) translateZ(50px)}
.df3{transform:rotateX(90deg) translateZ(50px)}
.df4{transform:rotateX(-90deg) translateZ(50px)}
.df5{transform:rotateY(-90deg) translateZ(50px)}
.df6{transform:rotateY(180deg) translateZ(50px)}
.dice-face svg{width:80px;height:80px}
.dice-face.dark-face{background:#1e293b}
.dice-roll-btn{
  background:rgba(0,108,132,.12);border:1px solid rgba(0,108,132,.28);
  border-radius:8px;color:#006C84;font-size:11px;font-weight:700;
  padding:4px 12px;cursor:pointer;transition:all .15s;margin-top:6px}
.dice-roll-btn:hover{background:rgba(0,108,132,.22)}

/* Ampel */
.ampel-housing{
  background:#1e293b;border-radius:24px;padding:14px 20px;
  display:flex;flex-direction:column;gap:12px;align-items:center;cursor:pointer;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 6px 24px rgba(0,0,0,.5);
  transition:background .3s,box-shadow .3s}
.ampel-housing.ampel-hell{
  background:#374151;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 4px 16px rgba(0,0,0,.28)}
.ampel-light{
  width:52px;height:52px;border-radius:50%;
  transition:box-shadow .3s,opacity .3s,filter .3s;
  box-shadow:inset 0 3px 8px rgba(0,0,0,.55)}
.ampel-light.rot-l{background:radial-gradient(circle at 35% 32%,#ff6b6b,#b91c1c)}
.ampel-light.gelb-l{background:radial-gradient(circle at 35% 32%,#fef08a,#b45309)}
.ampel-light.gruen-l{background:radial-gradient(circle at 35% 32%,#6ee7b7,#047857)}
.ampel-light.off{opacity:.1;filter:saturate(0)}
.ampel-light.on.rot-l{box-shadow:0 0 32px 8px rgba(185,28,28,.7),inset 0 2px 4px rgba(0,0,0,.15)}
.ampel-light.on.gelb-l{box-shadow:0 0 32px 8px rgba(180,83,9,.7),inset 0 2px 4px rgba(0,0,0,.15)}
.ampel-light.on.gruen-l{box-shadow:0 0 32px 8px rgba(4,120,87,.7),inset 0 2px 4px rgba(0,0,0,.15)}

/* Soundboard Widget */
.schulboard-widget{background:linear-gradient(175deg,#222236 0%,#1a1a2c 50%,#141422 100%);border:2px solid #2e2e4a;border-radius:14px;padding:10px;width:100%;box-shadow:0 0 0 1px #ffffff08 inset,0 10px 30px rgba(0,0,0,.6),0 2px 0 #3a3a52;position:relative}
.schulboard-widget::before,.schulboard-widget::after{content:'·';position:absolute;font-size:12px;line-height:1;color:#3a3a5a;width:12px;height:12px;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle,#2a2a3e,#1a1a2c);border-radius:50%;border:1px solid #3a3a52;box-shadow:0 1px 3px rgba(0,0,0,.5)}
.schulboard-widget::before{top:9px;left:9px}.schulboard-widget::after{top:9px;right:9px}
.schulboard-widget .sdw-header{display:flex;align-items:center;gap:8px;padding:6px 12px 10px;border-bottom:1px solid #252538;margin-bottom:10px}
.schulboard-widget .sdw-leds{display:flex;gap:4px;align-items:center}
.schulboard-widget .sdw-led{width:7px;height:7px;border-radius:50%;border:1px solid rgba(0,0,0,.4)}
.schulboard-widget .sdw-led.red{background:#cc3333;box-shadow:0 0 4px #cc333380}
.schulboard-widget .sdw-led.amber{background:#cc8800;box-shadow:0 0 4px #cc880080}
.schulboard-widget .sdw-led.green{background:#00cc66;box-shadow:0 0 6px #00cc6680;animation:sdw-blink 3s infinite}
@keyframes sdw-blink{0%,88%,100%{opacity:1}94%{opacity:.25}}
.schulboard-widget .sdw-title-wrap{flex:1;text-align:center}
.schulboard-widget .sdw-title{font-size:12px;font-weight:900;letter-spacing:4px;color:#00ee77;text-shadow:0 0 8px #00ee7760,0 0 18px #00ee7730;font-family:'Courier New',monospace;text-transform:uppercase}
.schulboard-widget .sdw-subtitle{font-size:7px;letter-spacing:2px;color:#3a3a5a;font-family:'Courier New',monospace;margin-top:2px;text-transform:uppercase}
.schulboard-widget .sdw-vu-wrap{display:flex;flex-direction:column;gap:4px;width:48px}
.schulboard-widget .sdw-vu{height:5px;background:#0a0a15;border-radius:2px;overflow:hidden;border:1px solid #252538}
.schulboard-widget .sdw-vu-bar{height:100%;border-radius:2px;background:linear-gradient(90deg,#00cc66,#aaee00 60%,#ff8800 82%,#ff3333 100%);transition:width .1s ease}
.schulboard-widget .sdw-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;padding:0 0 8px}
.schulboard-widget .sdw-btn{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:8px 4px;border-radius:7px;border:none;cursor:pointer;min-height:62px;user-select:none;-webkit-user-select:none;touch-action:manipulation;transition:transform .06s ease,box-shadow .06s ease,filter .1s ease}
.schulboard-widget .sdw-btn:active{transform:translateY(3px)!important}
.schulboard-widget .sdw-btn.playing{animation:sdw-pulse .5s ease infinite alternate}
@keyframes sdw-pulse{from{filter:brightness(1.08)}to{filter:brightness(1.3) saturate(1.25)}}
.schulboard-widget .sdw-btn::before{content:'';position:absolute;top:0;left:0;right:0;height:38%;background:linear-gradient(180deg,rgba(255,255,255,.10) 0%,rgba(255,255,255,0) 100%);border-radius:7px 7px 0 0;pointer-events:none}
.schulboard-widget .sdw-led-dot{position:absolute;top:5px;right:7px;width:6px;height:6px;border-radius:50%;background:rgba(0,0,0,.5);border:1px solid rgba(0,0,0,.4);transition:background .1s,box-shadow .1s}
.schulboard-widget .sdw-btn.playing .sdw-led-dot{background:#fff;box-shadow:0 0 5px #fff,0 0 10px currentColor}
.schulboard-widget .sdw-ch{font-size:7px;letter-spacing:1px;color:rgba(255,255,255,.28);font-family:'Courier New',monospace;text-transform:uppercase;line-height:1}
.schulboard-widget .sdw-name{font-size:9px;font-weight:900;letter-spacing:.8px;color:rgba(255,255,255,.88);text-transform:uppercase;font-family:'Courier New',monospace;text-align:center;line-height:1.25;text-shadow:0 1px 3px rgba(0,0,0,.7)}
.schulboard-widget .sdw-c1{background:linear-gradient(168deg,#1e7a36,#145526);box-shadow:0 4px 0 #0a2e14,0 5px 10px rgba(0,0,0,.55)}
.schulboard-widget .sdw-c2{background:linear-gradient(168deg,#b87c00,#8a5c00);box-shadow:0 4px 0 #4a3000,0 5px 10px rgba(0,0,0,.55)}
.schulboard-widget .sdw-c3{background:linear-gradient(168deg,#5e9200,#436800);box-shadow:0 4px 0 #223800,0 5px 10px rgba(0,0,0,.55)}
.schulboard-widget .sdw-c4{background:linear-gradient(168deg,#1648b0,#0e348a);box-shadow:0 4px 0 #061852,0 5px 10px rgba(0,0,0,.55)}
.schulboard-widget .sdw-c5{background:linear-gradient(168deg,#b02828,#8a1a1a);box-shadow:0 4px 0 #4e0808,0 5px 10px rgba(0,0,0,.55)}
.schulboard-widget .sdw-c6{background:linear-gradient(168deg,#b05610,#8a3e00);box-shadow:0 4px 0 #4a2000,0 5px 10px rgba(0,0,0,.55)}
.schulboard-widget .sdw-c7{background:linear-gradient(168deg,#077ea0,#055e78);box-shadow:0 4px 0 #023444,0 5px 10px rgba(0,0,0,.55)}
.schulboard-widget .sdw-c8{background:linear-gradient(168deg,#6830d0,#4e1ea8);box-shadow:0 4px 0 #260c60,0 5px 10px rgba(0,0,0,.55)}
.schulboard-widget .sdw-c9{background:linear-gradient(168deg,#8e5600,#6a3e00);box-shadow:0 4px 0 #341c00,0 5px 10px rgba(0,0,0,.55)}
.schulboard-widget .sdw-c10{background:linear-gradient(168deg,#a81450,#860e3e);box-shadow:0 4px 0 #4c0422,0 5px 10px rgba(0,0,0,.55)}
.schulboard-widget .sdw-c11{background:linear-gradient(168deg,#9c7e00,#766000);box-shadow:0 4px 0 #3c3000,0 5px 10px rgba(0,0,0,.55)}
.schulboard-widget .sdw-c12{background:linear-gradient(168deg,#2c3a4e,#1a2436);box-shadow:0 4px 0 #0c1220,0 5px 10px rgba(0,0,0,.55)}
.schulboard-widget .sdw-c1:active{box-shadow:0 1px 0 #0a2e14,0 2px 4px rgba(0,0,0,.5)}
.schulboard-widget .sdw-c2:active{box-shadow:0 1px 0 #4a3000,0 2px 4px rgba(0,0,0,.5)}
.schulboard-widget .sdw-c3:active{box-shadow:0 1px 0 #223800,0 2px 4px rgba(0,0,0,.5)}
.schulboard-widget .sdw-c4:active{box-shadow:0 1px 0 #061852,0 2px 4px rgba(0,0,0,.5)}
.schulboard-widget .sdw-c5:active{box-shadow:0 1px 0 #4e0808,0 2px 4px rgba(0,0,0,.5)}
.schulboard-widget .sdw-c6:active{box-shadow:0 1px 0 #4a2000,0 2px 4px rgba(0,0,0,.5)}
.schulboard-widget .sdw-c7:active{box-shadow:0 1px 0 #023444,0 2px 4px rgba(0,0,0,.5)}
.schulboard-widget .sdw-c8:active{box-shadow:0 1px 0 #260c60,0 2px 4px rgba(0,0,0,.5)}
.schulboard-widget .sdw-c9:active{box-shadow:0 1px 0 #341c00,0 2px 4px rgba(0,0,0,.5)}
.schulboard-widget .sdw-c10:active{box-shadow:0 1px 0 #4c0422,0 2px 4px rgba(0,0,0,.5)}
.schulboard-widget .sdw-c11:active{box-shadow:0 1px 0 #3c3000,0 2px 4px rgba(0,0,0,.5)}
.schulboard-widget .sdw-c12:active{box-shadow:0 1px 0 #0c1220,0 2px 4px rgba(0,0,0,.5)}
.schulboard-widget .sdw-footer{border-top:1px solid #252538;padding:8px 6px 2px;display:flex;align-items:center;gap:8px}
.schulboard-widget .sdw-knobs{display:flex;gap:6px;align-items:center}
.schulboard-widget .sdw-knob{width:18px;height:18px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#42425e,#1a1a2c);border:2px solid #32324e;box-shadow:0 2px 4px rgba(0,0,0,.5),0 1px 0 #ffffff0c inset;position:relative}
.schulboard-widget .sdw-knob::after{content:'';position:absolute;top:3px;left:50%;width:2px;height:4px;background:#00cc66;border-radius:1px;transform:translateX(-50%);box-shadow:0 0 3px #00cc66}
.schulboard-widget .sdw-ctrl-label{font-size:7px;letter-spacing:2px;color:#3a3a5a;font-family:'Courier New',monospace;text-transform:uppercase}
.schulboard-widget .sdw-spacer{flex:1}
.schulboard-widget .sdw-model-tag{font-size:7px;letter-spacing:1.5px;color:#2e2e4a;font-family:'Courier New',monospace;text-align:right;text-transform:uppercase}
.schulboard-widget .sdw-model-tag span{display:block;color:#383858}

/* Arbeitsphase */
.phase-emoji{font-size:48px;display:block;text-align:center;margin-bottom:4px}
.phase-text{font-size:16px;font-weight:800;text-align:center;letter-spacing:.02em}

/* Randomizer */
.rand-name{white-space:nowrap;
  font-weight:800;text-align:center;
  padding:0 12px;line-height:1.1;word-break:break-word}
.rand-name.rand-spinning{opacity:.7;transition:none}
.rand-name.rand-winner{animation:rand-pop .35s ease-out}
@keyframes rand-pop{0%{transform:scale(.7);opacity:.4}60%{transform:scale(1.12)}100%{transform:scale(1);opacity:1}}
@keyframes winner-in{0%{opacity:0;transform:scale(.6)}70%{transform:scale(1.06)}100%{opacity:1;transform:scale(1)}}
@keyframes overlay-in{from{opacity:0}to{opacity:1}}
#winner-overlay.open{animation:overlay-in .25s ease-out}
#winner-overlay.open #winner-name{animation:winner-in .4s cubic-bezier(.175,.885,.32,1.275)}
.rand-placeholder{font-size:44px;text-align:center;opacity:.3}
.rand-btn{
  background:rgba(255,255,255,.15);border:none;border-radius:10px;
  color:inherit;cursor:pointer;padding:7px 18px;font-size:13px;font-weight:700;
  margin-top:8px;transition:background .15s}
.rand-btn:hover{background:rgba(255,255,255,.25)}

/* Gruppenbildung */
.gruppen-grid{
  display:grid;gap:6px;padding:8px;width:100%;
  height:calc(100% - 62px);box-sizing:border-box;overflow:hidden}
.gruppe-card{
  border-radius:10px;padding:7px 9px;
  min-height:0;overflow:hidden;display:flex;flex-direction:column}
.gruppe-card.drag-over{
  background:rgba(255,255,255,.22);outline:2px dashed rgba(255,255,255,.45)}
.gruppe-titel{font-size:12px;font-weight:700;opacity:.7;margin-bottom:4px;letter-spacing:.05em}
.gruppe-names{flex:1;overflow:hidden}
.gruppe-name-item{
  font-size:15px;line-height:1.4;cursor:grab;border-radius:4px;
  padding:1px 4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  transition:background .12s}
.gruppe-name-item:hover{background:rgba(255,255,255,.15)}
.gruppe-name-item.dragging{opacity:.35}

/* ─── Gruppenbildung Setup-View ─────────────────────────── */
.gw-setup{
  flex:1;display:flex;flex-direction:column;
  padding:14px;gap:10px;overflow:hidden;min-height:0}
.gw-toggle{
  display:flex;background:rgba(0,0,0,.07);border-radius:10px;
  padding:3px;flex-shrink:0}
.gw-toggle-btn{
  flex:1;padding:7px 4px;border:none;border-radius:8px;
  background:none;font-size:11px;font-weight:600;cursor:pointer;
  color:inherit;opacity:.4;transition:all .2s;white-space:nowrap}
.gw-toggle-btn.active{
  background:rgba(255,255,255,.9);opacity:1;
  box-shadow:0 1px 5px rgba(0,0,0,.12)}
.gw-zahl-wrap{
  flex:1;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:5px;min-height:0;padding:4px 0}
.gw-zahl{
  font-size:52px;font-weight:900;line-height:1;
  cursor:ns-resize;touch-action:none;
  padding:4px 18px;border-radius:14px;transition:background .15s;
  background:none;border:none;outline:none;
  color:inherit;text-align:center;width:100%;
  -moz-appearance:textfield;font-family:inherit}
.gw-zahl::-webkit-outer-spin-button,.gw-zahl::-webkit-inner-spin-button{-webkit-appearance:none}
.gw-zahl:hover{background:rgba(0,0,0,.06)}
.gw-zahl:focus{background:rgba(0,0,0,.06);outline:none}
.gw-zahl-label{
  font-size:10px;font-weight:700;opacity:.35;
  letter-spacing:.09em;text-transform:uppercase}
.gw-cta{
  width:100%;padding:13px;border:none;border-radius:12px;
  background:#006C84;color:#fff;font-size:14px;font-weight:700;
  cursor:pointer;transition:background .15s,transform .1s,opacity .15s;
  letter-spacing:.01em;flex-shrink:0}
.gw-cta:hover:not(:disabled){background:#004e60}
.gw-cta:active:not(:disabled){transform:scale(.98)}
.gw-cta:disabled{background:rgba(0,0,0,.1);color:rgba(0,0,0,.28);
  cursor:not-allowed}
.gw-secondary{
  background:none;border:none;font-size:11px;cursor:pointer;
  color:inherit;opacity:.38;padding:0;font-weight:500;
  transition:opacity .15s;text-align:center;flex-shrink:0}
.gw-secondary:hover{opacity:.7}
.gw-abw-list{
  border-radius:9px;background:rgba(0,0,0,.04);overflow-y:auto;
  max-height:120px;border:1px solid rgba(0,0,0,.07);flex-shrink:0}
.gw-reshuffle-btn{
  background:#006C84;color:#fff;border:none;border-radius:20px;
  padding:4px 16px;font-size:12px;font-weight:700;cursor:pointer;
  display:flex;align-items:center;gap:5px;opacity:.75;
  transition:opacity .15s;letter-spacing:.02em;flex-shrink:0}
.gw-reshuffle-btn:hover{opacity:1}

/* Bild */
.bild-placeholder{
  display:flex;flex-direction:column;align-items:center;gap:6px;
  color:rgba(100,116,139,.5);font-size:12px;font-weight:600;padding:16px}
.bild-placeholder i{font-size:30px}

/* Video */
.video-wrapper{width:100%;height:100%}
.video-wrapper iframe{width:100%;height:100%;border:none}
.video-placeholder{
  display:flex;flex-direction:column;align-items:center;gap:6px;
  color:rgba(255,255,255,.35);font-size:12px;font-weight:600;padding:16px}
.video-placeholder i{font-size:34px}

/* iframe / Lernspiel */
.iframe-wrapper{width:100%;height:100%}
.iframe-wrapper iframe{width:100%;height:100%;border:none;display:block}
.iframe-placeholder{
  display:flex;flex-direction:column;align-items:center;gap:5px;
  color:rgba(100,116,139,.5);font-size:12px;font-weight:600;padding:16px}
.iframe-placeholder i{font-size:30px}

/* QR-Code – card style wie base.html */
.qr-card{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:6px;padding:8px;width:100%;height:100%;box-sizing:border-box}
.qr-card-inner{
  background:#fff;border-radius:14px;padding:10px 12px;
  box-shadow:0 4px 20px rgba(0,0,0,.12),0 1px 6px rgba(0,0,0,.07);
  display:flex;flex-direction:column;align-items:center;gap:6px;
  width:100%;flex:1;min-height:0;overflow:hidden}
.qr-card img{
  display:block;border-radius:6px;
  min-width:0;min-height:0;flex:1;width:auto;height:auto;
  max-width:100%;max-height:100%;object-fit:contain}
.qr-card-title{
  font-size:13px;font-weight:700;color:#1e293b;text-align:center;
  word-break:break-word;line-height:1.3;width:100%;flex-shrink:0}
.qr-placeholder{
  display:flex;flex-direction:column;align-items:center;gap:4px;
  color:rgba(100,116,139,.5);font-size:12px;font-weight:600;padding:16px}
.qr-placeholder i{font-size:34px}

/* Zeitplan */
.zeitplan-table{width:100%;border-collapse:collapse}
.zeitplan-table td{padding:4px 8px;border-bottom:1px solid rgba(0,0,0,.06)}
.zeitplan-table td:first-child{white-space:nowrap;font-weight:700;opacity:.75}
.zeitplan-table tr.aktuell td{background:rgba(255,255,255,.15);font-weight:700}

/* Überschrift */
.ue-text{
  width:100%;height:100%;display:flex;align-items:center;justify-content:center;
  padding:8px 14px;text-align:center;word-break:break-word;line-height:1.2;
  pointer-events:none}

/* Scoreboard */
.sb-team{
  display:flex;align-items:center;justify-content:space-between;
  padding:6px 10px;border-radius:10px;margin-bottom:5px;
  background:rgba(255,255,255,.07)}
.sb-team-name{font-size:12px;font-weight:700;flex:1;min-width:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sb-punkte{font-size:22px;font-weight:900;min-width:40px;text-align:center}
.sb-btn{
  width:26px;height:26px;border-radius:7px;border:none;
  background:rgba(255,255,255,.12);color:inherit;cursor:pointer;
  font-size:15px;font-weight:700;display:flex;align-items:center;
  justify-content:center;flex-shrink:0;transition:background .1s}
.sb-btn:hover{background:rgba(255,255,255,.25)}

/* Pfeil */
.pfeil-svg{width:100%;height:100%;overflow:visible}

/* ─── Pinnwand-Widget ─────────────────────────────────── */
.pw-karte{
  font-size:9px;line-height:1.3;padding:3px 5px;border-radius:4px;
  max-width:80px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;
  box-shadow:0 1px 3px rgba(0,0,0,.15);color:#1e293b;cursor:default;flex-shrink:0}
.pw-modus{
  font-size:9px;font-weight:700;padding:1px 6px;border-radius:8px;color:#fff}
.pw-leer{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  flex:1;gap:6px;color:rgba(30,41,59,.35);font-size:11px;font-weight:600}
.pw-leer i{font-size:28px}

/* ─── Meinungsbild-Widget ─────────────────────────────── */
.mb-status-badge{display:inline-flex;align-items:center;gap:3px;font-size:9px;font-weight:700;
  padding:2px 7px;border-radius:20px;letter-spacing:.03em;text-transform:uppercase}
.mb-status-active{background:#d1fae5;color:#065f46}
.mb-status-draft{background:#e0e7ff;color:#3730a3}
.mb-status-paused{background:#fef3c7;color:#92400e}
.mb-status-closed{background:#f1f5f9;color:#64748b}

/* ─── Pinnwand-Auswahl-Modal ──────────────────────────── */
#pinnwand-modal{
  display:none;position:fixed;inset:0;background:rgba(0,0,0,.4);
  z-index:350;align-items:center;justify-content:center;padding:16px}
#pinnwand-modal.open{display:flex}
#pinnwand-modal-inner{
  background:#fff;border-radius:20px;padding:0;
  width:100%;max-width:480px;box-shadow:0 20px 60px rgba(0,0,0,.25);
  max-height:82vh;display:flex;flex-direction:column}
.pw-modal-header{
  padding:16px 20px;border-bottom:1px solid #f1f5f9;
  display:flex;align-items:center;justify-content:space-between}
.pw-modal-tabs{
  display:flex;gap:0;border-bottom:1px solid #f1f5f9}
.pw-modal-tab{
  flex:1;padding:10px;text-align:center;font-size:12px;font-weight:600;
  color:#64748b;cursor:pointer;border:none;background:none;
  border-bottom:2px solid transparent;transition:all .15s}
.pw-modal-tab.active{color:#006C84;border-bottom-color:#006C84}
.pw-modal-body{overflow-y:auto;flex:1;min-height:0}
.pw-neu-form{padding:16px;display:flex;flex-direction:column;gap:10px}
.pw-neu-label{font-size:11px;font-weight:700;color:#374151;margin-bottom:2px}
.pw-neu-hint{font-size:10px;color:#94a3b8;margin-top:2px}
/* ─── Dock-Panel ──────────────────────────────────────────── */
#dock-panel{position:fixed;left:8px;top:50%;transform:translateY(-50%);width:160px;max-height:80vh;overflow-x:hidden;overflow-y:auto;display:none;flex-direction:column;gap:6px;z-index:9999;background:rgba(255,255,255,.88);backdrop-filter:blur(8px);border-radius:14px;padding:8px;border:1px solid #e2e8f0;box-shadow:0 4px 24px rgba(0,0,0,.12)}
#dock-panel.visible{display:flex}
#dock-label{font-size:10px;color:#94a3b8;padding:2px 4px;font-weight:600;letter-spacing:.04em;user-select:none}
.widget.docked{position:relative!important;left:unset!important;top:unset!important;width:144px!important;height:88px!important;cursor:pointer;flex-shrink:0;overflow:hidden}
.widget.docked .widget-header{display:none!important}
.widget.docked .widget-minimize-btn,.widget.docked .widget-gear-btn,.widget.docked .widget-close-btn{display:none!important}
.widget.docked .widget-body{display:flex!important;position:absolute;top:4px;left:0;width:360px;height:200px;transform:scale(.4);transform-origin:top left;pointer-events:none;overflow:hidden}
.widget.docked .widget-mini-preview{display:none!important}
.widget.docked .resize-handle{display:none}

/* ─── Design „Bunt" (Grundschule): freundlicher, aber aufgeräumt ── */
body.design-bunt .widget{
  border-radius:22px;border:2.5px solid rgba(0,0,0,.05);
  box-shadow:0 6px 18px rgba(0,0,0,.10)}
body.design-bunt .widget-header{
  font-size:11px;font-weight:800;letter-spacing:.04em;
  background:#fff4e6;color:#d9480f;padding:7px 12px}
body.design-bunt .wt-timer .widget-header{background:#ffe3e3;color:#c92a2a}
body.design-bunt .wt-uhr .widget-header{background:#e7f5ff;color:#1864ab}
body.design-bunt .wt-wuerfel .widget-header{background:#d3f9d8;color:#2b8a3e}
body.design-bunt .wt-randomizer .widget-header{background:#ffdeeb;color:#a61e4d}
body.design-bunt .wt-gruppenbildung .widget-header{background:#d0ebff;color:#1971c2}
body.design-bunt .wt-scoreboard .widget-header{background:#fff3bf;color:#e67700}
body.design-bunt .wt-text .widget-header{background:#fff9db;color:#b08800}
body.design-bunt .wt-gluecksrad .widget-header{background:#f3f0ff;color:#6741d9}
body.design-bunt .wt-ampel .widget-header{background:#e6fcf5;color:#087f5b}
body.design-bunt .wt-zeitplan .widget-header{background:#e6fcf5;color:#0b7285}
body.design-bunt .wt-soundboard .widget-header{background:#f3f0ff;color:#5f3dc4}
body.design-bunt .wt-arbeitsphase .widget-header{background:#e7f5ff;color:#1971c2}
body.design-bunt .wt-qr_code .widget-header{background:#e7f5ff;color:#1864ab}
body.design-bunt .widget.selected{
  box-shadow:0 0 0 3px #f59f00,0 8px 24px rgba(245,159,0,.25);border-color:transparent}
body.design-bunt .timer-btn,
body.design-bunt .sb-btn,
body.design-bunt .gw-cta,
body.design-bunt .rand-btn{border-radius:999px;font-weight:800}
body.design-bunt .seite-tab{border-radius:999px;font-weight:800}
body.design-bunt .seite-tab.active{background:#f59f00;border-color:#f59f00;color:#fff}
body.design-bunt .resize-handle{
  width:16px;height:16px;
  background:radial-gradient(circle, rgba(217,72,15,.45) 40%, transparent 40%)}

/* ─── Scoreboard-Chips (Spielfeld-Modus) ─────────────────────── */
.sb-chip{flex:1;background:rgba(0,0,0,.05);border-radius:12px;padding:6px 8px;min-width:0}
.sb-chip .sb-team-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:12px;font-weight:700;opacity:.75;margin-bottom:2px}
.sb-punkte-kompakt{min-width:34px}

/* ─── Bunt: Toolbar, Mehr-Menü, Dock ─────────────────────────── */
body.design-bunt #bottom-bar{
  background:rgba(255,255,255,.95);
  border:1.5px solid #f2e3cf;
  box-shadow:0 12px 34px rgba(120,80,20,.18)}
body.design-bunt .bar-btn{color:#8a7a68}
body.design-bunt .bar-btn:hover{background:#fff1de;color:#5c4a33}
body.design-bunt .bar-btn.active{background:#ffe8cc;color:#d9480f}
body.design-bunt .bar-sep{background:rgba(120,80,20,.14)}
body.design-bunt .tb-timer i{color:#e8590c}
body.design-bunt .tb-uhr i{color:#1864ab}
body.design-bunt .tb-text i{color:#b08800}
body.design-bunt .tb-ueberschrift i{color:#b08800}
body.design-bunt .tb-wuerfel i{color:#2b8a3e}
body.design-bunt .tb-ampel i{color:#087f5b}
body.design-bunt .tb-arbeitsphase i{color:#1971c2}
body.design-bunt .tb-randomizer i{color:#a61e4d}
body.design-bunt .tb-gruppenbildung i{color:#1971c2}
body.design-bunt .tb-bild i{color:#6741d9}
body.design-bunt .tb-video i{color:#c92a2a}
body.design-bunt .tb-iframe i{color:#0b7285}
body.design-bunt .tb-lernspiel i{color:#5f3dc4}
body.design-bunt .tb-zeitplan i{color:#0b7285}
body.design-bunt .tb-qr_code i{color:#1864ab}
body.design-bunt .tb-scoreboard i{color:#e67700}
body.design-bunt .tb-pinnwand i{color:#d9480f}
body.design-bunt .tb-meinungsbild i{color:#1971c2}
body.design-bunt .tb-gluecksrad i{color:#6741d9}
body.design-bunt .tb-zeichenfeld i{color:#2b8a3e}
body.design-bunt .tb-soundboard i{color:#5f3dc4}
body.design-bunt #mehr-menu{
  background:rgba(255,255,255,.97);
  border:1.5px solid #f2e3cf;
  box-shadow:0 16px 44px rgba(120,80,20,.22)}
body.design-bunt #bar-fab{background:#fff;color:#d9480f;border-color:#f2e3cf;box-shadow:0 6px 18px rgba(120,80,20,.22)}
body.design-bunt #dock-panel{background:rgba(255,255,255,.93);border-color:#f2e3cf}
body.design-bunt .widget:hover{box-shadow:0 10px 26px rgba(0,0,0,.14)}
body.design-bunt .widget-header{font-size:11px;padding:7px 12px}
body.design-bunt .widget-header i{font-size:13px}

/* ─── Datum-Widget (Morgenkreis) ─────────────────────────────── */
.dat-wd{font-weight:800;line-height:1.05;font-size:34px}
.dat-dt{font-weight:600;line-height:1.1;font-size:18px;opacity:.9}
.dat-jz{line-height:1;font-size:34px}
body.design-bunt .wt-datum .widget-header{background:#ffe3ec;color:#c2255c}
body.design-bunt .tb-datum i{color:#c2255c}

/* ─── Lärmampel ──────────────────────────────────────────────── */
.la-light{width:34px;height:34px;border-radius:50%;transition:background .25s,box-shadow .25s}
.la-bar-wrap{width:26px;height:100%;min-height:90px;background:#f1f5f9;border-radius:999px;
  display:flex;align-items:flex-end;overflow:hidden;position:relative}
.la-bar{width:100%;height:0%;border-radius:999px;background:#22c55e;transition:height .12s linear}
.la-mark{position:absolute;left:0;right:0;height:0;border-top:2px dashed #ef4444;pointer-events:none}
body.design-bunt .wt-laermampel .widget-header{background:#e6fcf5;color:#087f5b}
body.design-bunt .tb-laermampel i{color:#087f5b}

/* ─── Vorlagen-Auswahl ───────────────────────────────────────── */
#vorlagen-modal{position:fixed;inset:0;z-index:400;display:none;
  align-items:center;justify-content:center;padding:20px;
  background:rgba(15,23,42,.55);backdrop-filter:blur(6px)}
#vorlagen-modal.open{display:flex}
.vorlagen-box{background:#fff;border-radius:22px;max-width:760px;width:100%;
  max-height:88vh;overflow-y:auto;box-shadow:0 24px 70px rgba(0,0,0,.4)}
.vorlagen-head{display:flex;align-items:flex-start;justify-content:space-between;
  gap:12px;padding:22px 24px 14px}
.vorlagen-title{font-size:20px;font-weight:800;color:#0f172a}
.vorlagen-sub{font-size:13px;color:#64748b;margin-top:3px}
#vorlagen-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding:14px 24px 24px}
.vorlage-card{display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:6px;padding:20px 14px;border-radius:16px;border:1.5px solid #e2e8f0;
  background:#f8fafc;cursor:pointer;transition:all .12s}
.vorlage-card:hover{border-color:#006C84;background:#fff;transform:translateY(-2px);
  box-shadow:0 8px 22px rgba(0,108,132,.14)}
.vorlage-icon{font-size:38px;line-height:1}
.vorlage-name{font-size:14px;font-weight:800;color:#0f172a}
.vorlage-desc{font-size:11px;color:#64748b;line-height:1.4}
.vorlage-leer{border-style:dashed;background:#fff}
.vorlagen-gruppe{grid-column:1/-1;font-size:11.5px;font-weight:800;text-transform:uppercase;
  letter-spacing:.05em;color:#94a3b8;margin:8px 2px 0}
.vorlagen-gruppe:first-child{margin-top:0}
@media(max-width:640px){#vorlagen-grid{grid-template-columns:repeat(2,1fr)}}

/* ─── Klassendienste ─────────────────────────────────────────── */
.dienst-row{display:flex;align-items:center;gap:8px;background:rgba(0,0,0,.045);
  border-radius:12px;padding:7px 10px}
.dienst-emoji{font-size:20px;line-height:1;flex-shrink:0}
.dienst-name{font-size:13px;font-weight:700;flex:1;min-width:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dienst-kind{font-size:13px;font-weight:800;background:#fff;border-radius:999px;
  padding:3px 12px;box-shadow:0 1px 4px rgba(0,0,0,.10);flex-shrink:0;
  max-width:45%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dienst-kind.leer{opacity:.4;box-shadow:none;background:rgba(0,0,0,.05)}

/* ─── Zeitplan: Piktogramme + Abhaken ────────────────────────── */
.zeitplan-table .zp-icon{font-size:1.35em;padding-right:2px;width:1.6em;text-align:center}
.zeitplan-table tr.zp-done td{opacity:.45;text-decoration:line-through}
.zeitplan-table tr.zp-done td.zp-icon{text-decoration:none}

/* ─── Bunt-Farben der neuen Widgets ──────────────────────────── */
body.design-bunt .wt-dienste .widget-header{background:#d3f9d8;color:#2b8a3e}
body.design-bunt .tb-dienste i{color:#2b8a3e}
body.design-bunt .wt-murmelglas .widget-header{background:#e7f5ff;color:#1971c2}
body.design-bunt .tb-murmelglas i{color:#1971c2}

/* ─── Browser-Pinch-Zoom unterbinden ──────────────────────────
   Zwei Finger auf der Tafelflaeche sind App-Zoom (applyZoom), kein
   Seiten-Zoom. Ohne touch-action pincht der Browser parallel die GANZE
   Seite – die fixen Leisten werden riesig oder wandern beim Pannen aus
   dem Bild (Staging-Befund 2026-07-10). Bewusst NICHT auf #right-panel,
   #dock-panel, .tafel-menu und Modals: die scrollen per Touch. */
#canvas-wrap, #pen-toolbar, #bottom-bar, #bar-fab, #mehr-menu,
#seiten-bar, #seiten-nav, #back-btn, #board-title, #tafel-menu-btn,
#zoom-indicator {
  touch-action: none;
}