/* ── PLÄNE-EDITOR (Verwaltung) ────────────────────────────────────
   Die Tarifwahl im Bearbeitungsmodus (body.plan-edit): der mittlere
   Kreis ist ein Formular im Satz der Vorschau — Weiß auf Schwarz —, die
   Leiste darunter ist hell wie die übrigen Verwaltungsseiten.       */

/* Abgeschlossen wird im Editor nichts: der Generieren-Knopf tritt ab */
body.plan-edit footer {
  visibility: hidden;
}
/* Der Satz im Kreis nimmt sonst keine Klicks an (plans.css) */
body.plan-edit .ab-kreis.mitte .ab-inhalt {
  pointer-events: auto;
}

/* ── Formular im Kreis ── */
.pe-field {
  width: 100%;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  text-align: center;
  color: var(--white);
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 0;
  padding: 2px 0;
  outline: none;
  -moz-appearance: textfield;
}
.pe-field::-webkit-inner-spin-button,
.pe-field::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.pe-field:focus {
  border-bottom-color: var(--white);
}
.pe-field::placeholder {
  color: rgba(255, 255, 255, 0.3);
}
/* input[type='text'] (chips.css) wiegt schwerer als .pe-field und setzte
   die Textfelder schwarz auf 12 px — im schwarzen Kreis unsichtbar. */
.ab-inhalt .pe-field,
.ab-inhalt .pe-field::placeholder {
  font-size: 16px;
}
.ab-inhalt .pe-field {
  color: var(--white);
}
.pe-field[aria-invalid='true'] {
  border-bottom-color: #ff6b6b;
}
.pe-field option {
  color: var(--black);
}
.pe-price {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.25em;
}
/* Ohne .pe-price setzte input[type='text'] (chips.css) die Breite auf 100 % */
.pe-price .pe-amount {
  width: 100px;
  text-align: right;
}
/* Die Abrechnungsart: Auswahl im Satz des Zusatzes */
.pe-price .pe-suffix {
  width: auto;
  text-align: left;
  color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
}
.pe-price .pe-field:disabled {
  opacity: 0.4;
  cursor: default;
}
.pe-credits .pe-number {
  width: 5em;
  margin-right: 0.5em;
}
.pe-credits .pe-hint {
  width: 14em;
  margin-top: 4px;
}
.pe-features {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.pe-feature {
  display: flex;
  align-items: center;
  gap: 2px;
  cursor: pointer;
}
.pe-feature input[type='checkbox'] {
  accent-color: var(--white);
  margin: 0 6px 0 0;
}
.pe-feature .pe-mp {
  width: auto;
  padding: 0 2px;
}
.pe-feature .pe-mp:disabled {
  opacity: 0.4;
}
.pe-badge {
  font-size: 9px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 10px;
}

/* ── Leiste ── */
#plan-edit-bar {
  position: fixed;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  z-index: 200;
  width: min(1040px, calc(100vw - 32px));
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px 20px;
  background: var(--white);
  border-top: 1px solid var(--border);
  font-family: var(--sans);
}
#plan-edit-bar[hidden],
#plan-edit-bar [hidden] {
  display: none !important;
}
.pe-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px 24px;
}
.pe-f .pf-lbl {
  margin-bottom: 2px;
}
.pe-f select,
.pe-f input,
.pe-cost input {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 300;
  color: var(--black);
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  padding: 4px 0;
  outline: none;
}
.pe-f select:focus,
.pe-f input:focus,
.pe-cost input:focus {
  border-bottom-color: var(--black);
}
.pe-f [aria-invalid='true'] {
  border-bottom-color: var(--red);
}
.pe-narrow input {
  width: 5em;
}
.pe-check {
  margin: 0 0 4px;
}
.pe-usage {
  font-size: 12px;
  color: var(--mid);
  padding-bottom: 6px;
}
.pe-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
  margin-left: auto;
}
.pe-confirm {
  align-items: center;
  font-size: 13px;
  color: var(--black);
}
.pe-costs {
  align-items: center;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}
.pe-costs .pf-lbl {
  margin: 0;
}
.pe-cost {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--mid);
}
.pe-cost input {
  width: 4.5em;
}
.pe-msg {
  font-size: 13px;
  color: var(--mid);
  margin: 0;
}
.pe-msg:empty {
  display: none;
}