/* ── PLÄNE-EDITOR (Verwaltung) ────────────────────────────────────
   Die Tarifwahl im Bearbeitungsmodus (body.plan-edit): der mittlere
   Kreis ist ein Formular im Satz der Vorschau — Weiß auf Schwarz —,
   links und rechts stehen zwei feste Spalten im Satz der Menüs der App:
   links Freischaltungen, Tarifwahl und Knöpfe, rechts die Kosten.    */

/* Abgeschlossen wird im Editor nichts: der Generieren-Knopf tritt ab.
   startup.css zeigt Knopf und Schalter in der Tarifwahl mit !important —
   hier gilt das Stärkere. */
body.plan-edit footer {
  visibility: hidden;
}
body.lg-abo.plan-edit footer .gen-wrap,
body.lg-abo.plan-edit #gen-btn {
  visibility: hidden !important;
  pointer-events: none !important;
}
body.lg-abo.plan-edit #ab-schalter {
  display: none !important;
}
/* 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-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::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. Seine
   Linie war heller als die der Credits und wurde beim Tippen schwarz:
   jetzt tragen alle Felder dieselbe graue Linie, das aktive eine weiße. */
.ab-inhalt .pe-field,
.ab-inhalt .pe-field::placeholder {
  font-size: 16px;
}
.ab-inhalt .pe-field {
  color: var(--white);
  border-bottom: 1px solid rgba(255, 255, 255, 0.28);
  transition: border-color 0.2s;
}
.ab-inhalt .pe-field:focus {
  border-bottom-color: var(--white);
}
.ab-inhalt .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;
}
/* Die Leistungen im Satz der Liste (.ab-liste, plans.css): so lesen Kunden
   sie im Kreis. Die Höhe folgt den Zeilen (plan-editor.js fitLines) — die
   Mindesthöhe der Textfelder (chips.css) gilt hier nicht. */
.ab-inhalt .pe-lines,
.ab-inhalt .pe-lines::placeholder {
  font-size: 13px;
  font-weight: 300;
  font-style: normal;
}
.ab-inhalt .pe-lines {
  width: 18em;
  min-height: 0;
  line-height: 1.6;
  color: var(--auf-schwarz-55);
  resize: none;
  overflow: hidden;
}
.ab-inhalt .pe-lines:focus {
  color: var(--white);
}
/* Die Fußzeile im Satz der Anmerkung (.ab-fuss, plans.css) */
.ab-inhalt .pe-footnote,
.ab-inhalt .pe-footnote::placeholder {
  font-size: 10px;
}
.ab-inhalt .pe-footnote {
  width: 26em;
  max-width: none;
  color: var(--auf-schwarz-55);
}
/* Über den Leistungen kein Strich: unter jedem Feld liegt schon eine
   Linie. Der Abstand bleibt. */
.ab-strich.pe-strich {
  background: none;
}
.pe-badge {
  font-size: 9px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 10px;
}

/* ── Die Spalten links und rechts ──
   Der Träger ist kein Kasten: .app ist ein Raster aus drei Zeilen, ein
   weiteres Element schöbe die Fußleiste in eine vierte. Die Spalten
   stehen, wo die Aufklappmenüs der App aufgehen — vom Bild oben bis an den
   Fensterrand unten (die Fußleiste ist im Editor fort) — und werden in
   schmalen Fenstern schmaler, statt über den Kreis zu reichen. */
