/* Home section «New customers» (owner 18.10, research/…/78): the cards, head and chips come from css/leistungen.css,
   this file adds the layout of three cards on the customer's way and their three objects. Motion: js/kunden.js */

/* layout: three in a row from 1100 px with an arrow between them (the way of the customer); 700–1099 one wide card
   per row with the object beside the text; phones: one per row, the object above the text (the card stack) */
@media (min-width: 900px) { .ku__grid { grid-template-columns: minmax(0, 1fr); } }
@media (min-width: 700px) and (max-width: 1099px) {
  .ku-card .wd-card__in { flex-direction: row; align-items: center; }
  .ku .ku-card .wd-vis { flex: 0 0 52%; }   /* beats the flex: none at the end */
  .ku-card .wd-card__text { padding: clamp(24px, 3vw, 36px) clamp(24px, 3vw, 36px) clamp(24px, 3vw, 36px) 8px; }
}
@media (min-width: 1100px) {
  .ku__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 44px; }
  /* bigger fans on the desktop, so the three objects are about the same height (owner 18.10: no empty room) */
  .ku .ku-corp__hero { aspect-ratio: 4 / 5.2; }   /* taller photos on the desktop, same widths (wider would push the shop over the texts) */
  .ku .ku-land__hero { aspect-ratio: 1 / 1.15; }
  .ku .ku-shop__grid .ku-prod--0 { grid-template-columns: 52% minmax(0, 1fr); }
  .ku-card .wd-vis { flex: none; }   /* its height per row comes from js/kunden.js (alignRows): the texts of a row start on one line */
  .ku-card:not(:last-child)::after { content: "→"; position: absolute; z-index: 2; top: 50%; right: -36px; display: grid; place-items: center;
    width: 28px; height: 28px; margin-top: -14px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-1); font: 600 15px/1 var(--font); color: var(--warm-ink); }
}
.ku-num { display: grid; place-items: center; flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--ink); color: #fff; font: 600 12px/1 var(--font); letter-spacing: 0; }

