/* Long-form pages. The app stylesheet is scoped to #app, so these need their
   own type and rhythm rather than inheriting a phone layout. */
body{ overflow-y:auto; height:auto; }
.lw{ max-width:760px; margin:0 auto; padding:0 var(--space-5); }

.lnav{ position:sticky; top:0; z-index:20; backdrop-filter:blur(18px) saturate(1.4);
  background:color-mix(in oklab, var(--ground) 82%, transparent); border-bottom:1px solid oklch(0.32 0.018 205 / .55); }
.lnav .lw{ display:flex; align-items:center; justify-content:space-between; height:60px; max-width:1140px; }
.lbrand{ display:flex; align-items:center; gap:var(--space-2); }
.lbrand img{ width:26px; height:26px; border-radius:var(--r-control); }
.lbrand span{ font-family:var(--display); font-size:var(--fs-5); }
.lnav-links{ display:flex; gap:var(--space-5); }
.lnav-links a{ font-size:var(--fs-2); color:var(--ink-mute); font-weight:var(--fw-med); }
.lnav-links a:hover{ color:var(--ink); }

.legal{ padding:var(--space-7) var(--space-5) var(--space-7); }
.legal h1{ font-family:var(--display); font-weight:var(--fw-body);
  font-size:clamp(38px,6vw,58px); line-height:1.05; letter-spacing:-0.02em; margin-bottom:var(--space-2); }
.lupdated{ font-size:var(--fs-2); color:var(--ink-mute); margin-bottom:var(--space-6); }
.llede{ font-size:var(--fs-3); line-height:1.68; color:var(--ink-soft); margin-bottom:var(--space-7);
  padding-bottom:var(--space-6); border-bottom:1px solid var(--line); text-wrap:pretty; }

.legal h2{ font-family:var(--display); font-weight:var(--fw-body);
  font-size:clamp(25px,3.4vw,32px); letter-spacing:-0.015em; margin:var(--space-7) 0 var(--space-4); }
.legal h3{ font-size:var(--fs-3); font-weight:var(--fw-hi); margin:var(--space-5) 0 var(--space-3); color:var(--ink); }
.legal p{ font-size:var(--fs-3); line-height:1.72; color:var(--ink-soft); margin-bottom:var(--space-4); text-wrap:pretty; }
.legal b{ color:var(--ink); font-weight:var(--fw-hi); }
.legal a{ color:var(--accent); text-decoration:underline; text-underline-offset:2px; }

.legal ul{ list-style:none; margin:0 0 var(--space-4); padding:0; }
.legal li{ font-size:var(--fs-3); line-height:1.68; color:var(--ink-soft);
  padding-left:var(--space-5); margin-bottom:var(--space-3); position:relative; }
.legal li::before{ content:""; position:absolute; left:2px; top:11px;
  width:6px; height:6px; border-radius:50%; background:var(--accent); opacity:.75; }

.ltable{ width:100%; border-collapse:collapse; margin:var(--space-2) 0 var(--space-5); font-size:var(--fs-2); }
.ltable th{ text-align:left; font-weight:var(--fw-hi); color:var(--ink); font-size:var(--fs-1);
  letter-spacing:.05em; text-transform:uppercase; padding:0 var(--space-3) var(--space-2) 0;
  border-bottom:1px solid var(--line); }
.ltable td{ padding:var(--space-3) var(--space-3) var(--space-3) 0; color:var(--ink-soft); line-height:1.55;
  border-bottom:1px solid oklch(0.32 0.018 205 / .45); vertical-align:top; }
.ltable td:first-child{ color:var(--ink); font-weight:var(--fw-hi); white-space:nowrap; }

.lfoot{ margin-top:var(--space-7); padding-top:var(--space-5); border-top:1px solid var(--line);
  font-size:var(--fs-2); color:var(--ink-mute); }
.lfoot a{ color:var(--ink-soft); text-decoration:none; }
.lfoot a:hover{ color:var(--ink); }

@media (max-width:620px){
  .legal{ padding:var(--space-6) var(--space-5) var(--space-7); }
  .ltable, .ltable tbody, .ltable tr, .ltable td, .ltable th{ display:block; width:100%; }
  .ltable thead{ display:none; }
  .ltable tr{ padding:var(--space-3) 0; border-bottom:1px solid oklch(0.32 0.018 205 / .45); }
  .ltable td{ border:none; padding:var(--space-1) 0; }
  .ltable td:first-child{ font-size:var(--fs-3); margin-bottom:var(--space-1); }
}

/* the Impressum is mostly addresses, which want space rather than prose rhythm */
.laddr{ font-size:var(--fs-3); line-height:1.9; color:var(--ink); }
.laddr a{ color:var(--accent); }
.lrule{ border:none; border-top:1px solid var(--line); margin:var(--space-7) 0 0; }