:root {
  --blau: #2F5597;
  --blau-dunkel: #24406f;
  --tint: #B4C7E7;
  --tint-hell: #DAE3F3;
  --tint-sehr-hell: #E9EFF9;
  --text: #1f2430;
  --grau: #6b7280;
  --linie: #e2e6ee;
  --warn: #b42318;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  color: var(--text);
  background: #f6f8fc;
  line-height: 1.55;
}
header {
  background: #fff;
  border-bottom: 1px solid var(--linie);
  padding: 18px 24px;
}
header img { height: 50px; display: block; }
.balken { height: 4px; background: var(--tint-hell); }
.balken div {
  height: 100%;
  width: 0;
  background: var(--blau);
  transition: width .25s ease;
}
main {
  max-width: 760px;
  margin: 0 auto;
  padding: 32px 20px 80px;
}
.karte {
  background: #fff;
  border: 1px solid var(--linie);
  border-radius: 10px;
  padding: 32px;
}
h1 { font-size: 27px; margin: 0 0 6px; color: var(--blau); line-height: 1.25; }
h2 { font-size: 22px; margin: 0 0 4px; color: var(--blau); line-height: 1.3; }
.lead { color: var(--grau); margin: 0 0 28px; }
.intro p { margin: 0 0 14px; }
.intro .betont { font-weight: bold; }
.seite { display: none; }
.seite.aktiv { display: block; }
.frage { padding: 22px 0; border-top: 1px solid var(--linie); }
.frage:first-of-type { border-top: none; padding-top: 8px; }
.aussage { margin: 0 0 14px; }
.freiwillig {
  font-size: 12px; color: var(--grau); border: 1px solid var(--linie);
  border-radius: 10px; padding: 1px 8px; white-space: nowrap;
}
.skala { display: flex; gap: 8px; }
.stufe { flex: 1; position: relative; cursor: pointer; }
.stufe input { position: absolute; opacity: 0; width: 0; height: 0; }
.stufe .zahl {
  display: block; text-align: center; font-weight: bold; font-size: 17px;
  border: 1px solid var(--tint); border-radius: 8px; padding: 10px 0;
  background: #fff; transition: background .12s, border-color .12s, color .12s;
}
.stufe .wort {
  display: block; text-align: center; font-size: 12px; color: var(--grau);
  margin-top: 6px; hyphens: auto;
}
.stufe:hover .zahl { border-color: var(--blau); }
.stufe input:focus-visible + .zahl { outline: 2px solid var(--blau); outline-offset: 2px; }
.stufe input:checked + .zahl { background: var(--blau); border-color: var(--blau); color: #fff; }
.stufe input:checked ~ .wort { color: var(--blau); font-weight: bold; }
textarea {
  width: 100%; font-family: inherit; font-size: 15px; padding: 10px 12px;
  border: 1px solid var(--tint); border-radius: 8px; resize: vertical;
}
textarea:focus { outline: 2px solid var(--blau); outline-offset: 1px; border-color: var(--blau); }
.hinweis { display: none; color: var(--warn); font-size: 13px; margin: 8px 0 0; }
.frage.fehlt .hinweis { display: block; }
.frage.fehlt .zahl, .frage.fehlt textarea { border-color: var(--warn); }
nav {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 28px; gap: 12px;
}
button {
  font-family: inherit; font-size: 15px; padding: 11px 26px;
  border-radius: 8px; border: 1px solid var(--blau); cursor: pointer;
}
.weiter { background: var(--blau); color: #fff; }
.weiter:hover { background: var(--blau-dunkel); border-color: var(--blau-dunkel); }
.zurueck { background: #fff; color: var(--blau); }
.zurueck:hover { background: var(--tint-sehr-hell); }
.zaehler { color: var(--grau); font-size: 13px; }
.fehlermeldung {
  display: none; background: #fdf1f0; border: 1px solid #f3c9c5;
  color: var(--warn); border-radius: 8px; padding: 12px 14px;
  margin-top: 20px; font-size: 14px;
}
.fehlermeldung.an { display: block; }
footer {
  text-align: center; color: var(--grau); font-size: 12px;
  padding: 0 20px 40px;
}
.tagline { letter-spacing: .02em; }
.tagline b { color: var(--blau); }
@media (max-width: 620px) {
  .karte { padding: 22px 18px; }
  .skala { flex-wrap: wrap; }
  .stufe { flex: 1 1 18%; min-width: 60px; }
  .stufe .wort { font-size: 11px; }
  h1 { font-size: 23px; }
}

.balkenzeile { margin: 0 0 18px; }
.balkenkopf { display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 6px; gap: 12px; }
.balkenkopf b { font-size: 16px; }
.balkenwert { color: var(--grau); font-size: 13px; white-space: nowrap; }
.balkenwert .zahlgross { color: var(--text); font-weight: bold; font-size: 15px; }
.balkenbahn { background: var(--tint-sehr-hell); border-radius: 5px; height: 14px; }
.balkenbahn i { display: block; height: 100%; background: var(--blau); border-radius: 5px; }
.balkenbahn.schwach i { background: #b42318; }
.balkenbahn.brauchbar i { background: #b07d00; }
.stelle { border: 1px solid var(--linie); border-left: 4px solid var(--blau);
  border-radius: 8px; padding: 16px 18px; margin: 0 0 14px; }
.stelle h3 { margin: 0 0 8px; font-size: 17px; color: var(--blau); }
.stelle .platz { display: inline-block; background: var(--blau); color: #fff;
  border-radius: 999px; font-size: 12px; padding: 1px 9px; margin-right: 8px;
  vertical-align: 2px; }
.stelle p { margin: 0; }
.kasten { background: var(--tint-sehr-hell); border-radius: 8px; padding: 18px 20px;
  margin: 26px 0 0; }
.kasten h3 { margin: 0 0 8px; color: var(--blau); font-size: 17px; }
.kasten p { margin: 0; }
.eigenetexte { border-top: 1px solid var(--linie); margin-top: 28px; padding-top: 20px; }
.eigenetexte h3 { font-size: 15px; margin: 0 0 4px; }
.eigenetexte blockquote { margin: 0 0 16px; padding-left: 14px;
  border-left: 3px solid var(--tint); color: #384152; }
.knopfzeile { margin-top: 28px; display: flex; gap: 10px; flex-wrap: wrap; }
.knopfzeile a { display: inline-block; text-decoration: none; font-size: 15px;
  padding: 11px 26px; border-radius: 8px; border: 1px solid var(--blau); }
.knopfzeile a.haupt { background: var(--blau); color: #fff; }
.knopfzeile a.neben { background: #fff; color: var(--blau); }
.fussnote { color: var(--grau); font-size: 12px; margin-top: 22px; }
@media print { nav, .knopfzeile, .balken { display: none; } }
/* Auf dem Handy muessen alle fuenf Stufen nebeneinander bleiben: als Raster
   statt als umbrechender Flex, sonst rutscht die 5 in eine eigene Zeile. */
@media (max-width: 620px) {
  .skala { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; }
  .stufe { min-width: 0; }
  .stufe .zahl { font-size: 15px; padding: 9px 0; }
  .stufe .wort { font-size: 10px; line-height: 1.25; }
  .karte { padding: 20px 14px; }
  .balkenkopf { flex-wrap: wrap; gap: 2px 10px; }
}

/* Auswertung */
.zeile { margin: 0 0 16px; }
.zkopf { display: flex; justify-content: space-between; align-items: baseline;
  gap: 12px; margin-bottom: 5px; flex-wrap: wrap; }
.zkopf b { font-size: 16px; }
.zwert { color: var(--grau); font-size: 13px; }
.zwert .gross { color: var(--text); font-weight: bold; font-size: 15px; }
.bahn { background: var(--tint-sehr-hell); border-radius: 5px; height: 13px; }
.bahn i { display: block; height: 100%; background: var(--blau); border-radius: 5px; }
.bahn.schwach i { background: #b42318; }
.bahn.brauchbar i { background: #b07d00; }
.spreiz { height: 6px; margin-top: 3px; background: var(--tint-sehr-hell); border-radius: 3px; }
.spreiz i { display: block; height: 100%; background: var(--grau); border-radius: 3px; }
.spreiz.uneinig i { background: #b42318; }
.befund { font-size: 12px; color: var(--grau); margin-top: 4px; }
table.werte { width: 100%; border-collapse: collapse; font-size: 14px; margin-top: 8px; }
table.werte th, table.werte td { text-align: left; padding: 6px 8px;
  border-bottom: 1px solid var(--linie); }
table.werte th { color: var(--grau); font-weight: normal; font-size: 12px; }
table.werte td.z { text-align: right; white-space: nowrap; }
.warnung { background: #fdf1f0; border: 1px solid #f3c9c5; color: var(--warn);
  border-radius: 8px; padding: 12px 14px; margin: 0 0 20px; font-size: 14px; }
blockquote { margin: 0 0 12px; padding-left: 14px; border-left: 3px solid var(--tint);
  color: #384152; }
.leiste { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 24px; }
.leiste a { text-decoration: none; font-size: 14px; padding: 7px 14px;
  border-radius: 999px; border: 1px solid var(--tint); color: var(--blau); }
.leiste a.an { background: var(--blau); color: #fff; border-color: var(--blau); }
@media print { .leiste, nav { display: none; } }