/* Layout for the secondary pages: the legal pages (impressum/datenschutz/agb)
   and the 404 page. This used to live as a <style> block inside each of those
   pages, which duplicated it three times and was incompatible with the
   Content-Security-Policy (style-src 'self', no 'unsafe-inline'). */

/* --- Legal pages --- */
.legal {
  max-width:74ch;
  padding:clamp(110px,13vh,150px) 0 clamp(60px,8vw,110px);
}
.legal h1 {
  font-size:clamp(32px,4vw,46px);
  letter-spacing:-.03em;
  margin-bottom:8px;
}
.legal .sub {
  color:var(--ink-3);
  margin-bottom:clamp(32px,4vw,48px);
}
.legal h2 {
  font-size:19px;
  font-weight:600;
  margin:clamp(28px,3vw,40px) 0 10px;
  /* Lange Komposita ("Verbraucherstreitbeilegung/…") sprengen sonst auf
     schmalen Viewports die Seitenbreite. */
  overflow-wrap:anywhere;
  hyphens:auto;
}
.legal h3 {
  font-size:16.5px;
  font-weight:600;
  margin:22px 0 8px;
}
.legal p {
  color:var(--ink-2);
  line-height:1.65;
  margin-bottom:12px;
  text-wrap:pretty;
}
.legal ul {
  color:var(--ink-2);
  line-height:1.65;
  margin:0 0 12px 20px;
}
.legal li {
  margin-bottom:4px;
}
.legal address {
  font-style:normal;
  color:var(--ink-2);
  line-height:1.65;
  margin-bottom:12px;
}
.legal a {
  color:var(--ink-2);
  text-decoration:underline;
  text-underline-offset:3px;
}
.legal a:hover {
  color:var(--blue);
}
.legal .back {
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-bottom:26px;
  font-size:14.5px;
  color:var(--ink-3);
  text-decoration:none;
}
.legal .back:hover {
  color:var(--blue);
}

/* Hinweisbox, aktuell nur auf datenschutz.html */
.legal .note {
  padding:18px 20px;
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  background:var(--surface-2);
  font-size:14.5px;
  color:var(--ink-3);
  margin-bottom:clamp(28px,3vw,40px);
}

/* Stand-Datum, aktuell nur auf agb.html */
.legal .date {
  margin-top:clamp(32px,4vw,48px);
  padding-top:20px;
  border-top:1px solid var(--line);
  color:var(--ink-3);
  font-size:14.5px;
}

/* --- 404 page --- */
.e404 {
  min-height:100svh;
  display:grid;
  place-items:center;
  text-align:center;
  padding:40px 24px;
}
.e404 .in {
  max-width:44ch;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:20px;
}
.e404 .brand {
  display:block;
  margin-bottom:12px;
}
.e404 img {
  height:26px;
  width:auto;
  display:block;
}
.e404 .code {
  font-size:13px;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ink-3);
}
.e404 p {
  color:var(--ink-3);
  font-size:17px;
  line-height:1.6;
}