/*
  The page of a legal text under the portal's address -- `components/Rechtstext`
  (design system, ruled 13.10.2026, P-41 T8) in the `PatientPage` frame:
  the patient bar (mark and wordmark, right side always empty), one column as
  a card, the document, and below it the frame's footer.

  These pages are static files nginx serves beside the app, without its
  bundle, so the tokens are written out here as the values they resolve to at
  patient density (patient-portal/src/styles/tokens.generated.css,
  2026-10-13). Change a value only together with that file. No script, no
  third-party request, the typeface self-hosted.
*/
@font-face {
  font-family: "Hanken Grotesk";
  src: url("fonts/HankenGrotesk-wght.woff2") format("woff2");
  font-weight: 200 700;
  font-display: swap;
}

:root {
  --font: "Hanken Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --heading: #2A56C8;     /* --heading = --blue-700 */
  --link: #2A56C8;        /* --link = --blue-700 */
  --link-hover: #1B3E9E;  /* --link-hover = --blue-900 */
  --focus: #2A56C8;       /* --focus = --blue-700 */
  --text-body: #0F2438;
  --text-secondary: #3E5060;
  --paper-page: #FCFCFA;
  --paper-white: #FFFFFF;
  --line: #E3E7EB;
  --ink: #14285E;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper-page);
  color: var(--text-body);
  font: 400 18px/1.6 var(--font);
  -webkit-font-smoothing: antialiased;
}

/* 7.1 -- the bar: the mark with its wordmark, nothing on the right. The
   surface spans the window, its content stands in the column's width: from
   748px the side margin is the paper beside the column, so mark, card edge
   and footer share one line (Patientenportal 7.1, ruled 13.10.2026). */
.portal-bar {
  display: flex;
  align-items: center;
  padding: 20px max(20px, calc((100% - 684px) / 2));
  background: var(--paper-page);
  border-bottom: 1px solid var(--line);
}

.portal-mark {
  display: inline-flex;
  align-items: center;
  gap: 13px;
}

.portal-mark svg { display: block; flex: none; }

.portal-mark span {
  font: 700 16px/1 var(--font);
  color: var(--ink);
  letter-spacing: 0.01em;
}

/* 7.2 / 7.6 -- one column as a card: --radius-head 25, padding --space-5 52
   (--space-3 20 under 480px), page edge --space-4 32 (20 under 480px). */
.portal-column {
  width: calc(100% - 40px);
  max-width: 684px;
  margin: 20px auto 0;
  padding: 20px;
  background: var(--paper-white);
  border: 1px solid var(--line);
  border-radius: 25px;
}

/* §3 -- the document from top to bottom. Hyphenation (ruled 13.10.2026,
   Befund 2): the TEXT breaks the title, at the joint of its compound, with a
   soft hyphen in the markup (Datenschutz­erklärung,
   Nutzungs­bedingungen) -- never where the browser would. The text below
   is the browser's, except a proper name and an address (.eigenname,
   .adresse, mailto:), which nobody hyphenates, and a number (tel:), which
   never wraps. break-word is the last safeguard: a word never runs over the
   edge, and the type never shrinks to make it fit. */
.doc {
  overflow-wrap: break-word;
}

.doc h1 {
  margin: 0;
  font: 300 32px/1.2 var(--font);
  color: var(--heading);
  -webkit-hyphens: manual;
  hyphens: manual;
}

.doc .fassung {
  margin: 12px 0 0;
  font: 500 14px/1.4 var(--font);
  color: var(--text-secondary);
}

.doc section { margin-top: 32px; }           /* --gap-block between sections */
.doc section:first-of-type { margin-top: 52px; } /* --gap-section below the head */

.doc h2 {
  margin: 0;
  font: 600 16px/1.4 var(--font);
  color: var(--heading);
  -webkit-hyphens: auto;
  hyphens: auto;
}

.doc p {
  margin: 12px 0 0;   /* --space-2 between paragraphs */
  max-width: 620px;
  -webkit-hyphens: auto;
  hyphens: auto;
}

.doc .eigenname,
.doc .adresse,
.doc a[href^="mailto:"] {
  -webkit-hyphens: manual;
  hyphens: manual;
}

/* An address that does not fit breaks without a hyphen and never gains a
   character (components/Code, „A code to paste"). */
.doc .adresse,
.doc a[href^="mailto:"] {
  overflow-wrap: anywhere;
}

.doc a[href^="tel:"] {
  white-space: nowrap;
}

.doc h2 + p { margin-top: 8px; } /* --space-1 from the heading */

/* Links in the sentence: --link, 1px underline, a 48px tap area through the
   padding, never through a larger type. */
a {
  color: var(--link);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

a:hover { color: var(--link-hover); }

a:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

/* The tap area of a link in the sentence is 48px MEASURED (Rechtstext §3,
   corrected 13.10.2026): padding above and below the word, computed from the
   word's height -- the font's content area, 23.49px at 18/1.6 -- not from the
   line box: (48 - 23.49) / 2 = 12.26px, rounded up. Nothing left and right;
   the line box stays 28.8px. */
.doc p a { padding: 12.26px 0; }

/* The frame's footer (components/PatientPage): --gap-section under the card,
   on paper; under 748px one entry per 48px line and no separator, from 748px
   one row with „·". On this page its own entry is text (Rechtstext §5). */
.legal-footer {
  width: calc(100% - 40px);
  max-width: 684px;
  margin: 52px auto 0;
  padding-bottom: 20px;
}

.legal-footer ul {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

.legal-footer li { display: flex; align-items: center; }

.legal-footer a,
.legal-footer .current {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
}

.legal-footer .current {
  color: var(--text-secondary);
}

.legal-footer .sep {
  display: none;
  color: var(--text-secondary);
}

@media (min-width: 30rem) {
  .portal-bar { padding: 20px max(32px, calc((100% - 684px) / 2)); }

  .portal-column {
    width: calc(100% - 64px);
    margin-top: 32px;
    padding: 52px;
  }

  .legal-footer {
    width: calc(100% - 64px);
    padding-bottom: 32px;
  }
}

@media (min-width: 46.75rem) {
  .legal-footer ul { flex-direction: row; gap: 8px; }
  .legal-footer li { gap: 8px; }
  .legal-footer .sep { display: inline; }
}