/* ==========================================================================
   Seite „Abo“ · Modul-Code ABO · id „billing“ · Route #abo
   Skript: public/js/pages/billing.js

   Oben „Dein Plan“ in drei Spalten (gebuchter Plan groß wie A's Preise,
   Abo-Zustand mit LED, wirksame Grenzen als Eckdaten). Darunter die
   Kreuzschiene aus A, nach Bereichen gruppiert; die aktuelle Spalte trägt
   die Programmkante. Unter 720 px passt die Matrix ohne Querscrollen, ihr
   Fuß weicht der Planliste (A's .plans-s). Nur Tokens aus tokens.css.
   ========================================================================== */

/* ---------- Dein Plan ------------------------------------------------------------- */

.page-billing .abo-now__grid {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 4fr) minmax(0, 5fr);
  gap: 20px 32px;
  padding: 6px 2px 2px;
}
.page-billing .abo-now__plan,
.page-billing .abo-now__sub,
.page-billing .abo-now__lim { display: grid; gap: 8px; align-content: start; min-width: 0; }
.page-billing .abo-now__sub,
.page-billing .abo-now__lim { padding-left: 24px; border-left: 1px solid var(--line); }

.page-billing .abo-now__name {
  margin-top: 4px;
  font: 600 44px/1 var(--f-cond);
  letter-spacing: -0.01em;
  color: var(--ink);
}
.page-billing .abo-now__price { font: 400 12.5px/1.3 var(--f-mono); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.page-billing .abo-now__eff { display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; font: 500 12px/1.3 var(--f-mono); color: var(--ink-2); }
.page-billing .abo-now__sub .st { margin-top: 4px; font-size: 13px; color: var(--ink); }
.page-billing .abo-now__line { color: var(--ink-2); max-width: 40ch; }

/* Wirksame Grenzen: ui.facts (Regeln in ui.css); die Kanäle-Zeile trägt einen Nutzungsbalken, daher mittig */
.page-billing .abo-facts .facts__row { align-items: center; min-height: 34px; padding-block: 6px; font-size: 12px; }
.page-billing .abo-facts dd { color: var(--ink); }
.page-billing .abo-facts dd.is-muted { color: var(--ink-3); }

/* ---------- Kreuzschiene --------------------------------------------------------------- */

.page-billing .abo-mx .matrix__price { font-size: 40px; }
.page-billing .abo-mx .matrix thead th { padding-top: 20px; padding-bottom: 18px; }
.page-billing .abo-mx .matrix tr.matrix__grp th { padding-top: 22px; }
.page-billing .abo-mx .matrix tbody tr:not(.matrix__grp) th { font-size: 14px; }
.page-billing .abo-mx .matrix tfoot td { padding-top: 16px; padding-bottom: 18px; }

/* Planliste: nur auf schmalen Bildschirmen */
.page-billing .abo-plans { display: none; list-style: none; margin: 0; padding: 0; }
.page-billing .abo-per-s { display: none; }

/* ---------- Schmal ------------------------------------------------------------------------ */

@media (max-width: 1024px) {
  .page-billing .abo-now__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .page-billing .abo-now__lim { grid-column: 1 / -1; padding-left: 0; border-left: 0; }
}

@media (max-width: 720px) {
  .page-billing .abo-now__grid { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .page-billing .abo-now__sub { padding: 16px 0 0; border-left: 0; border-top: 1px solid var(--line); }
  .page-billing .abo-now__name { font-size: 36px; }

  /* Matrix wie A mobil: feste Spalten, kein Querscrollen; Aktionen in der Planliste */
  .page-billing .abo-mx .matrix { min-width: 0; }
  .page-billing .abo-mx .matrix col.matrix__f { width: 36%; }
  .page-billing .abo-mx .matrix thead th { padding: 14px 6px 12px 8px; }
  .page-billing .abo-mx .matrix thead th:first-child { padding-left: 12px; }
  .page-billing .abo-mx .matrix__plan { flex-wrap: wrap; gap: 4px; font-size: 9.5px; letter-spacing: 0.04em; }
  .page-billing .abo-mx .matrix__plan .tag { display: none; }
  .page-billing .abo-mx .matrix__price { font-size: 19px; }
  .page-billing .abo-mx .matrix thead th:not(:nth-child(2)) .abo-cur,
  .page-billing .abo-per-l { display: none; }
  .page-billing .abo-per-s { display: inline; }
  .page-billing .abo-mx .matrix__per { font-size: 9.5px; }
  .page-billing .abo-mx .matrix tbody th { padding: 9px 8px 9px 12px; font-size: 12.5px; line-height: 1.35; }
  .page-billing .abo-mx .matrix tbody tr:not(.matrix__grp) th { font-size: 12.5px; }
  .page-billing .abo-mx .matrix tr.matrix__grp th { padding: 16px 8px 6px 12px; }
  .page-billing .abo-mx .matrix td { padding: 9px 4px; text-align: center; font-size: 11px; }
  .page-billing .abo-mx .matrix tfoot { display: none; }

  .page-billing .abo-plans { display: grid; gap: 8px; padding: 14px 12px; border-top: 1px solid var(--line); }
  .page-billing .abo-plans__row {
    display: grid;
    gap: 10px;
    padding: 12px 14px 14px;
    border: 1px solid var(--line-2);
    border-radius: var(--r1);
    background: var(--panel);
  }
  .page-billing .abo-plans__row.is-current { box-shadow: inset 2px 0 0 var(--pgm); }
  .page-billing .abo-plans__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; }
  .page-billing .abo-plans__name { font: 600 19px/1.1 var(--f-cond); color: var(--ink); }
  .page-billing .abo-plans__price { margin-left: auto; font: 400 12.5px/1.3 var(--f-mono); color: var(--ink-2); font-variant-numeric: tabular-nums; }
  .page-billing .abo-plans__tag { color: var(--ink-2); }
  .page-billing .abo-plans__act .matrix__note { margin-top: 0; }
  .page-billing .abo-plans__act .btn + .matrix__note { margin-top: 8px; }
}