/* trust.css: only /trust, the data protection page (CORE-747, 21.10.2026; light rework 22.10.2026).
   A page stylesheet on purpose: every page loads styles.css and the asset budget
   (scripts/check-asset-budget.mjs) leaves almost no room there. Since Tobi's review of
   22.10.2026 ("sehen super KI aus und warum schwarz") the page has no mocks. Owner, same day: alternate sensibly, tiles only
   where they fit: three role columns, an open two-column icon list, the provider list, heading beside rows,
   one three-column panel, all flat on the page grey. Shopify is not named on this page (Tobi). Flat: no plates, outlines or
   frames, separation by hairlines and space. Region tags are neutral grey pills.
   Risks / what goes stale silently: the list names providers and regions as plain text.
   When a provider or region changes, edit trust.html here as well as the tr.* keys. */

.tr-link { display: inline-block; margin-top: 4px; font-size: 14.5px; font-weight: 600; color: #101010; text-decoration: underline; text-underline-offset: 3px; }
.section-head .tr-link { margin-top: 16px; }
/* 22.10.2026: a 44px touch target on phones and tablets without moving the text (invisible hit area) */
@media (max-width: 760px), (pointer: coarse) { .tr-link { position: relative; } .tr-link::after { content: ""; position: absolute; inset: -11px -6px; } }

/* ---------- who sees what: three role columns under a hairline ---------- */
.tr-roles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 3vw, 40px); }
.tr-role { padding: 22px 0 0; border-top: 1px solid rgba(13,13,13,0.12); }
.tr-role h3 { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; font-size: 18px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; color: #101010; }
.tr-role img { flex: none; width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.tr-role p { margin: 0; font-size: 15px; line-height: 1.6; color: rgba(13,13,13,0.62); text-wrap: pretty; }

/* ---------- how it is protected: an open two-column list on the page ground ---------- */
.tr-feats { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(3, auto);
  grid-auto-flow: column; column-gap: clamp(36px, 5vw, 80px); }
.tr-feat { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 18px; padding: 26px 0; border-top: 1px solid rgba(13,13,13,0.1); }
.tr-feat:nth-child(3n+1) { border-top: 0; padding-top: 0; } /* hairlines only between rows inside each column */
.tr-feat .tr-ico { margin-top: 1px; color: #101010; }
.tr-feat h3 { margin: 0 0 6px; font-size: 17px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; color: #101010; }
.tr-feat p { margin: 0; max-width: 46ch; font-size: 15px; line-height: 1.6; color: rgba(13,13,13,0.62); text-wrap: pretty; }
.tr-ico { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- your control: plain rows beside the heading ---------- */
.tr-rows { margin: 0; }
.tr-rows > div { padding: 20px 0 22px; border-top: 1px solid rgba(13,13,13,0.12); }
.tr-rows > div:first-child { border-top: 0; padding-top: 0; }
.tr-rows dt { margin: 0 0 8px; font-size: 18px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; color: #101010; }
.tr-rows dd, .tr-panel dd { margin: 0; max-width: 54ch; font-size: 15px; line-height: 1.6; color: rgba(13,13,13,0.62); text-wrap: pretty; }
.tr-rows dd + dd, .tr-panel dd + dd { margin-top: 10px; }

/* ---------- Connect: three columns on the page ground (flat, Tobi 22.10.2026) ---------- */
.tr-panel { margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 4px 0; }
.tr-panel > div { padding: 0 clamp(20px, 2.4vw, 32px); border-left: 1px solid rgba(13,13,13,0.08); }
.tr-panel > div:first-child { border-left: 0; padding-left: 0; }
.tr-panel > div:last-child { padding-right: 0; }
.tr-panel dt { margin: 0 0 8px; font-size: 17px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; color: #101010; }

/* ---------- heading beside its rows ---------- */
.tr-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: clamp(36px, 6vw, 96px); align-items: start; }
.tr-split .section-head { margin-bottom: 0; }

/* ---------- where it runs: one hairline list ---------- */
.tr-where { margin: 0; padding: 0; list-style: none; border-bottom: 1px solid rgba(13,13,13,0.08);
  display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.3fr) auto; } /* one column grid for all rows (subgrid), so providers and tags line up */
.tr-where li { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: center; gap: 4px 16px; padding: 15px 0;
  border-top: 1px solid rgba(13,13,13,0.08); font-size: 15px; color: #101010; }
.tr-where span:first-child { color: rgba(13,13,13,0.62); }
.tr-where b { font-weight: 600; }
.tr-tag { justify-self: end; padding: 4px 10px; border-radius: 999px; background: rgba(13,13,13,0.07); color: #101010; font-size: 12px; font-weight: 700; white-space: nowrap; }

/* ---------- tablet and phone ---------- */
@media (max-width: 860px) {
  .tr-split { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .tr-roles { grid-template-columns: minmax(0, 1fr); }
  .tr-panel { grid-template-columns: minmax(0, 1fr); padding: 0; }
  .tr-panel > div { padding: 20px 0; border-left: 0; border-top: 1px solid rgba(13,13,13,0.08); }
  /* stacked sections keep one alignment: a centred column, everything inside it left-aligned */
  .container.tr-col { max-width: 628px; }
  .tr-col .section-head, .tr-col .section-head > :is(h2, p) { margin-left: 0; margin-right: 0; text-align: left; }
}
@media (max-width: 560px) {
  .tr-feats { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-auto-flow: row; }
  .tr-feat:nth-child(4) { border-top: 1px solid rgba(13,13,13,0.1); padding-top: 26px; }
  .tr-where li { grid-template-columns: minmax(0, 1fr) auto; }
  .tr-where b { grid-column: 1; grid-row: 2; }
  .tr-where .tr-tag { grid-column: 2; grid-row: 1 / span 2; }
}