/* jahresplanung.css — Fragebogen und Klärliste (ADR-056). Farben nur aus farben.css, Formen aus bausteine.css. */
#inhalt .jp-frage, #inhalt .jp-punkt {
  background: var(--karte); border: 1px solid var(--bs-kante); border-radius: var(--bs-rund);
  box-shadow: var(--bs-schatten); padding: 20px; display: grid; gap: 12px; max-width: 720px;
}
#inhalt .jp-frage h2 { margin: 0; font-size: 1.35rem; color: var(--text); }
#inhalt .jp-satz { margin: 0; color: var(--text-leise); }
#inhalt .jp-leise { color: var(--text-leise); font-size: .92rem; margin: 0; }
#inhalt .jp-punkte { display: flex; gap: 6px; margin: 4px 0 12px; }
#inhalt .jp-punkte i { width: 28px; height: 6px; border-radius: 3px; background: var(--rand); }
#inhalt .jp-punkte i.an { background: var(--akzent); }
#inhalt .jp-zeitraum { display: grid; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--rand); }
#inhalt .jp-zeile { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
#inhalt .jp-feld { margin: 0; display: grid; gap: 4px; color: var(--text); font-weight: 600; }
#inhalt .jp-prio, #inhalt .jp-wahl { display: flex; gap: 8px; flex-wrap: wrap; }
#inhalt .jp-prio-knopf, #inhalt .jp-wahl-knopf {
  min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1.5px solid var(--rand);
  background: var(--karte); color: var(--text); font-weight: 600; cursor: pointer;
}
#inhalt .jp-prio-knopf.an, #inhalt .jp-wahl-knopf.an { border-color: var(--akzent); background: var(--akzent); color: var(--auf-akzent); }
#inhalt .jp-prio { align-items: center; }
#inhalt .jp-prio-wort { color: var(--text); font-weight: 600; margin-right: 4px; }
#inhalt .jp-prio-knopf { min-width: 52px; padding: 0 12px; }
#inhalt .jp-entfernen { justify-self: end; background: none; border: 0; color: var(--text-leise); text-decoration: underline; cursor: pointer; padding: 8px 4px; min-height: 44px; font: inherit; }
#inhalt .jp-ausweich { display: grid; gap: 6px; }
#inhalt .jp-fuss { display: flex; gap: 10px; justify-content: space-between; margin-top: 16px; max-width: 720px; }
#inhalt .jp-fuss .bs-knopf { min-width: 160px; justify-content: center; }
#inhalt .jp-zaehler { color: var(--text-leise); margin: 0 0 8px; }
#inhalt .jp-punkt-satz { font-size: 1.25rem; line-height: 1.35; color: var(--text); }
#inhalt .jp-punkt .bs-jetzt-wort { color: var(--text-leise); }
#inhalt .jp-detail { margin: 0; padding: 10px 14px; border-left: 3px solid var(--akzent); background: var(--hintergrund); color: var(--text); white-space: pre-wrap; }
#inhalt .jp-vorschlag { margin: 0; color: var(--text); }
#inhalt .jp-knoepfe { display: flex; gap: 10px; flex-wrap: wrap; }
#inhalt .jp-knoepfe .bs-knopf, #inhalt .jp-knoepfe .bs-knopf-leise { min-height: 48px; }
@media (max-width: 560px) {
  #inhalt .jp-fuss .bs-knopf, #inhalt .jp-fuss .bs-knopf-leise { flex: 1; min-width: 0; }
  #inhalt .jp-knoepfe > * { flex: 1 1 100%; }
}

/* ---------- Cockpit-Zeile (jpCockpit) ---------- */
#inhalt .jp-cockpit { display: grid; gap: 10px; }
#inhalt .jp-cockpit-titel { font-size: 1.15rem; color: var(--text); }
#inhalt .jp-cockpit-satz { margin: 0; color: var(--text); }
#inhalt .jp-cockpit-satz.stufe-achtung { color: var(--orange); }
#inhalt .jp-balken { height: 10px; border-radius: 5px; background: var(--rand); overflow: hidden; }
#inhalt .jp-balken-wert { display: block; height: 100%; border-radius: 5px; background: var(--akzent); }
#inhalt .jp-orte { display: grid; gap: 4px 16px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
#inhalt .jp-cockpit-orte { max-width: 640px; }
#inhalt .jp-ort summary { cursor: pointer; color: var(--text); min-height: 32px; display: list-item; }
#inhalt .jp-ort p { margin: 2px 0 6px 18px; }

/* ---------- Probelauf der GF ---------- */
#inhalt .jp-schalter { display: flex; gap: 12px; align-items: center; min-height: 44px; color: var(--text); padding: 4px 0; border-bottom: 1px solid var(--rand); }
#inhalt .jp-schalter:last-child { border-bottom: 0; }
#inhalt .jp-schalter input { width: 22px; height: 22px; accent-color: var(--akzent); }
#inhalt .jp-probe-ende { margin-top: 20px; }