/* Home section 6 «What we do» (owner 17.10): coloured cards like the industry tiles (css/branchen.css) — the tile in
   its own step of the palette, icon in a white circle + name — with one big live object each (Pinterest refs 6/9/36).
   Desktop: two per row (bento); phones: one per row, the object above the text. Motion: js/leistungen.js */
.wd { max-width: var(--page-max); margin: var(--section-y) var(--edge) 0; }
.wd__head { margin: 0 auto var(--head-gap); text-align: center; }   /* the big centred headline (owner 17.10) */
/* the headline as its own screen (owner 18.10, js/section-kit.js headScene): centred in the screen, the cards slide over it */
.wd__head.is-scene { display: flex; flex-direction: column; justify-content: center; min-height: min(76svh, 640px); margin-bottom: 0; }
.wd:has(> .wd__head.is-scene) { margin-top: 0; }   /* the headline screen is the gap itself: no section gap on top of it (QA 20.10) */
.wd__head.is-scene > * { transform-origin: 50% 50%; will-change: transform, opacity; }
.is-over-scene { position: relative; z-index: 2; }
.wd__eyebrow { margin: 0 0 14px; font: 500 13px/1.3 var(--font); letter-spacing: .14em; text-transform: uppercase; color: var(--text-2); }
.wd h2 { margin: 0 auto; max-width: 17ch; font: 600 clamp(36px, 6.2vw, 92px)/1.02 var(--font); letter-spacing: -0.04em; text-wrap: balance; color: var(--ink); }
.wd-hw { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .1em; margin-bottom: -.1em; }   /* the mask of every headline word */
.wd-hw > span { display: inline-block; }
/* the "o" of the headline: an empty ring until the linking circle lands (js/circle-link.js), then the warm circle */
/* the real letter is inside, transparent (SEO audit 21.10: the headline text keeps its "o"); overflow: hidden keeps the
   box's baseline at its bottom edge, so it sits exactly where the empty slot sat */
