/* dgm_section_worlds, layouts "mosaic" and "index", density "compact" (Akademie brief 07, home portal, 2026-11-13). Additive: loaded
   only by an index with density "compact" (class wo--compact); nothing else of the element reads it.
   A second row below the topics mosaic on another page: the industries as a small picture viewer beside their names in
   two columns (desktop), on tablets and phones a sideways strip of picture tiles in two rows. Aligned to the content
   column (1152 px); the ground stays the element's (tone) or the site theme's. */
.wo--index.wo--compact { padding: 0 0 56px; }
.wo--compact .wo__inner { width: min(100% - 48px, 1152px); padding-top: 48px; }
.wo--index.wo--compact .wo__intro { grid-template-columns: minmax(0, 1fr) auto; gap: 6px 32px; padding: 0 0 26px; animation: none; }
.wo--index.wo--compact .wo__h { grid-row: 1; grid-column: 1; font-size: clamp(1.75rem, 2.5vw, 2.25rem); font-weight: 700; letter-spacing: -.02em; }
.wo--index.wo--compact .wo__lead { grid-row: 2; grid-column: 1; align-self: start; max-width: 44rem; margin: 0; font-size: 1rem; }
.wo--index.wo--compact .wo__btns { grid-row: 1; grid-column: 2; align-self: end; margin: 0; }
/* the way to the overview as a quiet link (the secondary button of the element, without its frame) */
.wo--compact .wo__btn--secondary { min-height: 44px; padding: .5rem 0; border: 0 !important; background: none !important; color: #00abe3 !important; box-shadow: none; font-weight: 600; }
.wo--compact .wo__btn--secondary:hover { color: #007aa8 !important; transform: none; }
.wo--compact .wo__btn--secondary i { order: 2; transition: transform .2s ease; }
.wo--compact .wo__btn--secondary:hover i { transform: translateX(3px); }

@media (min-width: 1024px) {
  .wo--compact .wo__stage { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 0 36px; }
  .wo--compact .wo__viewer { min-height: 0; border-radius: 16px; }
  .wo--compact .wo__index { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(7, auto); grid-auto-flow: column;
    gap: 2px 20px; align-content: start; }
  .wo--compact .wo__row { border-top: 1px solid #e3edf1; }
  .wo--compact .wo__ra { min-height: 46px; padding: 6px 8px 6px 10px; gap: 10px; border-radius: 8px; }
  .wo--compact .wo__rname { font-size: 1.0625rem; white-space: normal; text-overflow: clip; line-height: 1.2; }
  .wo--compact .wo__rcount { font-size: .875rem; }
  /* the row is the link; no arrow per row (the names get the room), the chosen row shows by its ground */
  .wo--compact .wo__ra { grid-template-columns: minmax(0, 1fr) auto; }
  .wo--compact .wo__ra .wo__go { display: none; }
  .wo--compact .wo__row.is-on .wo__rname { transform: translateX(4px); }
  .wo--compact .wo__layer { width: calc((100% - 36px) * 5 / 12); border-radius: 16px; }
  .wo--compact .wo__cap { padding: 20px 22px 20px; }
  .wo--compact .wo__cname { font-size: clamp(1.375rem, 1.9vw, 1.75rem); max-width: 16ch; }
  .wo--compact .wo__cap .wo__text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-size: .9375rem; }
  .wo--compact .wo__cap .wo__next { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
  .wo--compact .wo__row:first-child .wo__layer { animation: none; }
}

/* tablets and phones: a sideways strip, two rows of picture tiles (the next column peeks in), native scroll with snap */
@media (min-width: 1024px) and (max-width: 1279.98px) {
  .wo--compact .wo__stage { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
  .wo--compact .wo__layer { width: calc((100% - 36px) * 4 / 12); }
  .wo--compact .wo__rname { font-size: 1rem; }
  .wo--compact .wo__cap .wo__text { display: none; }
}
@media (max-width: 1023.98px) {
  .wo--index.wo--compact { padding: 0 0 48px; }
  .wo--compact .wo__inner { width: 100%; padding-top: 48px; }
  .wo--index.wo--compact .wo__intro { padding: 0 24px 18px; grid-template-columns: minmax(0, 1fr); }
  .wo--index.wo--compact .wo__h, .wo--index.wo--compact .wo__lead, .wo--index.wo--compact .wo__btns { grid-column: 1; grid-row: auto; }
  .wo--index.wo--compact .wo__h { font-size: clamp(1.75rem, 7vw, 2.125rem); }
  .wo--index.wo--compact .wo__btns { margin-top: 2px; flex-direction: row; align-items: flex-start; }
  .wo--compact .wo__stage { grid-template-columns: none; grid-auto-flow: column; grid-template-rows: repeat(2, 108px); grid-auto-columns: minmax(200px, 30%);
    gap: 8px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: 24px; padding: 0 24px 10px;
    scrollbar-width: thin; scrollbar-color: rgb(0 62 82 / .34) rgb(0 62 82 / .08); }
  /* the row continues: the next tile peeks in at the right edge, a visible track below shows the strip scrolls */
  .wo--compact .wo__stage::-webkit-scrollbar { height: 6px; }
  .wo--compact .wo__stage::-webkit-scrollbar-thumb { background: rgb(0 62 82 / .34); border-radius: 3px; }
  .wo--compact .wo__stage::-webkit-scrollbar-track { background: rgb(0 62 82 / .08); border-radius: 3px; }
  .wo--compact .wo__row, .wo--compact .wo__row:first-child { min-height: 0; height: 108px; scroll-snap-align: start; border-radius: 12px; }
  .wo--compact .wo__ra { padding: 12px 14px; border-radius: 12px; }
  .wo--compact .wo__rname { font-size: 1.0625rem; line-height: 1.2; }
  /* the names stand on the picture's scrim here: white (a site theme may colour the index names for the light desktop ground) */
  #crm__widgets .wo--index.wo--compact .wo__row .wo__rname, #crm__widgets .wo--index.wo--compact .wo__row .wo__rcount { color: #fff; }
  #crm__widgets .wo--index.wo--compact .wo__row .wo__layer .wo__shade { background: linear-gradient(0deg, rgb(0 30 41 / .9) 0, rgb(0 30 41 / .78) 64px, rgb(0 30 41 / .35) 100%); }
  .wo--compact .wo__rcount { font-size: .875rem; }
  .wo--compact .wo__layer, .wo--compact .wo__row .wo__layer { border-radius: 12px; }
}
@media (max-width: 639.98px) {
  .wo--index.wo--compact .wo__intro { padding: 0 16px 16px; }
  .wo--compact .wo__stage { grid-auto-columns: 64%; scroll-padding-inline: 16px; padding: 0 16px 10px; }
  .wo--compact .wo__rname { font-size: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .wo--compact .wo__stage { scroll-behavior: auto; }
}

/* the mosaic, compact: in the content width (1152 px) like the sections around it, the rows a little lower */
.wo--mosaic.wo--compact { padding-bottom: 48px; }
.wo--mosaic.wo--compact .wo__grid { width: min(100% - 48px, 1152px); gap: 12px; padding-top: 48px; grid-template-rows: repeat(3, clamp(196px, 24vh, 232px)); }
.wo--mosaic.wo--compact .wo__intro { justify-content: center; padding: 8px 28px 8px 0; }
.wo--mosaic.wo--compact .wo__h { font-size: clamp(2.25rem, 3.4vw, 3.25rem); }
.wo--mosaic.wo--compact .wo__lead { max-width: 22rem; font-size: 1.0625rem; }
/* brighter pictures: the scrim only as high as the text needs it (white text stays on at least .7 navy) */
@media (min-width: 768px) {
  .wo--mosaic.wo--compact .wo__shade { background: linear-gradient(0deg, rgb(0 30 41 / .9) 0%, rgb(0 30 41 / .8) 30%, rgb(0 30 41 / .42) 52%, rgb(0 30 41 / 0) 70%); }
}
.wo--mosaic.wo--compact .wo__tile:not(.wo__tile--s) .wo__img { filter: saturate(1.04) brightness(1.04); }
/* names and counts crisp */
.wo--mosaic.wo--compact .wo__name { font-size: 1.3125rem; letter-spacing: -.016em; text-shadow: 0 1px 12px rgb(0 20 28 / .35); }
.wo--mosaic.wo--compact .wo__tile--xl .wo__name { font-size: clamp(1.875rem, 2.6vw, 2.5rem); }
.wo--mosaic.wo--compact .wo__count { color: #fff; font-size: .9375rem; font-weight: 700; letter-spacing: 0; }
.wo--mosaic.wo--compact .wo__tile--s .wo__count { font-weight: 500; }
@media (max-width: 1199.98px) {
  .wo--mosaic.wo--compact .wo__grid { grid-template-rows: none; grid-auto-rows: 200px; }
}
@media (max-width: 767.98px) {
  .wo--mosaic.wo--compact .wo__grid { width: calc(100% - 32px); grid-auto-rows: auto; padding-top: 24px; }
  .wo--mosaic.wo--compact { padding-bottom: 28px; }
}
/* the mosaic's way to the overview: a quiet link at the start of the line on every width */
.wo--mosaic.wo--compact .wo__btns { flex-direction: row; align-items: flex-start; margin-top: 1rem; }
/* phones: the stack of topics lower (the largest tile keeps its sentence and next date, the others show name and count) */
@media (max-width: 767.98px) {
  .wo--mosaic.wo--compact .wo__tile { min-height: 148px; }
  .wo--mosaic.wo--compact .wo__tile--xl { min-height: 252px; }
  .wo--mosaic.wo--compact .wo__tile--s { min-height: 120px; }
  .wo--mosaic.wo--compact .wo__tile:not(.wo__tile--xl) .wo__next { display: none; }
  .wo--mosaic.wo--compact .wo__tile .wo__shade { background: linear-gradient(0deg, rgb(0 30 41 / .9) 0, rgb(0 30 41 / .82) 92px, rgb(0 30 41 / .45) 132px, rgb(0 30 41 / .15) 148px); }
  .wo--mosaic.wo--compact .wo__tile--xl .wo__shade { background: linear-gradient(0deg, rgb(0 30 41 / .92) 0, rgb(0 30 41 / .86) 150px, rgb(0 30 41 / .5) 210px, rgb(0 30 41 / .2) 252px); }
}

/* director, 2026-11-14. The owner on the industries row of the Akademie's home page: "effect and all looks cool with
   card but the list etc looks unpolished and not beautiful". The list beside the picture (from 1024 px) was plain text
   rows of uneven height between hairlines, with "29 Fortbildungen" written thirteen times. Now: every entry is a white
   tile of one height on the pale band, the name in at most two balanced lines, the number as a pill at the right (the
   word stays for screen readers; the template gives the compact index the bare number in .wo__rn). The chosen entry
   (the one the picture shows) lifts: cyan edge, soft shadow, the pill filled, an arrow beside it. */
.wo--compact .wo__rn { display: none; }
@media (min-width: 1024px) {
  .wo--compact .wo__index { gap: 8px 12px; grid-template-rows: repeat(7, minmax(0, 1fr)); }
  .wo--compact .wo__row { border-top: 0; display: grid; }
  /* (the link stays position: static: the picture layer inside it is placed against the stage, not against the tile) */
  #crm__widgets .wo--compact .wo__ra { min-height: 56px; padding: 8px 12px 8px 16px; gap: 12px; border: 1px solid rgb(0 62 82 / .1); border-radius: 12px;
    background: #fff; box-shadow: 0 1px 2px rgb(0 40 60 / .04);
    transition: border-color .2s ease-in-out, box-shadow .2s ease-in-out, background-color .2s ease-in-out; }
  .wo--compact .wo__rname { font-size: 1rem; font-weight: 650; line-height: 1.22; letter-spacing: -.008em; text-wrap: balance;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
  .wo--compact .wo__row.is-on .wo__rname { transform: none; }
  .wo--compact .wo__rcount { display: inline-flex; align-items: center; gap: 8px; }
  .wo--compact .wo__rw { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  .wo--compact .wo__rn { display: inline-grid; place-items: center; min-width: 34px; height: 26px; padding: 0 9px; border-radius: 999px; background: #e4f4fb; color: #003e52;
    font: 700 .8125rem/1 "Theme-Font", Inter, system-ui, sans-serif; font-variant-numeric: tabular-nums;
    transition: background-color .2s ease-in-out, color .2s ease-in-out; }
  /* (no arrow on the chosen entry: it took room from the name, which then wrapped anew under the pointer) */
  #crm__widgets .wo--compact .wo__index .wo__row.is-on .wo__ra { background: #fff; border-color: #00abe3; box-shadow: 0 0 0 1px #00abe3, 0 12px 26px -14px rgb(0 62 82 / .5); }
  .wo--compact .wo__row.is-on .wo__rn { background: #00abe3; color: #fff; }
  /* a short index (up to eight entries, the seven topics on the Inhouse page): two columns of four rows instead of one
     column with an empty half beside it; the tiles a little higher so the picture keeps a good shape. An entry
     without a course shows no pill (the template leaves the number out). */
  .wo--compact .wo__index:not(:has(> .wo__row:nth-child(9))) { grid-template-rows: repeat(4, minmax(0, 1fr)); }
  #crm__widgets .wo--compact .wo__index:not(:has(> .wo__row:nth-child(9))) .wo__ra { min-height: 68px; }
}
@media (min-width: 1024px) and (max-width: 1279.98px) {
  .wo--compact .wo__rname { font-size: .9375rem; }
  #crm__widgets .wo--compact .wo__ra { padding-left: 12px; gap: 8px; }
}
@media (min-width: 1024px) and (prefers-reduced-motion: reduce) {
  #crm__widgets .wo--compact .wo__ra, .wo--compact .wo__rn { transition: none; }
}