:root {
  --green:#4CAF50;
  --light:#f6fff7;
  --dark:#2e7d32;
}
*{box-sizing:border-box}
body{ margin:0; font-family:system-ui, Arial, sans-serif; background:var(--light); color:#222; }
header, footer{ padding:12px 16px; background:#fff; border-bottom:1px solid #e8e8e8; }
header .wrap, .container { max-width:1100px; margin:0 auto; display:flex; align-items:center; gap:14px; }
.logo { height:48px; }
h1.title { flex:1; text-align:center; margin:0; color:var(--green); font-weight:800; letter-spacing:.3px; }
.main { max-width:1100px; margin:20px auto; background:#fff; border:1px solid #eaeaea; border-radius:14px; padding:20px; box-shadow:0 6px 14px rgba(0,0,0,.05); }
.toolbar{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:12px; }
.button{ background:var(--green); color:#fff; border:none; border-radius:12px; padding:10px 14px; text-decoration:none; display:inline-flex; align-items:center; gap:8px; cursor:pointer; box-shadow:0 2px 0 rgba(0,0,0,.08); }
.button.secondary{ background:#eee; color:#333; }
.info{ padding:10px 12px; background:#f3fff4; border:1px solid #e6f8e8; border-radius:10px; }
.row{ display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin:10px 0; }
select, input, textarea{ padding:8px 10px; border:1px solid #ccc; border-radius:10px; }
.badge{ background:#e8f5e9; color:var(--dark); border:1px solid #cce8cf; padding:4px 8px; border-radius:999px; }
.sentence{ line-height:2.2; font-size:1.35rem; padding:16px; border:2px dashed #cde9cf; border-radius:10px; min-height:72px; }
.sentence span.word{ padding:3px 6px; margin:2px; display:inline-block; border-radius:6px; cursor:pointer; user-select:none; }
.sentence span.word:hover{ outline:2px solid #cfead1; }
.sentence span.word.found{ background:#ffeaa7; outline:2px solid #ffca28; }
.metrics{ display:flex; gap:12px; flex-wrap:wrap; }
.card{ border:1px solid #eee; border-radius:12px; padding:12px; background:#fff; }
hr{ border:none; border-top:1px solid #eee; margin:16px 0; }
footer{ border-top:1px solid #eee; border-bottom:none; color:#666; text-align:center; }
.affirm{ font-weight:700; color:var(--dark); }
.hidden{ display:none; }

/* Korrekturmodus */
#correctionPanel{ margin-top:16px; }
.dnd-area{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.drop{ min-width:80px; min-height:36px; border:2px dashed #bbb; border-radius:10px; padding:6px 8px; display:inline-flex; align-items:center; justify-content:center; background:#fafafa; }
.token{ display:inline-block; border:1px solid #ccc; border-radius:10px; padding:6px 8px; background:#fff; cursor:grab; }
.drop.filled{ border-color:#4CAF50; background:#f3fff4; }
.token.dragging{ opacity:.7; }
.table{ width:100%; border-collapse:collapse; }
.table th, .table td{ border-bottom:1px solid #eee; padding:8px; text-align:left; }
.table th{ background:#f9f9f9; }