/* discovery.css: only /discovery and its locale copies (CORE-755). Hero split, chips and the "Today" statement (.ig-today)
   come from integrations.css. Hero tiles and the #sides cards are demo data: the names match the Discovery demo
   (Verso Nine, Lindqvist, Aubry & Fils, West Halden, Kastell); card strings are dv.mk.* in i18n.js. Risk: the pending sentence in the flow is pinned by marketing-website.test.mjs. */

/* ---------- hero: Discovery cards as a floating stack (Tobi 22.10.2026, replaces the app screenshot) ----------
   Five portrait tiles like the cards in Discovery: photo, name bottom left on a soft dark fade, radius 14, no frame.
   Layered left to right (each tile in front of its left neighbour, so every name stays readable), Kastell in front. Each drifts a few px on its own loop
   (`translate` only, so the .reveal entrance transform stays free). Phone and tablet show three tiles, centred. */
.dv-tiles { position: relative; width: 100%; max-width: 640px; aspect-ratio: 10 / 8.6; margin-left: auto; }
.dv-tile { position: absolute; display: block; aspect-ratio: 3 / 4; border-radius: 14px; overflow: hidden; background: #d6d6d3;
  box-shadow: 0 30px 54px -28px rgba(16,16,16,.42), 0 8px 18px -12px rgba(16,16,16,.18); }
.dv-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.dv-tile::after { content: ""; position: absolute; inset: 52% 0 0; background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.46)); }
.dv-tile b { position: absolute; left: 7%; right: 7%; bottom: 6%; z-index: 1; font-size: clamp(13px, 1.25vw, 18px); font-weight: 600;
  letter-spacing: -0.01em; line-height: 1.2; color: #fff; text-align: left; }
.dv-tile--a { left: 0; top: 27%; width: 28%; z-index: 1; }
.dv-tile--b { left: 15%; top: 5%; width: 32%; z-index: 2; }
.dv-tile--c { left: 34%; top: 25%; width: 36%; z-index: 3; }
.dv-tile--d { left: 64%; top: 0; width: 30%; z-index: 4; }
.dv-tile--e { left: 63%; top: 51%; width: 31%; z-index: 5; box-shadow: 0 44px 80px -30px rgba(16,16,16,.55), 0 12px 26px -14px rgba(16,16,16,.25); }
@keyframes dv-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -7px; } }
@media (prefers-reduced-motion: no-preference) {
  .dv-tile, .dv-card { animation: dv-float 7s ease-in-out infinite; }
  .dv-tile--a { animation-duration: 8s; animation-delay: -1s; }
  .dv-tile--b { animation-duration: 7.4s; animation-delay: -3s; }
  .dv-tile--d { animation-duration: 6.8s; animation-delay: -5s; }
  .dv-tile--e { animation-duration: 6.2s; animation-delay: -2s; }
  .dv-side--brand .dv-card { animation-delay: -3.5s; }
}
/* the hero sits right on the next section; give "Today …" the normal section rhythm above it */
.svc-section.day-first#today { padding-top: clamp(96px, 12vh, 150px); }

/* ---------- two sides: a photo each, an app-style card floating over its lower corner, then the points ---------- */
.dv-sides .section-head { margin-bottom: clamp(40px, 6vh, 64px); }
.dv-sides__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(40px, 6vw, 96px); }
.dv-scene { position: relative; margin-bottom: clamp(52px, 6vw, 72px); }
.dv-scene__photo { display: block; width: 84%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 16px; }
.dv-side--brand .dv-scene__photo { object-position: center 30%; }
.dv-card { position: absolute; right: 0; bottom: -36px; width: min(290px, 62%); display: flex; flex-direction: column; gap: 9px;
  padding: 12px 12px 14px; border-radius: 14px; background: #fff; font-size: 13px; line-height: 1.3; color: #101010;
  box-shadow: 0 34px 64px -30px rgba(16,16,16,.5), 0 10px 24px -14px rgba(16,16,16,.2); }
