/* abrechnung — see kronenwerk.css for the tokens these rules read. */

/*
  ONE SUBSCRIPTION COVERS ONE COMPANY, and this file is what that fact looks like.

  Three surfaces share it because they share one subject — what a company costs and
  whether it has been paid for: the plan picker's discount band and struck-through list
  price, the company list's "not paid for" block, and the page that explains an additional
  company before one exists. Splitting them by URL would put the same struck price in two
  stylesheets, and the day the two disagreed one screen would be quietly selling a
  different offer from the other.

  Nothing here draws a card. A price is a line of a comparison the eye reads downwards; a
  rectangle around each one says these are separate objects rather than one ladder — and
  `card` is banned in this product's templates for exactly that reason.
*/

/*
  Two values this area invents, on a bare :root so both have a value before any theme has
  an opinion. The first is the tone of an offer: gold, which is this product's mark of
  something noteworthy rather than something alarming — a discount is good news and must
  not be drawn in the colour reserved for a failed payment. The second is the tone of an
  unpaid company, which is deliberately NOT the negative colour either: an abandoned
  checkout is an unfinished sentence, not an error, and painting it red would tell an owner
  that something has gone wrong with a company they simply have not bought yet.
*/
:root {
  --abrechnung-angebot: var(--gold-dunkel);
  --abrechnung-offen: var(--tinte-2);
}

/* ----------------------------------------------------- the discount band */

.abrechnung-rabattband {
  margin: var(--raum-3) 0;
  padding: var(--raum-2) var(--raum-3);
  border: 1px solid var(--gold-linie);
  border-radius: var(--radius);
  background: var(--gold-tief);
  max-width: 68ch;
}

.abrechnung-rabattband-titel {
  margin: 0 0 var(--raum-1);
  font-weight: 600;
  color: var(--abrechnung-angebot);
}

/* ------------------------------------------------- list price and saving */

/*
  The struck price sits ABOVE the amount charged and is smaller than it.

  Beside it, at the same size, the two figures read as a choice; the eye has to work out
  which one is being asked for. Above and smaller, the reading order is the sentence: this
  was the price, this is yours.
*/
.abrechnung-listenpreis {
  display: block;
  font-size: 13px;
  line-height: 1.4;
  color: var(--tinte-3);
}

.abrechnung-listenpreis s {
  text-decoration-thickness: 1px;
}

.abrechnung-ersparnis {
  display: block;
  margin-top: var(--raum-1);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--abrechnung-angebot);
}

/* --------------------------------------------- a company nobody has paid for */

.abrechnung-unbezahlt {
  margin: var(--raum-2) 0 0;
  padding: var(--raum-2);
  border: 1px dashed var(--linie-stark);
  border-radius: var(--radius-sm);
  background: var(--flaeche-tief);
}

/*
  Dashed rather than solid, and that is the whole idea of the block: this company is
  outlined but not filled in. A solid border would make it look like the finished thing
  next to the companies that are.
*/
.abrechnung-unbezahlt-titel {
  margin: 0 0 var(--raum-1);
  font-weight: 600;
  color: var(--abrechnung-offen);
}

.abrechnung-unbezahlt-wege {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--raum-3);
  margin-top: var(--raum-2);
}

/* ------------------------------------- the page that explains the purchase */

.abrechnung-schritte {
  margin: 0 0 var(--raum-2);
  padding-left: 1.35em;
  max-width: 68ch;
  line-height: 1.65;
}

.abrechnung-schritte li {
  margin-bottom: var(--raum-1);
}

.abrechnung-preisliste {
  list-style: none;
  margin: var(--raum-2) 0 var(--raum-2);
  padding: 0;
  max-width: 46ch;
}

/*
  Name left, money right, on one line each. A price list read downwards compares its own
  right-hand column, and a grid is what keeps that column straight when one plan's amount
  is a digit longer than another's.
*/
.abrechnung-preisliste li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--raum-3);
  padding: var(--raum-2) 0;
  border-bottom: 1px solid var(--linie);
}

.abrechnung-preisliste li:last-child {
  border-bottom: 0;
}

.abrechnung-preisliste-name {
  font-weight: 600;
}

.abrechnung-preisliste-betrag {
  text-align: right;
}

/* Der Takt neben dem Betrag. Leiser als die Zahl, weil "monatlich" in einer Liste,
   in der jede Zeile monatlich ist, eine Wiederholung ist -- weglassen liesse den
   Betrag aber als Einmalzahlung lesbar, und das ist der teurere Irrtum. */
.abrechnung-preisliste-takt {
  color: var(--tinte-3);
  font-size: 12px;
}

@media (max-width: 30rem) {
  .abrechnung-preisliste li {
    display: block;
  }

  .abrechnung-preisliste-betrag {
    display: block;
    margin-top: var(--raum-1);
    text-align: left;
  }
}