/**************************************************************************************************
// Webauftritt
//
// Version: 1.0
// Date   : 30.10.2025
// Autor  : M.Hielscher
// Desc.  : style_termine.css
// ************************************************************************************************/

/* Responsive Tabelle für Termine */
.termine-wrapper {
   max-width: 100%;
   overflow-x: auto;
   -webkit-overflow-scrolling: touch; /* sanftes Scrollen auf iOS */
}

.termine-tabelle {
   width: 100%;
   border-collapse: collapse;
   min-width: 520px; /* stellt sicher, dass Spalten nicht zu schmal werden */
}

.termine-tabelle th,
.termine-tabelle td {
   padding: 10px 8px;
   text-align: left;
}

.termine-tabelle thead tr {
   background: #eaeaea;
}

.termine-tabelle tbody tr:nth-child(even) {
   background: rgba(0,0,0,0.03);
}

@media (max-width: 700px) {
   /* Statt horizontalem Scrollen: kompakte 2-Zeilen-Darstellung pro Termin */
   .termine-wrapper {
      overflow-x: visible; /* kein horizontales Scrollen nötig */
      padding: 0 12px;     /* etwas Abstand links/rechts auf Handy */
   }
   .termine-tabelle {
      width: 100%;
      min-width: 0; /* überschreibt die Mindestbreite */
   }
   .termine-tabelle thead { display: none; }

   .termine-tabelle tbody tr {
      display: grid;
      grid-template-columns: 1fr 1fr; /* zwei Spalten pro Zeile */
      grid-template-rows: auto auto;  /* zwei Zeilen: 1) Tag+Datum  2) Kurs+Zeit */
      gap: 6px 12px;
      padding: 10px 8px;
      border-bottom: 1px solid rgba(0,0,0,0.1);
      background: rgba(255,255,255,0.92);
   }
   .termine-tabelle td {
      padding: 0;                 /* kompakter */
      font-size: 1rem;            /* gut lesbar */
      white-space: normal;        /* Umbrüche erlauben */
   }
   /* Positionierung: 1=Tag, 2=Datum, 3=Kurs, 4=Zeit */
   .termine-tabelle td:nth-child(1) { grid-column: 1; grid-row: 1; }
   .termine-tabelle td:nth-child(2) { grid-column: 2; grid-row: 1; text-align: right; }
   .termine-tabelle td:nth-child(3) { grid-column: 1; grid-row: 2; font-weight: 600; }
   .termine-tabelle td:nth-child(4) { grid-column: 2; grid-row: 2; text-align: right; }
}