:root{
  --bg:#e8f8e0;
  --panel:#ffffff;
  --brand:#2b602b;
  --brand-soft:#c5e6c0;
  --accent:#68a36e;
  --ink:#1f1f1f;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, "Noto Sans", "Comic Sans MS", sans-serif;
  background:var(--bg);
  color:var(--ink);
}
.app-header{
  position:sticky; top:0;
  display:flex; align-items:center; justify-content:center; gap:16px;
  padding:10px 16px; background:var(--brand-soft); z-index:10;
  border-bottom:1px solid #b6d7ad;
}
.logo{ position:absolute; left:16px; height:56px; border-radius:12px; box-shadow:0 2px 6px rgba(0,0,0,.15)}
.app-header h1{ margin:8px 0; color:var(--brand); font-weight:800; text-align:center; }
.zoom-controls{ position:absolute; right:12px; display:flex; gap:6px }
.zoom-controls button{
  border:1px solid #9fc89a; background:#fff; border-radius:10px; padding:6px 10px; cursor:pointer; font-weight:700;
}
.container{
  max-width: 1000px; margin: 24px auto; padding: 16px;
  background:var(--panel); border-radius:18px; box-shadow:0 10px 30px rgba(0,0,0,.08);
}
.toolbar{ display:flex; flex-direction:column; gap:12px; align-items:flex-start }
.toolbar .row{ display:flex; flex-wrap:wrap; gap:10px; align-items:center }
select,button{
  font-size:16px; padding:10px 12px; border-radius:12px; border:1px solid #cfd9cf; background:#fff;
}
button{ cursor:pointer }
button:active{ transform: translateY(1px) }
#btnSpeak{ background:var(--accent); color:#fff; border-color:var(--accent) }
#btnStop{ border-color:#d6a5a5 }
.lueckentext{
  margin-top:16px; font-size: clamp(18px, 2.8vw, 26px); line-height:1.9;
  text-align:left;
}
input.luecke{
  min-width: 120px; max-width: 260px; width: 140px;
  border:none; border-bottom:3px solid var(--accent);
  background:#f2fbf2; padding:6px 8px; margin:0 6px 2px;
  font: inherit; text-align:center; border-radius:6px 6px 0 0;
}
input.luecke:focus{ outline:2px dashed #8dc38f; outline-offset:2px; background:#e9f9ea }
.actions{ margin-top:18px; display:flex; gap:10px; align-items:center; justify-content:flex-start }
.footer{
  margin: 30px auto 20px; text-align:center; color:#4a4a4a; font-size:14px;
}
/* Print styles */
@media print{
  .app-header, .toolbar, .actions, .zoom-controls { display:none !important }
  body{ background:#fff }
  .container{ box-shadow:none }
  input.luecke{ border-bottom:2px solid #000; background:#fff }
}

#rateRange{ vertical-align: middle; }
#rateVal{ font-weight:700; margin-left:6px }

.ghost{background:#fff;border:1px dashed #c7c7c7}
.reveal{ background:#fff8c5 }
.correct{background:#e8ffe8}
.wrong{background:#ffe8e8}

.correct{ background:#e8ffe8 !important }
.wrong{ background:#ffe8e8 !important }
#score{ font-weight:700; margin-left:8px }
.modal{ position:fixed; inset:0; display:grid; place-items:center; background:rgba(0,0,0,.4); z-index:1000 }
.modal[hidden]{ display:none }
.modal-content{ width:min(900px, 92vw); background:#fff; border-radius:14px; padding:16px; box-shadow:0 20px 80px rgba(0,0,0,.35) }


.toolbar{ position: relative; z-index: 5; }
.lueckentext{ position: relative; z-index: 1; }
.lueckentext * { pointer-events: auto; }
select, button, input { pointer-events: auto; }