/**
 * Lizenzen screen - Trialog Intranet Design
 *
 * Die Geldsicht auf die Lizenzgebuehren (Geschaeftsfuehrung und
 * Firmenkonto). Alle Klassen tragen den Praefix `in-liz-`; die Kennzahlen
 * oben nutzen unveraendert die geteilten Bausteine (in-card, in-stat,
 * in-grid, in-ic) aus intranet.css / intranet-ui.css - hier wird davon
 * nichts neu definiert, nur ergaenzt.
 *
 * Die Zeilen sind bewusst ein Grid und keine Tabelle: Unter 720 px stapeln
 * sie sich, ohne dass Spalten abgeschnitten werden.
 */

.in-liz-note {
  margin-bottom: 22px;
}

.in-liz-stats {
  margin-bottom: 24px;
}

/* ========================================
   LISTEN
   ======================================== */

.in-liz-listen {
  display: grid;
  gap: 20px;
}

.in-liz-karte.is-gedimmt {
  background: var(--in-bg, #f4f6fb);
}

.in-liz-kopf-zusatz {
  font-size: 13px;
  color: var(--in-ink-500);
}

.in-liz-body {
  padding: 6px 0;
}

.in-liz-zeile {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1.4fr) minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  padding: 14px 22px;
  border-bottom: 1px solid var(--in-line-soft);
}

.in-liz-zeile:last-child {
  border-bottom: 0;
}

.in-liz-name {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--in-ink-900);
}

.in-liz-meta {
  font-size: 12.5px;
  color: var(--in-ink-500);
  margin-top: 2px;
  overflow-wrap: anywhere;
}

.in-liz-stufe {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.in-liz-chip {
  background: var(--in-line-soft);
  color: var(--in-ink-700, #3a4459);
  font-size: 12px;
  font-weight: 700;
}

.in-liz-sparte {
  font-size: 12.5px;
  color: var(--in-ink-500);
}

.in-liz-betrag {
  text-align: right;
}

.in-liz-netto {
  font-size: 15px;
  font-weight: 800;
  color: var(--in-ink-900);
  font-variant-numeric: tabular-nums;
}

.in-liz-brutto {
  font-size: 12.5px;
  color: var(--in-ink-500);
  font-variant-numeric: tabular-nums;
  margin-top: 2px;
}

/* Die Summenzeile schliesst die Liste ab - Goldstrich wie die Wortmarke. */
.in-liz-summe {
  border-top: 2px solid var(--in-gold, #c9a24b);
  border-bottom: 0;
  background: var(--in-gold-soft, #f3ead4);
}

/* Die Summe traegt keine Stufe - ohne diese Zuweisung ruecht ihr Betrag in
   die mittlere Spalte und stuende nicht unter den Betraegen darueber. */
.in-liz-summe .in-liz-betrag {
  grid-column: 3;
}

.in-liz-summe .in-liz-name {
  text-transform: uppercase;
  letter-spacing: 0.4px;
  font-size: 12.5px;
  color: var(--in-ink-500);
}

.in-liz-summe .in-liz-netto {
  font-size: 17px;
}

.in-liz-leer {
  padding: 24px 22px;
  font-size: 14px;
  color: var(--in-ink-500);
  text-align: center;
}

/* ========================================
   RESPONSIV
   ======================================== */

@media (max-width: 720px) {
  /* Kartenkopf: Titel und Zusatz nebeneinander wuerden sich hier draengen. */
  .in-liz-karte .in-card-head {
    flex-wrap: wrap;
    gap: 4px;
  }

  .in-liz-zeile {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .in-liz-betrag {
    text-align: left;
  }

  /* Einspaltig gibt es keine dritte Spalte mehr - sonst legte der Browser
     eine implizite an und die Summe rutschte aus der Karte. */
  .in-liz-summe .in-liz-betrag {
    grid-column: auto;
  }
}