/* =====================================================================
   PH Schwäbisch Gmünd – Modulübersicht (Tabelle)
   Scope: .ph-module
   Fixierte Spalten: Studienbereich + Modul, rechter Bereich scrollt darunter
   ===================================================================== */

.ph-module {
  /* --- Corporate Design ---------------------------------------------- */
  --ph-primary:        #990455;
  --ph-primary-dark:   #71033f;
  --ph-primary-soft:   #f6e6ef;
  --ph-primary-softer: #fdf7fa;

  --ph-ink:            #1c1c20;
  --ph-ink-soft:       #5a5a63;
  --ph-line:           #e2e2e6;
  --ph-line-strong:    #c9c9d0;
  --ph-surface:        #ffffff;
  --ph-surface-alt:    #f7f7f8;

  /* Akzente je Studienbereich (aus dem CD abgeleitet, dezent) */
  --ph-acc-biw:        #eef2ec;
  --ph-acc-biw-bar:    #6f8f63;
  --ph-acc-biw-text:   #435b39;

  --ph-acc-fach:       #fbeee6;
  --ph-acc-fach-bar:   #d08b56;
  --ph-acc-fach-text:  #8a5320;

  --ph-acc-praxis:     #e9eff5;
  --ph-acc-praxis-bar: #5f88ad;
  --ph-acc-praxis-text:#2f5578;

  --ph-acc-thesis:     #f6e6ef;
  --ph-acc-thesis-bar: var(--ph-primary);
  --ph-acc-thesis-text:var(--ph-primary-dark);

  /* Reserve fuer weitere Studienbereiche */
  --ph-acc-neutral:     #f0f0f2;
  --ph-acc-neutral-bar: #8a8a94;
  --ph-acc-neutral-text:#4a4a52;

  /* --- Spaltenbreiten ------------------------------------------------- */
  /* Anzahl der Semesterspalten. Bei abweichender Studiendauer am
     Section-Element ueberschreiben, z. B. style="--ph-col-count: 6" */
  --ph-col-count:  4;

  --ph-col-group:  200px;
  --ph-col-module: 360px;
  --ph-col-sem:    76px;
  --ph-col-sum:    132px;

  --ph-radius: 10px;

  color: var(--ph-ink);
  font-family: inherit;
  container-type: inline-size;
}

.ph-module h1 {
  font-size: clamp(1.35rem, 1.1rem + 1vw, 1.9rem);
  line-height: 1.25;
  margin: 0 0 .5rem;
}

.ph-module__lead {
  max-width: 68ch;
  margin: 0 0 1.5rem;
  color: var(--ph-ink-soft);
  line-height: 1.6;
}

/* =====================================================================
   Scroll-Container + durchgehende Schattenkante
   ===================================================================== */

/* Nicht scrollender Rahmen um den Scrollbereich. Traegt den Schatten,
   damit dieser ueber die volle Tabellenhoehe durchlaeuft. */
.ph-table-frame {
  position: relative;
}

.ph-table-frame::after {
  content: "";
  position: absolute;
  top: 1px;
  bottom: 1px;
  left: calc(var(--ph-col-group) + var(--ph-col-module));
  width: 16px;
  pointer-events: none;
  z-index: 6;
  opacity: 0;
  transition: opacity .18s ease;
  background: linear-gradient(
    to right,
    rgba(28, 28, 32, .16) 0%,
    rgba(28, 28, 32, .06) 45%,
    rgba(28, 28, 32, 0) 100%
  );
}

/* Klasse wird per JS gesetzt, sobald die Tabelle breiter ist als der Platz */
.ph-table-frame.is-scrollable::after { opacity: 1; }

/* Fallback ohne JavaScript: unterhalb 1100px ist der Platz praktisch immer
   zu gering, dort wird der Schatten auch ohne Skript gezeigt. */
@media (max-width: 1100px) {
  .ph-table-frame:not(.is-measured)::after { opacity: 1; }
}

