/* Datenschutz, Support, Impressum: a white card on the pastel background, same type as the landing page. */
body.legal { min-height: 100vh; background: linear-gradient(to bottom, #f8f3ff, var(--bg) 600px); }
html[data-lang="de"] .l-en, html[data-lang="en"] .l-de { display: none; }

.legal-top {
  display: flex; align-items: center; gap: 12px;
  max-width: 46rem; margin: 0 auto;
  padding: max(14px, env(safe-area-inset-top)) 16px 0;
}
.legal-top .home { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.legal-top .home img { width: 44px; height: 44px; border-radius: 12px; box-shadow: 0 3px 0 rgba(90, 60, 160, .2); }
.legal-top .home span { font: 800 1.4rem/1 var(--display); color: var(--ink); }
.legal-top nav { margin-left: auto; display: flex; gap: 6px; align-items: center; }
.legal-top nav a { font-weight: 600; font-size: .9rem; text-decoration: none; color: #5d527c; padding: 6px 10px; border-radius: 999px; }
.legal-top nav a[aria-current="page"] { color: var(--ink); background: rgba(255, 255, 255, .8); }
@media (max-width: 420px) { .legal-top .home span { display: none; } }

.paper {
  max-width: 46rem; margin: 22px auto 0;
  background: #fff; color: var(--ink);
  border: 2px solid var(--card-edge); border-radius: 28px;
  box-shadow: 0 6px 0 var(--card-edge), var(--shadow);
  padding: clamp(24px, 5vw, 48px) clamp(20px, 5vw, 52px) clamp(28px, 5vw, 52px);
  line-height: 1.6;
}
@media (max-width: 760px) { .paper { margin-left: 12px; margin-right: 12px; } }
.paper h1 { font-size: clamp(2.1rem, 6vw, 2.8rem); line-height: 1.05; margin: 0; }
.paper .stand { color: var(--muted); font-size: .95rem; margin: .4rem 0 0; }
.paper .summary { margin: 1.4rem 0 0; padding: 14px 18px; border-radius: 16px; background: linear-gradient(120deg, #fff4fa, #f3edff); font-weight: 500; }
.paper h2 { font-size: 1.45rem; margin: 2.2rem 0 .4rem; max-width: none; }
.paper p, .paper ul { margin: .55rem 0 0; max-width: 64ch; color: #4f4370; }
.paper ul { padding-left: 1.2rem; }
.paper li { margin-top: .35rem; }
.paper a { color: var(--purple-dark); text-decoration-thickness: 2px; text-underline-offset: 2px; }
.paper strong { font-weight: 700; color: var(--ink); }

/* support: one capsule per question */
.faq { display: grid; gap: 4px; margin-top: 1.6rem; }
.faq details { border-bottom: 2px solid var(--card-edge); padding: 10px 0; }
.faq summary {
  display: grid; grid-template-columns: 48px 1fr auto; gap: 14px; align-items: center;
  cursor: pointer; list-style: none; font: 800 1.15rem/1.2 var(--display); color: var(--ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary img { width: 48px; height: 48px; object-fit: contain; }
.faq summary::after { content: "+"; font-size: 1.6rem; color: var(--pink); transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details > p, .faq details > ul { margin-left: 62px; }
@media (max-width: 520px) { .faq details > p, .faq details > ul { margin-left: 0; } }

.contact {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: center;
  margin-top: 2rem; padding: 18px; border-radius: 18px; background: var(--ink); color: #fff;
}
.contact img { width: 56px; height: 56px; object-fit: contain; }
.contact p { margin: 0; flex: 1 1 16rem; color: rgba(255, 255, 255, .85); max-width: none; }
.contact a.mail {
  background: var(--yellow); color: #4a3a00; text-decoration: none;
  border-radius: 14px; padding: 10px 18px; font: 800 1.1rem/1 var(--display);
  box-shadow: 0 4px 0 var(--yellow-dark);
}

.legal-foot { text-align: center; color: var(--muted); font-size: .9rem; padding: 34px 16px max(34px, env(safe-area-inset-bottom)); }
.legal-foot a { color: inherit; }
@media (prefers-reduced-motion: reduce) { .faq summary::after { transition: none; } }