/* ==========================================================================
   50 · Daten: Kennzahlen, Tabellen, Datenlisten, Hinweise, Ablaufschritte
   ========================================================================== */

/* Kennzahlen: [row class="demo-figures"] (GSMneo-Seite: demo-gsm-figures) */
.eso-demo .demo-figures,
.eso-demo .demo-gsm-figures {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px !important;
  border: 1px solid var(--eso-border);
  background: var(--eso-border);
}
.eso-demo .demo-figures.demo-figures-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.eso-demo :is(.demo-figures, .demo-gsm-figures) > .col { max-width: none; flex-basis: auto; padding: 0 !important; }
.eso-demo :is(.demo-figures, .demo-gsm-figures) > .col > .col-inner { height: 100%; padding: 24px !important; background: var(--eso-white); }
.eso-demo .demo-number,
.eso-demo .demo-gsm-number {
  font-family: var(--eso-font-display);
  font-size: 36px;
  font-weight: 700;
  line-height: 40px;
  letter-spacing: -.025em;
  color: var(--eso-green);
}
.eso-demo .demo-unit,
.eso-demo .demo-gsm-unit {
  margin-top: 8px;
  font-family: var(--eso-font-mono);
  font-size: 11px;
  line-height: 16.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--eso-muted);
}
/* Nach den Kennzahlen folgende Zeile (z. B. Tabellen) */
.eso-demo .section-content > .row:is(.demo-figures, .demo-gsm-figures) + .row { padding-top: 56px !important; }

/* Tabellen (Technische Daten) -------------------------------------------- */
.eso-demo table {
  width: 100%;
  max-width: 960px;
  margin-top: 24px;
  border-collapse: collapse;
  table-layout: fixed;
}
.eso-demo table th,
.eso-demo table td {
  padding: 16px 16px 16px 0;
  border: 0;
  border-bottom: 1px solid var(--eso-border);
  font-family: var(--eso-font-body);
  font-size: 14px;
  line-height: 1.6;
  text-align: left;
  vertical-align: top;
}
.eso-demo table thead th {
  border-bottom-color: var(--eso-text);
  font-family: var(--eso-font-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--eso-muted);
}
.eso-demo table tbody th { width: 40%; font-weight: 600; color: var(--eso-text); }
.eso-demo table td { color: var(--eso-text-body); }
.eso-demo .demo-footnote { margin-top: 16px; font-size: 13px; line-height: 1.6; color: var(--eso-muted); }

/* Datenliste dt/dd (zweispaltig) ----------------------------------------- */
.eso-demo .demo-table { margin: 24px 0 0; border-top: 1px solid var(--eso-border); }
.eso-demo .demo-table > div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--eso-border);
}
.eso-demo .demo-table dt { flex: 1; margin: 0; font-family: var(--eso-font-body); font-size: 14px; line-height: 1.6; color: var(--eso-muted); }
.eso-demo .demo-table dd { flex: none; margin: 0; font-family: var(--eso-font-body); font-size: 14px; line-height: 1.6; text-align: right; color: var(--eso-text); }

/* Datenblöcke nebeneinander (GSMneo „Technische Daten“) */
.eso-demo .demo-gsm-specs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; margin-top: 56px !important; align-items: start; }
.eso-demo .demo-gsm-specs > .col { max-width: none; }
.eso-demo .demo-gsm-spec dl { margin: 16px 0 0; border-top: 1px solid var(--eso-border); }
.eso-demo .demo-gsm-spec dl > div { display: block; padding: 16px 0; border-bottom: 1px solid var(--eso-border); font-size: 14px; line-height: 22.75px; }
.eso-demo .demo-gsm-spec dt,
.eso-demo .demo-gsm-spec dd { display: block; margin: 0; text-align: left; }
.eso-demo .demo-gsm-spec dt { color: var(--eso-muted); }

/* Hinweisbox ---------------------------------------------------------------- */
.eso-demo .demo-notice { max-width: 672px; padding: 32px; border: 1px dashed var(--eso-border); background: var(--eso-white); }
.eso-demo .demo-notice .demo-body { margin-top: 12px; font-size: 14px; line-height: 1.6; max-width: none; }
.section.eso-demo.demo-notice-section { background: var(--eso-grey); padding-top: var(--eso-section-y) !important; padding-bottom: var(--eso-section-y) !important; }

/* Ablaufschritte (Nummer links, Text rechts) ----------------------------------- */
.eso-demo .demo-process-step { display: flex; gap: 32px; }
.eso-demo .demo-process-step > span { flex: none; font-family: var(--eso-font-display); font-size: 30px; font-weight: 700; line-height: 36px; color: var(--eso-green); }
.eso-demo .demo-process-step h3 { margin: 0; }
.eso-demo .demo-process-step .demo-body { margin-top: 8px; font-size: 14px; line-height: 1.6; max-width: none; }

/* Zellen mit +-Punkten (Vorteile) ---------------------------------------------- */
.eso-demo .demo-benefit-cells { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px !important; background: var(--eso-border); border: 1px solid var(--eso-border); }
.eso-demo .demo-benefit-cells > .col { max-width: none; padding: 0 !important; border: 0; margin: 0; }
.eso-demo .demo-benefit-cells > .col > .col-inner { height: 100%; padding: 24px !important; background: var(--eso-white); }
.eso-demo .demo-benefit-point { display: flex; gap: 12px; font-family: var(--eso-font-body); font-size: 16px; line-height: 1.6; }
.eso-demo .demo-benefit-point > span { flex: none; color: var(--eso-green); }

@media (max-width: 1023px) {
  .eso-demo .demo-gsm-specs { grid-template-columns: 1fr; }
  .eso-demo .demo-figures.demo-figures-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .eso-demo .demo-benefit-cells { grid-template-columns: 1fr; }
  .eso-demo .demo-process-step { gap: 24px; }
  .eso-demo .demo-notice { padding: 24px; }
}
@media (max-width: 639px) {
  .eso-demo .demo-figures,
  .eso-demo .demo-gsm-figures,
  .eso-demo .demo-figures.demo-figures-4 { grid-template-columns: 1fr; }
  .eso-demo .demo-number,
  .eso-demo .demo-gsm-number { font-size: 30px; line-height: 36px; }
  .eso-demo .demo-table > div { display: block; }
  .eso-demo .demo-table dd { margin-top: 4px; text-align: left; }
  .eso-demo .section-content > .row:is(.demo-figures, .demo-gsm-figures) + .row { padding-top: 40px !important; }
}

/* GSMneo: vier Kennzahlen im Hero zweispaltig, in „Technische Daten“ vierspaltig */
.eso-demo .demo-gsm-figures { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.eso-demo .section-content > .row.demo-gsm-figures { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1023px) { .eso-demo .section-content > .row.demo-gsm-figures { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 639px) { .eso-demo .demo-gsm-figures, .eso-demo .section-content > .row.demo-gsm-figures { grid-template-columns: 1fr; } }

/* Flatsome setzt Tabellenköpfe in Großbuchstaben – Zeilenköpfe normal */
.eso-demo table tbody th { text-transform: none; letter-spacing: 0; font-size: 14px; }