:root { --ssr-ci:#E15501; --ssr-ci-ink:#fff; --ssr-border:#e3e3e3; --ssr-text:#111; }
.ssr-wrap { border:1px solid var(--ssr-border); padding:16px; border-radius:12px; background:#fff; color:var(--ssr-text); }
.ssr-form .ssr-grid { display:grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap:12px; }
.ssr-form label { display:flex; flex-direction:column; gap:6px; font-weight:600; }
.ssr-form input, .ssr-form select { padding:10px; border-radius:8px; border:1px solid #ccc; }
.ssr-btn { margin-top:12px; padding:10px 16px; border:none; border-radius:10px; background:var(--ssr-ci); color:var(--ssr-ci-ink); cursor:pointer; }
.ssr-btn[disabled] { opacity:.55; cursor:not-allowed; }
.ssr-btn:hover { filter:brightness(0.96); }
.ssr-result { margin-top:18px; }
.ssr-table { width:100%; border-collapse:collapse; }
.ssr-table th, .ssr-table td { border:1px solid #eee; padding:8px; }
.ssr-table thead th { background:#f7f7f7; }
.ssr-note { margin-top:10px; font-size:.9rem; color:#444; }
.ssr-sketch-wrap { margin-top:14px; }
#ssr_sketch { width:100%; height:auto; max-height:340px; display:block; }
.ssr-actions { margin-top:8px; }

/* Ecken-Karten unter dem Grid */
.ssr-corner-section { grid-column:1 / -1; width:100%; margin-top:6px; }
.ssr-corner-section > .label { display:block; font-weight:700; margin:4px 0 6px; }
.ssr-corner-cards { display:flex; gap:10px; flex-wrap:wrap; width:100%; }
.ssr-corner-card { flex:1 1 180px; max-width:320px; min-width:180px; border:1px solid #ddd; border-radius:10px; padding:10px; box-sizing:border-box; cursor:pointer; transition: box-shadow .2s, border-color .2s; }
.ssr-corner-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,.06); }
.ssr-corner-card input[type="radio"] { display:none; }
.ssr-corner-card.selected { border-color: var(--ssr-ci); box-shadow: 0 0 0 2px rgba(225,85,1,.2); }
.ssr-corner-card .label { display:block; font-weight:700; margin-bottom:6px; color: var(--ssr-text); }
.ssr-corner-card.selected .label { color: var(--ssr-ci); }

/* Deutliche Pflicht-Checkbox */
.ssr-ack-box { 
  grid-column:1 / -1;
  margin:10px 0 4px;
  padding:12px;
  border:2px solid var(--ssr-ci);
  border-radius:10px;
  background:#fff8f2;
}
.ssr-ack-label { display:flex; align-items:flex-start; gap:10px; font-size:15px; line-height:1.35; }
.ssr-ack-label input[type="checkbox"]{ margin-top:2px; transform: scale(1.2); }
.ssr-ack-box.attention { animation: ssrShake .35s ease-in-out 0s 1; }
@keyframes ssrShake { 0%{transform:translateX(0)} 25%{transform:translateX(-3px)} 50%{transform:translateX(3px)} 75%{transform:translateX(-2px)} 100%{transform:translateX(0)} }