.ph-table-scroll {
  position: relative;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--ph-line-strong) transparent;
  border-radius: var(--ph-radius);
  border: 1px solid var(--ph-line);
  background: var(--ph-surface);
}

.ph-table-scroll:focus-visible {
  outline: 3px solid var(--ph-primary);
  outline-offset: 3px;
}

.ph-table-scroll::-webkit-scrollbar { height: 10px; }
.ph-table-scroll::-webkit-scrollbar-track { background: transparent; }
.ph-table-scroll::-webkit-scrollbar-thumb {
  background: var(--ph-line-strong);
  border-radius: 99px;
  border: 3px solid var(--ph-surface);
}

/* =====================================================================
   Tabelle
   ===================================================================== */

.ph-table {
  width: 100%;
  min-width: calc(var(--ph-col-group) + var(--ph-col-module) + var(--ph-col-count) * var(--ph-col-sem) + var(--ph-col-sum));
  border-collapse: separate;   /* Pflicht für position: sticky */
  border-spacing: 0;
  font-size: .95rem;
  line-height: 1.45;
  background: var(--ph-surface);
}

.ph-table caption {
  caption-side: bottom;
  /* Legt die Bildunterschrift ueber die Schattenkante, damit der Schatten
     nur ueber der Tabelle liegt und nicht im Fliesstext darunter. */
  position: relative;
  z-index: 7;
  padding: .9rem 1.1rem 1.1rem;
  text-align: left;
  font-size: .8125rem;
  line-height: 1.6;
  color: var(--ph-ink-soft);
  background: var(--ph-surface-alt);
  border-top: 1px solid var(--ph-line);
}

.ph-table th,
.ph-table td {
  padding: .7rem .9rem;
  vertical-align: middle;
  border-bottom: 1px solid var(--ph-line);
  background-clip: padding-box;
}

/* =====================================================================
   Kopfzeilen
   ===================================================================== */

.ph-table thead th {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 3;
  background: var(--ph-primary);
  color: #fff;
  font-weight: 600;
  text-align: center;
  letter-spacing: .01em;
  border-bottom: none;
  vertical-align: middle;
}

.ph-table thead tr:first-child th:first-child { text-align: left; }
.ph-table thead tr:first-child th:nth-child(2) { text-align: left; }

/* Trennlinien im Kopf */
.ph-table thead th + th {
  box-shadow: inset 1px 0 0 rgba(255, 255, 255, .22);
}

.ph-table thead tr:last-child th {
  font-size: .875rem;
  padding-top: .45rem;
  padding-bottom: .55rem;
  background: var(--ph-primary-dark);
}

.ph-table thead .ph-col-sem { width: var(--ph-col-sem); }
.ph-table thead .ph-col-sum { width: var(--ph-col-sum); }

/* =====================================================================
   Fixierte Spalten (Studienbereich + Modul)
   ===================================================================== */

/* Spalte 1: Studienbereich */
.ph-table .ph-group,
.ph-table thead tr:first-child th:first-child {
  position: -webkit-sticky;
  position: sticky;
  left: 0;
  width: var(--ph-col-group);
  min-width: var(--ph-col-group);
  max-width: var(--ph-col-group);
}

/* Spalte 2: Modul / Zeilenbezeichnung */
.ph-table .ph-module-cell,
.ph-table thead tr:first-child th:nth-child(2) {
  position: -webkit-sticky;
  position: sticky;
  left: var(--ph-col-group);
  width: var(--ph-col-module);
  min-width: var(--ph-col-module);
  max-width: var(--ph-col-module);
}

/* Zellen, die beide Beschriftungsspalten zusammenfassen (colspan=2) */
.ph-table .ph-group--single,
.ph-table tfoot th[colspan] {
  position: -webkit-sticky;
  position: sticky;
  left: 0;
  width: calc(var(--ph-col-group) + var(--ph-col-module));
  min-width: calc(var(--ph-col-group) + var(--ph-col-module));
}

