/* Impressum and Datenschutz. Loaded after styles.css, which brings the type, the highlighter (.mark), the lists and
   the footer. Since 2026-10-14 they follow the main page: the header on the hero's wall, black type on white, the title
   on the pale blue highlighter, and on the right their machine (the archive, the glass vault) on a sheet of paper. */

body.recht { display: flex; flex-direction: column; min-height: 100vh; background: var(--weiss); color: var(--tinte); }

/* header: the hero's band on the wall */
.recht .kopf { position: relative; height: 64px; padding: 0 var(--gutter); background: var(--wand); }
.recht .kopf .name { font: 700 clamp(17px, 1.6vw, 22px)/1 var(--display); letter-spacing: -.022em; color: var(--tinte); }
.recht .kopf nav a { font: 500 1rem/1 var(--display); letter-spacing: -.01em; color: var(--tinte); }
.recht .kopf nav a:hover { color: var(--blau); }

/* text on the left (7 of 12 columns), the machine sticky on the right */
.recht-haupt { flex: 1; padding: clamp(48px, 7vw, 96px) var(--gutter) clamp(72px, 9vw, 128px); }
.recht-raster { max-width: var(--raster); margin: 0 auto; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 32px; }
.recht-text { grid-column: 1 / span 7; }
.recht-neben { grid-column: 9 / -1; }
.recht-klebend { position: sticky; top: 32px; }

.recht-titel { font-size: clamp(2.5rem, 4.6vw, 3.8rem); font-weight: 800; letter-spacing: -.045em; line-height: 1.05; color: var(--tinte); }
.recht-lead { margin-top: 32px; max-width: 34em; font: 500 clamp(1.2rem, 1.6vw, 1.4rem)/1.5 var(--display); letter-spacing: -.012em; color: var(--tinte); }

.recht-text section { margin-top: 40px; padding-top: 22px; border-top: 1px solid #E1E4EA; }
.recht-titel + section, .recht-titel + .wenn > section:first-child { margin-top: 44px; }
.recht-text h2 { font-size: 1.25rem; font-weight: 700; letter-spacing: -.018em; line-height: 1.3; color: var(--tinte); scroll-margin-top: 32px; }
.recht-text p, .recht-text address, .recht-text .liste { max-width: 40em; color: var(--text-2); }
.recht-text h2 + * { margin-top: 12px; }
.recht-text p + p, .recht-text p + .liste, .recht-text .liste + p, .recht-text address + p, .recht-text p + address { margin-top: 12px; }
.recht-text strong { font-weight: 650; color: var(--tinte); }
.recht-text a { color: var(--linie); text-underline-offset: 4px; text-decoration-thickness: 1.5px; }
.recht-text a:hover { text-decoration-thickness: 2.5px; }
.recht-text address { font-style: normal; font-weight: 600; color: var(--tinte); }
.recht-stand { margin-top: 48px; font-size: .92rem; }

/* a blank that build.js fills from .env: a pale blue box like the blanks of the request form */
.leer { color: var(--tinte); font-weight: 500; background: var(--markiert); padding: 0 .18em .02em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
address .leer { font-weight: 600; }
/* a part that only applies in one case; build.js keeps or removes it and drops this frame */
.wenn { margin-top: 40px; padding: 2px 0 2px 18px; border-left: 2px dashed var(--linie); }
.wenn::before { content: attr(data-hinweis); display: block; margin-bottom: 10px; font: 400 .85rem/1.35 var(--text); color: var(--text-2); }
.wenn > section { margin-top: 0; }
section .wenn { margin-top: 16px; }
section .wenn p { margin-top: 0; }

/* the machine on its sheet: paper, the bento tiles' corners and hairline */
.recht-bild { padding: clamp(16px, 2vw, 28px); background: var(--papier); border: 1px solid rgba(26, 43, 102, .14); border-radius: 8px; }
.recht-bild .fig { --anatomy-paper: var(--papier); max-width: 420px; margin: 0 auto; }

/* contents of the Datenschutz page: the section being read carries the highlighter */
.inhalt { margin-top: 28px; }
.inhalt ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.inhalt a { display: inline-block; padding: 5px 0; font: 500 .95rem/1.25 var(--display); color: var(--text-2); text-decoration: none; }
.inhalt a span { transition: --hl .25s; --hl: transparent; }
.inhalt a:hover { color: var(--tinte); }
.inhalt a[aria-current] { font-weight: 650; color: var(--tinte); }
.inhalt a[aria-current] span { --hl: var(--markiert); }

@media (max-height: 820px) { .recht-bild .fig { max-width: 300px; } .inhalt a { padding: 3px 0; } }
@media (max-width: 1099px) {
  .recht-text { grid-column: 1 / span 8; }
}
@media (max-width: 860px) {
  .recht-raster { grid-template-columns: minmax(0, 1fr); }
  .recht-text, .recht-neben { grid-column: 1; }
  .recht-neben { order: -1; margin-bottom: 28px; }
  .recht-klebend { position: static; }
  .recht-bild .fig { max-width: 260px; }
  .inhalt { display: none; }
}
@media (max-width: 560px) {
  .recht .kopf nav a:not(:last-child) { display: none; }
}