/* Content element dgm_section_worlds "Themenwelten" (Akademie brief 05, 2026-11-13). Complete in itself.
   The DGM family: navy #003e52 (deep ground #00212c), accent #00abe3, white; Heading-Font (Inter Tight) 700/800 tight,
   Theme-Font (Inter) body 16 px; 16 px radius; shadows with an offset. Text on a picture always stands on a navy scrim
   of at least .86 where small text sits (4.5:1 against a white picture), large names on at least .7 (3:1).
   Motion: transform, opacity and clip-path only; one entry per layout, once (CSS keyframes, so nothing waits for the
   script); a slow drift of the active picture; with reduced motion everything stands still. */
.wo { --wo-navy: #003e52; --wo-deep: #00212c; --wo-ink: #062a36; --wo-accent: #00abe3; --wo-sky: #89defb;
  --wo-ease: cubic-bezier(.16, 1, .3, 1); --wo-gut: 64px; --wo-box: 1280px;
  position: relative; box-sizing: border-box; margin: 0; font-family: "Theme-Font", Inter, system-ui, sans-serif; font-size: 1rem; line-height: 1.6; }
.wo *, .wo *::before, .wo *::after { box-sizing: border-box; }
.wo a { text-decoration: none; }
.wo p { margin: 0; }
.wo ::selection { background: rgb(0 171 227 / .32); color: #fff; }
/* placed as a content element: the frame runs the full width with no outer spacing (as the other heroes) */
#crm__widgets .frame:has(> .wo--hero), #crm__widgets .frame:has(> .wo--mosaic), #crm__widgets .frame:has(> .wo--index) { max-width: none; width: auto; margin: 0; padding: 0; }
.wo__img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: var(--wo-fx, 50%) var(--wo-fy, 50%); }
.wo__pic, .wo__drift { display: block; position: absolute; inset: 0; overflow: hidden; }
.wo__drift { overflow: visible; transform-origin: 60% 45%; }
.wo__pic picture { display: block; width: 100%; height: 100%; }
/* the slow drift: the active picture only; paused elsewhere, so no picture ever jumps back */
@keyframes wo-drift { from { transform: scale(1) translate3d(0, 0, 0); } to { transform: scale(1.075) translate3d(-1.6%, -1.1%, 0); } }
.wo__drift { animation: wo-drift 24s ease-in-out infinite alternate; animation-play-state: paused; }
.wo.is-off .wo__drift { animation-play-state: paused !important; }

/* the headline block (all layouts) */
.wo__h { margin: 0; font-family: "Heading-Font", "Inter Tight", Inter, system-ui, sans-serif; font-weight: 800; line-height: 1.04;
  letter-spacing: -.022em; text-wrap: balance; overflow-wrap: break-word; hyphens: manual; }
.wo__lead { margin-top: 1rem; max-width: 38rem; font-size: 1.0625rem; line-height: 1.6; text-wrap: pretty; }
.wo__lead p + p { margin-top: .6em; }
.wo__btns { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.6rem; }
.wo__btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 3rem; padding: .75rem 1.3rem; border-radius: 10px;
  font-size: 1rem; font-weight: 700; line-height: 1.2; transition: background-color .18s ease, border-color .18s ease, transform .18s var(--wo-ease), box-shadow .18s ease; }