/* Ebenen: Kopf über Körper, fixierte Spalten über scrollendem Inhalt */
.ph-table thead tr:first-child th:first-child,
.ph-table thead tr:first-child th:nth-child(2) { z-index: 5; }

.ph-table tbody .ph-group,
.ph-table tbody .ph-module-cell,
.ph-table tfoot th[colspan] { z-index: 2; }

/* Der Schatten am rechten Rand des fixierten Blocks liegt nicht auf den
   einzelnen Zellen, sondern als durchgehender Streifen auf .ph-table-frame
   (siehe unten) - dadurch keine Unterbrechungen an den Zeilengrenzen. */

/* =====================================================================
   Körper
   ===================================================================== */

.ph-table tbody th {
  font-weight: 500;
  text-align: left;
}

/* Studienbereich-Zelle */
.ph-table .ph-group {
  vertical-align: top;
  padding-top: .95rem;
  background: var(--ph-surface-alt);
  border-right: 1px solid var(--ph-line);
  font-weight: 700;
  color: var(--ph-ink);
}

.ph-table .ph-group__label {
  display: block;
  position: relative;
  padding-left: .75rem;
  font-size: .95rem;
  line-height: 1.3;
  hyphens: auto;
}

.ph-table .ph-group__label::before {
  content: "";
  position: absolute;
  left: 0;
  top: .15em;
  bottom: .15em;
  width: 4px;
  border-radius: 99px;
  background: var(--ph-primary);
}

/* Farbzuordnung der Studienbereiche ---------------------------------- */
.ph-table .ph-group--biw    { background: var(--ph-acc-biw); }
.ph-table .ph-group--fach   { background: var(--ph-acc-fach); }
.ph-table .ph-group--praxis { background: var(--ph-acc-praxis); }
.ph-table .ph-group--thesis  { background: var(--ph-acc-thesis); }
.ph-table .ph-group--neutral { background: var(--ph-acc-neutral); }

.ph-table .ph-group--biw    .ph-group__label::before { background: var(--ph-acc-biw-bar); }
.ph-table .ph-group--fach   .ph-group__label::before { background: var(--ph-acc-fach-bar); }
.ph-table .ph-group--praxis .ph-group__label::before { background: var(--ph-acc-praxis-bar); }
.ph-table .ph-group--thesis  .ph-group__label::before { background: var(--ph-acc-thesis-bar); }
.ph-table .ph-group--neutral .ph-group__label::before { background: var(--ph-acc-neutral-bar); }


.ph-table .ph-group--single {
  padding-top: .8rem;
  border-right: none;
}

/* Modulzelle */
.ph-table .ph-module-cell {
  background: var(--ph-surface);
  border-right: 1px solid var(--ph-line);
}

.ph-table .ph-code {
  display: block;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--ph-primary);
  margin-bottom: .1rem;
}

.ph-table .ph-title {
  display: block;
  font-size: .95rem;
  color: var(--ph-ink);
  hyphens: auto;
}

.ph-table .ph-add {
  color: var(--ph-ink-soft);
  font-weight: 400;
}

/* Zahlenspalten */
.ph-table .ph-num {
  text-align: center;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  white-space: nowrap;
  background: var(--ph-surface);
}

.ph-table .ph-num.is-empty { background: var(--ph-surface-alt); }

/* Summenspalte */
.ph-table .ph-sum {
  vertical-align: middle;
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--ph-primary-dark);
  background: var(--ph-primary-soft);
  border-left: 1px solid var(--ph-line);
}

/* Summenspalte uebernimmt exakt die Farbe der Studienbereichsspalte.
   Muss nach der Basisregel .ph-sum stehen, sonst gewinnt diese. */
