/* ─────────────────────────────────────────────────────────
   Blue Terra — the Imprint page

   Five short sections, so no contents list is needed: one narrow
   reading column, the company details set off in tinted boxes.
   Colours and typefaces come from styles.css.
   ───────────────────────────────────────────────────────── */

.imprint-page main { padding-top: var(--header-h); background: var(--cream); }

/* ── Title band ─────────────────────────────────────────── */
.im-head {
  max-width: var(--wrap-content);
  padding-top: clamp(28px, 5vw, 52px);
  padding-bottom: clamp(18px, 3vw, 28px);
}
.im-crumbs {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: .85rem; color: var(--muted); margin-bottom: 1rem;
}
.im-crumbs a { color: inherit; text-decoration: none; }
.im-crumbs a:hover { color: var(--navy); text-decoration: underline; }

.im-head h1 { margin-bottom: 0; }

/* ── The document ───────────────────────────────────────── */
.im-layout {
  max-width: var(--wrap-content);
  padding-bottom: clamp(48px, 7vw, 88px);
}
.im-body {
  max-width: 820px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: clamp(22px, 4vw, 46px);
  /* Words like "Telemediengesetz" are wider than a phone column. */
  overflow-wrap: break-word;
}
.im-body p { margin: 0 0 1rem; font-size: .95rem; line-height: 1.75; }
.im-body p:last-child { margin-bottom: 0; }
.im-body a { color: var(--navy); }

.im-section + .im-section { margin-top: clamp(28px, 4vw, 40px); }
.im-section-title {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(19px, 2.2vw, 24px); line-height: 1.3;
  color: var(--navy-dark); margin-bottom: 1rem;
}

/* The company details — the part people actually come here to find. */
.im-address {
  background: var(--stone-bg); border-radius: var(--radius-sm);
  padding: 16px 20px; line-height: 1.9;
}