:root { --border:#e3e3e3; --muted:#666; --bg:#f7f7f7; }
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:var(--bg);color:#111}
header{background:#fff;border-bottom:1px solid var(--border)}
header .wrap{display:flex;align-items:center;gap:12px;padding:12px 16px;max-width:1100px;margin:0 auto}
.brand{font-weight:700}
.spacer{flex:1}
nav a{color:#111;text-decoration:none;margin-left:12px}
.wrap{max-width:1100px;margin:0 auto;padding:16px}
.card{background:#fff;border:1px solid var(--border);border-radius:12px;padding:16px;margin:16px 0;box-shadow:0 1px 2px rgba(0,0,0,.04)}
.muted{color:var(--muted)}
.grid{display:grid;grid-template-columns:1fr;gap:16px}
@media(min-width:900px){.grid{grid-template-columns:1fr 1fr}}
label{display:block;margin:8px 0 4px}
input[type=text],input[type=password],select,textarea{width:100%;padding:10px;border:1px solid var(--border);border-radius:10px;background:#fff}
textarea{min-height:90px}
button{padding:10px 14px;border:1px solid #111;border-radius:12px;background:#111;color:#fff;cursor:pointer}
button.secondary{background:#fff;color:#111}
.table{width:100%;border-collapse:collapse}
.table th,.table td{border-top:1px solid var(--border);padding:8px;vertical-align:top}
.alert{padding:12px;border:1px solid var(--border);border-radius:12px;background:#fff5f5}
.pill{display:inline-block;padding:2px 10px;border:1px solid var(--border);border-radius:999px}
.survey-section{margin-top:18px}
.statement{font-weight:600;margin-top:14px}
.scale{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin:6px 0 10px}
.scale10{display:grid;grid-template-columns:repeat(10,1fr);gap:6px;margin:6px 0 10px}
.choice{border:1px solid var(--border);border-radius:10px;padding:8px;text-align:center;cursor:pointer;user-select:none}
.choice input{margin-right:6px}
.choice small{display:block;color:var(--muted);margin-top:4px}
.two-rows{display:grid;grid-template-columns:90px 1fr;gap:10px;align-items:start;margin:8px 0}
.canvas{width:100%;height:auto}
.footer-note{font-size:12px;color:var(--muted);margin-top:12px}

details.details{
  border:1px solid var(--border);
  border-radius:12px;
  padding:10px 12px;
  background:#fff;
  margin:12px 0;
}
details.details > summary{cursor:pointer}
.legend-scroll{
  max-height:620px;
  overflow:auto;
  border-top:1px solid var(--border);
  margin-top:10px;
}

/* Stacked Likert distribution (Ampel) */
.stacked{display:flex; height:14px; border:1px solid var(--border); border-radius:999px; overflow:hidden; background:#fff}
.seg{height:100%}
.lik5{background:#0b6b2b} /* dunkelgruen */
.lik4{background:#2f9e44} /* gruen */
.lik3{background:#f2c94c} /* gelb */
.lik2{background:#f2994a} /* orange */
.lik1{background:#eb5757} /* rot */
.stack-row{display:flex; align-items:center; gap:10px; margin:8px 0}
.stack-label{min-width:74px; font-weight:600; color:#222}
.stack-meta{color:var(--muted); font-size:12px}
.legend-likert{display:flex; flex-wrap:wrap; gap:10px; margin:10px 0}
.legend-likert span{display:inline-flex; align-items:center; gap:6px; font-size:12px; color:#222}
.swatch{width:12px; height:12px; border-radius:3px; border:1px solid rgba(0,0,0,0.15)}


/* Per-question Likert (Ampel) */
.qdist{border:1px solid var(--border); border-radius:12px; padding:10px 12px; background:#fff; margin:10px 0}
.qdist-title{font-size:13px; font-weight:600; margin-bottom:6px; color:#111}
.qdist .stack-label{min-width:54px}


/* Ampel-Farben (Tabellen) */
.num{white-space:nowrap;text-align:right;font-variant-numeric:tabular-nums}
.ampel{display:inline-block;padding:2px 8px;border-radius:8px;border:1px solid var(--border);min-width:64px;text-align:right}
.ampel.g5{background:#0b6623;color:#fff;border-color:#0b6623}
.ampel.g4{background:#2e8b57;color:#fff;border-color:#2e8b57}
.ampel.y3{background:#f6d365;color:#111;border-color:#e9c14b}
.ampel.o2{background:#f4a261;color:#111;border-color:#e38a44}
.ampel.r1{background:#e76f51;color:#fff;border-color:#e76f51}
.table-questions td:nth-child(2){min-width:360px}
@media (max-width: 800px){.table-questions td:nth-child(2){min-width:240px}}