/* ===== Scoped Styles für den Tafel-Tab ===== */
.tafelscope .view-tafel { height: 100%; }
.tafelscope .tafel-layout { display:grid; grid-template-columns: 320px 1fr; gap:1rem; height:calc(100dvh - 120px); }
.tafelscope .tools { overflow:auto; padding:0.5rem; }

/* Dark Cards / Controls */
.tafelscope .card{ background:#1c1c1c; color:#eee; border-radius:12px; padding:12px; box-shadow:0 2px 10px rgba(0,0,0,.4); margin-bottom:12px; }
.tafelscope .card h3, .tafelscope .card h4{ color:#fff; }
.tafelscope .tools .btn{ padding:8px 10px; border:1px solid #555; border-radius:10px; background:#333; color:#eee; cursor:pointer; }
.tafelscope .tools .btn:hover{ background:#444; }
.tafelscope .tools .btn-small{ font-size:.9rem; padding:6px 8px; }
.tafelscope .tools .row{ display:flex; gap:.5rem; align-items:center; margin:.4rem 0; }
.tafelscope .tools .grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.4rem; margin:.4rem 0; }
.tafelscope .hint{ font-size:.85rem; color:#aaa; }

/* Ampel + Badge */
.tafelscope .ampel{ display:flex; gap:12px; align-items:flex-end; }
.tafelscope .led{ width:20px; height:20px; border-radius:50%; background:#9fd39f; box-shadow:0 0 12px rgba(0,255,0,.35) inset, 0 0 6px rgba(0,0,0,.2); }
.tafelscope .thermo{ display:flex; flex-direction:column; align-items:center; }
.tafelscope .db-readout{ margin-top:6px; font-variant-numeric:tabular-nums; font-weight:600; }

.tafelscope .conn-badge{ display:inline-flex; align-items:center; gap:.4rem; padding:.2rem .6rem; border-radius:999px; font-size:.85rem; font-weight:600; }
.tafelscope .conn-off{ background:#332122; color:#f0b0b4; border:1px solid #5a2a2e; }
.tafelscope .conn-off::before{ content:""; width:.55rem; height:.55rem; border-radius:50%; background:#d9534f; }
.tafelscope .conn-on{ background:#16351d; color:#bff2c6; border:1px solid #2d6a3a; }
.tafelscope .conn-on::before{ content:""; width:.55rem; height:.55rem; border-radius:50%; background:#27c24c; }
.tafelscope .conn-warn{ background:#3b3414; color:#ffe28a; border:1px solid #7a661c; }
.tafelscope .conn-warn::before{ content:""; width:.55rem; height:.55rem; border-radius:50%; background:#ffcc33; }

/* Board (mit CSS-Variablen für Lineaturfarbe) */
.tafelscope .board-wrap{ position:relative; overflow:auto; }
.tafelscope .board{
  position:relative; height:100%; border-radius:14px; box-shadow:inset 0 0 40px rgba(0,0,0,.25); padding:18px;
  --grid-line: rgba(255,255,255,.22); /* Default: hell */
}
.tafelscope .board-bg-green{ background:#1f3b2c; }
.tafelscope .board-bg-black{ background:#111; }
.tafelscope .board-bg-white{ background:#ffffff; --grid-line: rgba(0,0,0,.28); } /* auf Weiß dunkler */

.tafelscope .board.font-chalk *{ font-family:"Chalkboard","Comic Sans MS","Patrick Hand",system-ui,sans-serif; }
.tafelscope .board.font-hand *{ font-family:"Homemade Apple","Caveat","Bradley Hand",cursive; }
.tafelscope .board.font-calligraphy *{ font-family:"Great Vibes","Tangerine","Zapfino",cursive; }
.tafelscope .board.font-print *{ font-family:"Atkinson Hyperlegible",system-ui,-apple-system,Segoe UI,Roboto,sans-serif; }

/* Lineaturen: nutzen --grid-line */
.tafelscope .board.board-grid-karo{
  background-image:
    linear-gradient(transparent 31px, var(--grid-line) 32px),
    linear-gradient(90deg, transparent 31px, var(--grid-line) 32px);
  background-size:32px 32px;
}
.tafelscope .board.board-grid-linien{
  background-image: linear-gradient(transparent 35px, var(--grid-line) 36px);
  background-size:36px 36px;
}
.tafelscope .board.board-grid-koord{
  background-image:
    linear-gradient(transparent 31px, var(--grid-line) 32px),
    linear-gradient(90deg, transparent 31px, var(--grid-line) 32px);
  background-size:32px 32px;
}
.tafelscope .board.board-grid-noten{
  background-image:
    repeating-linear-gradient(0deg, var(--grid-line) 0, var(--grid-line) 2px, transparent 2px, transparent 14px);
  background-size:100% 80px;
}

/* Platzierte Items */
.tafelscope .board .item{ position:absolute; user-select:none; cursor:move; color:#fff; font-size:40px; }
.tafelscope .board-bg-white .item{ color:#111; }
.tafelscope .board-bg-green .item, .tafelscope .board-bg-black .item{ color:#f8fff0; text-shadow:0 1px 0 rgba(0,0,0,.3); }

/* Freihand-Canvas (oben, klickbar) */
.tafelscope .ink{
  position:absolute; inset:0; width:100%; height:100%;
  z-index:10;
  pointer-events:auto;     /* aktiv – kann per Button auf none gesetzt werden */
  touch-action:none;
  -webkit-user-select:none; user-select:none;
}