/* ===== OdA Tables — 1:1 from Figma ===== */

/* Block wrapper (optional title + intro above the table). */
.oda-tbl-block__title {
  margin-bottom: 6px;
}
.oda-tbl-block__intro {
  margin-bottom: 24px;
}
.oda-tbl-block__intro p:last-child {
  margin-bottom: 0;
}

/* Rounded, bordered container (node 548:514). */
.oda-tbl-wrap {
  border: 1px solid #e6e4e0;
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
}
.oda-tbl-scroll {
  overflow-x: auto;
}
.oda-tbl-block {
  max-width: 880px;
  margin: 0 auto;
  /* Stop any inherited uppercase from the editor leaking into the table —
     only the header row and the explicit Tag style are uppercase. */
  text-transform: none;
}
/* With a contact-person sidebar the content sits in col-lg-8 (already a narrow
   measure), so tables must fill that column and left-align with the body text
   instead of being re-centered at 880px (which left them indented). */
.reusable-default-content--has-sidebar .oda-tbl-block {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}
.oda-tbl {
  width: 100%;
  margin: 0;
  border-collapse: collapse;
  table-layout: auto;
  font-family: "Inter", sans-serif;
  font-style: normal;
  text-transform: none;
}
.oda-tbl th,
.oda-tbl td {
  text-align: left;
  vertical-align: middle;
}

/* ----- Data table (Thema / Bildungsgang / Datum / Dauer / Kursort) ----- */
.oda-tbl--data thead th {
  height: 60px;
  padding: 10px 12px;
  background: #f4f4f3;
  border-bottom: 1px solid #e6e4e0;
  color: #87878d;
  font-size: 11px;
  font-weight: 600;
  line-height: 15.75px;
  letter-spacing: 0.84px;
  text-transform: uppercase;
  white-space: nowrap;
}
.oda-tbl--data thead th:first-child {
  padding-left: 16px;
  padding-right: 16px;
}
.oda-tbl--data tbody td {
  padding: 16px 12px;
  border-bottom: 1px solid #e6e4e0;
  color: #0f0f10;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 20.25px;
  letter-spacing: -0.08px;
  text-transform: none;
  white-space: nowrap;
}
/* First column grows and wraps; the rest hug their content. */
.oda-tbl--data tbody td:first-child,
.oda-tbl--data thead th:first-child {
  width: 100%;
}
.oda-tbl--data tbody td:first-child {
  padding: 16px;
  white-space: normal;
}
.oda-tbl--data tbody tr:last-child td {
  border-bottom: 0;
}

/* 3-column data tables (e.g. member directories): all columns share equal width,
   text wraps, and the table never needs a horizontal scroll. */