#pe-panes {
  display: contents;
}
#pe-panes[hidden],
#pe-panes [hidden] {
  display: none !important;
}
.pe-pane {
  position: fixed;
  top: calc(2 * var(--pad) + 42px);
  bottom: var(--pad);
  width: min(var(--sw), max(200px, calc(50vw - var(--ab-d, 430px) / 2 - 16px)));
  z-index: 200;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  background: var(--white);
  font-family: var(--sans);
}
.pe-left {
  left: 0;
  text-align: right;
}
.pe-right {
  right: 0;
  text-align: left;
}
.pe-scroll {
  overflow: hidden auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  padding-bottom: 12px;
}
/* Ein Abschnitt wie eine Kategorie im Menü der App (.sec), etwas dichter */
.pe-sec {
  padding: 16px 22px 0;
}
/* Die Überschrift — wie .sec-label */
.pe-title {
  display: block;
  font-size: var(--t-label-groesse);
  font-weight: var(--t-label-gewicht);
  letter-spacing: var(--t-label-sperrung);
  line-height: var(--t-label-zeilenhoehe);
  text-transform: uppercase;
  color: var(--light);
  margin-bottom: 9px;
}
.pe-left .pe-title {
  margin-right: calc(-1 * var(--t-label-sperrung)); /* rechte Flucht mit den Chips */
}
.pe-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 10px;
  margin-bottom: 6px;
}
.pe-left .pe-chips {
  justify-content: flex-end;
}
/* Die Auflösung wie im Menü (#res-chips, chips.css): was vierfach
   hochgerechnet wird, steht unter seiner Basis — hier in zwei Zeilen
   (1, 2, 3, 4 MP und darunter 8, 12, 16 MP), damit die Spalte kurz bleibt. */
.pe-res {
  display: grid;
  grid-template-columns: repeat(4, auto);
  justify-content: end;
  justify-items: end;
}
.pe-res > :nth-child(5) {
  grid-column: 2;
}
/* Die Wählbaren — wie .chip: kein Rahmen, keine Fläche; gewählt schwarz
   und kräftig, mit einem Strich um die Buchstaben. Eigene Klassen, weil
   die App .chip und .tag im ganzen Dokument sucht (history/work-state.js). */
.pe-chip {
  font: inherit;
  font-size: var(--t-chip-groesse);
  font-weight: var(--t-chip-gewicht);
  color: var(--light);
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px 0;
  white-space: nowrap;
  transform-origin: center;
  transition:
    color 0.12s,
    transform 0.12s;
}
.pe-chip:hover {
  color: var(--mid);
  transform: translateY(-0.72px) scale(1.143);
}
.pe-chip[aria-pressed='true'] {
  color: var(--black);
  -webkit-text-stroke: 0.4px currentColor;
  transform: translateY(-0.72px) scale(1.143);
}
.pe-chip[aria-invalid='true'] {
  color: var(--red);
}
/* Steht fest (der Plan nach der Registrierung, plan-editor.js syncSignup) */
.pe-chip[aria-disabled='true'] {
  cursor: default;
}
/* Eine Zeile aus Beschriftung und Zahl (Speicher, Reihenfolge, Kosten) */
.pe-line,
.pe-cost {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 14px;
  color: var(--mid);
}
.pe-line {
  justify-content: flex-end;
  margin-bottom: 8px;
}
.pe-line .pe-title {
  margin-bottom: 0;
}
.pe-cost {
  justify-content: space-between;
  margin-bottom: 4px;
}
.pe-pane input[type='number'] {
  width: 4.5em;
  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: 3px 0;
  outline: none;
  -moz-appearance: textfield;
}
.pe-pane input[type='number']::-webkit-inner-spin-button,
.pe-pane input[type='number']::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.pe-pane input[type='number']:focus {
  border-bottom-color: var(--black);
}
.pe-pane input[type='number'][aria-invalid='true'] {
  border-bottom-color: var(--red);
}
.pe-pane input[type='number']::placeholder {
  color: var(--light);
  font-style: italic;
}
.pe-left input[type='number'] {
  text-align: right;
}
.pe-usage,
.pe-note {
  font-size: 12px;
  color: var(--mid);
}
.pe-note {
  padding: 16px 22px 0;
}
.pe-sec .pe-note {
  padding: 0 0 6px;
}
/* Unten stehen die Knöpfe — sie rollen nicht mit */
.pe-foot {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 22px 16px;
  border-top: 1px solid var(--border);
}
.pe-left .pe-foot {
  align-items: flex-end;
}
.pe-right .pe-foot {
  align-items: flex-start;
}
.pe-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 10px 16px;
}
.pe-confirm {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  font-size: 13px;
  color: var(--black);
}
/* Gesperrt sah ein Verweis bisher aus wie ein freier */
#pe-panes .pf-link:disabled {
  opacity: 0.3;
  cursor: default;
}
#pe-panes .pf-link:disabled:hover {
  color: var(--mid);
}
.pe-msg {
  font-size: 13px;
  color: var(--mid);
}
.pe-msg:empty {
  display: none;
}