.ph-table .ph-sum--biw    { background: var(--ph-acc-biw);    color: var(--ph-acc-biw-text); }
.ph-table .ph-sum--fach   { background: var(--ph-acc-fach);   color: var(--ph-acc-fach-text); }
.ph-table .ph-sum--praxis { background: var(--ph-acc-praxis); color: var(--ph-acc-praxis-text); }
.ph-table .ph-sum--thesis  { background: var(--ph-acc-thesis);  color: var(--ph-acc-thesis-text); }
.ph-table .ph-sum--neutral { background: var(--ph-acc-neutral); color: var(--ph-acc-neutral-text); }

/* Zwischenueberschrift innerhalb eines Studienbereichs
   (Zeile ohne eigene ECTS-Werte, die die folgenden Module einleitet) */
.ph-table .ph-subhead .ph-module-cell { background: var(--ph-surface-alt); }

.ph-table .ph-subhead .ph-title {
  font-size: .8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--ph-ink-soft);
}

.ph-table .ph-subhead .ph-num { background: var(--ph-surface-alt); }

/* Fussnotenzeichen im Modultitel */
.ph-table .ph-fn {
  font-weight: 700;
  color: var(--ph-primary);
  text-decoration: none;
}

/* Blockabschluss zwischen den Studienbereichen */
.ph-table .ph-block-end > th,
.ph-table .ph-block-end > td {
  border-bottom: 2px solid var(--ph-line-strong);
}

/* Zeilen-Hover */
@media (hover: hover) {
  .ph-table tbody tr:hover .ph-module-cell,
  .ph-table tbody tr:hover .ph-num:not(.ph-sum) {
    background: var(--ph-primary-softer);
  }
}

/* =====================================================================
   Fußzeile
   ===================================================================== */

.ph-table tfoot th,
.ph-table tfoot td {
  background: var(--ph-primary);
  color: #fff;
  font-weight: 700;
  border-bottom: none;
  font-variant-numeric: tabular-nums;
}

.ph-table tfoot th[colspan] {
  text-align: right;
  padding-right: 1.1rem;
}

.ph-table tfoot td {
  text-align: center;
}

.ph-table tfoot td:last-child {
  font-size: 1.1rem;
  background: var(--ph-primary-dark);
}

/* =====================================================================
   Hinweisblock
   ===================================================================== */

.ph-notes {
  margin-top: 1.75rem;
  padding: 1.4rem 1.5rem;
  background: var(--ph-primary-softer);
  border-left: 4px solid var(--ph-primary);
  border-radius: var(--ph-radius);
}

.ph-notes h2 {
  margin: 0 0 .9rem;
  font-size: 1.15rem;
  color: var(--ph-primary-dark);
}

.ph-notes h3 {
  margin: 1.2rem 0 .5rem;
  font-size: .95rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--ph-ink-soft);
}

.ph-notes h3:first-of-type { margin-top: 0; }

.ph-notes p { margin: 0 0 .75rem; line-height: 1.6; }

.ph-notes ul {
  margin: 0;
  padding-left: 1.2rem;
  line-height: 1.65;
}

.ph-notes li { margin-bottom: .45rem; }

.ph-notes strong { color: var(--ph-primary-dark); }

/* Prüfungen je Semester als Chips */
.ph-exams {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin: 0 0 .5rem;
}

/* Chip-Form analog zum Button-Stil der Website:
   rundum abgerundet, oben rechts eckig, Zahl im gefuellten Kreis. */
.ph-exams > div {
  display: inline-flex;
  align-items: center;
  gap: .85rem;
  padding: .3rem .3rem .3rem 1.05rem;
  background: #fff;
  border: 1px solid var(--ph-primary);
  border-radius: 99px 0 99px 99px;
}

.ph-exams dt {
  font-size: .875rem;
  font-weight: 600;
  color: var(--ph-ink);
  white-space: nowrap;
}

