/* =========================================================
   digital40plus – Snippets (Kurse)
   EINZIGE zentrale CSS-Datei für alle Snippet-Layouts.
   Ziel: Ohne JS/Backend-Änderungen mobil perfekt lesbar.
   ========================================================= */

/* Basis: Widget-Container nie breiter als der Viewport */
.d40-courses-widget,
.kurs-snippet,
.kursliste,
.snippet,
.snippet-wrapper {
  max-width: 100%;
}

/* --------------------------------------------
   CARD-Stil (wird von neueren Snippets genutzt)
   -------------------------------------------- */
.d40-course-card{
  border:1px solid #2a3143;
  border-radius:12px;
  background:#0b0f19;
  color:#e5e7eb;
  overflow:hidden;
  margin-bottom:.8rem;
}
.d40-course-card .d40-card-head{
  background:#151923;
  padding:.6rem .8rem;
  font-weight:600;
}
.d40-course-card .d40-card-body{ padding:.75rem .8rem; }
.d40-course-card .d40-card-body p{ margin:0 0 .4rem; }
.d40-course-card .d40-card-actions{ padding:.6rem .8rem .8rem; }

/* Buttons in Cards: mobil vollbreit */
@media (max-width: 576px){
  .d40-course-card .d40-card-actions .btn{ width:100%; }
}

/* --------------------------------------------
   Buttons allgemein im Snippet: mobil vollbreit
   (fasst auch ältere Snippet-Varianten)
   -------------------------------------------- */
@media (max-width: 576px){
  .d40-courses-widget .btn,
  .kurs-snippet .btn,
  .snippet .btn,
  .snippet-wrapper .btn,
  .kursliste .btn {
    display:block;
    width:100%;
    white-space:normal;
  }
}

/* --------------------------------------------
   TABELLEN-FALLBACK für ältere Snippets
   – macht Tabellen auf kleinen Screens „stapelnd“
   – nutzt data-th als Label, falls vorhanden
   -------------------------------------------- */
.d40-courses-widget table,
.kurs-snippet table,
.snippet table,
.kursliste table {
  width:100%;
  border-collapse:collapse;
}
.d40-courses-widget th, .d40-courses-widget td,
.kurs-snippet th, .kurs-snippet td,
.snippet th, .snippet td,
.kursliste th, .kursliste td {
  padding:.5rem .75rem;
  border-bottom:1px solid rgba(255,255,255,.12);
}

/* mobil: thead ausblenden, Zellen stapeln */
@media (max-width: 576px){
  .d40-courses-widget table thead,
  .kurs-snippet table thead,
  .snippet table thead,
  .kursliste table thead {
    display:none;
  }
  .d40-courses-widget table,
  .d40-courses-widget tbody,
  .d40-courses-widget tr,
  .d40-courses-widget td,
  .kurs-snippet table,
  .kurs-snippet tbody,
  .kurs-snippet tr,
  .kurs-snippet td,
  .snippet table,
  .snippet tbody,
  .snippet tr,
  .snippet td,
  .kursliste table,
  .kursliste tbody,
  .kursliste tr,
  .kursliste td {
    display:block;
    width:100%;
  }
  .d40-courses-widget tr,
  .kurs-snippet tr,
  .snippet tr,
  .kursliste tr {
    border:1px solid rgba(255,255,255,.12);
    border-radius:10px;
    margin-bottom:.6rem;
    background:#0b0f19;        /* dark-friendly */
    overflow:hidden;
  }
  .d40-courses-widget td,
  .kurs-snippet td,
  .snippet td,
  .kursliste td {
    border:none !important;
    padding:.5rem .75rem !important;
  }
  /* mobile Label vor den Werten, wenn data-th gesetzt ist */
  .d40-courses-widget td[data-th]::before,
  .kurs-snippet td[data-th]::before,
  .snippet td[data-th]::before,
  .kursliste td[data-th]::before {
    content: attr(data-th) ": ";
    font-weight:600;
    color:#cbd5e1;              /* gut lesbar auf dunkel */
    display:inline-block;
    min-width:120px;
  }
  /* Buttons in Tabellen etwas Abstand */
  .d40-courses-widget td .btn,
  .kurs-snippet td .btn,
  .snippet td .btn,
  .kursliste td .btn {
    margin-top:.4rem;
  }
}

/* --------------------------------------------
   Sonstiges (kleine Helfer)
   -------------------------------------------- */
.d40-card-heading{ margin-bottom:.5rem; }