/* Globale Tabellenvorlage. Jede Tabelle der Oberfläche benutzt sie, keine eigene Gestaltung je Seite.

   <div class="tabelle-rahmen"><table class="tabelle">
     <thead>
       <tr><th rowspan="2">Monat</th><th colspan="2" class="gruppe">Spitze <small>kW</small></th></tr>
       <tr><th class="z grenze">gemessen</th><th class="z">mit Planung</th></tr>
     </thead>
     <tbody><tr><th scope="row">Oktober 2026</th><td class="z grenze">8,4</td><td class="z neben">9,9</td></tr></tbody>
   </table></div>

   Spalten: erste Spalte Bezeichnung (nimmt den freien Platz), .z Zahl (rechtsbündig, so schmal wie
   ihr Inhalt), .grenze beginnt eine Gruppe, .neben ist ein Vergleichswert, .plus und .minus färben,
   .leer für fehlende Werte. Einheiten als <small> im Kopf. Farben und Maße aus oberflaeche.css. */

.tabelle-rahmen { overflow-x: auto; border: 1px solid var(--linie); border-radius: var(--r-klein); background: var(--flaeche);
  -webkit-overflow-scrolling: touch; }
.tabelle-rahmen + .tabelle-rahmen { margin-top: var(--a3); }

table.tabelle { width: 100%; border-collapse: separate; border-spacing: 0; font-variant-numeric: tabular-nums; }
table.tabelle th, table.tabelle td { padding: .6rem .9rem; text-align: left; white-space: nowrap; vertical-align: middle; }

table.tabelle thead th { background: var(--flaeche-2); color: var(--text-3); font-size: var(--s-klein); font-weight: 600;
  letter-spacing: .02em; vertical-align: bottom; border-bottom: 1px solid var(--linie); }
table.tabelle thead tr:not(:last-child) th:not([rowspan]) { border-bottom: 0; padding-bottom: .15rem; }
table.tabelle thead tr + tr th { padding-top: .15rem; }
table.tabelle thead small { font-size: inherit; font-weight: 400; opacity: .85; margin-left: .2rem; }
/* Zweite Kopfzeile: Zusatz unter der Bezeichnung, so bleiben die Spalten schmal. */
table.tabelle thead tr + tr small { display: block; margin-left: 0; }
table.tabelle thead .gruppe { text-align: center; color: var(--text-2); }
table.tabelle thead .gruppe::after { content: ""; display: block; height: 1px; background: var(--linie); margin-top: .35rem; }

table.tabelle tbody tr { transition: background var(--dauer); }
table.tabelle tbody tr:nth-child(even) { background: color-mix(in srgb, var(--flaeche-2) 55%, transparent); }
table.tabelle tbody tr:hover { background: var(--flaeche-2); }
table.tabelle tbody tr + tr > * { border-top: 1px solid var(--linie); }
table.tabelle tbody th { font-weight: 600; color: var(--text); }
table.tabelle tfoot td, table.tabelle tfoot th { font-weight: 700; border-top: 2px solid var(--linie); }

table.tabelle .z { text-align: right; width: 1%; }
table.tabelle .grenze { border-left: 1px solid var(--linie); }
table.tabelle .neben { color: var(--text-2); }
table.tabelle .stark { font-weight: 700; }
table.tabelle .plus { color: var(--ein); }
table.tabelle .minus { color: var(--aus); }
table.tabelle .leer { color: var(--text-3); font-weight: 400; }
table.tabelle td.leer { padding: .6rem .9rem; }
table.tabelle tbody tr.leerzeile > * { color: var(--text-3); font-weight: 500; }
table.tabelle .teil { color: var(--warn); font-weight: 600; }
table.tabelle .umbruch { white-space: normal; min-width: 10rem; }
table.tabelle .info { vertical-align: middle; margin-left: .35rem; }
table.tabelle tbody tr[data-wahl] { cursor: pointer; }
table.tabelle tbody tr.gewaehlt { background: var(--akzent-hell); }
table.tabelle tbody tr.gewaehlt > :first-child { box-shadow: inset 3px 0 0 var(--akzent); }

/* Am Handy bleibt die erste Spalte stehen, der Rest rollt seitlich. */
@media (max-width: 640px) {
  table.tabelle th, table.tabelle td, table.tabelle td.leer { padding: .5rem .65rem; }
  table.tabelle tbody th:first-child, table.tabelle thead tr:first-child th:first-child {
    position: sticky; left: 0; z-index: 1; background: var(--flaeche); box-shadow: 1px 0 0 var(--linie); }
  table.tabelle thead tr:first-child th:first-child { background: var(--flaeche-2); }
}

/* Dichte Tabelle mit mittig stehenden Werten, etwa Rechte je Person. */
table.tabelle.dicht th, table.tabelle.dicht td, table.tabelle.dicht td.leer { padding: .35rem .5rem; }
table.tabelle.mitte > * > tr > :not(:first-child) { text-align: center; }

/* Reine Zahlentabelle: alles außer der ersten Spalte rechtsbündig, ohne .z an jeder Zelle. */
table.tabelle.zahlen > * > tr > :not(:first-child) { text-align: right; }
/* Lange Listen: feste Höhe, der Kopf bleibt beim Rollen stehen. */
.tabelle-rahmen.lang { max-height: var(--tabelle-hoehe, 18rem); overflow: auto; }
.tabelle-rahmen.lang thead th { position: sticky; top: 0; z-index: 2; }