.oda-tbl--cols-3 {
  table-layout: fixed;
}
.oda-tbl--cols-3 thead th,
.oda-tbl--cols-3 tbody td,
.oda-tbl--cols-3 thead th:first-child,
.oda-tbl--cols-3 tbody td:first-child {
  width: 33.3333%;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Per-column / per-cell styles — scoped so they beat the base td rule. Only the
   explicit "tag" style is uppercase; a cell with no style stays the normal text. */
.oda-tbl td.oda-tbl__cell--bold,
.oda-tbl td.oda-tbl__cell--link {
  font-weight: 600;
}
.oda-tbl td.oda-tbl__cell--underline,
.oda-tbl td.oda-tbl__cell--link {
  text-decoration: underline;
  text-underline-position: from-font;
}
.oda-tbl td.oda-tbl__cell--tag {
  color: #87878d;
  font-size: 11px;
  line-height: 15.75px;
  letter-spacing: 0.84px;
  text-transform: uppercase;
  white-space: nowrap;
}
.oda-tbl .oda-tbl__cell--right {
  text-align: right;
}

/* ----- Directory table (red title + grey label column + value columns) ----- */
/* Fixed layout so the value columns split the space equally (Figma flex:1 0 0),
   regardless of how much text each holds; the label column keeps its 206px. */
.oda-tbl--dir {
  table-layout: fixed;
}
.oda-tbl--dir thead th {
  background: #f4f4f3;
  border-bottom: 1px solid #e6e4e0;
  padding: 13px 20px 16px;
  vertical-align: middle;
}
.oda-tbl--dir .oda-tbl__dir-lbl {
  width: 206px;
}
.oda-tbl--dir .oda-tbl__dir-title {
  color: #c00;
  font-size: 13.5px;
  font-weight: 700;
  line-height: 21.6px;
  letter-spacing: -0.067px;
  text-align: center;
}
/* Vertical divider between value columns (2-column "Ressort" variant); none
   after the last column, none in single-column variants. Header part is the
   darker #e6e4e0, body rows the lighter #efeeec (matches the horizontal rules). */
.oda-tbl--dir .oda-tbl__dir-title:not(:last-child) {
  border-right: 1px solid #e6e4e0;
}
.oda-tbl--dir td.oda-tbl__dir-val:not(:last-child) {
  border-right: 1px solid #efeeec;
}
.oda-tbl--dir tbody th.oda-tbl__dir-lbl {
  width: 206px;
  padding: 18px 20px 19px;
  background: #f4f4f3;
  border-bottom: 1px solid #efeeec;
  color: #87878d;
  font-size: 11px;
  font-weight: 700;
  line-height: 17.6px;
  letter-spacing: 0.88px;
  text-transform: uppercase;
  text-align: left;
  vertical-align: top;
}
.oda-tbl--dir tbody td.oda-tbl__dir-val {
  padding: 18px 20px 19px;
  border-bottom: 1px solid #efeeec;
  color: #0f0f10;
  font-size: 14px;
  line-height: 22.4px;
  letter-spacing: -0.08px;
  text-align: center;
  vertical-align: middle;
  overflow-wrap: break-word;
}
.oda-tbl--dir td.oda-tbl__dir-val strong,
.oda-tbl--dir td.oda-tbl__dir-val b {
  font-weight: 600;
}
.oda-tbl--dir td.oda-tbl__dir-val p {
  margin: 0;
}
.oda-tbl--dir tbody tr:last-child th,
.oda-tbl--dir tbody tr:last-child td {
  border-bottom: 0;
}

/* ----- Process map (548:1854): INPUT → KERNPROZESSE → OUTPUT grid with red
   arrows and a vertical black "Kommunikation" strip down the right side. ----- */
.oda-pmap-scroll {
  overflow-x: auto;
}
.oda-pmap {
  display: grid;
  /* input | arrow | kernprozesse | arrow | kommunikation strip | output */
  grid-template-columns: minmax(0, 1fr) 36px minmax(0, 1.15fr) 36px 54px minmax(0, 1fr);
  min-width: 660px;
  border: 1px solid #e6e4e0;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  font-family: "Inter", sans-serif;
}
/* Row/section wrappers are transparent on desktop so their cells stay direct
   grid items; on mobile they become stacked cards (see the @media below). */
.oda-pmap__row,
.oda-pmap__sec {
  display: contents;
}
/* Mobile-only pieces (per-row labels, Kommunikation box, down-arrows) — hidden on desktop. */
.oda-pmap__mlabel,
.oda-pmap__comm-m,
.oda-pmap__darrow {
  display: none;
}

/* Header row (all cells grey). */
.oda-pmap__h {
  grid-row: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px 16px 15px;
  background: #f4f4f3;
  border-bottom: 1px solid #e6e4e0;
  color: #0f0f10;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 15.75px;
  letter-spacing: 1.05px;
  text-transform: uppercase;
  text-align: center;
}
.oda-pmap__h--in {
  grid-column: 1;
}
.oda-pmap__h--kern {
  grid-column: 2 / span 3;
}
.oda-pmap__h--comm {
  grid-column: 5;
}
.oda-pmap__h--out {
  grid-column: 6;
}

/* Vertical communication strip — spans every body row. Dark grey (not pure
   black) per client feedback ("Schwarz ist etwas hart – eher dunkelgrau"). */
.oda-pmap__comm {
  grid-column: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #424248;
}
.oda-pmap__comm-label {
  transform: rotate(-90deg);
  white-space: nowrap;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  line-height: 19.5px;
  letter-spacing: 0.52px;
  text-align: center;
}

/* Management row: red title spanning the middle, empty white sides. */
.oda-pmap__mgmt-in {
  grid-column: 1;
}
.oda-pmap__mgmt-out {
  grid-column: 6;
}
.oda-pmap__mgmt-in,
.oda-pmap__mgmt-out {
  display: none; /* band spans the full table width now (client feedback) */
}
.oda-pmap__mgmt-kern {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px 16px 23px;
  background: #f4f4f3;
  border-bottom: 1px solid #e6e4e0;
}
/* Supportprozesse band — mirrors management, at the bottom (border on top). */
.oda-pmap__sup-in {
  grid-column: 1;
}
.oda-pmap__sup-out {
  grid-column: 6;
}
.oda-pmap__sup-in,
.oda-pmap__sup-out {
  background: #fff;
  border-top: 1px solid #e6e4e0;
}
.oda-pmap__sup-kern {
  grid-column: 2 / span 3;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px 16px 23px;
  background: #f4f4f3;
  border-top: 1px solid #e6e4e0;
}

/* Red kernprozesse title (per-row). */
.oda-pmap__sup-kern span,
.oda-pmap__kern span {
  color: #c00;
  font-size: 14.5px;
  font-weight: 700;
  line-height: 19.58px;
  letter-spacing: -0.072px;
  text-align: center;
}
/* Management- und Supportprozesse band: dark grey, not red (client feedback). */
.oda-pmap__mgmt-kern span {
  color: #424248;
  font-size: 14.5px;
  font-weight: 700;
  line-height: 19.58px;
  letter-spacing: -0.072px;
  text-align: center;
}

/* Process rows. */
.oda-pmap__in {
  grid-column: 1;
  background: #fff;
}
.oda-pmap__out {
  grid-column: 6;
  background: #fff;
}
.oda-pmap__in,
.oda-pmap__out {
  padding: 18px 18px 19px;
  border-bottom: 1px solid #e6e4e0;
}
.oda-pmap__kern {
  grid-column: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: #f4f4f3;
  border-bottom: 1px solid #e6e4e0;
}
.oda-pmap__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f4f4f3;
  border-bottom: 1px solid #e6e4e0;
}
.oda-pmap__arrow--l {
  grid-column: 2;
}
.oda-pmap__arrow--r {
  grid-column: 4;
}
.oda-pmap__tri {
  width: 0;
  height: 0;
  border-top: 14px solid transparent;
  border-bottom: 14px solid transparent;
  border-left: 18px solid #c00;
}

