:root{ --bg:#f6f8fa; --card:#fff; --muted:#555; --accent:#2563eb; --blue-box:#eaf2ff; --blue-border:#c7dbff; --radius:10px; --border:#e6e9ee;
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Arial;}
body{ margin:0; background:linear-gradient(180deg,#f0f4ff,var(--bg)); min-height:100vh; display:grid; place-items:center; padding:28px; }
.app{ width:100%; max-width:950px; background:var(--card); border-radius:var(--radius); padding:18px; box-shadow:0 8px 30px rgba(10,20,40,.08); display:flex; flex-direction:column; gap:14px; }
.header{ display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; }
.logo-wrapper{ display:flex; align-items:center; gap:10px; }
.logo-wrapper img{ height:50px; width:auto; }
h1{ margin:0; font-size:20px; }

.form-top{ display:grid; grid-template-columns: 1fr; gap:12px; background:#fff; border:1px solid var(--border); padding:15px; border-radius:10px; }
.field{ display:flex; flex-direction:column; gap:6px; }
.field label{ font-size:13px; color:#374151; }
.field input, .field select{ padding:10px; border:1px solid var(--border); border-radius:8px; font-size:14px; outline:none; }
.field input:focus, .field select:focus{ box-shadow:0 0 0 4px rgba(37,99,235,0.08); border-color:var(--accent); }

.meta{ color:var(--muted); font-size:13px; }
ul{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px; }
li{ display:grid; grid-template-columns: 28px 1fr auto; align-items:center; gap:12px;
    border:1px solid var(--border); padding:10px; border-radius:10px; background:#fff; transition: background .2s, border-color .2s; }
li.is-checked{ background: var(--blue-box); border-color: var(--blue-border); }
input[type="checkbox"]{ width:18px; height:18px; cursor:pointer; transform: scale(1.35); transform-origin:left center; accent-color: var(--accent); }
label.task{ user-select:none; }

/* geändert: kein Durchstreichen mehr bei erledigten Punkten */
label.task.done{ 
  text-decoration: none !important;
  color:#38569b;
}

.controls{ display:flex; gap:8px; align-items:center; justify-self:end; }
.btn{ padding:8px 12px; border-radius:8px; border:1px solid var(--border); background:#fff; cursor:pointer; font-size:14px; }
.btn.primary{ background:var(--accent); color:#fff; border:0; }
.btn[disabled]{ opacity:.55; cursor:not-allowed; }
.locked-indicator{ font-size:12px; color:#9ca3af; padding-left:6px; }
.editing{ outline: 2px dashed rgba(37,99,235,0.2); border-radius:8px; }

.bottom{ background:#fff; border:1px solid var(--border); border-radius:10px; padding:15px; display:grid; grid-template-columns: 1fr; gap:12px; }
.grid3{ display:grid; grid-template-columns: 1fr 1fr; gap:12px; }
.sig-wrap{ display:flex; flex-wrap:wrap; gap:10px; align-items:flex-start; }
.sig-box{ border:1px dashed #cbd5e1; padding:8px; background:#f9fafb; }
canvas#signature{ background:#fff; border:1px solid var(--border); border-radius:8px; width:450px; height:160px; touch-action:none; cursor: crosshair; }
.bottom-actions{ display:flex; gap:10px; justify-content:flex-end; flex-wrap:wrap; }


/* ==== Minimaler Patch (nur Farben & kein Durchstrich) ==== */
ul#list li.is-checked label.task { color: #15803d !important; }   /* grün wenn abgehakt */
ul#list li:not(.is-checked) label.task { color: #dc2626 !important; } /* rot wenn offen */
label.task.done { text-decoration: none !important; } /* Sicherheit: nie durchgestrichen */

/* Sichtbarkeit der Checkboxen sicherstellen */
ul#list li input[type="checkbox"]{
  display: inline-block !important;
  opacity: 1 !important;
}