* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'DM Mono', monospace; min-height: 100vh; transition: background 0.25s, color 0.25s; }

/* DARK */
body.dark { background: #1c1812; color: #e8dfc8; }
body.dark .card { background: #231f18; border-color: #3a3020; }
body.dark .card-title { color: #f0c060; border-color: #3a3020; }
body.dark label { color: #8a7a60; }
body.dark input { background: #161310; border-color: #3a3020; color: #e8dfc8; }
body.dark input::placeholder { color: #4a4030; }
body.dark input:focus { border-color: #f0c060; }
body.dark .btn { background: #f0c060; color: #1c1812; }
body.dark .btn:hover { background: #ffd070; }
body.dark .btn-calc { background: #2a5c2a; color: #fff; }
body.dark .btn-calc:hover { background: #347034; }
body.dark .btn-print { background: #1a3a5c; color: #90c0f0; border: 1px solid #2a5a8c; }
body.dark .btn-print:hover { background: #1e4870; }
body.dark .btn-preview { background: #2a2440; color: #b0a0f0; border: 1px solid #453a70; }
body.dark .btn-preview:hover { background: #342c50; }
body.dark .btn-dxf { background: #1a3a20; color: #70d090; border: 1px solid #2a5a30; }
body.dark .btn-dxf:hover { background: #1e4826; }
body.dark .btn-danger { background: transparent; color: #8a4030; border-color: #5a2818; }
body.dark .btn-danger:hover { background: #3a1810; color: #e06040; }
body.dark .stat-box { background: #161310; border-color: #3a3020; }
body.dark .stat-val { color: #f0c060; }
body.dark .stat-label { color: #6a5a40; }
body.dark .board-header { background: #2a2318; border-color: #3a3020; color: #8a7a60; }
body.dark .board-name { color: #f0c060; }
body.dark .board-canvas-wrap-DISABLED { background: #e0e0e0; }
body.dark .waste-bar { background: #2a2318; }
body.dark .legend-item { color: #8a7a60; }
body.dark .tip { background: #1e1c14; color: #a09070; border-left-color: #f0c060; }
body.dark .pieces-table th { color: #8a7a60; border-color: #3a3020; }
body.dark .pieces-table td { border-color: #2a2318; }
body.dark .board-visual { border-color: #555; }
body.dark .header-sub { color: #8a7a60; }
body.dark .theme-toggle { background: #3a3020; border-color: #5a4a30; color: #e8dfc8; }
body.dark .theme-toggle:hover { border-color: #f0c060; color: #f0c060; }
body.dark h1 { color: #f0c060; }
body.dark .kerf-row { color: #8a7a60; }
body.dark .projects-panel { background: #1a1610; border-color: #3a3020; }
body.dark .project-item { background: #231f18; border-color: #3a3020; color: #c8b890; }
body.dark .project-item:hover { border-color: #f0c060; color: #f0c060; }
body.dark .project-item.active { border-color: #f0c060; background: #2a2318; color: #f0c060; }
body.dark .project-name-input { background: #161310; border-color: #3a3020; color: #e8dfc8; }
body.dark .modal-overlay { background: rgba(0,0,0,0.7); }
body.dark .modal { background: #231f18; border-color: #3a3020; }
body.dark .modal-title { color: #f0c060; }
body.dark .modal input { background: #161310; border-color: #3a3020; color: #e8dfc8; }

/* LIGHT */
body.light { background: #f5f0e8; color: #2a2010; }
body.light .card { background: #fff; border-color: #ddd0b8; box-shadow: 0 1px 4px rgba(0,0,0,0.06); }
body.light .card-title { color: #b07820; border-color: #e8dcc8; }
body.light label { color: #9a8060; }
body.light input { background: #faf7f2; border-color: #d0c0a0; color: #2a2010; }
body.light input::placeholder { color: #c0b090; }
body.light input:focus { border-color: #b07820; }
body.light .btn { background: #b07820; color: #fff; }
body.light .btn:hover { background: #c88c28; }
body.light .btn-calc { background: #2a5c2a; color: #fff; }
body.light .btn-calc:hover { background: #347034; }
body.light .btn-print { background: #e8f0f8; color: #2a5c8c; border: 1px solid #b0c8e0; }
body.light .btn-print:hover { background: #d0e4f4; }
body.light .btn-preview { background: #eeeaf8; color: #4a3c8c; border: 1px solid #c0b4e4; }
body.light .btn-preview:hover { background: #e2dcf4; }
body.light .btn-dxf { background: #e8f5ec; color: #2a6c3a; border: 1px solid #a0c8b0; }
body.light .btn-dxf:hover { background: #d0ead8; }
body.light .btn-danger { background: transparent; color: #c04030; border-color: #e0b0a8; }
body.light .btn-danger:hover { background: #fff0ee; color: #e03020; }
body.light .stat-box { background: #faf6ef; border-color: #ddd0b8; }
body.light .stat-val { color: #b07820; }
body.light .stat-label { color: #9a8060; }
body.light .board-header { background: #f5ece0; border-color: #d0c0a0; color: #7a6040; }
body.light .board-name { color: #b07820; }
body.light .board-canvas-wrap { background: #e0e0e0; padding: 0; margin: 0; line-height: 0; font-size: 0; }
body.light .waste-bar { background: #e8dcc8; }
body.light .legend-item { color: #7a6a50; }
body.light .tip { background: #fffbf0; color: #7a6040; border-left-color: #b07820; }
body.light .pieces-table th { color: #9a8060; border-color: #e8dcc8; }
body.light .pieces-table td { border-color: #f0e8d8; }
body.light .board-visual { border-color: #ddd0b8; }
body.light .header-sub { color: #9a8a70; }
body.light .theme-toggle { background: #f0e8d8; border-color: #d0c0a0; color: #7a6040; }
body.light .theme-toggle:hover { border-color: #b07820; color: #b07820; }
body.light h1 { color: #b07820; }
body.light .kerf-row { color: #9a8060; }
body.light .projects-panel { background: #f0ebe0; border-color: #ddd0b8; }
body.light .project-item { background: #fff; border-color: #ddd0b8; color: #6a5a40; }
body.light .project-item:hover { border-color: #b07820; color: #b07820; }
body.light .project-item.active { border-color: #b07820; background: #fdf8f0; color: #b07820; }
body.light .project-name-input { background: #faf7f2; border-color: #d0c0a0; color: #2a2010; }
body.light .modal-overlay { background: rgba(0,0,0,0.4); }
body.light .modal { background: #fff; border-color: #ddd0b8; box-shadow: 0 8px 32px rgba(0,0,0,0.15); }
body.light .modal-title { color: #b07820; }
body.light .modal input { background: #faf7f2; border-color: #d0c0a0; color: #2a2010; }

/* LAYOUT */
/* Safe-Area-Insets: im PWA-Vollbild (status-bar-style black-translucent) läuft
   der Inhalt sonst unter Notch, Statusleiste und Home-Indikator. */
.app {
  min-height: 100vh;
  padding: 2rem 1rem;
  padding-top: calc(2rem + env(safe-area-inset-top, 0px));
  padding-bottom: calc(2rem + env(safe-area-inset-bottom, 0px));
  padding-left: calc(1rem + env(safe-area-inset-left, 0px));
  padding-right: calc(1rem + env(safe-area-inset-right, 0px));
}
.container { max-width: 900px; margin: 0 auto; }

/* Kopfzeile gestapelt statt absolut positioniert — so können die Buttons
   die Überschrift bei keiner Fensterbreite mehr überlagern. */
.header {
  display: flex; flex-direction: column; align-items: center;
  gap: 0.75rem; text-align: center; margin-bottom: 2rem;
}
h1 { font-family: 'Fraunces', serif; font-size: 2.4rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; }
.header-sub { font-size: 0.78rem; margin-top: 0.4rem; letter-spacing: 0.12em; text-transform: uppercase; }
.header-btns {
  display: flex; flex-wrap: wrap; gap: 0.5rem;
  align-items: center; justify-content: center; width: 100%;
}
/* Touch-Geräte: Mindestgröße für sicheres Antippen */
@media (pointer: coarse) {
  .header-btns .btn, .header-btns .theme-toggle { min-height: 44px; }
}

.theme-toggle {
  border-radius: 20px; border: 1px solid;
  font-family: 'DM Mono', monospace; font-size: 0.72rem;
  padding: 0.35rem 0.85rem; cursor: pointer;
  display: inline-flex; align-items: center; gap: 0.4rem;
  transition: all 0.2s; letter-spacing: 0.05em; white-space: nowrap;
  background: transparent;
}

.card { border: 1px solid; border-radius: 4px; padding: 1.5rem; margin-bottom: 1.2rem; transition: background 0.25s, border-color 0.25s; }
.card-title { font-family: 'Fraunces', serif; font-size: 0.75rem; letter-spacing: 0.18em; text-transform: uppercase; margin-bottom: 1rem; padding-bottom: 0.6rem; border-bottom: 1px solid; }

.form-row { display: grid; grid-template-columns: 1fr 1fr 1fr auto; gap: 0.8rem; align-items: end; margin-bottom: 0.8rem; }
label { display: block; font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 0.35rem; }

input {
  width: 100%; border: 1px solid; border-radius: 2px;
  font-family: 'DM Mono', monospace; font-size: 0.85rem;
  padding: 0.5rem 0.7rem; outline: none; transition: border-color 0.15s, background 0.25s;
}

.btn {
  border: none; border-radius: 2px;
  font-family: 'DM Mono', monospace; font-size: 0.78rem; font-weight: 500;
  letter-spacing: 0.08em; padding: 0.5rem 1rem; cursor: pointer;
  text-transform: uppercase; transition: background 0.15s, transform 0.1s; white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn-danger { border: 1px solid; font-size: 0.75rem; padding: 0.45rem 0.7rem; }
.btn-danger:hover { transform: none !important; }
.btn-calc { width: 100%; padding: 0.9rem; font-size: 0.9rem; letter-spacing: 0.15em; margin-top: 0.5rem; }
.btn-print { border-radius: 2px; }
.btn-dxf { border-radius: 2px; }

.kerf-row { display: flex; gap: 0.8rem; align-items: center; flex-wrap: wrap; margin-top: 0.8rem; }
.kerf-row label { margin: 0; }
.kerf-row input { width: 70px; }

.pieces-table { width: 100%; border-collapse: collapse; }
.pieces-table th { font-size: 0.65rem; letter-spacing: 0.12em; text-transform: uppercase; text-align: left; padding: 0.4rem 0.5rem; border-bottom: 1px solid; }
.pieces-table td { padding: 0.3rem 0.25rem; font-size: 0.83rem; border-bottom: 1px solid; vertical-align: middle; }
.pieces-table td input { width: 100%; min-width: 52px; box-sizing: border-box; }
.pieces-table td:first-child input { min-width: 70px; }
.pieces-table tr:last-child td { border-bottom: none; }

/* ACTION BAR */
.action-bar { display: flex; gap: 0.6rem; margin-top: 0.5rem; }
.action-bar .btn-calc { flex: 1; margin-top: 0; }

/* PROJECTS PANEL */
.projects-panel {
  border: 1px solid; border-radius: 4px; padding: 1rem;
  margin-bottom: 1.2rem; transition: background 0.25s;
}
.projects-panel-title {
  font-family: 'Fraunces', serif; font-size: 0.7rem; letter-spacing: 0.18em;
  text-transform: uppercase; margin-bottom: 0.8rem; display: flex;
  align-items: center; justify-content: space-between;
}
.projects-list { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.7rem; min-height: 2rem; }
.project-item {
  border: 1px solid; border-radius: 3px; padding: 0.3rem 0.7rem;
  font-size: 0.75rem; cursor: pointer; transition: all 0.15s;
  display: flex; align-items: center; gap: 0.4rem;
  letter-spacing: 0.04em;
}
.project-item .proj-del { opacity: 0.4; font-size: 0.7rem; cursor: pointer; }
.project-item .proj-del:hover { opacity: 1; }
.projects-empty { font-size: 0.72rem; opacity: 0.4; font-style: italic; padding: 0.2rem 0; }
.project-save-row { display: flex; gap: 0.5rem; align-items: center; }
.project-name-input {
  flex: 1; border: 1px solid; border-radius: 2px; padding: 0.4rem 0.6rem;
  font-family: 'DM Mono', monospace; font-size: 0.78rem; outline: none;
}
.btn-save { padding: 0.4rem 0.9rem; font-size: 0.72rem; }

/* RESULTS */
.result-summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.8rem; margin-bottom: 1.2rem; }
.stat-box { border: 1px solid; border-radius: 3px; padding: 0.8rem; text-align: center; }
.stat-val { font-family: 'Fraunces', serif; font-size: 1.6rem; font-weight: 600; line-height: 1; }
.stat-label { font-size: 0.65rem; margin-top: 0.3rem; letter-spacing: 0.1em; text-transform: uppercase; }

.boards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.board-visual { border: 1.5px solid #888; border-radius: 0; overflow: hidden; background: #e0e0e0; padding: 0; }
.compare-row { display:grid; grid-template-columns: 140px 60px 60px 1fr; gap:0.5rem; align-items:center; padding:0.4rem 0; border-bottom:1px solid rgba(128,128,128,0.15); font-size:0.75rem; }
.compare-row:last-child { border-bottom:none; }
.compare-bar-wrap { background:rgba(128,128,128,0.1); border-radius:2px; height:14px; overflow:hidden; }
.compare-bar { height:100%; border-radius:2px; transition:width 0.4s; }
.compare-best { background:rgba(80,200,80,0.12); border-radius:3px; }
.compare-mini-svg { display:block; border-radius:2px; margin-top:0.3rem; }
.board-header { padding: 0.5rem 0.8rem; font-size: 0.72rem; display: flex; justify-content: space-between; align-items: center; letter-spacing: 0.08em; border-bottom: 1px solid; }
.board-canvas-wrap { padding: 12px; overflow-x: auto; }

.eff-row { display: flex; justify-content: space-between; font-size: 0.72rem; margin-bottom: 0.3rem; }
.parts-summary { padding: 0.4rem 0.7rem 0.5rem; display: flex; flex-direction: column; gap: 0.25rem; }
.parts-row { display: flex; align-items: center; gap: 0.45rem; font-size: 0.78rem; font-family: monospace; }
.parts-row b { font-size: 0.85rem; }
.parts-summary { font-size: 0.75rem; font-family: monospace; padding: 0.3rem 0.7rem 0.4rem; opacity: 0.85; letter-spacing: 0.02em; }
.waste-bar { height: 6px; border-radius: 3px; overflow: hidden; margin-top: 0.4rem; margin-bottom: 0.6rem; }
.waste-fill { height: 100%; border-radius: 3px; transition: width 0.5s; }

.legend { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1rem; }
.legend-item { display: flex; align-items: center; gap: 0.35rem; font-size: 0.7rem; }
.legend-color { width: 12px; height: 12px; border-radius: 1px; flex-shrink: 0; }
.tip { border-left: 3px solid; padding: 0.6rem 0.8rem; font-size: 0.75rem; line-height: 1.5; margin-top: 0.5rem; }
.warning { margin-bottom: 1rem; }

/* MODAL */
.modal-overlay {
  display: none; position: fixed; inset: 0; z-index: 100;
  align-items: center; justify-content: center;
}
.modal-overlay.open { display: flex; }
.modal {
  border: 1px solid; border-radius: 6px; padding: 1.5rem;
  width: 90%; max-width: 380px;
}
.modal-title { font-family: 'Fraunces', serif; font-size: 1.1rem; margin-bottom: 1rem; }
.modal input { width: 100%; margin-bottom: 1rem; padding: 0.6rem 0.8rem; border: 1px solid; border-radius: 2px; font-family: 'DM Mono', monospace; font-size: 0.9rem; outline: none; }
.modal-btns { display: flex; gap: 0.6rem; justify-content: flex-end; }

/* PRINT */
#print-results-clone { display: none; }
#pwa-print-overlay { display: none; }
#pwa-print-overlay .board-header, #print-results-clone .board-header { background: #f0f0f0 !important; color: #111 !important; border-bottom: 1px solid #ccc; padding: 0.4rem 0.7rem; font-size: 0.78rem; font-weight: 600; display: flex; justify-content: space-between; }
#pwa-print-overlay .board-canvas-wrap, #print-results-clone .board-canvas-wrap { background: #e0e0e0 !important; line-height: 0; }
#pwa-print-overlay .pboard, #print-results-clone .pboard { border: 1.5px solid #888; border-radius: 4px; overflow: hidden; margin-bottom: 1.2rem; }
#pwa-print-overlay .peff, #print-results-clone .peff { display: flex; justify-content: space-between; padding: 0.25rem 0.7rem; font-size: 0.72rem; color: #333; }
#pwa-print-overlay .pparts, #print-results-clone .pparts { padding: 0.3rem 0.7rem 0.6rem; border-top: 1px solid #eee; }
#pwa-print-overlay .parts-row, #print-results-clone .parts-row { display: flex; align-items: center; gap: 0.5rem; font-size: 0.75rem; padding: 0.1rem 0; color: #111; }
#pwa-print-overlay .pcolor, #print-results-clone .pcolor { width: 12px; height: 12px; border-radius: 2px; flex-shrink: 0; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
#pwa-print-overlay .pheader h2, #print-results-clone .pheader h2 { font-size: 1rem; margin: 0 0 0.2rem; color: #111; }
#pwa-print-overlay .pmeta, #print-results-clone .pmeta { font-size: 0.7rem; color: #888; margin-bottom: 1.2rem; }
#pwa-print-overlay svg { width: 100% !important; height: auto !important; display: block; }
@media print {
  body > * { display: none !important; }
  #print-results-clone { display: block !important; }
  #print-results-clone .board-canvas-wrap { background: #e0e0e0 !important; padding: 0 !important; margin: 0 !important; line-height: 0 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  #print-results-clone .board-header { background: #f0f0f0 !important; color: #333 !important; border-bottom: 1px solid #ccc !important; padding: 0.3rem 0.8rem; font-size: 0.75rem; display: flex; justify-content: space-between; align-items: center; }
  #print-results-clone .board-header button { display: none !important; }
  #print-results-clone .board-header span[id^="bfs-"] { display: none !important; }
  #print-results-clone svg { width: 100% !important; height: auto !important; min-width: 0 !important; display: block; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  #print-results-clone .legend { display: flex !important; flex-wrap: wrap; gap: 0.4rem; padding: 0.3rem 0.5rem; font-size: 0.7rem; font-family: monospace; }
  #print-results-clone .legend-item { display: flex !important; align-items: center; gap: 0.3rem; }
  #print-results-clone .legend-color { width: 10px; height: 10px; border-radius: 1px; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  #print-results-clone .tip { border-left: 3px solid #c8a820 !important; padding: 0.4rem 0.6rem; font-size: 0.72rem; font-family: monospace; margin: 0.4rem 0; }
  #print-results-clone .eff-row { display: flex !important; justify-content: space-between; font-size: 0.7rem; padding: 0.2rem 0.5rem; font-family: monospace; }
  #print-results-clone .waste-bar, #print-results-clone .zoom-controls { display: none !important; }
  #print-results-clone .parts-summary { display: block !important; font-size: 0.72rem; font-family: monospace; padding: 0.25rem 0.7rem; }
  #print-results-clone .board-visual { border: 1px solid #ccc !important; border-radius: 3px; overflow: hidden; margin-bottom: 0.5rem; page-break-inside: avoid; }
  #print-results-clone .print-header { margin-bottom: 1rem; }
  #print-results-clone h2 { font-size: 1rem; margin: 0 0 0.2rem; font-family: monospace; }
  #print-results-clone .print-meta { font-size: 0.7rem; color: #888; font-family: monospace; }
  #print-results-clone .eff-row { display: flex !important; justify-content: space-between; font-size: 0.72rem; padding: 0.2rem 0.7rem; font-family: monospace; }
  #print-results-clone .parts-summary { display: block !important; padding: 0.3rem 0.7rem 0.6rem; border-bottom: 1px solid #eee; margin-bottom: 1rem; }
  #print-results-clone .parts-row { display: flex !important; align-items: center; gap: 0.5rem; font-size: 0.75rem; font-family: monospace; padding: 0.1rem 0; }
  #print-results-clone .parts-row .legend-color { width: 12px !important; height: 12px !important; border-radius: 2px; flex-shrink: 0; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}
.print-date { display: none; font-size: 0.7rem; color: #888; margin-top: 0.3rem; }

/* ─── VOLLBILD-DRUCKVORSCHAU ─── */
#print-preview {
  position: fixed; inset: 0; z-index: 9500;
  display: flex; flex-direction: column;
  background: #3c3833;
}
#print-preview .preview-bar {
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.6rem; flex-wrap: wrap;
  padding: 0.6rem 0.8rem;
  /* PWA: Leiste nicht unter Notch/Statusleiste schieben */
  padding-top: calc(0.6rem + env(safe-area-inset-top, 0px));
  padding-left: calc(0.8rem + env(safe-area-inset-left, 0px));
  padding-right: calc(0.8rem + env(safe-area-inset-right, 0px));
  background: #231f18; border-bottom: 1px solid #3a3020;
}
#print-preview .preview-title {
  font-family: 'Fraunces', serif; font-size: 0.78rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: #f0c060; white-space: nowrap;
}
#print-preview .preview-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }
#print-preview .preview-close { background: #3a3020; color: #e8dfc8; }
#print-preview .preview-close:hover { background: #4a3d28; }
#print-preview .preview-scroll {
  flex: 1 1 auto; overflow: auto; -webkit-overflow-scrolling: touch;
  padding: 0.9rem;
  padding-bottom: calc(0.9rem + env(safe-area-inset-bottom, 0px));
  padding-left: calc(0.9rem + env(safe-area-inset-left, 0px));
  padding-right: calc(0.9rem + env(safe-area-inset-right, 0px));
}
#print-preview .preview-sheet {
  max-width: 1100px; margin: 0 auto; background: #fff;
  padding: 16px 18px; box-shadow: 0 4px 26px rgba(0,0,0,0.45);
}
@media (pointer: coarse) {
  #print-preview .preview-bar .btn { min-height: 44px; }
}
@media (max-width: 640px) {
  #print-preview .preview-bar { justify-content: center; }
  #print-preview .preview-sheet { padding: 10px 11px; }
  /* Kennzahlen sauber als 2×2 statt 3+1 umbrechen */
  #print-preview .preview-sheet .stat-box { min-width: calc(50% - 0.25rem); }
}
/* Vorschau selbst nie mitdrucken — der Druck baut sein eigenes Layout */
@media print { #print-preview { display: none !important; } }

@media (max-width: 640px) {
  .boards-grid { grid-template-columns: 1fr; }
  .pieces-table { font-size: 0.78rem; }
  .pieces-table td { padding: 0.25rem 0.2rem; }
  .pieces-table td input { font-size: 0.78rem; padding: 0.3rem 0.3rem; }
  .form-row { grid-template-columns: 1fr 1fr; }
  .result-summary { grid-template-columns: 1fr 1fr; }
  h1 { font-size: 1.8rem; }
  .action-bar { flex-direction: column; }
  #boards-container > div { grid-template-columns: 1fr 1fr !important; }
}
/* ─── MASERUNG (ab v167) ───────────────────────────────────────────
   Die Spalte ist nur sichtbar, wenn der Umschalter über der Tabelle
   auf "Maserung an" steht. Ohne ihn verhält sich alles wie zuvor. */
.grain-cell, col.grain-col { display: none; }
body.grain-mode .grain-cell { display: table-cell; }
body.grain-mode col.grain-col { display: table-column; }

.grain-cell { text-align: center; }
.grain-box { display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.grain-box input[type="checkbox"] {
  width: 20px; height: 20px; margin: 0; cursor: pointer;
  accent-color: #b07820;
}
body.dark .grain-box input[type="checkbox"] { accent-color: #f0c060; }

@media (pointer: coarse) {
  .grain-box input[type="checkbox"] { width: 24px; height: 24px; }
  .grain-cell { padding-left: 0.1rem; padding-right: 0.1rem; }
}

/* Im Druck bleibt die Spalte außen vor — der Zuschnittplan zeigt das Ergebnis,
   nicht die Eingabeoptionen. */
@media print { .grain-cell, col.grain-col { display: none !important; } }

#modeBtn { white-space: nowrap; }
body.dark #modeBtn { background: #3a3020; color: #e8dfc8; border: 1px solid #5a4a30; }
body.dark.grain-mode #modeBtn { background: #f0c060; color: #1c1812; border-color: #f0c060; }
body.light #modeBtn { background: #f0e8d8; color: #7a6040; border: 1px solid #d0c0a0; }
body.light.grain-mode #modeBtn { background: #b07820; color: #fff; border-color: #b07820; }