/* Bullet lists in the input/output columns (– dash + grey/dark text). */
.oda-pmap__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.oda-pmap__list li {
  position: relative;
  padding-left: 14px;
  color: #424248;
  font-size: 13px;
  font-weight: 400;
  line-height: 20.15px;
  letter-spacing: -0.08px;
}
.oda-pmap__list li::before {
  content: "\2013";
  position: absolute;
  left: 0;
  color: #87878d;
  font-weight: 600;
}

/* Last body row drops its bottom border. */
.oda-pmap .is-last {
  border-bottom: 0;
}

/* ===== Mobile: process map → stacked cards (Figma 1348:1376) =====
   Managementprozesse bar (10px gap) then one card per process: Input list →
   ↓ → red process box → ↓ → black Kommunikation box → ↓ → Output list. Card:
   white, 1px #e6e4e0, radius 10, padding 24/15, gap 16 with 26×16 red arrows. */
@media (max-width: 782px) {
  /* Client feedback: the Kernprozesse map ("zajebana tabela") is hidden on
     mobile — too complex for small screens. Rules below are kept but inert. */
  .oda-pmap-scroll { display: none; }
  .oda-pmap {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
  }
  .oda-pmap__h,
  .oda-pmap__comm,
  .oda-pmap__arrow,
  .oda-pmap__mgmt-in,
  .oda-pmap__mgmt-out,
  .oda-pmap__sup-in,
  .oda-pmap__sup-out { display: none; }

  /* Managementprozesse → grey header bar (dark centered title). */
  .oda-pmap__mgmt-kern {
    padding: 16px;
    background: #f4f4f3;
    border: 1px solid #e6e4e0;
    border-radius: 10px;
  }
  .oda-pmap__mgmt-kern span {
    color: #0f0f10;
    font-size: 15px;
    font-weight: 700;
    line-height: 20.25px;
    letter-spacing: -0.15px;
  }
  .oda-pmap__sup-kern {
    padding: 16px;
    background: #f4f4f3;
    border: 1px solid #e6e4e0;
    border-radius: 10px;
  }
  .oda-pmap__sup-kern span {
    color: #0f0f10;
    font-size: 15px;
    font-weight: 700;
    line-height: 20.25px;
    letter-spacing: -0.15px;
  }

  /* One process = one card. */
  .oda-pmap__row {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    padding: 24px 15px;
    border: 1px solid #e6e4e0;
    border-radius: 10px;
    background: #fff;
  }

  /* Input / Output: uppercase label (gap 9) + bordered dash rows. */
  .oda-pmap__sec {
    display: flex;
    flex-direction: column;
    gap: 9px;
  }
  .oda-pmap__mlabel {
    display: block;
    color: #87878d;
    font-size: 10.5px;
    font-weight: 600;
    line-height: 15.75px;
    letter-spacing: 0.84px;
    text-transform: uppercase;
  }
  .oda-pmap__in,
  .oda-pmap__out {
    padding: 0;
    border-bottom: 0;
    background: transparent;
  }
  .oda-pmap__in .oda-pmap__list,
  .oda-pmap__out .oda-pmap__list { gap: 0; }
  .oda-pmap__in .oda-pmap__list li,
  .oda-pmap__out .oda-pmap__list li {
    min-height: 29px;
    padding: 4px 0 4px 14px;
    border-bottom: 1px solid #efeeec;
    color: #0f0f10;
    font-size: 13.5px;
    line-height: 20.25px;
  }
  .oda-pmap__in .oda-pmap__list li:last-child,
  .oda-pmap__out .oda-pmap__list li:last-child { border-bottom: 0; }
  .oda-pmap__in .oda-pmap__list li::before,
  .oda-pmap__out .oda-pmap__list li::before {
    top: 4px;
    color: #87878d;
    font-size: 12.5px;
  }

  /* Red process box + black Kommunikation box (full width, radius 8). */
  .oda-pmap__kern {
    padding: 15px;
    border-bottom: 0;
    border-radius: 8px;
    background: #fdecec;
    border: 1px solid rgba(204, 0, 0, 0.22);
  }
  .oda-pmap__comm-m {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px;
    border-radius: 8px;
    background: #0f0f10;
    border: 1px solid rgba(204, 0, 0, 0.22);
  }
  .oda-pmap__comm-m span {
    color: #fff;
    font-size: 14.5px;
    font-weight: 700;
    line-height: 19.58px;
    letter-spacing: -0.072px;
    text-align: center;
  }

  /* Red down-arrows (26×16) as real items between the boxes. */
  .oda-pmap__darrow {
    display: block;
    align-self: center;
    width: 0;
    height: 0;
    border-left: 13px solid transparent;
    border-right: 13px solid transparent;
    border-top: 16px solid #c00;
  }
}