.wd-o { position: relative; display: inline-block; width: .6em; height: .6em; margin: 0 .03em; vertical-align: -.035em; overflow: hidden; color: transparent; line-height: .6em; }
.wd-o__slot { position: absolute; inset: 0; display: block; width: 100%; height: 100%; border-radius: 50%; box-shadow: inset 0 0 0 max(2px, .04em) rgba(var(--warm-rgb), .35); }
.wd.is-landed .wd-o__slot, .wd.is-static .wd-o__slot, .cl-ball__warm { background: radial-gradient(circle at 35% 30%, #f7a676, var(--warm) 55%, #c95a24); box-shadow: 0 .05em .16em -.04em rgba(var(--warm-rgb), .85); }
.cl-ball { position: fixed; left: 0; top: 0; z-index: 30; border-radius: 50%; visibility: hidden; pointer-events: none;
  background: radial-gradient(circle at 34% 30%, #6b6b74, #2b2b30 55%, #18181b); }
.cl-ball__warm { position: absolute; inset: 0; border-radius: 50%; opacity: 0; }
/* the start of a flight: a ball just disappears, a headline "o" keeps its empty ring (the circle moved on) */
.cl-lent { opacity: 0; }
.wd .wd-o__slot.cl-lent { opacity: 1; background: none; box-shadow: inset 0 0 0 max(2px, .04em) rgba(var(--warm-rgb), .35); }
.wd__intro { margin: 20px auto 0; max-width: 46ch; font-size: clamp(17px, 1.4vw, 20px); line-height: 1.45; color: var(--text-2); text-wrap: pretty; }

.wd__grid { display: grid; gap: var(--card-gap); }
@media (min-width: 900px) { .wd__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---- the card: the industry tile, bigger */
.wd-card { position: relative; display: grid; }   /* the pin wrapper only */
.wd-card__in { position: relative; display: flex; flex-direction: column; border-radius: var(--r-xl); overflow: hidden; color: var(--ink);
  /* one background for every card (owner 17.10): the brand Föhn — light, warm from the top right, sky from the bottom left */
  background: radial-gradient(110% 80% at 100% 0%, rgba(244, 180, 140, .5), rgba(244, 180, 140, 0) 62%),
    radial-gradient(110% 85% at 0% 100%, rgba(191, 211, 234, .95), rgba(191, 211, 234, 0) 65%),
    linear-gradient(160deg, #fff 0%, var(--paper) 100%); }
/* the accent family of every card (owner 17.10): warm (audit, content) and sky (agents, own), on the common Föhn background.
   --acc = the accent, --acc-tint / --acc-soft = its light steps, --acc-ink = text and glyphs on them */
.wd-tone--warm { --acc: var(--warm); --acc-rgb: var(--warm-rgb); --acc-tint: var(--warm-tint); --acc-soft: var(--peach); --acc-ink: var(--warm-ink); --acc-hi: #f29a68; }
.wd-tone--sky { --acc: var(--sky); --acc-rgb: var(--sky-rgb); --acc-tint: var(--sky-tint); --acc-soft: var(--sky-soft); --acc-ink: var(--sky-ink); --acc-hi: #9dbde3; }
.wd-card__text { display: grid; gap: 16px; padding: 6px clamp(20px, 2.4vw, 32px) clamp(36px, 3.4vw, 44px); }
.wd-card__top { display: flex; align-items: center; gap: 10px; margin: 0; font: 600 12.5px/1.25 var(--font); letter-spacing: .08em; text-transform: uppercase; }
.wd-card__ic { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 50%; background: rgba(255, 255, 255, .8); color: var(--acc-ink); }
.wd-card__ic .icon { display: grid; width: 20px; height: 20px; }
.wd-card__title { margin: 0; font: 500 clamp(23px, 2.2vw, 31px)/1.18 var(--font); letter-spacing: -0.025em; text-wrap: balance; }
.wd-w { display: inline-block; }
.wd-card__items { display: grid; gap: 12px; margin: 4px 0 0; padding: 0; list-style: none; }
.wd-card__items li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; font-size: 15.5px; line-height: 1.55; color: rgba(33, 33, 33, .78); }
.wd-card__items .icon { display: grid; width: 18px; height: 18px; margin-top: 2px; color: var(--acc-ink); }
.wd svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ---- the object area: a white panel on the tile, a second one behind it for depth */
.wd-vis { position: relative; flex: 1; display: grid; align-items: center; padding: clamp(18px, 2.4vw, 32px) clamp(18px, 2.4vw, 32px) 22px; container-type: inline-size; }
/* the second sheet behind the panel follows the panel, whatever the card height */
.wd-panel::before { content: ""; position: absolute; inset: 14px -10px -12px 12px; z-index: -1; border-radius: inherit; background: rgba(255, 255, 255, .45); transform: rotate(4deg); }
.wd-panel { position: relative; padding: clamp(14px, 4cqw, 22px); border-radius: var(--r-l); background: #fff; box-shadow: var(--shadow-2); transform: rotate(-1.2deg); }
.wd-chip { display: inline-flex; align-items: center; gap: 6px; width: max-content; max-width: 100%; padding: 6px 12px 6px 9px; border-radius: var(--r-pill);
  font: 600 clamp(12px, 3.3cqw, 14px)/1.2 var(--font); }
.wd-chip .icon { display: grid; flex: none; width: 1.1em; height: 1.1em; }
.wd-chip--title { background: var(--acc-tint); color: var(--acc-ink); margin-bottom: 10px; }
.wd-ball { display: inline-block; flex: none; width: 26px; height: 26px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, var(--acc-hi), var(--acc) 70%); box-shadow: 0 10px 30px -8px rgba(var(--acc-rgb), .55); }

/* audit · the map of the week */
.wd-map { --rc: clamp(30px, 8.5cqw, 40px); }
.wd-map__rows { position: relative; display: grid; grid-auto-rows: calc(var(--rc) + 12px); }
.wd-map__rail { position: absolute; left: calc(var(--rc) / 2 - 1px); top: 10%; bottom: 10%; width: 2px; border-radius: 2px; background: rgba(var(--shade), .18); }
.wd-map__dot { position: absolute; z-index: 3; left: calc(var(--rc) / 2); top: 10%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%;
  background: var(--acc); box-shadow: 0 0 0 4px rgba(var(--acc-rgb), .25), 0 0 14px rgba(var(--acc-rgb), .7); opacity: 0; }
.wd-map__scan { position: absolute; left: -10px; right: -10px; top: 0; height: 20%; border-radius: var(--r-s); opacity: 0;
  background: linear-gradient(90deg, rgba(var(--acc-rgb), 0), rgba(var(--acc-rgb), .28) 30%, rgba(var(--acc-rgb), .28) 70%, rgba(var(--acc-rgb), 0)); }
.wd-row { position: relative; z-index: 1; display: grid; grid-template-columns: var(--rc) minmax(0, 1fr) auto; align-items: center; gap: 3cqw; }
.wd-row__c { display: grid; place-items: center; width: var(--rc); height: var(--rc); border-radius: 50%; background: var(--acc-tint); color: var(--acc-ink); }
.wd-row__c .icon { display: grid; width: 48%; height: 48%; }
.wd-row__l { font: 500 clamp(13px, 3.8cqw, 16px)/1.2 var(--font); }
.wd-row__s { display: grid; justify-items: end; }
.wd-tag { grid-area: 1 / 1; font-size: clamp(11.5px, 3.2cqw, 13px); padding: 5px 10px 5px 8px; }
.wd-tag--slow { background: var(--warm-tint); color: var(--warm-ink); opacity: 0; }
.wd-tag--auto { background: var(--positive-tint); color: var(--positive-ink); }
.wd-tag--auto svg, .wd-done svg { stroke-width: 2.6; }
@container (max-width: 300px) { .wd-tag .icon { display: none; } .wd-tag { padding-inline: 8px; } .wd-row { gap: 8px; } }   /* the smallest phones: the word, not the icon */

/* agents · the chat in three languages */
.wd-panel__head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; font: 600 clamp(13px, 3.6cqw, 15px)/1.2 var(--font); }
.wd-chat__list { display: grid; gap: 6px; }
.wd-msg { display: inline-flex; align-items: center; gap: 7px; max-width: 86%; padding: 8px 12px; border-radius: 16px; font: 400 clamp(12.5px, 3.6cqw, 14.5px)/1.3 var(--font); }
.wd-msg--in { justify-self: start; background: var(--acc-tint); border-bottom-left-radius: 5px; }
.wd-msg--out { justify-self: end; min-height: 1.3em; background: var(--acc-ink); color: #fff; border-bottom-right-radius: 5px; }
.wd-lang { flex: none; padding: 2px 6px; border-radius: 6px; background: #fff; font: 700 10.5px/1.2 var(--font); letter-spacing: .04em; color: var(--acc-ink); }
.wd-typing { display: none; gap: 4px; padding: 3px 0; }
.wd-typing i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, .8); }
.wd-done { margin-top: 12px; background: var(--positive-tint); color: var(--positive-ink); }

/* content · the month */
.wd-month__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: clamp(3px, 1.2cqw, 6px); }
.wd-day { padding-bottom: 2px; font: 600 clamp(10px, 2.8cqw, 12px)/1 var(--font); color: var(--text-3); text-align: center; }
.wd-cell { position: relative; aspect-ratio: 1; border-radius: clamp(6px, 2cqw, 10px); background: rgba(var(--acc-rgb), .07); }
.wd-cell__n { position: absolute; left: 5px; top: 4px; font: 500 clamp(9px, 2.5cqw, 11px)/1 var(--font); color: var(--text-3); }
.wd-post { position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; border-radius: inherit; color: var(--acc-ink); }
.wd-post .icon { display: grid; width: 40%; height: 40%; }
.wd-post--photo { background: linear-gradient(150deg, var(--acc-tint), var(--acc-soft)); }
.wd-post--video { background: linear-gradient(150deg, var(--acc-soft), rgba(var(--acc-rgb), .72)); color: #fff; }   /* soft, not a loud accent */
.wd-star { position: absolute; right: -5px; top: -5px; display: grid; place-items: center; width: 20px; height: 20px; padding: 3px; border-radius: 50%; background: var(--acc-ink); color: #fff; }
.wd-star svg { fill: currentColor; }
.wd-best { position: absolute; z-index: 3; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%); max-width: none; background: var(--acc-ink); color: #fff; box-shadow: var(--shadow-1); }
.wd-best svg { fill: currentColor; }

/* own · the safe of the company */
.wd-safe { position: relative; padding: clamp(40px, 11cqw, 64px) clamp(12px, 3.5cqw, 24px) clamp(24px, 7cqw, 48px); border-radius: var(--r-l);
  background: rgba(255, 255, 255, .55); border: 2px dashed rgba(var(--acc-rgb), .7); }
.wd-safe__lock { position: absolute; left: 12px; right: 12px; top: 0; z-index: 2; display: flex; justify-content: center; transform: translateY(-50%); }
.wd-chip--lock { background: #fff; color: var(--acc-ink); box-shadow: var(--shadow-1); text-align: center; }
.wd-safe__in { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.25fr); align-items: center; gap: clamp(8px, 3cqw, 18px); }
.wd-docs { display: grid; gap: clamp(7px, 2.4cqw, 12px); }
.wd-doc { position: relative; z-index: 2; display: flex; align-items: center; gap: 6px; padding: clamp(8px, 2.6cqw, 13px) clamp(9px, 2.6cqw, 13px); border-radius: 12px; background: #fff; box-shadow: var(--shadow-1);
  font: 500 clamp(11.5px, 3.4cqw, 15px)/1.15 var(--font); min-width: 0; }
.wd-doc .icon { display: grid; flex: none; width: 16px; height: 16px; color: var(--acc-ink); }
.wd-doc > span:last-child { overflow: hidden; text-overflow: ellipsis; }
.wd-hub { display: grid; justify-items: center; gap: 6px; font: 600 clamp(12px, 3.3cqw, 14px)/1.2 var(--font); text-align: center; }
.wd-hub .wd-ball { width: clamp(56px, 19cqw, 104px); height: clamp(56px, 19cqw, 104px); }
/* the pixel sphere (js/pixel-morph.js): the canvas is larger than the ball, its glow and sparks reach around it */
.wd-ball--px { position: relative; background: none; box-shadow: none; overflow: visible; }
.wd-panel__head .wd-ball--px { width: 42px; height: 42px; }
.wd-ball--px canvas { position: absolute; left: 50%; top: 50%; width: 147%; height: 147%; translate: -50% -50%; pointer-events: none; }
.wd-team { display: grid; gap: 6px; justify-items: end; }
.wd-team__who { display: grid; place-items: center; width: clamp(32px, 9cqw, 42px); height: clamp(32px, 9cqw, 42px); border-radius: 50%; background: var(--acc-tint); color: var(--acc-ink); }
.wd-team__who .icon { display: grid; width: 18px; height: 18px; }
.wd-bubble { padding: 8px 11px; border-radius: 14px; font: 400 clamp(11.5px, 3.4cqw, 15px)/1.25 var(--font); text-align: left; }
.wd-bubble--ask { background: #fff; box-shadow: var(--shadow-1); border-top-right-radius: 4px; }
.wd-bubble--reply { background: var(--acc-ink); color: #fff; border-top-right-radius: 4px; }

/* phones and tablets: the stack — the shadow on top of every card shows it sliding over the one before */
.wd-card__veil { position: absolute; inset: 0; z-index: 5; border-radius: inherit; background: rgba(33, 33, 33, .28); opacity: 0; pointer-events: none; }
@media (max-width: 899px) {
  .wd-card__in { box-shadow: 0 -14px 34px -20px rgba(var(--shade), .45); }
}
/* phones */
@media (max-width: 599px) {
  /* the chat is the tallest object: a little tighter on phones so the common card height stays close to a screen */
  .wd-chat .wd-panel__head { margin-bottom: 8px; }
  .wd-chat__list { gap: 4px; }
  .wd-msg { padding: 6px 10px; }
  .wd-done { margin-top: 8px; }
  .wd-vis { padding-bottom: 14px; }
  .wd__grid { gap: 12px; }
  .wd-card__in { border-radius: var(--r-l); }
  .wd-card__items li { font-size: 15.5px; }
  .wd-card__text { gap: 18px; padding: 8px 20px 40px; }
  .wd-card__items { gap: 14px; }
}
@media (max-width: 380px) {
  .wd-safe__in { grid-template-columns: minmax(0, 1fr) auto; }
  .wd-team { grid-column: 1 / -1; justify-items: stretch; grid-template-columns: auto 1fr; align-items: start; }
  .wd-team__who { grid-row: span 2; }
  .wd-bubble { justify-self: start; }
}
/* the safe fills its tile (the row height comes from the month next to it) */
@media (min-width: 900px) { .wd-card--own .wd-vis { align-items: stretch; } }   /* phones: centred like the other objects */
.wd-card--own .wd-safe { display: grid; align-content: center; }
@container (max-width: 380px) { .wd-doc .icon { display: none; } }

/* tablets (700–899, layout check 20.10): one card per row, the object beside the text as in «New customers»,
   instead of one card stretched over the whole width */
@media (min-width: 700px) and (max-width: 899px) {
  .wd:not(.ku) .wd-card .wd-card__in { flex-direction: row; align-items: center; }
  .wd:not(.ku) .wd-card .wd-vis { flex: 0 0 52%; }
  .wd:not(.ku) .wd-card .wd-card__text { padding: clamp(24px, 3vw, 36px) clamp(24px, 3vw, 36px) clamp(24px, 3vw, 36px) 8px; }
}

/* phones (headline check 20.10): the long fr / ru / de headlines took 4–5 lines at 36 px; a step smaller */
@media (max-width: 599px) { .wd h2 { font-size: clamp(30px, 8.6vw, 40px); } }