.ph-exams dd {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 2.1rem;
  height: 2.1rem;
  margin: 0;
  border-radius: 50%;
  background: var(--ph-primary);
  color: #fff;
  font-weight: 700;
  font-size: .95rem;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

/* =====================================================================
   Tablet
   ===================================================================== */

@media (max-width: 1100px) {
  .ph-module {
    --ph-col-group:  170px;
    --ph-col-module: 280px;
    --ph-col-sem:    68px;
    --ph-col-sum:    110px;
  }
  .ph-table { font-size: .9rem; }
}

/* =====================================================================
   Mobil: Studienbereich als schmale, vertikale Leiste
   ===================================================================== */

@media (max-width: 700px) {
  .ph-module {
    --ph-col-group:  38px;
    --ph-col-module: 170px;
    --ph-col-sem:    58px;
    --ph-col-sum:    88px;
  }

  .ph-table { font-size: .85rem; }

  .ph-table th,
  .ph-table td { padding: .55rem .6rem; }

  .ph-table .ph-group { padding: .5rem 0; }

  /* Safari: In Tabellenzellen mit rowspan laesst sich keine prozentuale
     Hoehe aufloesen. max-height: 100% wird dort zu 0 gerechnet und der
     Text verschwindet hinter overflow: hidden. Deshalb keine Prozenthoehe
     und kein Overflow-Clipping - die Zellhoehe ergibt sich aus dem Inhalt. */
  .ph-table .ph-group__label {
    display: block;
    -webkit-writing-mode: vertical-rl;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    margin: 0 auto;
    padding: .6rem 0 .6rem .55rem;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .02em;
    text-align: center;
    white-space: nowrap;
    hyphens: none;
  }

  .ph-table .ph-group__label::before {
    left: auto;
    right: 0;
    top: 0;
    bottom: 0;
    width: 3px;
  }

  /* Abschlussarbeit spannt beide Spalten: horizontal lassen */
  .ph-table .ph-group--single .ph-group__label {
    writing-mode: horizontal-tb;
    transform: none;
    padding: 0 0 0 .7rem;
    text-align: left;
    white-space: normal;
  }
  .ph-table .ph-group--single .ph-group__label::before {
    left: 0; right: auto; width: 4px;
  }

  /* Kopfzeile: Beschriftung der ersten Spalte platzsparend */
  .ph-table thead tr:first-child th:first-child {
    font-size: 0;
    padding: 0;
  }

  .ph-table thead tr:first-child th:nth-child(2) { font-size: .85rem; }

  .ph-table .ph-code { font-size: .68rem; }
  .ph-table .ph-title { font-size: .85rem; line-height: 1.3; }
  .ph-table .ph-add { display: block; font-size: .78rem; }
  .ph-table .ph-sum { font-size: .95rem; }

  .ph-table caption { padding: .8rem .9rem; font-size: .75rem; }

  .ph-notes { padding: 1.1rem 1.1rem; }
}

/* =====================================================================
   Sehr schmale Geräte
   ===================================================================== */

@media (max-width: 400px) {
  .ph-module {
    --ph-col-module: 148px;
    --ph-col-sem:    54px;
    --ph-col-sum:    80px;
  }
}

/* =====================================================================
   Barrierefreiheit / Druck
   ===================================================================== */

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  .ph-table-scroll { scroll-behavior: auto; }
}

@media print {
  .ph-table-scroll { overflow: visible; border: none; }
  .ph-table { min-width: 0; font-size: 9pt; }
  .ph-table thead th,
  .ph-table tfoot th,
  .ph-table tfoot td,
  .ph-table .ph-sum,
  .ph-table .ph-group {
    position: static;
    box-shadow: none;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .ph-table .ph-module-cell,
  .ph-table .ph-group--single,
  .ph-table tfoot th[colspan] { position: static; box-shadow: none; }
  .ph-table .ph-group__label { writing-mode: horizontal-tb; transform: none; }
}