/* ----- Requirements / comparison table (548:2058) -----
   label (205px) | description (flex) | value 1 (140px) | value 2 (140px).
   Grey section-header bands, red section titles, red-dash bullet lists. */
.oda-cmp-scroll {
  overflow-x: auto;
}
.oda-cmp {
  min-width: 720px;
  border: 1px solid #e6e4e0;
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
  font-family: "Inter", sans-serif;
}
.oda-cmp__sec,
.oda-cmp__row {
  display: flex;
  align-items: stretch;
  border-bottom: 1px solid #e6e4e0;
}
.oda-cmp__sec {
  background: #f4f4f3;
}
.oda-cmp > .oda-cmp__sec:last-child,
.oda-cmp > .oda-cmp__row:last-child {
  border-bottom: 0;
}

/* Column widths (label / description / two value columns). */
.oda-cmp__label,
.oda-cmp__sec-title {
  flex: 0 0 205px;
}
.oda-cmp__desc,
.oda-cmp__sec-desc {
  flex: 1 0 0;
  min-width: 0;
}
.oda-cmp__val,
.oda-cmp__sec-v {
  flex: 0 0 140px;
}

/* Section-header band (60px, vertically centred). */
.oda-cmp__sec-title,
.oda-cmp__sec-desc,
.oda-cmp__sec-v {
  display: flex;
  align-items: center;
  min-height: 60px;
}
.oda-cmp__sec-title {
  padding: 10px 16px;
  color: #c00;
  font-size: 11px;
  font-weight: 600;
  line-height: 15.75px;
  letter-spacing: 0.84px;
  text-transform: uppercase;
}
.oda-cmp__sec-desc {
  padding: 10px 12px;
}
.oda-cmp__sec-v {
  padding: 10px 12px;
  justify-content: center;
  color: #87878d;
  font-size: 11px;
  font-weight: 600;
  line-height: 15.75px;
  letter-spacing: 0.84px;
  text-transform: uppercase;
  text-align: center;
}