.wo__btn--primary { background: var(--wo-accent); color: #fff !important; box-shadow: 0 10px 24px -10px rgb(0 171 227 / .6); }
.wo__btn--primary:hover { background: #0096c9; transform: translateY(-1px); box-shadow: 0 14px 28px -12px rgb(0 150 201 / .7); }
.wo__btn--secondary { border: 1px solid rgb(255 255 255 / .42); color: #fff !important; background: rgb(0 33 44 / .35); }
.wo__btn--secondary:hover { border-color: #fff; background: rgb(255 255 255 / .1); }
.wo__btn:focus-visible, .wo__a:focus-visible, .wo__ra:focus-visible, .wo__pill:focus-visible, .wo__plink:focus-visible { outline: 3px solid var(--wo-accent); outline-offset: 3px; }
.wo--light .wo__btn--secondary { border-color: rgb(0 62 82 / .35); color: var(--wo-navy) !important; background: #fff; }

/* =====================================================================================================================
   HERO of one topic: the material picture full-bleed, the text on the scrim at the left, the pill menu on the edge
   ===================================================================================================================== */
.wo--hero { --wo-h: 440px; color: #fff; background: var(--wo-deep); isolation: isolate; }
.wo--hero.wo--pills { margin-bottom: 30px; }
.wo--hero .wo__bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.wo--hero .wo__par { position: absolute; inset: -24px 0; will-change: auto; }
.wo--hero .wo__drift { animation-play-state: running; }
.wo--hero .wo__img { filter: saturate(.92) contrast(1.03); }
/* entry, once: the picture comes up out of the dark and settles, the text follows */
@keyframes wo-hero-pic { from { opacity: 0; transform: scale(1.1); } to { opacity: 1; transform: none; } }
@keyframes wo-rise { from { opacity: 0; transform: translate3d(0, 14px, 0); } to { opacity: 1; transform: none; } }
.wo--hero .wo__par { animation: wo-hero-pic 1.5s var(--wo-ease) both; }
.wo--hero .wo__copy > * { animation: wo-rise .9s var(--wo-ease) both; }
.wo--hero .wo__copy > :nth-child(2) { animation-delay: .08s; }
.wo--hero .wo__copy > :nth-child(3) { animation-delay: .16s; }
.wo--hero .wo__scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(0deg, rgb(0 28 38 / .55) 0, rgb(0 28 38 / 0) 90px),
    linear-gradient(90deg, rgb(0 28 38 / .93) 0%, rgb(0 28 38 / .9) calc(max(0px, (100% - var(--wo-box)) / 2) + 660px), rgb(0 28 38 / .42) calc(max(0px, (100% - var(--wo-box)) / 2) + 860px), rgb(0 28 38 / .12) 100%); }
.wo--hero .wo__inner { position: relative; z-index: 2; display: flex; align-items: center; max-width: var(--wo-box); min-height: var(--wo-h); margin: 0 auto;
  padding: 56px var(--wo-gut) 76px; }
.wo--hero .wo__copy { max-width: 620px; }
.wo--hero .wo__h { color: #fff; font-size: clamp(2rem, 3.4vw, 3.15rem); }
.wo--hero .wo__lead { color: rgb(233 244 249 / .9); }
.wo--light.wo--hero { color: var(--wo-navy); background: #f3f8fa; }
.wo--light.wo--hero .wo__scrim { background: linear-gradient(90deg, rgb(255 255 255 / .95) 0%, rgb(255 255 255 / .92) calc(max(0px, (100% - var(--wo-box)) / 2) + 660px), rgb(255 255 255 / .3) calc(max(0px, (100% - var(--wo-box)) / 2) + 860px), rgb(255 255 255 / 0) 100%); }
.wo--light.wo--hero .wo__h { color: var(--wo-navy); }
.wo--light.wo--hero .wo__lead { color: #2b4b57; }
/* the pill menu: white, on the hero's lower edge (as the Themen pages of dgm.de), scrolls sideways when it is longer */
.wo__pills { position: absolute; z-index: 3; left: 0; right: 0; bottom: -30px; display: flex; justify-content: center; padding: 0 24px; pointer-events: none; }
.wo__pbox { max-width: min(100%, 1240px); overflow: hidden; border: 1px solid rgb(0 62 82 / .08); border-radius: 999px; background: #fff; pointer-events: auto;
  box-shadow: 0 12px 30px -14px rgb(0 33 44 / .45), 0 2px 6px rgb(0 33 44 / .08); }
.wo__prail { display: flex; gap: 2px; margin: 0; padding: 5px; list-style: none; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
  scroll-snap-type: x proximity; scroll-padding: 0; }
/* a menu longer than its box fades at the side that has more (the script sets data-more) */
.wo__prail[data-more="end"] { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 72px), rgb(0 0 0 / .08)); mask-image: linear-gradient(90deg, #000 calc(100% - 72px), rgb(0 0 0 / .08)); }
.wo__prail[data-more="start"] { -webkit-mask-image: linear-gradient(90deg, rgb(0 0 0 / .2), #000 32px); mask-image: linear-gradient(90deg, rgb(0 0 0 / .2), #000 32px); }
.wo__prail[data-more="both"] { -webkit-mask-image: linear-gradient(90deg, rgb(0 0 0 / .2), #000 32px, #000 calc(100% - 72px), rgb(0 0 0 / .08)); mask-image: linear-gradient(90deg, rgb(0 0 0 / .2), #000 32px, #000 calc(100% - 72px), rgb(0 0 0 / .08)); }
/* phones before (or without) the script: both edges fade, so a cut pill always reads as "more" */
@media (max-width: 767.98px) {
  .wo__prail:not([data-more]) { -webkit-mask-image: linear-gradient(90deg, rgb(0 0 0 / .08), #000 72px, #000 calc(100% - 72px), rgb(0 0 0 / .08)); mask-image: linear-gradient(90deg, rgb(0 0 0 / .08), #000 72px, #000 calc(100% - 72px), rgb(0 0 0 / .08)); }
}
.wo__prail::-webkit-scrollbar { display: none; }
.wo__prail > li { flex: none; scroll-snap-align: start; }   /* r3: a whole pill at the start (was centre) */
.wo__pill { display: inline-flex; align-items: center; gap: .45rem; min-height: 44px; padding: .55rem 1.05rem; border-radius: 999px; white-space: nowrap;
  color: var(--wo-navy) !important; font-size: .9375rem; font-weight: 600; line-height: 1.2; transition: background-color .16s ease, color .16s ease; }
.wo__pill:hover { background: #e6f6fd; }
.wo__pill.is-current { background: var(--wo-accent); color: #fff !important; }
.wo__pill--all i { color: var(--wo-accent); font-size: .875rem; }
.wo__pill:focus-visible { outline-offset: -3px; }

/* =====================================================================================================================
   MOSAIC: the topics overview opening
   ===================================================================================================================== */
.wo--mosaic { color: #fff; background: linear-gradient(180deg, #002c3b 0%, var(--wo-deep) 100%); padding: 0 0 48px; }
.wo__grid { display: grid; gap: 10px; width: min(100% - 48px, 1376px + max(0px, (100vw - 1440px) / 3)); margin: 0 auto; padding-top: 44px;
  grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: repeat(3, clamp(184px, 22.5vh, 228px)); }
.wo__list { display: contents; margin: 0; padding: 0; list-style: none; }
.wo--mosaic .wo__intro { grid-column: 1 / 5; grid-row: 1 / 3; display: flex; flex-direction: column; justify-content: flex-end; padding: 8px 28px 26px 4px;
  animation: wo-rise .9s var(--wo-ease) both; }
.wo--mosaic .wo__h { font-size: clamp(2.2rem, 3.5vw, 3.4rem); color: #fff; }
.wo--mosaic .wo__lead { color: rgb(226 240 246 / .86); font-size: 1.0625rem; }
.wo__tile { position: relative; min-width: 0; border-radius: 16px; overflow: hidden; background: #0b3a49; isolation: isolate;
  box-shadow: 0 18px 36px -24px rgb(0 0 0 / .7); animation: wo-tile .95s var(--wo-ease) both; animation-delay: calc(var(--i, 1) * 70ms + 80ms); }
@keyframes wo-tile { from { opacity: 0; clip-path: inset(18% 0 0 0 round 16px); transform: translate3d(0, 18px, 0); } to { opacity: 1; clip-path: inset(0 0 0 0 round 16px); transform: none; } }
/* the places of the tiles (rank by courses): the most at the top beside the headline */
.wo__tile--n1 { grid-column: 5 / 10; grid-row: 1 / 3; }
.wo__tile--n2 { grid-column: 10 / 13; grid-row: 1 / 2; }
.wo__tile--n3 { grid-column: 10 / 13; grid-row: 2 / 3; }
.wo__tile--n4 { grid-column: 1 / 5; grid-row: 3 / 4; }
.wo__tile--n5 { grid-column: 5 / 8; grid-row: 3 / 4; }
.wo__tile--n6 { grid-column: 8 / 11; grid-row: 3 / 4; }
.wo__tile--n7 { grid-column: 11 / 13; grid-row: 3 / 4; }
.wo__a { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; color: #fff !important; border-radius: 16px; }
.wo__tile .wo__img { transform: translate3d(calc(var(--px, 0) * -10px), calc(var(--py, 0) * -8px), 0) scale(1.012);
  transition: transform 1.1s var(--wo-ease), filter .6s ease; filter: saturate(.94); }
.wo__shade { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(0deg, rgb(0 30 41 / .9) 0%, rgb(0 30 41 / .84) 30%, rgb(0 30 41 / .66) 52%, rgb(0 30 41 / .28) 66%, rgb(0 30 41 / 0) 80%); }
.wo__tile--xl .wo__shade { background: linear-gradient(0deg, rgb(0 30 41 / .9) 0%, rgb(0 30 41 / .84) 36%, rgb(0 30 41 / .68) 62%, rgb(0 30 41 / .2) 76%, rgb(0 30 41 / 0) 88%); }
.wo__shade::after { content: ""; position: absolute; inset: 0; background: rgb(0 30 41 / .6); opacity: 0; transition: opacity .5s ease; }
.wo__body { position: relative; z-index: 2; display: block; padding: 18px 20px 18px; }
.wo__name { margin: 0; color: #fff; font-family: "Heading-Font", "Inter Tight", Inter, system-ui, sans-serif; font-size: 1.25rem; font-weight: 700; line-height: 1.16;
  letter-spacing: -.012em; text-wrap: balance; hyphens: manual; }
.wo__meta { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-top: .45rem; }
.wo__count { color: var(--wo-sky); font-size: .875rem; font-weight: 600; letter-spacing: .01em; font-variant-numeric: tabular-nums; }
.wo__go { flex: none; display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 999px; background: rgb(255 255 255 / .14);
  color: #fff; font-size: .85rem; transition: background-color .3s ease, transform .5s var(--wo-ease); }
/* the sentence and the next date of a tile: below its name, out of sight; the open tile lifts its text by their height
   (transform only, nothing reflows) and fades them in */
.wo__more { position: absolute; left: 20px; right: 20px; top: calc(100% - 14px); display: block; height: 5.1rem; overflow: hidden; opacity: 0;
  transition: opacity .35s ease; }
.wo__body { transition: transform .6s var(--wo-ease), opacity .4s ease; }
.wo__text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; margin-top: .55rem; color: rgb(236 245 249 / .92);
  font-size: .9375rem; line-height: 1.45; }
.wo__next { display: block; overflow: hidden; margin-top: .45rem; color: rgb(236 245 249 / .92); font-size: .875rem; line-height: 1.4; white-space: nowrap; text-overflow: ellipsis; }
.wo__next-l { color: var(--wo-sky); font-weight: 600; }
.wo__next-d { font-weight: 600; color: #fff; }
.wo__next-n::before { content: "· "; }
/* the biggest tile shows its sentence and next date at rest; in it the name is larger */
.wo__tile--xl .wo__body { padding: 26px 28px 24px; }
.wo__tile--xl .wo__name { font-size: clamp(1.6rem, 2.3vw, 2.25rem); max-width: 15ch; }
.wo__tile--xl .wo__body { display: flex; flex-direction: column; }
.wo__tile--xl .wo__meta { order: 3; margin-top: 1rem; }
.wo__tile--xl .wo__more { position: static; height: auto; opacity: 1; }
.wo__tile--xl .wo__text { font-size: 1rem; max-width: 34rem; }
.wo__tile--xl .wo__go { width: 40px; height: 40px; }
/* a topic without a course: honest, smaller, quieter */
.wo__tile--s .wo__img { filter: saturate(.45) brightness(.8); }
.wo__tile--s .wo__count { color: rgb(236 245 249 / .82); font-weight: 500; }
.wo__tile--s .wo__name { font-size: 1.0625rem; }
/* the pointer or the focus opens a world: its picture comes closer, its sentence and next date appear, the others step back */
/* (min-width rather than hover media: a phone shows everything at rest; a pointer on a tablet or desktop opens a world) */
@media (min-width: 768px) {
  .wo__a:hover .wo__img { transform: translate3d(calc(var(--px, 0) * -10px), calc(var(--py, 0) * -8px), 0) scale(1.07); filter: saturate(1.02); }
  .wo__a:hover .wo__more { opacity: 1; }
  .wo__tile:not(.wo__tile--xl) .wo__a:hover .wo__body { transform: translate3d(0, -4.9rem, 0); }
  .wo__a:hover .wo__go { background: var(--wo-accent); transform: translateX(3px); }
  .wo__a:hover .wo__drift, .wo__tile--xl .wo__drift { animation-play-state: running; }
  .wo__grid:has(.wo__a:hover) .wo__tile:not(:has(.wo__a:hover)) .wo__img { filter: saturate(.35) brightness(.62); transform: scale(1.012); }
  .wo__grid:has(.wo__a:hover) .wo__tile:not(:has(.wo__a:hover)) .wo__body { opacity: .7; }
  .wo__tile:not(.wo__tile--xl) .wo__a:hover .wo__shade::after { opacity: 1; }
}
.wo__a:focus-visible .wo__more { opacity: 1; }
.wo__tile:not(.wo__tile--xl) .wo__a:focus-visible .wo__body { transform: translate3d(0, -4.9rem, 0); }
.wo__a:focus-visible .wo__img { transform: scale(1.07); }
.wo__a:focus-visible .wo__go { background: var(--wo-accent); }
.wo__a:focus-visible .wo__shade::after { opacity: 1; }
.wo__grid:has(.wo__a:focus-visible) .wo__tile:not(:has(.wo__a:focus-visible)) .wo__img { filter: saturate(.35) brightness(.62); }
.wo__a:focus-visible { outline: 3px solid #fff; outline-offset: -3px; box-shadow: inset 0 0 0 6px var(--wo-accent); }

/* 768 to 1199: the headline across, the biggest tile across, the others in pairs */
@media (max-width: 1199.98px) {
  .wo__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); grid-template-rows: none; grid-auto-rows: 200px; }
  .wo--mosaic .wo__intro { grid-column: 1 / -1; grid-row: auto; padding: 8px 4px 18px; }
  .wo__tile--n1 { grid-column: 1 / -1; grid-row: auto / span 2; }
  .wo__tile--n2, .wo__tile--n3, .wo__tile--n4, .wo__tile--n5, .wo__tile--n6 { grid-column: span 3; grid-row: auto; }
  .wo__tile--n7 { grid-column: span 3; grid-row: auto; }
}
/* phones: a tall stack of large pictures, every name and figure readable without hovering */
@media (max-width: 767.98px) {
  .wo--mosaic { padding: 0 0 32px; }
  .wo__grid { padding-top: 24px; }
  .wo__grid { width: calc(100% - 32px); grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; gap: 8px; }
  .wo--mosaic .wo__intro { padding: 4px 2px 14px; }
  .wo--mosaic .wo__h { font-size: clamp(2rem, 9vw, 2.5rem); }
  .wo--mosaic .wo__tile { grid-column: 1 / -1; grid-row: auto; min-height: 232px; }
  .wo--mosaic .wo__tile--s { min-height: 168px; }
  .wo--mosaic .wo__a { position: relative; min-height: inherit; }
  .wo__tile .wo__more { position: static; height: auto; opacity: 1; }
  .wo__tile .wo__a:hover .wo__body, .wo__tile .wo__a:focus-visible .wo__body { transform: none; }
  .wo__tile:not(.wo__tile--xl) .wo__text { display: none; }
  .wo__tile--xl .wo__body { padding: 20px 18px 18px; }
  .wo__body { padding: 16px 16px 14px; }
  /* every line of a phone tile stands on the scrim (the name sits higher than on a desktop tile) */
  .wo__tile .wo__shade { background: linear-gradient(0deg, rgb(0 30 41 / .92) 0, rgb(0 30 41 / .86) 72px, rgb(0 30 41 / .7) 124px, rgb(0 30 41 / .1) 168px, rgb(0 30 41 / 0) 190px); }
  .wo__tile--xl .wo__shade { background: linear-gradient(0deg, rgb(0 30 41 / .92) 0, rgb(0 30 41 / .86) 130px, rgb(0 30 41 / .7) 236px, rgb(0 30 41 / .15) 280px, rgb(0 30 41 / 0) 300px); }
  .wo--mosaic .wo__tile--xl { min-height: 380px; }
}

/* =====================================================================================================================
   INDEX: the industries overview opening (a picture viewer beside an index in large type)
   ===================================================================================================================== */
.wo--index { color: #fff; background: linear-gradient(180deg, #002c3b 0%, var(--wo-deep) 100%); padding: 0 0 48px; }
.wo--index .wo__inner { width: min(100% - 48px, 1376px + max(0px, (100vw - 1440px) / 3)); margin: 0 auto; padding-top: 52px; }
/* (the top space sits inside: the site gives the first element of the page its own small padding-top) */
.wo--index .wo__intro { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 0 48px; align-items: end; padding: 0 4px 24px;
  animation: wo-rise .9s var(--wo-ease) both; }
.wo--index .wo__h { color: #fff; font-size: clamp(2.2rem, 3.5vw, 3.4rem); }
.wo--index .wo__lead { margin: 0; color: rgb(226 240 246 / .86); }
.wo--index .wo__h { grid-row: 1; grid-column: 1; align-self: end; }
.wo--index .wo__lead { grid-row: 1 / span 2; grid-column: 2; align-self: end; }
.wo--index .wo__btns { grid-row: 2; grid-column: 1; margin-top: 1.1rem; }
.wo__stage { position: relative; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 0 40px; }
.wo__viewer { min-height: 532px; border-radius: 18px; background: #0b3a49; }
.wo__index { display: flex; flex-direction: column; justify-content: space-between; margin: 0; padding: 0; list-style: none; counter-reset: none; }
.wo__row { animation: wo-fade .7s ease both; animation-delay: calc(var(--i, 1) * 38ms + 120ms); }
@keyframes wo-fade { from { opacity: 0; } to { opacity: 1; } }
/* the viewer's entry: the first picture opens from the left (clip only: a transform on a row would carry the layers) */
@keyframes wo-open { from { clip-path: inset(0 100% 0 0 round 18px); } to { clip-path: inset(0 0 0 0 round 18px); } }
.wo__row:first-child .wo__layer { animation: wo-open 1.2s var(--wo-ease) .1s both; }
.wo__ra { position: static; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 14px; min-height: 40px; padding: 4px 10px 4px 14px;
  border-radius: 10px; color: rgb(255 255 255 / .74) !important; transition: color .2s ease, background-color .2s ease; }
.wo__rname { overflow: hidden; font-family: "Heading-Font", "Inter Tight", Inter, system-ui, sans-serif; font-size: clamp(1.15rem, 1.55vw, 1.5rem); font-weight: 700;
  line-height: 1.15; letter-spacing: -.014em; white-space: nowrap; text-overflow: ellipsis; transition: transform .45s var(--wo-ease); }
.wo__rcount { color: rgb(137 222 251 / .86); font-size: .875rem; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.wo__ra .wo__go { width: 30px; height: 30px; background: transparent; color: rgb(255 255 255 / .4); }
.wo__row.is-on .wo__ra { color: #fff !important; background: rgb(255 255 255 / .07); }
.wo__row.is-on .wo__rname { transform: translateX(6px); }
.wo__row.is-on .wo__rcount { color: var(--wo-sky); }
.wo__row.is-on .wo__go { background: var(--wo-accent); color: #fff; }
/* 1024 to 1279: the index gets half the width and long names wrap instead of being cut */
@media (min-width: 1024px) and (max-width: 1279.98px) {
  .wo__stage, .wo--index .wo__intro { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 28px; }
  .wo__layer { width: calc((100% - 28px) / 2); }
  .wo__rname { white-space: normal; font-size: 1.125rem; }
  .wo__ra { min-height: 36px; padding-top: 3px; padding-bottom: 3px; }
}
/* the layers: each row carries its picture and caption, laid over the viewer; the chosen one shows */
.wo__layer { position: absolute; z-index: 1; top: 0; left: 0; bottom: 0; width: calc((100% - 40px) * 7 / 12); overflow: hidden; border-radius: 18px;
  opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .55s ease, visibility 0s linear .55s; }
.wo__layer .wo__img { transform: scale(1.06); transition: transform 1.4s var(--wo-ease); }
.wo__row.is-on .wo__layer { z-index: 2; opacity: 1; visibility: visible; pointer-events: auto; transition: opacity .55s ease, visibility 0s; }
.wo__row.is-on .wo__layer .wo__img { transform: translate3d(calc(var(--px, 0) * -12px), calc(var(--py, 0) * -9px), 0) scale(1.01); }
.wo__row.is-on .wo__drift { animation-play-state: running; }
.wo__layer .wo__shade { background: linear-gradient(0deg, rgb(0 30 41 / .94) 0%, rgb(0 30 41 / .88) 26%, rgb(0 30 41 / .35) 52%, rgb(0 30 41 / 0) 74%); }
.wo__cap { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; display: block; padding: 28px 32px 28px; color: #fff; }
.wo__cname { display: block; max-width: 18ch; font-family: "Heading-Font", "Inter Tight", Inter, system-ui, sans-serif; font-size: clamp(1.75rem, 2.6vw, 2.5rem); font-weight: 800;
  line-height: 1.05; letter-spacing: -.02em; text-wrap: balance; }
.wo__cap .wo__text { max-width: 36rem; font-size: 1rem; }
.wo__cap > * { transform: translate3d(0, 12px, 0); opacity: 0; transition: transform .7s var(--wo-ease), opacity .45s ease; }
.wo__row.is-on .wo__cap > * { transform: none; opacity: 1; }
.wo__row.is-on .wo__cap > :nth-child(2) { transition-delay: .05s; }
.wo__row.is-on .wo__cap > :nth-child(3) { transition-delay: .1s; }
/* a pointer over the index picks a row as it moves; without it the first stays (the script keeps the last one) */
@media (min-width: 1024px) {
  .wo__ra:hover { color: #fff !important; }
}
.wo__row:focus-within .wo__ra { color: #fff !important; }
/* under 1024: every row is its own picture strip, the name large on it */
@media (max-width: 1023.98px) {
  .wo--index { padding: 0 0 32px; }
  .wo--index .wo__inner { width: calc(100% - 32px); padding-top: 28px; }
  .wo--index .wo__intro { grid-template-columns: minmax(0, 1fr); padding: 4px 2px 18px; }
  .wo--index .wo__lead { margin-top: .8rem; }
  .wo--index .wo__h, .wo--index .wo__lead, .wo--index .wo__btns { grid-column: 1; grid-row: auto; }
  .wo--index .wo__h { font-size: clamp(2rem, 9vw, 2.6rem); }
  .wo__stage { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .wo__viewer { display: none; }
  .wo__index { display: contents; }
  .wo__row { position: relative; min-height: 128px; border-radius: 14px; overflow: hidden; background: #0b3a49; }
  .wo__ra { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; gap: 4px; padding: 14px 16px;
    color: #fff !important; background: none !important; border-radius: 14px; }
  .wo__rname { position: relative; z-index: 3; white-space: normal; font-size: 1.1875rem; transform: none !important; }
  .wo__rcount { position: relative; z-index: 3; color: var(--wo-sky); }
  .wo__ra .wo__go { position: absolute; z-index: 3; top: 12px; right: 12px; display: none; }
  .wo__layer, .wo__row .wo__layer { position: absolute; inset: 0; width: auto; border-radius: 14px; opacity: 1; visibility: visible; pointer-events: none; z-index: 1; }
  .wo__layer .wo__img, .wo__row.is-on .wo__layer .wo__img { transform: none; }
  .wo__row { min-height: 140px; }
  .wo__layer .wo__shade { background: linear-gradient(0deg, rgb(0 30 41 / .9) 0, rgb(0 30 41 / .82) 58px, rgb(0 30 41 / .25) 96px, rgb(0 30 41 / 0) 120px); }
  .wo__cap { display: none; }
  .wo__row .wo__drift { animation: none; }
}
@media (max-width: 639.98px) {
  .wo__stage { grid-template-columns: minmax(0, 1fr); }
  .wo__row { min-height: 128px; }
  .wo__rname { font-size: 1.25rem; }
}

/* =====================================================================================================================
   TILES: the neighbours as picture tiles
   ===================================================================================================================== */
.wo--tiles { width: 100%; }
.wo__tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.wo__tiles--2 { max-width: 920px; margin: 0 auto; }
.wo--tiles .wo__tile { aspect-ratio: 16 / 10; animation: none; box-shadow: 0 18px 36px -26px rgb(0 33 44 / .55); }
.wo--tiles .wo__name { font-size: 1.375rem; }
.wo--tiles .wo__body { padding: 20px 22px; }
@media (min-width: 640px) {
  .wo--tiles .wo__a:hover .wo__img { transform: scale(1.06); }
  .wo--tiles .wo__a:hover .wo__go { background: var(--wo-accent); transform: translateX(3px); }
  .wo--tiles .wo__a:hover .wo__drift { animation-play-state: running; }
}
.wo__plain { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 24px; margin-top: 22px !important; }
.wo__plink { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; color: var(--wo-accent) !important; font-weight: 700; }
.wo__plink:hover { text-decoration: underline; text-underline-offset: 4px; }

/* hero on tablets and phones */
@media (max-width: 1023.98px) {
  .wo { --wo-gut: 24px; }
  .wo--hero { --wo-h: 400px; }
  /* the picture shows clearly in a band at the top; the text below stands on the scrim */
  .wo--hero .wo__scrim { background: linear-gradient(180deg, rgb(0 28 38 / .08) 0, rgb(0 28 38 / .25) calc(var(--wo-band) - 90px), rgb(0 28 38 / .72) calc(var(--wo-band) - 10px), rgb(0 28 38 / .9) calc(var(--wo-band) + 70px), rgb(0 28 38 / .92) 100%); }
  .wo--hero { --wo-band: 190px; }
  .wo--hero .wo__par { inset: -24px 0; height: auto; }
  .wo--light.wo--hero .wo__scrim { background: linear-gradient(180deg, rgb(255 255 255 / 0) 0, rgb(255 255 255 / .2) calc(var(--wo-band) - 90px), rgb(255 255 255 / .86) calc(var(--wo-band) - 6px), rgb(255 255 255 / .95) calc(var(--wo-band) + 40px), rgb(255 255 255 / .96) 100%); }
  .wo--light.wo--hero .wo__lead { color: var(--wo-navy); }
  .wo--hero .wo__inner { padding: calc(var(--wo-band) + 4px) var(--wo-gut) 72px; align-items: flex-end; }
  .wo__pills { justify-content: flex-start; padding: 0 16px; }
}
@media (max-width: 639.98px) {
  .wo { --wo-gut: 16px; }
  .wo--hero { --wo-h: 0px; }
  .wo--hero { --wo-band: 150px; }
  .wo--hero .wo__inner { padding: calc(var(--wo-band) + 4px) var(--wo-gut) 64px; }
  .wo--hero .wo__h { font-size: clamp(1.75rem, 8vw, 2.2rem); }
  .wo--hero .wo__lead { font-size: 1rem; }
  .wo__btns { flex-direction: column; align-items: stretch; }
  .wo__pill { font-size: .875rem; padding: .5rem .9rem; }
}

/* =====================================================================================================================
   LIGHT tone of the two overviews (the owner, 2026-11-13: the light heroes "just look more friendly"): the page's pale
   ground, headline and lead in navy; the tiles keep their pictures with the scrim at the foot, counts in white and the
   arrows in cyan; the index in navy type, the chosen row on a pale cyan with the cyan arrow; the viewer as it is.
   ===================================================================================================================== */
.wo--light.wo--mosaic, .wo--light.wo--index { color: var(--wo-navy); background: linear-gradient(180deg, #eaf4f8 0%, #f5f9fb 100%); }
.wo--light.wo--mosaic .wo__h, .wo--light.wo--index .wo__h { color: var(--wo-navy); }
.wo--light.wo--mosaic .wo__lead, .wo--light.wo--index .wo__lead { color: #2b4b57; }
.wo--light .wo__tile { background: #cfe3eb; box-shadow: 0 18px 34px -22px rgb(0 33 44 / .45); }
.wo--light .wo__tile .wo__count { color: #fff; font-weight: 700; }
.wo--light .wo__tile .wo__go { background: var(--wo-accent); }
.wo--light .wo__tile--s .wo__count { color: #fff; font-weight: 500; }
.wo--light .wo__next-l { color: #fff; }
.wo--light .wo__viewer { background: #cfe3eb; }
.wo--light .wo__ra { color: #33535f !important; }
.wo--light .wo__rcount { color: #33535f; font-weight: 500; }
.wo--light .wo__ra .wo__go { color: rgb(0 62 82 / .45); }
.wo--light .wo__row.is-on .wo__ra { color: var(--wo-navy) !important; background: #dff3fb; }
.wo--light .wo__row.is-on .wo__rcount { color: var(--wo-navy); font-weight: 700; }
.wo--light .wo__row.is-on .wo__go { background: var(--wo-accent); color: #fff; }
@media (min-width: 1024px) { .wo--light .wo__ra:hover { color: var(--wo-navy) !important; } }
.wo--light .wo__row:focus-within .wo__ra { color: var(--wo-navy) !important; }
.wo--light .wo__btn--secondary { border-color: rgb(0 62 82 / .35); color: var(--wo-navy) !important; background: #fff; }
/* phones and tablets: the index rows are picture strips, their type white on the scrim */
@media (max-width: 1023.98px) {
  .wo--light .wo__ra, .wo--light .wo__row.is-on .wo__ra { color: #fff !important; background: none; }
  .wo--light .wo__rcount, .wo--light .wo__row.is-on .wo__rcount { color: #fff; font-weight: 600; }
  .wo--light .wo__row { background: #cfe3eb; }
}

@media (prefers-reduced-motion: reduce) {
  .wo *, .wo *::before, .wo *::after { animation: none !important; transition: none !important; }
  .wo .wo__img { transform: none !important; }
  .wo__cap > * { transform: none !important; }
}