/* MIN-CORE TABELLEN - 2026-08-27
 *
 * Kunden wuenschen haeufig Tabellen. Bis heute brachte min_core zwar das
 * Markup mit (Templates/FluidStyledContent/Table.html), aber keine Gestaltung -
 * eine Tabelle erbte damit irgendetwas aus der Umgebung und sah auf jeder
 * Kundenseite anders aus.
 *
 * Drei Vorgaben, nach denen hier gebaut ist:
 *
 * 1. Der Text in einer Tabelle sieht aus wie jeder andere Text der Seite.
 *    Keine kleinere Schrift, keine kursive Auszeichnung, keine Sonderfarbe.
 *    Alte Redaktionssysteme haben genau das gern hinterlassen, deshalb werden
 *    Schriftgroesse, Schriftschnitt und Laufweite hier ausdruecklich
 *    zurueckgesetzt statt nur nicht gesetzt.
 * 2. Eine Tabelle ist als Tabelle erkennbar: Zeilenwechsel durch Zebrastreifen,
 *    abgesetzte Kopfzeile, ruhige Trennlinien.
 * 3. Sie funktioniert auf schmalen Geraeten. Eine Tabelle laesst sich nicht
 *    sinnvoll umbrechen, deshalb scrollt sie waagerecht in ihrem eigenen
 *    Bereich - mit sichtbarem Hinweis an der Kante und per Tastatur bedienbar.
 *
 * Alle Werte kommen aus den min-Tokens, keine nackten Zahlen ausser den
 * Hairlines.
 */

.min-table-wrapper {
  /* Eigener Scrollbereich statt Ueberlauf der ganzen Seite. */
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-block: var(--min-spacing-6, 1.5rem);
  /* Schattenkante als Hinweis, dass rechts noch etwas kommt. Verschwindet,
     sobald ganz gescrollt ist (background-attachment: local). */
  background:
    linear-gradient(to right, var(--min-color-white, #fff) 30%, rgba(255, 255, 255, 0)),
    linear-gradient(to right, rgba(255, 255, 255, 0), var(--min-color-white, #fff) 70%) 100% 0,
    radial-gradient(farthest-side at 0 50%, rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0)),
    radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0)) 100% 0;
  background-repeat: no-repeat;
  background-size: 3rem 100%, 3rem 100%, 0.75rem 100%, 0.75rem 100%;
  background-attachment: local, local, scroll, scroll;
}

/* Der Scrollbereich muss mit der Tastatur erreichbar sein, sonst kommen
   Menschen ohne Maus nicht an die rechten Spalten (WCAG 2.1.1). */
.min-table-wrapper:focus-visible {
  outline: 3px solid var(--min-color-primary, #004a99);
  outline-offset: 2px;
}

.min-table {
  width: 100%;
  border-collapse: collapse;
  /* Unter dieser Breite wird gescrollt statt gequetscht. */
  min-width: 32rem;
}

.min-table__caption {
  caption-side: top;
  text-align: left;
  padding-block-end: var(--min-spacing-2, 0.5rem);
  font-weight: var(--min-font-weight-semibold, 600);
  color: var(--min-color-grey-700, #374151);
}

/* Punkt 1: Text wie ueberall sonst. Bewusst zuruecksetzen, nicht nur weglassen. */
.min-table__cell {
  padding: var(--min-spacing-3, 0.75rem) var(--min-spacing-4, 1rem);
  font-family: inherit;
  font-size: var(--min-font-size-base, 1rem);
  font-style: normal;
  font-weight: var(--min-font-weight-normal, 400);
  line-height: var(--min-line-height-normal, 1.5);
  letter-spacing: normal;
  color: inherit;
  text-align: left;
  vertical-align: top;
  border-bottom: var(--min-border-width, 1px) solid var(--min-border-color, #e5e7eb);
}

.min-table__cell > *:first-child { margin-block-start: 0; }
.min-table__cell > *:last-child  { margin-block-end: 0; }

/* Kopfzellen duerfen fett sein - aber nicht groesser und nicht kursiv. */
.min-table__cell--header {
  font-weight: var(--min-font-weight-semibold, 600);
  font-style: normal;
  font-size: var(--min-font-size-base, 1rem);
  background: var(--min-color-grey-100, #f3f4f6);
  border-bottom-width: calc(var(--min-border-width, 1px) * 2);
}

/* Punkt 2: Zebrastreifen. Nur im Koerper, damit Kopf und Fuss abgesetzt bleiben. */
.min-table__body .min-table__row:nth-child(even) {
  background: var(--min-color-grey-50, #f9fafb);
}

.min-table__foot .min-table__cell {
  font-weight: var(--min-font-weight-semibold, 600);
  border-top: calc(var(--min-border-width, 1px) * 2) solid var(--min-border-color, #e5e7eb);
  border-bottom: 0;
}

/* Auf schmalen Geraeten etwas enger setzen - aber die Schriftgroesse bleibt,
   das war die ausdrueckliche Vorgabe. */
@media (max-width: 37.5rem) {
  .min-table__cell {
    padding: var(--min-spacing-2, 0.5rem) var(--min-spacing-3, 0.75rem);
  }
}

@media print {
  .min-table-wrapper { overflow-x: visible; background: none; }
  .min-table { min-width: 0; }
}