/* Data rows (cells top-aligned via padding). */
.oda-cmp__label {
  padding: 16px;
  color: #0f0f10;
  font-size: 14px;
  font-weight: 600;
  line-height: 20.25px;
  letter-spacing: -0.08px;
}
.oda-cmp__desc {
  padding: 16px 12px;
  color: #0f0f10;
  font-size: 14px;
  line-height: 20.25px;
  letter-spacing: -0.08px;
}
.oda-cmp__val {
  padding: 16px 12px;
  text-align: center;
  color: #0f0f10;
  font-size: 14px;
  font-weight: 400;
  line-height: 20.25px;
  letter-spacing: -0.08px;
}

/* Description rich text: tight paragraphs + red-dash bullet lists, 10px between
   blocks (Figma gap-10). Bold lead-ins stay dark. */
.oda-cmp__desc > * + * {
  margin-top: 10px;
}
.oda-cmp__desc p {
  margin: 0;
}
.oda-cmp__desc ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.oda-cmp__desc li {
  position: relative;
  padding: 2.5px 0 2.5px 14px;
  color: #424248;
  line-height: 19.5px;
}
.oda-cmp__desc li::before {
  content: "\2013";
  position: absolute;
  left: 0;
  top: 2.5px;
  color: #c00;
  font-size: 13px;
  line-height: 19.5px;
}
.oda-cmp__desc strong,
.oda-cmp__desc b {
  font-weight: 600;
  color: #0f0f10;
}

/* ===== Mobile: requirements table → section heading + one card per row
   (Figma 1349:2852): label = title band, description block, then
   Hauptverantwortlich / Assistierend as label:value rows. ===== */
@media (max-width: 782px) {
  .oda-cmp-scroll {
    overflow-x: visible;
  }
  .oda-cmp {
    display: block;
    min-width: 0;
    border: 0;
    border-radius: 0;
    overflow: visible;
    background: transparent;
  }
  /* Section → small red uppercase heading. */
  .oda-cmp__sec {
    display: block;
    margin: 24px 0 12px;
    background: transparent;
    border-bottom: 0;
  }
  .oda-cmp > .oda-cmp__sec:first-child {
    margin-top: 0;
  }
  .oda-cmp__sec-title {
    flex: none;
    min-height: 0;
    padding: 0;
  }
  .oda-cmp__sec-desc,
  .oda-cmp__sec-v {
    display: none;
  }
  /* Row → card. */
  .oda-cmp__row {
    display: block;
    margin: 0 0 16px;
    border: 1px solid #e6e4e0;
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
  }
  .oda-cmp__label {
    flex: none;
    display: block;
    padding: 12px 15px;
    background: #f4f4f3;
    border-bottom: 1px solid #efeeec;
    font-size: 15px;
    font-weight: 600;
    line-height: 22.5px;
  }
  .oda-cmp__desc {
    flex: none;
    display: block;
    padding: 12px 15px;
    border-bottom: 1px solid #efeeec;
    font-size: 13.5px;
    line-height: 20.25px;
  }
  .oda-cmp__desc:empty {
    display: none;
  }
  .oda-cmp__val {
    flex: none;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding: 8px 15px;
    border-bottom: 1px solid #efeeec;
    text-align: right;
    font-size: 13.5px;
  }
  .oda-cmp__val:empty {
    display: none;
  }
  .oda-cmp__val::before {
    content: attr(data-label);
    flex: 0 1 auto;
    text-align: left;
    color: #87878d;
    font-size: 10.5px;
    font-weight: 600;
    line-height: 15.75px;
    letter-spacing: 0.84px;
    text-transform: uppercase;
  }
  .oda-cmp__row > .oda-cmp__val:last-child {
    border-bottom: 0;
  }
}

/* ----- Plain HTML tables embedded in accordion/section bodies (oda-mtable) ----- */
.oda-mtable-wrap { overflow-x: auto; }
.oda-mtable {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  line-height: 1.45;
}
.oda-mtable th,
.oda-mtable td {
  text-align: left;
  vertical-align: top;
  padding: 10px 14px;
  border-bottom: 1px solid #e6e4e0;
}
.oda-mtable thead th {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.84px;
  text-transform: uppercase;
  color: #87878d;
  white-space: nowrap;
}
.oda-mtable tbody td:first-child { font-weight: 600; }
.oda-mtable tbody tr:last-child td { border-bottom: 0; }

