/* Eingang, Leads, Ablage, Anschlüsse, Auswertung, Benachrichtigungen, Felder. */
.abstand { margin-top: 1.25rem; }
.unsichtbar { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
code { font-size: .9375em; background: var(--rose-2); padding: 0 .25em; overflow-wrap: anywhere; }

.zeilen > ul > li { padding: .875rem 1rem; }
.zeilen > ul > li + li { border-top: 1px solid var(--linie); }

.feldgruppe { min-width: 0; margin: 0; padding: .625rem .75rem .75rem; border: 1px solid var(--linie); }
.feldgruppe legend { padding: 0 .25rem; font-weight: 600; }

/* Benachrichtigungen */
.nachricht { display: grid; gap: .125rem; }
.nachricht-neu { border-left: 4px solid var(--beere); }

/* Eingang */
.eingang-zeile { display: grid; gap: .625rem; }
.eingang-text strong { display: block; font: 500 1.125rem/1.3 var(--titel); }
.eingang-text small { display: block; }

/* Leads */
.lead { display: grid; gap: .125rem; }
.lead-kopf { display: flex; flex-wrap: wrap; gap: .125rem .625rem; align-items: center; }
.lead-kopf strong { font: 500 1.1875rem/1.3 var(--titel); }
.lead a { display: inline-block; min-height: 2.75rem; line-height: 2.75rem; }
.lead .knopf { line-height: 1.2; }
.lead-knoepfe { margin-top: .375rem; }
.pille-lead-neu { background: var(--bordeaux); color: #fff; }
.pille-lead-kontaktiert { background: #f8ebd8; color: var(--eiche-tief); }
.pille-lead-fall_erstellt, .pille-lead-fall { background: #e3f1ea; color: #1d5a43; }
.pille-lead-verworfen { background: #e9ecea; color: #47544e; }

/* Ablage: Ordner stehen nebeneinander wie im Schrank */
.ordner-raster { display: grid; gap: .25rem 2rem; }
.ordner { min-width: 0; }
.ordner .zeilen, .ordner .kleine-leere { background: var(--hemd); border: 1px solid var(--linie); }

/* Anschlüsse */
.anschluss-raster { display: grid; gap: 1rem; margin-top: 1.25rem; }
.anschluss { min-width: 0; padding: 1rem; background: var(--hemd); border: 1px dashed var(--rand); }
.anschluss h2 { margin: 0 0 .125rem; }
.anschluss-stand { color: var(--leise); margin-bottom: .5rem; }
.anschluss h3 { margin: .75rem 0 .25rem; font-size: 1.0625rem; }
.punkte { margin-bottom: .875rem; }
.punkte li { position: relative; padding-left: .875rem; }
.punkte li::before { content: ""; position: absolute; left: 0; top: .625rem; width: .375rem; height: .375rem; background: var(--eiche); }

/* Auswertung */
.wert-satz { margin-top: .75rem; font: 500 1.25rem/1.35 var(--titel); }
.wert-raster { display: grid; gap: .25rem 2.5rem; }
.wert-block { min-width: 0; }
.wert-tabelle { width: 100%; border-collapse: collapse; background: var(--hemd); border: 1px solid var(--linie); table-layout: fixed; }
.wert-tabelle thead th { padding: .375rem .625rem; text-align: left; font-size: .9375rem; font-weight: 600; color: var(--leise); border-bottom: 1px solid var(--linie); }
.wert-tabelle thead th:nth-child(1) { width: 42%; }
.wert-tabelle thead th:nth-child(n+3) { width: 5rem; text-align: right; }
.wert-tabelle tbody th { padding: .375rem .625rem; text-align: left; font-weight: 400; line-height: 1.25; }
.wert-tabelle tbody td { padding: .375rem .25rem; vertical-align: middle; }
.wert-tabelle tbody tr + tr > * { border-top: 1px solid var(--rose-2); }
.wert-tabelle .zahl { padding-right: .625rem; text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.balken { display: block; }
.balken-mark, .balken-b { fill: var(--eiche); }
.balken-a { fill: var(--beere); }
.wert-legende { display: flex; gap: 1.25rem; margin-bottom: .375rem; font-size: .9375rem; color: var(--leise); }
.wert-legende li { display: flex; align-items: center; gap: .375rem; }
.punkt { width: .75rem; height: .75rem; border-radius: 2px; }
.punkt-a { background: var(--beere); }
.punkt-b { background: var(--eiche); }
.wert-zeile { display: block; }
.wert-block a { display: inline-flex; align-items: center; min-height: 2.75rem; }
.wert-spalte { display: grid; gap: .25rem; align-content: start; min-width: 0; }

@media (min-width: 48rem) {
  .eingang-zeile { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  .anschluss-raster, .ordner-raster { grid-template-columns: 1fr 1fr; }
  .anschluss { padding: 1.25rem 1.5rem; }
}
@media (min-width: 75rem) {
  .wert-raster { grid-template-columns: 1fr 1fr; }
  .wert-breit { grid-column: 1 / -1; }
}