/* ads · mockups of a Google search ad and an Instagram ad; under each the requests and the budget */
.ku-ads { display: grid; gap: 12px; }
.ku-mock { position: relative; overflow: hidden; border-radius: 16px; background: #fff; box-shadow: var(--shadow-2); }
.ku-mock:nth-child(1) { transform: rotate(-1.2deg); } .ku-mock:nth-child(2) { transform: rotate(1deg); }
.ku-logo { display: grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 8px; background: #fff; box-shadow: inset 0 0 0 1px rgba(var(--shade), .1); }
.ku-logo svg { width: 60%; height: 60%; }
.ku-logo svg path { stroke: none; }
.ku-logo--bare { box-shadow: none; width: 20px; height: 20px; }
.ku-logo--bare svg { width: 100%; height: 100%; }
.ku-ic { display: grid; flex: none; width: 15px; height: 15px; color: var(--text-3); }
.ku-g__search { display: flex; align-items: center; gap: 8px; margin: 10px 10px 0; padding: 7px 12px; border-radius: var(--r-pill); box-shadow: inset 0 0 0 1px rgba(var(--shade), .14);
  font: 500 clamp(12px, 3.4cqw, 13.5px)/1.2 var(--font); color: var(--ink); }
.ku-g__search > span:nth-child(2) { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ku-g__res { display: grid; gap: 3px; padding: 10px 14px 4px; }
.ku-spons { font: 600 clamp(11px, 3cqw, 12px)/1.2 var(--font); color: var(--ink); }
.ku-g__url { display: flex; align-items: center; gap: 6px; font: 400 clamp(11px, 3cqw, 12px)/1.2 var(--font); color: var(--text-2); }
.ku-g__url i { width: 14px; height: 14px; border-radius: 50%; background: var(--warm); }
.ku-g__title { font: 500 clamp(14px, 4.2cqw, 17px)/1.25 var(--font); color: var(--sky-ink); }   /* the link colour from our palette (5 colours) */
.ku-g__desc { font: 400 clamp(11.5px, 3.3cqw, 13px)/1.35 var(--font); color: var(--text-2); }
.ku-mock__head { display: flex; align-items: center; gap: 8px; padding: 8px 10px; }
.ku-mock__who { display: grid; flex: 1; min-width: 0; font: 600 clamp(12px, 3.4cqw, 13.5px)/1.2 var(--font); }
.ku-mock__who small { font: 400 11px/1.2 var(--font); color: var(--text-3); }
.ku-avatar { display: grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--ink); color: #fff; font: 600 12px/1 var(--font); }
.ku-ig__img { aspect-ratio: 2.4 / 1; overflow: hidden; }   /* a wide banner keeps the ad card compact */
.ku-ig__img img, .ku-post__img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ku-ig__cta { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 12px; background: var(--grey-1);
  font: 500 clamp(11.5px, 3.3cqw, 13px)/1.25 var(--font); }
.ku-ig__cta b { flex: none; color: var(--sky-ink); font-weight: 600; }
.ku-meter { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: 12px; align-items: center; padding: 8px 14px 10px; border-top: 1px solid rgba(var(--shade), .08); }
.ku-meter small { font: 500 clamp(11px, 3cqw, 12px)/1.2 var(--font); color: var(--text-3); }
.ku-meter .ku-ad__n { grid-row: 1 / 3; grid-column: 2; display: grid; justify-items: end; }
.ku-ad__bar { display: block; height: 6px; border-radius: 6px; background: rgba(var(--shade), .08); overflow: hidden; }
.ku-ad__bar i { display: block; height: 100%; border-radius: inherit; background: var(--acc); transform-origin: 0 50%; transform: scaleX(.3); }
.ku-ad[data-k="1"] .ku-ad__bar i { transform: scaleX(.75); }
.ku-ad__n b { font: 600 clamp(20px, 6cqw, 26px)/1 var(--font); font-variant-numeric: tabular-nums; color: var(--ink); }
.ku-ads__out { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-height: 2.6em; }
.ku-lead { background: var(--warm-tint); color: var(--warm-ink); }
.ku-reply { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border-radius: var(--r-pill); background: var(--positive-tint); color: var(--positive-ink);
  font: 600 clamp(12px, 3.3cqw, 13.5px)/1.25 var(--font); }
.ku-reply .icon { display: grid; flex: none; width: 1.1em; height: 1.1em; }
.ku-reply svg { stroke-width: 2.6; }
.ku .ku-reply .wd-ball--px, .ku .ku-chat__a .wd-ball--px, .ku .ku-inbox__head .wd-ball--px { width: 28px; height: 28px; }

/* site · three mini websites at once, fanned out: a company site left, the online shop in front, a landing page right.
   They overlap only by the edges of the pictures, never over a text (owner 18.10) */
.ku-site { display: grid; gap: 4px; }
.ku-fan--web { position: relative; display: grid; grid-template: auto / 1fr; align-items: start; margin-top: 4px; padding-bottom: 8px; }   /* the three share one cell: the tallest sets the height */
.ku-web { position: relative; grid-area: 1 / 1; display: flex; flex-direction: column; overflow: hidden; width: 36%; border-radius: 12px; background: #fff; box-shadow: var(--shadow-2); }
.ku-web--corp { justify-self: start; margin-top: 6cqw; transform: rotate(-5deg); z-index: 1; }
.ku-web--land { justify-self: end; margin-top: 5cqw; transform: rotate(5deg); z-index: 1; }
.ku-web--shop { justify-self: center; z-index: 2; width: 40%; box-shadow: 0 18px 40px -12px rgba(33, 33, 33, .4); }
.ku-bar { display: flex; align-items: center; gap: 3px; padding: 5px 7px; background: var(--grey-1); }
.ku-bar i { flex: none; width: 5px; height: 5px; border-radius: 50%; background: rgba(var(--shade), .22); }
.ku-url { flex: 1; min-width: 0; margin-left: 4px; padding: 2px 6px; border-radius: var(--r-pill); background: #fff; font: 500 clamp(8px, 2.3cqw, 10px)/1.2 var(--font); color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ku-kind { align-self: flex-start; margin: 6px 7px 7px; padding: 3px 8px; border-radius: var(--r-pill); background: var(--acc-tint); color: var(--acc-ink); font: 600 clamp(9px, 2.5cqw, 11px)/1.2 var(--font); }
.ku-web--land .ku-kind { align-self: flex-end; }
.ku-web--shop .ku-kind { align-self: center; background: var(--warm-tint); color: var(--warm-ink); }
/* the company site: a skeleton menu, the office photo with the headline on it */
.ku-corp__nav { display: flex; align-items: center; gap: 4px; padding: 5px 7px; }
.ku-corp__logo { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--warm); }
.ku-corp__nav span:not(.ku-corp__logo) { width: 18%; height: 4px; border-radius: 4px; background: rgba(var(--shade), .14); font-size: 0; }
.ku-corp__hero { position: relative; aspect-ratio: 4 / 3.4; overflow: hidden; }
.ku-corp__hero img, .ku-land__hero img, .ku-prod__img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ku-corp__hero b { position: absolute; left: 0; right: 22%; bottom: 0; padding: 18px 7px 7px; color: #fff; font: 600 clamp(10px, 2.9cqw, 13px)/1.2 var(--font);
  background: linear-gradient(transparent, rgba(0, 0, 0, .5)); }
/* the landing page: one big photo, the offer and its button */
.ku-land__hero { aspect-ratio: 4 / 3; overflow: hidden; }
.ku-land__text { display: grid; justify-items: end; gap: 5px; padding: 6px 7px 0 22%; text-align: right; }
.ku-land__text b { font: 600 clamp(10px, 2.9cqw, 13px)/1.2 var(--font); }
.ku-btn { padding: 3px 8px; border-radius: var(--r-pill); background: var(--ink); color: #fff; font: 600 clamp(8.5px, 2.4cqw, 10.5px)/1.2 var(--font); }
/* the online shop: the cart, one product big, two small */
.ku-shop__head { display: flex; align-items: center; justify-content: space-between; padding: 5px 8px; font: 600 clamp(10px, 2.8cqw, 12.5px)/1.2 var(--font); }
.ku-cart { position: relative; display: grid; width: 16px; height: 16px; color: var(--ink); }
.ku-cart .icon, .ku-cart svg { width: 100%; height: 100%; }
.ku-cart i { position: absolute; right: -6px; top: -5px; display: grid; place-items: center; min-width: 13px; height: 13px; padding: 0 3px; border-radius: 7px; background: var(--warm); color: #fff; font: 600 8.5px/1 var(--font); font-style: normal; }
.ku-shop__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; padding: 0 6px; }
.ku-prod { display: grid; gap: 2px; min-width: 0; font: 500 clamp(8.5px, 2.4cqw, 10.5px)/1.2 var(--font); }
.ku-prod b { font: 600 clamp(9px, 2.5cqw, 11px)/1.2 var(--font); }
.ku-prod--0 { grid-column: 1 / -1; grid-template-columns: 44% minmax(0, 1fr); column-gap: 7px; align-items: center; }
.ku-prod--0 .ku-prod__img { grid-row: span 3; }
.ku-prod__img { display: block; aspect-ratio: 1; overflow: hidden; border-radius: 8px; background: var(--grey-1); }
.ku-prod__n { overflow-wrap: anywhere; }
.ku-prod__add { justify-self: start; max-width: 100%; overflow-wrap: anywhere; padding: 3px 7px; border-radius: var(--r-pill); background: var(--ink); color: #fff; font: 600 clamp(8px, 2.2cqw, 10px)/1.2 var(--font); }
.ku-chat { display: grid; gap: 6px; padding: 4px 0 0; min-height: 9.5em; align-content: start; }
.ku-chat__a { display: flex; align-items: flex-end; justify-content: flex-end; gap: 6px; }
.ku-chat__a .wd-msg--out { max-width: 82%; }
.ku .wd-msg__t { display: inline; }
.ku .wd-done { margin-top: 2px; justify-self: end; }

/* social · the connected networks, posts in their own frames, one agent's inbox for every network */
.ku-social { display: grid; gap: 10px; }
.ku-nets { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ku-nets__t { display: inline-flex; align-items: center; gap: 4px; margin-left: 4px; padding: 4px 10px 4px 7px; border-radius: var(--r-pill); background: var(--positive-tint); color: var(--positive-ink); font: 600 12px/1.2 var(--font); }
.ku-nets__t .icon { display: grid; width: 13px; height: 13px; }
.ku-nets__t svg { stroke-width: 2.6; }
/* three posts at once, side by side like phones on a table: Instagram left, TikTok in front in the middle, Facebook right.
   They overlap only by the edge of the pictures, never over a text (owner 18.10: the TikTok covered a phrase) */
.ku-feed__win { position: relative; height: clamp(230px, 74cqw, 440px); margin: 4px 0 6px; }
.ku-post { position: absolute; display: flex; flex-direction: column; overflow: hidden; width: 35%; border-radius: 14px; background: #fff; box-shadow: var(--shadow-2); }
.ku-post--ig { left: 0; top: 8%; transform: rotate(-5deg); z-index: 1; }
.ku-post--fb { right: 0; top: 6%; transform: rotate(5deg); z-index: 1; }
.ku-post--tt { left: 50%; top: 0; z-index: 2; width: 34%; aspect-ratio: 9 / 16; margin-left: -17%; background: #111; box-shadow: 0 18px 40px -12px rgba(33, 33, 33, .45); }
.ku-post .ku-mock__head { gap: 6px; padding: 6px 8px; }
.ku-post .ku-mock__who { font-size: clamp(10.5px, 2.9cqw, 12px); }
.ku-post .ku-avatar { width: 20px; height: 20px; font-size: 10px; }
.ku-post .ku-logo { width: 20px; height: 20px; border-radius: 6px; }
.ku-post__img { overflow: hidden; }
.ku-post--ig .ku-post__img { aspect-ratio: 1; }
.ku-post--fb .ku-post__img { aspect-ratio: 4 / 3; }
.ku-post__cap { padding: 6px 8px 8px; font: 600 clamp(10.5px, 2.9cqw, 12px)/1.25 var(--font); }
.ku-post--fb .ku-post__cap { padding: 0 8px 6px; font-weight: 500; }
/* the network mark and the caption sit on the outer edge of each side post: the TikTok in front covers a strip of the inner edge */
.ku-post--ig .ku-mock__head { flex-direction: row-reverse; }

.ku-post--tt .ku-post__img { position: absolute; inset: 0; }
.ku-tt__logo { position: absolute; top: 8px; left: 8px; }
.ku-tt__side { position: absolute; right: 7px; bottom: 30%; display: grid; gap: 9px; color: #fff; }
.ku-tt__side .icon { display: grid; width: 17px; height: 17px; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .4)); }
.ku-post--tt .ku-post__cap { position: absolute; left: 0; right: 0; bottom: 0; display: grid; gap: 2px; padding: 24px 30px 9px 9px; color: #fff; font-weight: 500;
  background: linear-gradient(transparent, rgba(0, 0, 0, .6)); }
.ku-post--tt .ku-post__cap b { font-weight: 600; }
/* the message that comes up on a post before it flies to the inbox */
.ku-ping { position: absolute; z-index: 3; top: 36%; right: 8px; display: inline-flex; align-items: center; gap: 3px; padding: 4px 8px 4px 6px; border-radius: var(--r-pill);
  background: var(--warm); color: #fff; font: 600 11px/1 var(--font); box-shadow: 0 6px 16px -4px rgba(var(--warm-rgb), .7); }
.ku-ping .icon { display: grid; width: 13px; height: 13px; }
.ku-best { position: absolute; z-index: 4; top: -6px; left: 2%; background: #fff; color: var(--warm-ink); box-shadow: var(--shadow-1); }
.ku-best svg { fill: currentColor; }
.ku-inbox { display: grid; gap: 6px; padding: 10px; border-radius: 16px; background: #fff; box-shadow: var(--shadow-1); }
.ku-inbox__head { display: flex; align-items: center; gap: 8px; margin-bottom: 2px; font: 600 clamp(12.5px, 3.5cqw, 14px)/1.2 var(--font); }
.ku-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 12px; background: var(--grey-1);
  font: 400 clamp(12px, 3.4cqw, 13.5px)/1.3 var(--font); }
.ku-row .ku-logo { width: 24px; height: 24px; }
.ku-row__ok { display: inline-flex; align-items: center; gap: 4px; color: var(--positive-ink); font: 600 11.5px/1 var(--font); }
.ku-row__ok .icon { display: grid; width: 14px; height: 14px; }
.ku-row__ok svg { stroke-width: 2.6; }
@container (max-width: 330px) { .ku-row__ok > span:last-child { display: none; } }

/* telegram · the bot's chat, the shop opens inside as a mini app, payment, then the agent answers */
.ku-tg { position: relative; overflow: hidden; max-width: 420px; margin: 0 auto; width: 100%; border-radius: 22px; background: #fff; box-shadow: var(--shadow-2); }
.ku-tg__head { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid rgba(var(--shade), .08); }
.ku-tg__head .ku-mock__who small { color: var(--sky-ink); }
.ku-tg__chat { position: relative; display: grid; align-content: start; gap: 8px; min-height: clamp(300px, 92cqw, 380px); padding: 12px; background: linear-gradient(170deg, var(--sky-tint), #f4f7fb); }
.ku-tg__m { max-width: 80%; padding: 8px 11px; border-radius: 14px; background: #fff; font: 400 clamp(12px, 3.4cqw, 13.5px)/1.35 var(--font); box-shadow: 0 1px 1px rgba(33, 33, 33, .06); }
.ku-tg__m--me { justify-self: end; background: var(--sky-soft); border-bottom-right-radius: 4px; }
.ku-tg__m--bot { justify-self: start; border-bottom-left-radius: 4px; }
.ku-tg__btn { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 7px; padding: 6px 10px; border-radius: 10px; background: var(--sky-tint); color: var(--sky-ink); font-weight: 600; }
.ku-tg__btn .icon { display: grid; width: 15px; height: 15px; }
.ku-tg__a { display: flex; align-items: flex-end; gap: 6px; }
/* the mini app: a sheet from the bottom of the chat */
.ku-tg__sheet { position: absolute; left: 0; right: 0; bottom: 0; display: grid; gap: 8px; padding: 8px 14px 14px; border-radius: 18px 18px 0 0; background: #fff; box-shadow: 0 -12px 30px -14px rgba(33, 33, 33, .35); }
.ku-tg__grip { justify-self: center; width: 34px; height: 4px; border-radius: 4px; background: rgba(var(--shade), .2); }
.ku-tg__sheet > b { font: 600 clamp(13px, 3.6cqw, 15px)/1.2 var(--font); }
.ku-tg__prod { display: grid; grid-template-columns: 64px minmax(0, 1fr); align-items: center; gap: 10px; font: 500 clamp(12px, 3.3cqw, 13.5px)/1.3 var(--font); }
.ku-tg__pay, .ku-tg__paid { grid-area: 4 / 1; justify-self: stretch; }
.ku-tg__pay { padding: 9px; border-radius: 12px; background: var(--sky); color: #fff; text-align: center; font: 600 clamp(12.5px, 3.4cqw, 14px)/1.2 var(--font); }
.ku-tg__paid { justify-content: center; width: auto; background: var(--positive-tint); color: var(--positive-ink); padding: 9px; border-radius: 12px; }
.ku-tg__paid svg { stroke-width: 2.6; }

/* pay · every way to pay, crypto set apart */
.ku-pay { display: grid; gap: 12px; }
.ku-pay__box { padding: 14px; border-radius: 18px; background: #fff; box-shadow: var(--shadow-2); }
.ku-pay__sum { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.ku-pay__sum small { font: 600 12px/1.2 var(--font); letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); }
.ku-pay__sum b { font: 600 clamp(20px, 6cqw, 26px)/1 var(--font); font-variant-numeric: tabular-nums; }
.ku-pay__list { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ku-pay__m { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 10px; border-radius: 12px; background: var(--grey-1); font: 600 clamp(12px, 3.3cqw, 13.5px)/1.2 var(--font);
  box-shadow: inset 0 0 0 1.5px transparent; transition: box-shadow .25s, background .25s; }
.ku-pay__m.is-on { background: #fff; box-shadow: inset 0 0 0 1.5px var(--sky); }
.ku-pay__m .icon { display: grid; flex: none; width: 20px; height: 20px; color: var(--sky-ink); }
.ku-pay__m > span { overflow-wrap: anywhere; }
.ku-pay__twint { flex: none; width: 20px; height: 20px; object-fit: contain; }
/* crypto for business: the dark panel with warm coins */
.ku-crypto { display: grid; gap: 10px; padding: 14px; border-radius: 18px; background: var(--ink); color: #fff; box-shadow: var(--shadow-2); }
.ku-crypto__head { display: flex; align-items: center; gap: 8px; font: 600 clamp(13.5px, 3.8cqw, 15.5px)/1.2 var(--font); }
.ku-crypto__head .icon { display: grid; width: 18px; height: 18px; color: var(--warm); }
.ku-crypto__coins { display: flex; flex-wrap: wrap; gap: 6px; }
.ku-coin { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px 5px 5px; border-radius: var(--r-pill); background: rgba(255, 255, 255, .1); font: 600 12.5px/1 var(--font); }
.ku-coin i { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--warm); color: #fff; font: 700 13px/1 var(--font); font-style: normal; }
.ku-coin--more { padding-left: 10px; color: rgba(255, 255, 255, .75); }
.ku-crypto__flow { display: flex; flex-wrap: wrap; gap: 6px; min-height: 2.2em; }
.ku-chf { background: rgba(255, 255, 255, .12); color: #fff; }
.ku-booked { background: var(--positive-tint); color: var(--positive-ink); }
.ku-booked svg { stroke-width: 2.6; }

/* the smallest phones */
@media (max-width: 380px) {
  .ku-ads__out { min-height: 6.4em; }
}
@media (prefers-reduced-motion: reduce) { .ku-card:not(:last-child)::after { transition: none; } }

.ku-post--ig .ku-ping { right: auto; left: 8px; }   /* away from the edge the TikTok covers */
.ku-pay, .ku-pay__box, .ku-crypto, .ku-tg { min-width: 0; }
.ku-crypto .wd-chip { width: auto; }   /* a long label wraps instead of widening the card (de-CH at 320 px) */
.ku-pay__logos { display: flex; gap: 3px; flex: none; }
.wd .ku-mark { display: block; flex: none; width: 22px; height: 22px; stroke: none; }   /* .wd svg (css/leistungen.css) would stretch it */
.wd .ku-mark path { stroke: none; }
.ku-pay__m--brand { justify-content: center; }
.wd .ku-pay__m--brand .ku-mark { width: 64px; height: 40px; margin: -8px 0; }   /* the Pay marks are small inside their square */
.ku-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* the text follows its object right away (also in «What we do»); when the phone stack makes all cards one height, the extra room goes under
   the text, not between the object and the text (owner 18.10: the description sat too low) */
.ku-card .wd-vis, .wd-card .wd-vis { flex: none; }