.dv-card__strip { position: relative; display: block; height: 76px; margin-bottom: 3px; border-radius: 10px; overflow: hidden; }
.dv-card__strip img { width: 100%; height: 100%; object-fit: cover; object-position: center 22%; }
.dv-card__strip::after { content: ""; position: absolute; inset: 30% 0 0; background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.45)); }
.dv-card__strip b { position: absolute; left: 10px; bottom: 7px; z-index: 1; font-size: 15px; font-weight: 600; color: #fff; }
.dv-card__row { display: flex; justify-content: space-between; gap: 12px; padding: 0 2px; }
.dv-card__row i { font-style: normal; color: #5c5c5c; white-space: nowrap; }
.dv-card__row b { font-weight: 600; text-align: right; }
.dv-card__btns { display: flex; gap: 8px; margin-top: 4px; }
.dv-card__btn { flex: 1; display: inline-flex; align-items: center; justify-content: center; min-height: 34px; padding: 0 14px; border-radius: 999px;
  background: #101010; color: #fff; font-weight: 600; }
.dv-card__btn--soft { background: rgba(13,13,13,0.07); color: #101010; }
.dv-card--req { gap: 10px; padding: 14px; }
.dv-card__who { display: flex; align-items: center; gap: 10px; }
.dv-card__who b { display: block; font-weight: 600; }
.dv-card__who i { font-style: normal; color: #5c5c5c; }
.dv-card__ava { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: rgba(13,13,13,0.07);
  font-size: 12px; font-weight: 600; }
.dv-card__note { padding: 8px 10px; border-radius: 10px; background: rgba(13,13,13,0.05); color: #4a4a4a; }
.dv-side h3 { margin: 0; font-family: var(--font-display); font-size: clamp(22px, 2vw, 28px); font-weight: 500; letter-spacing: -0.015em; color: #101010; }
.dv-points { list-style: none; margin: 16px 0 0; padding: 0; max-width: 46ch; }
.dv-points li { font-size: 15px; line-height: 1.5; color: rgba(13,13,13,0.62); text-wrap: pretty; }
.dv-points li + li { margin-top: 12px; }
.dv-points b { display: block; font-size: 16px; font-weight: 600; color: #101010; }

/* ---------- how a connection starts: one wide photo above the steps ---------- */
.dv-how__photo { margin: 0 0 clamp(36px, 5vh, 56px); border-radius: 16px; overflow: hidden; }
.dv-how__photo img { display: block; width: 100%; height: auto; aspect-ratio: 21 / 8; object-fit: cover; object-position: center 45%; }

/* ---------- the brand page: one wide window, its contents as chips ---------- */
.dv-page .section-head { margin-bottom: clamp(32px, 5vh, 52px); }
.dv-page__shot { max-width: 860px; margin: 0 auto; } /* smaller, Tobi 22.10.2026: "das ist zu viel so" */
.dv-page__chips { justify-content: center; max-width: 1120px; margin: clamp(28px, 4.5vh, 44px) auto 0; }

/* ---------- how a connection starts: a row of steps with chevrons, no numbers ---------- */
.dv-how .section-head { margin-bottom: clamp(32px, 5vh, 48px); }
.dv-flow { --dv-gap: clamp(28px, 4vw, 56px); list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--dv-gap); }
.dv-flow li { position: relative; }
.dv-flow b { display: block; font-family: var(--font-display); font-size: clamp(19px, 1.7vw, 24px); font-weight: 500; letter-spacing: -0.01em; line-height: 1.2; color: #101010; }
.dv-flow span { display: block; margin-top: 8px; font-size: 15px; line-height: 1.5; color: rgba(13,13,13,0.62); text-wrap: pretty; }
.dv-flow__arrow { position: absolute; top: 3px; right: calc(var(--dv-gap) / -2 - 11px); width: 22px; height: 22px;
  fill: none; stroke: rgba(13,13,13,0.4); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- close: two buttons side by side ---------- */
.dv-close__go { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 8px; }
.day-close .dv-close__go .btn { margin-top: 0; }

/* ---------- tablet and phone ---------- */
@media (max-width: 860px) {
  .dv-tiles { max-width: 460px; aspect-ratio: 10 / 7.8; margin: 8px auto 0; }
  .dv-tile--a, .dv-tile--e { display: none; }
  .dv-tile b { font-size: clamp(12px, 3.4vw, 16px); }
  .dv-tile--b { left: 1%; top: 3%; width: 37%; }
  .dv-tile--c { left: 27%; top: 21%; width: 41%; box-shadow: 0 44px 80px -30px rgba(16,16,16,.55), 0 12px 26px -14px rgba(16,16,16,.25); }
  .dv-tile--d { left: 61%; top: 0; width: 37%; }
  .dv-sides__cols { grid-template-columns: minmax(0, 1fr); gap: 64px; max-width: 520px; margin: 0 auto; }
  .dv-scene__photo { width: 100%; aspect-ratio: 5 / 6; }
  .dv-card { right: 12px; bottom: -40px; width: min(262px, 74%); gap: 7px; font-size: 12.5px; }
  .dv-card__strip { height: 58px; }
  .dv-how__photo img { aspect-ratio: 4 / 3; }
  .dv-flow { grid-template-columns: minmax(0, 1fr); gap: 44px; }
  .dv-flow__arrow { top: auto; right: auto; left: 0; bottom: -34px; transform: rotate(90deg); }
}