/* ════════════════════════════════════════════════════════════════════════
   Legal pages — Impressum and Datenschutzerklärung.
   Long-form reading pages in the site's design language. Tokens, the button
   and the language switch are in site.css; mobile rules are in mobile.css.

   These carry their own `lg-` chrome rather than reusing one of the three
   prototype pages' pills, because each of those was drawn separately in the
   design project and its classes are named for its own page. If the chrome is
   ever unified, this is the file that should disappear into site.css.
   ════════════════════════════════════════════════════════════════════════ */
.lg,.lg *{box-sizing:border-box}
/* svh, not vh: see the note in home.css — this one only pushes the footer
   to the bottom on a short page, but 100vh would make every page taller
   than the screen on iOS. */
.lg{min-height:100vh;min-height:100svh;background:var(--surface-page);font-family:var(--font-sans),system-ui,sans-serif;color:var(--text-primary);display:flex;flex-direction:column;transition:background .45s var(--ease-out);overflow-x:clip}
.lg a{text-decoration:none;color:inherit}
.lg-wrap{max-width:820px;margin:0 auto;padding:0 clamp(24px,5vw,60px);width:100%;position:relative}
/* the reading column is narrower than the rest of the site on purpose; the
   footer is not part of the reading column and keeps the site's own measure */
.lg-wrap--wide{max-width:1100px}

/* nav */

/* head */
/* padding-block only: the shorthand would reset .lg-wrap's horizontal gutter
   to 0 and put the heading flush against the edge of a phone screen. */
.lg-head{padding-top:clamp(56px,9vw,104px);padding-bottom:clamp(28px,4vw,44px)}
.lg-ey{display:inline-flex;align-items:center;gap:9px;font:var(--fw-semibold) 12px/1 var(--font-sans);letter-spacing:.08em;text-transform:uppercase;color:var(--text-secondary)}
.lg-ey::before{content:"";width:22px;height:1.5px;background:var(--brand-500)}
.lg-h1{font:var(--fw-heavy) clamp(40px,6vw,72px)/0.98 var(--font-display);letter-spacing:-0.045em;margin:20px 0 0;text-wrap:balance}
/* the site's signature accent — Playfair italic in the brand blue, the same
   motif every other page pairs with its display heading */
.lg-ital{display:block;font-family:var(--font-serif);font-style:italic;font-weight:var(--fw-regular);
  font-size:clamp(26px,3.6vw,42px);line-height:1.14;letter-spacing:0;color:var(--brand-500);margin-top:6px}
.lg-sub{font:var(--text-body-lg);color:var(--text-secondary);margin:24px 0 0;max-width:60ch;line-height:1.62}
/* the same soft bloom the home and about heroes carry */
.lg-blob{position:absolute;border-radius:50%;filter:blur(60px);pointer-events:none;z-index:0;
  width:min(460px,90%);aspect-ratio:1;background:var(--gradient-bloom);opacity:.55;right:0;top:-40px}
.mk-dark .lg-blob{background:radial-gradient(circle,rgba(79,116,255,.14),transparent 72%)!important;opacity:1!important;filter:blur(46px)}
.lg-head>*:not(.lg-blob){position:relative;z-index:2}
.lg-updated{font:var(--fw-regular) 12px/1 var(--font-mono);letter-spacing:.06em;color:var(--text-muted);margin-top:22px}

/* body */
.lg-body{padding-bottom:clamp(64px,9vw,110px)}
.lg-body section{padding-top:clamp(34px,5vw,52px)}
.lg-body h2{font:var(--fw-heavy) clamp(23px,2.7vw,32px)/1.18 var(--font-display);letter-spacing:-0.03em;color:var(--text-primary);margin:0 0 16px;scroll-margin-top:104px}
.lg-num{color:var(--brand-300);margin-right:2px}
.mk-dark .lg-num{color:rgba(79,116,255,.6)}
.lg-body h3{font:var(--fw-bold) 17px/1.35 var(--font-display);letter-spacing:-0.01em;color:var(--text-primary);margin:26px 0 8px}
.lg-body p{font:var(--text-body);color:var(--text-secondary);line-height:1.7;margin:0 0 14px;max-width:70ch}
.lg-body ul{margin:0 0 14px;padding-left:20px;max-width:70ch}
.lg-body li{font:var(--text-body);color:var(--text-secondary);line-height:1.7;margin-bottom:8px}
.lg-body a:not(.mk-btn){color:var(--text-accent);border-bottom:1px solid color-mix(in srgb,var(--text-accent) 40%,transparent)}
.lg-body a:not(.mk-btn):hover{color:var(--accent-hover);border-bottom-color:currentColor}
.lg-body strong{color:var(--text-primary);font-weight:var(--fw-semibold)}

/* a definition block — the identity rows in the Impressum, the data rows in
   the privacy notice */
.lg-defs{display:grid;grid-template-columns:minmax(140px,26%) 1fr;gap:10px 24px;margin:0 0 18px;max-width:70ch}
.lg-defs dt{font:var(--fw-regular) 12px/1.7 var(--font-mono);letter-spacing:.05em;text-transform:uppercase;color:var(--brand-500)}
.lg-defs dd{font:var(--text-body);color:var(--text-primary);margin:0;line-height:1.6}

/* a card for one processing purpose */
.lg-card{background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-2xl);
  padding:clamp(22px,2.6vw,32px);margin:0 0 16px;max-width:70ch;box-shadow:var(--shadow-sm);
  transition:border-color .3s var(--ease-out),box-shadow .3s var(--ease-out)}
.lg-card:hover{border-color:var(--brand-500);box-shadow:var(--shadow-md)}
.lg-card h3{font:var(--fw-bold) clamp(17px,1.7vw,20px)/1.3 var(--font-display);letter-spacing:-0.015em}
.lg-card h3{margin-top:0}
.lg-card p:last-child{margin-bottom:0}

/* footer */