/* Home section 7 «Your data» (owner 17.10, v3): one wide panel — text left, the pixel map of Switzerland right on the
   Föhn (phones: the map on top). Icons are the site's line icons in sky circles; tags are glass beads. The linking circle
   lands on Zürich (js/circle-link.js). Deliberately not the cards of «What we do». Motion: js/daten.js */
.dt { max-width: var(--page-max); margin: var(--section-y) var(--edge) 0; }
.dt__panel { display: grid; overflow: hidden; border-radius: var(--r-xl); background: #fff; box-shadow: var(--shadow-2); }
@media (min-width: 900px) { .dt__panel { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); } }

/* text */
.dt__text { display: grid; align-content: center; gap: 18px; padding: clamp(24px, 4vw, 64px); }
.dt__eyebrow { margin: 0; font: 500 13px/1.3 var(--font); letter-spacing: .14em; text-transform: uppercase; color: var(--text-2); }
.dt h2 { margin: 0; font: 600 clamp(34px, 4.4vw, 64px)/1.03 var(--font); letter-spacing: -0.035em; text-wrap: balance; color: var(--ink); }
.dt-hw { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .1em; margin-bottom: -.1em; }
.dt-hw > span { display: inline-block; }
.dt__lead { margin: 0; max-width: 44ch; font-size: clamp(16.5px, 1.3vw, 19px); line-height: 1.5; color: var(--text-2); text-wrap: pretty; }
.dt__points { display: grid; gap: 14px; margin: 6px 0 0; padding: 0; list-style: none; }
.dt__points li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; align-items: center; font-size: 15.5px; line-height: 1.4; color: var(--text-2); }
.dt__points b { display: block; font-weight: 600; font-size: 16.5px; color: var(--ink); }
.dt__ic { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--sky-tint); color: var(--sky-ink); }   /* the site's icon circle */
.dt__ic .icon, .dt-tag .icon { display: grid; width: 20px; height: 20px; }
.dt svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.dt__more { margin: 4px 0 0; padding-top: 16px; border-top: 1px solid var(--line); font-size: 14.5px; line-height: 1.45; color: var(--text-3); }

/* the picture: a soft sky with light from the top, the country in the middle */
.dt__visual { position: relative; min-height: clamp(300px, 40vw, 560px); background: var(--foehn); }
.dt__board { position: absolute; left: 50%; top: 52%; width: min(88%, 150cqh); aspect-ratio: 240 / 150; translate: -50% -50%; }   /* the map and its pins share one box */
.dt__visual { container-type: size; }
.dt__dots { position: absolute; inset: 0; width: 100%; height: 100%; }

/* the pin on Zürich: the landing place of the circle, rings of protection around it, the lock */
.dt-pin { position: absolute; z-index: 2; width: 0; height: 0; }
.dt-pin__dot { position: absolute; left: -11px; top: -11px; width: 22px; height: 22px; border-radius: 50%; box-shadow: inset 0 0 0 2px rgba(var(--warm-rgb), .45); }
.dt.is-landed .dt-pin__dot, .dt.is-static .dt-pin__dot { background: radial-gradient(circle at 35% 30%, #f7a676, var(--warm) 55%, #c95a24); box-shadow: 0 6px 18px -6px rgba(var(--warm-rgb), .9); }
.dt-ring { position: absolute; left: -11px; top: -11px; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid rgba(var(--warm-rgb), .55); opacity: 0; }
.dt.is-landed .dt-ring, .dt.is-static .dt-ring { animation: dt-ring 3.6s cubic-bezier(.2, .6, .3, 1) infinite; }
.dt.is-landed .dt-ring:nth-child(2), .dt.is-static .dt-ring:nth-child(2) { animation-delay: 1.2s; }
.dt.is-landed .dt-ring:nth-child(3), .dt.is-static .dt-ring:nth-child(3) { animation-delay: 2.4s; }
@keyframes dt-ring { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(7); opacity: 0; } }
.dt-pin__label { position: absolute; left: 16px; top: -6px; font: 600 13px/1 var(--font); color: var(--ink); white-space: nowrap; }
.dt-tag { position: absolute; z-index: 1; display: inline-flex; align-items: center; gap: 6px; padding: 6px 13px 6px 7px; border-radius: var(--r-pill); translate: -50% -50%;
  background: radial-gradient(120% 140% at 50% 15%, #fff, #f3f6fb 70%); box-shadow: inset 0 0 3px 1px rgba(255, 255, 255, .7), inset 0 4px 4px -2px rgba(255, 255, 255, .95), 0 10px 22px -12px rgba(var(--shade), .55);
  font: 600 clamp(11.5px, 2.6cqw, 13.5px)/1 var(--font); color: var(--ink); white-space: nowrap; }
.dt-tag .icon { width: 16px; height: 16px; color: var(--sky-ink); }

@media (max-width: 899px) {
  .dt__visual { order: -1; min-height: 0; aspect-ratio: 4 / 3; }
}
@media (max-width: 599px) {
  .dt__panel { border-radius: var(--r-l); }
  .dt__visual { aspect-ratio: 1 / 1; }
  .dt__board { width: min(94%, 150cqh); }
}
@media (prefers-reduced-motion: reduce) { .dt-ring { animation: none !important; } }
/* the circle moved on to the next section: Zürich keeps its empty ring */
.dt .dt-pin__dot.cl-lent { opacity: 1; background: none; box-shadow: inset 0 0 0 2px rgba(var(--warm-rgb), .45); }