/* LED-Editor (paint.php) im codeMich-Stil. Die Zeichenflaeche bleibt dunkel wie die LED-Matrix, der Rest ist hell. */
.led-seite{ max-width:120rem; }
.led-seite .kicker,.led-seite .heading{ text-align:center; }
.led-seite .page-intro{ max-width:70rem; margin-left:auto; margin-right:auto; text-align:center; }
.led-layout{ display:grid; grid-template-columns:auto minmax(28rem,36rem); gap:2.4rem; justify-content:center; align-items:start; margin-top:2.4rem; }
.led-brett{ background:#fff; border-radius:1.6rem; box-shadow:var(--box-shadow); padding:2rem; display:grid; gap:1.4rem; }
.led-rechts{ display:grid; gap:1.6rem; align-content:flex-start; }
.led-karte{ background:#fff; border-radius:1.6rem; box-shadow:var(--box-shadow); padding:1.8rem 2rem; }
.led-karte .titel{ font-size:1.7rem; font-weight:600; padding:0 0 1rem; }
.led-seite .meta{ font-size:1.3rem; color:var(--light-color); }
.led-karte .meta code{ font-size:.95em; }

/* Zeichenflaeche: dunkel wie die Matrix, jede Zelle eine "LED" */
.board{ --cell:28px; --gap:3px; display:grid; grid-template-columns:repeat(16,var(--cell)); grid-auto-rows:var(--cell); gap:var(--gap); padding:calc(var(--gap) * 2); width:max-content; max-width:100%; border-radius:1.2rem; background:#1b1c1f;
  box-shadow:inset 0 .6rem 2.4rem rgba(0,0,0,.6), 0 0 0 .1rem rgba(255,255,255,.08);
  touch-action:none; user-select:none; -webkit-user-select:none; cursor:crosshair; }
.board[data-tool="dropper"]{ cursor:copy; }
.cell{ width:var(--cell); height:var(--cell); border-radius:5px; box-shadow:inset 0 0 0 1px rgba(255,255,255,.07), inset 0 -3px 6px rgba(0,0,0,.25); transition:background-color .05s; }
.cell:hover{ box-shadow:inset 0 0 0 2px rgba(255,255,255,.55); }

/* unter der Zeichenflaeche */
.led-unter-brett{ margin-bottom:0; }
.farb-anzeige{ width:3.4rem; height:3.4rem; border-radius:50%; border:.3rem solid #fff; box-shadow:0 0 0 .1rem #b9d3dc; flex:none; }
.led-upload{ border-top:.1rem solid #e3edf1; padding-top:1.4rem; display:grid; gap:1rem; }
.led-btn-gross{ font-size:1.7rem; padding:1.2rem 2rem; width:100%; }
.led-status{ font-size:1.4rem; min-height:2rem; color:var(--light-color); }
.led-status.ok{ color:#1f7a3f; }
.led-status.fehler{ color:#b3261e; }

/* Bedienelemente */
.led-zeile{ display:flex; flex-wrap:wrap; gap:.8rem; align-items:center; margin-bottom:.9rem; }
.led-zeile:last-child{ margin-bottom:0; }
.led-zeile label{ font-size:1.5rem; color:var(--light-color); }
.led-btn{ font-size:1.45rem; font-weight:600; border-radius:10rem; padding:.8rem 1.6rem; cursor:pointer; border:.1rem solid #b9d3dc; background:#fff; color:var(--black); transition:background .15s ease, border-color .15s ease, opacity .15s; display:inline-flex; align-items:center; justify-content:center; gap:.6rem; }
.led-btn:hover{ border-color:var(--main-color); }
.led-btn:disabled{ opacity:.45; cursor:not-allowed; }
.led-btn.ghost{ background:#fff; color:var(--black); }
.led-btn.primary{ background:var(--main-color); border-color:var(--main-color); color:#fff; }
.led-btn.grow{ flex:1; }
.led-zeile .led-datei{ font-size:1.45rem; color:var(--black); }
.led-karte select,.led-seite input[type="text"]{ font-size:1.5rem; padding:.8rem 1.2rem; border:.1rem solid #b9d3dc; border-radius:1rem; background:#fff; color:var(--black); max-width:100%; }
.led-seite input[type="text"]:focus,.led-karte select:focus{ outline:.2rem solid var(--main-color); outline-offset:.1rem; }
.led-karte input[type="color"]{ width:5rem; height:3.4rem; border:.1rem solid #b9d3dc; border-radius:.8rem; background:#fff; padding:.2rem; cursor:pointer; }
.led-seite .grow{ flex:1; min-width:0; }

/* Palette */
#palette{ display:grid; grid-template-columns:repeat(8,1fr); gap:.6rem; margin-top:.4rem; }
.swatch{ width:100%; aspect-ratio:1; min-width:2.2rem; padding:0; border-radius:.6rem; border:1px solid #0003; box-shadow:0 1px 0 #fff3 inset; cursor:pointer; }
.swatch:hover{ outline:.2rem solid var(--main-color); outline-offset:.1rem; }
.swatch.aktiv{ outline:.3rem solid var(--main-color); outline-offset:.15rem; }

/* Jetzt auf der Matrix */
.led-aktuell{ display:flex; gap:1.4rem; align-items:center; }
.led-aktuell canvas{ width:9.6rem; height:9.6rem; border-radius:.8rem; background:#111; image-rendering:pixelated; flex:none; }
.led-aktuell .now-name{ font-size:1.6rem; font-weight:600; word-break:break-word; }
.led-aktuell .led-btn{ margin-top:.8rem; }

@media (max-width:800px){
  .led-layout{ grid-template-columns:minmax(0,1fr); }
  .led-brett{ padding:1.2rem; justify-items:center; }
  .board{ --gap:2px; --cell:calc((100vw - 11rem) / 16); max-width:none; }
  .led-upload,.led-unter-brett{ width:100%; }
}