/* ===== Kursleitende requirements table (Figma 522:372) — one bordered table, 3 sections ===== */
.oda-ktable-wrap { overflow-x: auto; }
.oda-ktable { width: 100%; border-collapse: collapse; border: 1px solid #e6e4e0; border-radius: 10px; font-size: 14px; }
.oda-ktable thead { display: none; }
.oda-ktable th, .oda-ktable td { text-align: left; vertical-align: top; padding: 14px 16px; border-bottom: 1px solid #e6e4e0; }
.oda-ktable__sechead th { background: #f4f4f3; vertical-align: middle; }
.oda-ktable__sechead th:first-child { color: #c00; font-size: 11px; font-weight: 700; letter-spacing: .84px; text-transform: uppercase; }
.oda-ktable__sechead .oda-ktable__mark { color: #87878d; font-size: 11px; font-weight: 600; letter-spacing: .84px; text-transform: uppercase; }
.oda-ktable__c1 { width: 205px; font-weight: 600; color: #0f0f10; }
.oda-ktable__mark { width: 140px; text-align: center; color: #0f0f10; }
.oda-ktable td { color: #424248; line-height: 1.5; }
.oda-ktable__bullets { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.oda-ktable__bullets li { position: relative; padding-left: 16px; }
.oda-ktable__bullets li::before { content: "–"; position: absolute; left: 0; color: #c00; font-weight: 700; }
.oda-ktable tbody:last-child tr:last-child td, .oda-ktable tbody:last-child tr:last-child th { border-bottom: 0; }
.oda-notice { background: #f4f4f3; border-radius: 12px; padding: 16px 20px; font-size: 15px; color: #0f0f10; }

/* ===== Vorstand "Struktur Vorstand" cards (Figma 513:1325) ===== */
.oda-struk { display: flex; flex-direction: column; gap: 17px; }
.oda-struk__card { border: 1px solid #e6e4e0; border-radius: 10px; overflow: hidden; }
.oda-struk__title { padding: 14px; text-align: center; color: #c00; font-weight: 700; font-size: 16px; border-bottom: 1px solid #e6e4e0; }
.oda-struk__grid { display: grid; grid-template-columns: 206px 1fr; }
.oda-struk__grid--2 { grid-template-columns: 206px 1fr 1fr; }
.oda-struk__lbl { display: flex; align-items: center; padding: 14px 16px; background: #f4f4f3; font-size: 11px; font-weight: 600; letter-spacing: .84px; text-transform: uppercase; color: #87878d; border-bottom: 1px solid #e6e4e0; }
.oda-struk__colhead { padding: 14px 16px; text-align: center; color: #c00; font-weight: 700; border-bottom: 1px solid #e6e4e0; }
.oda-struk__val { padding: 14px 16px; text-align: center; color: #424248; font-size: 14px; line-height: 1.6; border-bottom: 1px solid #e6e4e0; }
.oda-struk__val b { color: #0f0f10; font-weight: 600; }

/* Two directory tables side-by-side on desktop (Vorstand Ressorts), stacked on mobile. */
.oda-struk-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
@media (max-width: 782px) { .oda-struk-cols { grid-template-columns: 1fr; gap: 10px; } }

/* Member tables (Lernortkooperation/Kommissionen): first column reads as a link (semibold + underline) per Figma. */
.oda-mtable tbody td:first-child { text-decoration: underline; text-underline-position: from-font; }

/* Member-table head: grey band (matches the data-table head component). */
.oda-mtable thead th { background: #f4f4f3; padding-top: 12px; padding-bottom: 12px; }
.oda-mtable thead tr th:first-child { border-top-left-radius: 8px; }
.oda-mtable thead tr th:last-child { border-top-right-radius: 8px; }

/* Accordion sub-sections (title + description + separators), e.g. Hospitieren. */
.oda-acc__content .oda-acc-sub { margin: 0 0 6px; font-size: 16px; font-weight: 600; color: #0f0f10; }
.oda-acc__content .oda-acc-sep { border: 0; border-top: 1px solid #e6e4e0; margin: 20px 0; }

/* Vorstand member cards (name + red-bullet list) inside accordions. */
.oda-vgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 28px; }
.oda-vmember__name { display: block; margin-bottom: 8px; font-weight: 600; color: #0f0f10; }
.oda-vmember__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.oda-vmember__list li { position: relative; padding-left: 16px; color: #424248; font-size: 14px; line-height: 1.45; }
.oda-vmember__list li::before { content: "•"; position: absolute; left: 0; color: #c00; }
@media (max-width: 600px) { .oda-vgrid { grid-template-columns: 1fr; } }

/* PDF links inside data-table cells (Kurse Thema column): inherit the cell colour. */
.oda-tbl--data td a { color: inherit; text-decoration: underline; text-underline-position: from-font; }
.oda-tbl--data td a:hover { color: #c00; }

/* ===== Beratungsstellen directory (Lernende → Kontaktdaten, Figma 1389:3879)
   Themen (fixed narrow column) | Beratungsstellen (dash list: red-bold name +
   grey description). Header matches the data-table header (uppercase on #f4f4f3). */
.oda-beratung {
  width: 100%;
  overflow-x: auto;
}
.oda-beratung table {
  width: 100%;
  margin: 0;
  border-collapse: collapse;
  table-layout: fixed;
  font-family: "Inter", sans-serif;
}
.oda-beratung thead th {
  height: 60px;
  padding: 10px 12px;
  background: #f4f4f3;
  border-bottom: 1px solid #e6e4e0;
  color: #87878d;
  font-size: 11px;
  font-weight: 600;
  line-height: 15.75px;
  letter-spacing: 0.84px;
  text-transform: uppercase;
  text-align: left;
  vertical-align: middle;
}
.oda-beratung thead th:first-child,
.oda-beratung tbody th {
  width: 230px;
}
.oda-beratung thead th:first-child {
  padding-left: 16px;
}
.oda-beratung tbody th {
  padding: 16px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid #e6e4e0;
  color: #0f0f10;
  font-size: 14px;
  font-weight: 600;
  line-height: 20.25px;
  letter-spacing: -0.08px;
}
.oda-beratung tbody td {
  padding: 16px 12px;
  vertical-align: top;
  border-bottom: 1px solid #e6e4e0;
}
.oda-beratung tbody tr:last-child th,
.oda-beratung tbody tr:last-child td {
  border-bottom: 0;
}
.oda-beratung ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.oda-beratung li {
  position: relative;
  margin: 0;
  padding-left: 14px;
  color: #424248;
  font-size: 14px;
  line-height: 19.5px;
  letter-spacing: -0.08px;
}
.oda-beratung li::before {
  content: "–";
  position: absolute;
  left: 0;
  top: 0;
  color: #c00;
}
.oda-beratung__name {
  color: #c00;
  font-weight: 600;
}
/* ===== Mobile: tables → stacked cards (Figma 571:602) =======================
   Each row becomes a card: the first cell is a grey title band; every other cell
   shows its column header as a small uppercase label with the value on the right.
   Applies to the data table (Kurse listing, Wichtige Termine, …), the directory
   table and plain HTML tables (.oda-mtable). Beratungsstellen gets a block
   variant (its second column is a bulleted list, not a short value). */
@media (max-width: 782px) {
  /* Data table + plain HTML table: each ROW becomes a card (first cell = title
     band, other cells = uppercase label + right value). */
  .oda-tbl-wrap:has(.oda-tbl--data) {
    border: 0;
    border-radius: 0;
    overflow: visible;
    background: transparent;
  }

  .oda-tbl--data,
  .oda-tbl--data tbody,
  .oda-mtable,
  .oda-mtable tbody {
    display: block;
    width: 100%;
  }

  /* Hide the header row — its labels move into each cell via data-label. */
  .oda-tbl--data thead,
  .oda-mtable thead {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .oda-tbl--data tbody tr,
  .oda-mtable tbody tr {
    display: block;
    width: 100%;
    margin: 0 0 16px;
    border: 1px solid #e6e4e0;
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
  }
  .oda-tbl--data tbody tr:last-child,
  .oda-mtable tbody tr:last-child {
    margin-bottom: 0;
  }

  /* Title = the row's first cell. */
  .oda-tbl--data tbody tr > :first-child,
  .oda-mtable tbody tr > :first-child {
    display: block;
    width: auto;
    margin: 0;
    padding: 12px 15px;
    background: #f4f4f3;
    border-bottom: 1px solid #efeeec;
    color: #0f0f10;
    font-size: 15px;
    font-weight: 600;
    line-height: 22.5px;
    letter-spacing: -0.08px;
    text-align: left;
    white-space: normal;
  }
  .oda-tbl--data tbody tr > :first-child::before,
  .oda-mtable tbody tr > :first-child::before {
    content: none;
  }

  /* Field rows = remaining cells: uppercase label (left) + value (right). */
  .oda-tbl--data tbody td:not(:first-child),
  .oda-mtable tbody td:not(:first-child) {
    display: flex;
    align-items: baseline;
    justify-content: flex-start;
    gap: 16px;
    width: auto;
    padding: 8px 15px;
    border-bottom: 1px solid #efeeec;
    color: #0f0f10;
    font-size: 13.5px;
    font-weight: 400;
    line-height: 20.25px;
    letter-spacing: -0.08px;
    text-align: left;
    white-space: normal;
  }
  .oda-tbl--data tbody tr td:last-child,
  .oda-mtable tbody tr td:last-child {
    border-bottom: 0;
  }

  .oda-tbl--data tbody td:not(:first-child)::before,
  .oda-mtable tbody td:not(:first-child)::before {
    content: attr(data-label);
    flex: 0 1 auto;
    padding-right: 12px;
    text-align: left;
    color: #87878d;
    font-size: 10.5px;
    font-weight: 600;
    line-height: 15.75px;
    letter-spacing: 0.84px;
    text-transform: uppercase;
  }

  /* ----- Directory table → ONE card: red section title (col1) + label:value
     rows (Figma 1368:1690). The .oda-tbl-wrap border stays = the card. ----- */
  .oda-tbl--dir,
  .oda-tbl--dir tbody { display: block; width: 100%; }
  .oda-tbl--dir thead,
  .oda-tbl--dir thead tr { display: block; }
  .oda-tbl--dir thead .oda-tbl__dir-lbl { display: none; }
  .oda-tbl--dir thead .oda-tbl__dir-title {
    display: block;
    width: auto;
    padding: 12px 15px;
    background: #f4f4f3;
    border-bottom: 1px solid #efeeec;
    color: #c00;
    font-size: 15px;
    font-weight: 600;
    line-height: 22.5px;
    letter-spacing: -0.08px;
    text-align: left;
  }
  .oda-tbl--dir tbody tr {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    width: auto;
    padding: 8px 15px;
    border-bottom: 1px solid #efeeec;
  }
  .oda-tbl--dir tbody tr:last-child { border-bottom: 0; }
  .oda-tbl--dir tbody th.oda-tbl__dir-lbl {
    flex: 0 0 auto;
    width: auto;
    padding: 2px 0 0;
    border: 0;
    background: none;
    color: #87878d;
    font-size: 10.5px;
    font-weight: 600;
    line-height: 15.75px;
    letter-spacing: 0.84px;
    text-transform: uppercase;
    text-align: left;
  }
  .oda-tbl--dir tbody td.oda-tbl__dir-val {
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
    padding: 0;
    border: 0;
    color: #0f0f10;
    font-size: 13.5px;
    line-height: 20.25px;
    letter-spacing: -0.08px;
    text-align: left;
  }

  /* Reset cell modifiers that don't apply when stacked. */
  .oda-tbl--data tbody td.oda-tbl__cell--tag,
  .oda-mtable tbody td:not(:first-child) {
    white-space: normal;
  }

  /* ----- Beratungsstellen: Thema title band + full-width list ----- */
  .oda-beratung table,
  .oda-beratung thead,
  .oda-beratung tbody,
  .oda-beratung tr,
  .oda-beratung th,
  .oda-beratung td {
    display: block;
    width: auto;
  }
  .oda-beratung table {
    min-width: 0;
    table-layout: auto;
  }
  .oda-beratung thead {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .oda-beratung tbody tr {
    margin: 0 0 16px;
    border: 1px solid #e6e4e0;
    border-radius: 10px;
    overflow: hidden;
  }
  .oda-beratung tbody tr:last-child {
    margin-bottom: 0;
  }
  .oda-beratung tbody th {
    width: auto;
    padding: 12px 15px;
    background: #f4f4f3;
    border-bottom: 1px solid #efeeec;
  }
  .oda-beratung tbody td {
    padding: 14px 15px;
    border-bottom: 0;
  }
}