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

/*
  Two areas live here: the group overview at /firmen/zentrale, and the per-person rights
  editor folded into the team screen. They share a file because they share a subject —
  which companies exist and who may do what in them — and because splitting a stylesheet
  by URL rather than by subject is how one rule ends up written twice.

  Nothing here draws a card. A company is a row on a list the eye reads downwards, and a
  rectangle around each one would say these are separate objects rather than a comparison.
*/

/*
  Values this area invents, on a bare :root so they have one before any theme has an
  opinion. Two only, and both are about the same thing: the width at which a company's
  three figures stop fitting beside each other, and the tone of the small word that marks
  a right as an exception rather than as the role.
*/
:root {
  --zentrale-zahl-breite: 190px;
  --zentrale-marke: var(--gold-dunkel);
}

/* --------------------------------------------------------------- group overview */

.zentrale-satz {
  margin: var(--raum-2) 0;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--tinte-4);
  max-width: 68ch;
}

.zentrale-schnell {
  margin: var(--raum-2) 0 var(--raum-3);
  padding: var(--raum-2);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  background: var(--flaeche);
}

.zentrale-waehrungen {
  display: flex;
  flex-wrap: wrap;
  gap: var(--raum-3);
  margin: 0 0 var(--raum-3);
  padding: var(--raum-2) 0;
  border-top: 1px solid var(--linie);
  border-bottom: 1px solid var(--linie);
}

.zentrale-waehrung { min-width: 0; }

.zentrale-waehrung-name {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .12em;
  color: var(--tinte-3);
}

.zentrale-waehrung-wert {
  display: block;
  margin-top: 2px;
  font-size: 15px;
  color: var(--tinte);
}

.zentrale-waehrung-fuss {
  display: block;
  margin-top: 2px;
  font-size: 11.5px;
  color: var(--tinte-4);
}

.zentrale-liste {
  list-style: none;
  margin: 0;
  padding: 0;
}

.zentrale-firma {
  padding: var(--raum-3) 0;
  border-bottom: 1px solid var(--linie);
}

.zentrale-firma-kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--raum-2);
}

.zentrale-name {
  font-size: 16px;
  font-weight: 600;
  color: var(--tinte);
}

.zentrale-aktiv {
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--zentrale-marke);
}

.zentrale-ort {
  margin: 4px 0 0;
  font-size: 12.5px;
  color: var(--tinte-4);
}

.zentrale-ohne-zahlen {
  margin: var(--raum-2) 0 0;
  font-size: 12.5px;
  color: var(--tinte-4);
}

/*
  The three figures, on one line the eye crosses in a single movement — and never on one
  line with another company's. The grid wraps rather than scrolling, because a figure that
  has to be scrolled to is a figure that is not being compared with anything.
*/
.zentrale-zahlen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--zentrale-zahl-breite), 1fr));
  gap: var(--raum-2) var(--raum-3);
  margin-top: var(--raum-2);
}

.zentrale-zahl { min-width: 0; }

.zentrale-zahl-name {
  display: block;
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tinte-3);
}

.zentrale-zahl-wert {
  display: block;
  margin-top: 3px;
  font-family: var(--mono);
  font-size: 17px;
  color: var(--tinte);
}

.zentrale-zahl-fuss {
  display: block;
  margin-top: 2px;
  font-size: 11.5px;
  color: var(--tinte-4);
}

.zentrale-fuss {
  margin: var(--raum-2) 0 0;
  font-size: 11.5px;
  color: var(--tinte-4);
}

.zentrale-leer {
  padding: var(--raum-4) 0;
  color: var(--tinte-4);
}

/* ----------------------------------------------------------- per-person rights */

/*
  Folded away by default. The role answers the question for almost everybody, and a screen
  that opens with sixty checkboxes is a screen on which somebody ticks all of them.
*/
.rechtefein { margin-top: var(--raum-2); }

.rechtefein-klappe {
  border-top: 1px solid var(--linie);
  padding-top: var(--raum-2);
}

.rechtefein-griff {
  cursor: pointer;
  font-size: 12.5px;
  color: var(--tinte-3);
}

.rechtefein-griff:hover { color: var(--tinte); }

.rechtefein-marke {
  margin-left: 8px;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--zentrale-marke);
}

/*
  The word that says a permission is an exception. Small, and never the only signal: the
  box itself is ticked or not, and this only explains why.
*/
.rechte-herkunft {
  display: inline-block;
  margin-top: 2px;
  font-size: 10.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--zentrale-marke);
}