/*
 * PPM Document Kit — reusable stylesheet for displaying formal/legal
 * documents (AGB, Datenschutzerklärung, policies, ...) on ppmhpm.com in
 * the same "A4 sheet" look used for Obsidian-exported PPM documents.
 *
 * Ported from the embedded <style> of the Obsidian AGB export
 * (26-08-31-Allgemeine_Geschäftsbedingungen_PPM.html). Differences from
 * that export, and why:
 *
 *   - No bare `*`, `html`, `body` selectors. The Obsidian export is a
 *     standalone page and resets the whole document; on ppmhpm.com this
 *     file loads alongside assets/css/main.css (Dimension theme), so
 *     every rule is scoped under .doc-page / .doc to avoid clobbering
 *     the rest of the site.
 *   - Fonts reference the site's already self-hosted "Exo 2" and
 *     "Source Sans 3" (assets/css/fonts.css / assets/webfonts) instead
 *     of Google Fonts. No external font host is whitelisted in the
 *     site's CSP, so this avoids needing a CSP change at all.
 *   - Obsidian-only parts were dropped: callout/lucide-icon rules,
 *     mermaid, .markdown-preview-view table styles, the .sheet/.letter-*
 *     business-letter layout. Add them back only if a future document
 *     actually needs them.
 *   - Added a small-viewport breakpoint (the fixed 794px "sheet" width
 *     doesn't fit phones) — see "Responsive" section at the bottom.
 *   - All colours/sizes are still driven by CSS custom properties, so a
 *     future rebrand only touches the :root block below.
 */

.doc-page {
  --ppm-blue:        #003E75;
  --ppm-blue-bright: #008BD0;
  --ppm-grey:        #667880;
  --ppm-slate:       #243E49;

  --accent-red:      #E64455;
  --accent-orange:   #F08A00;
  --accent-lime:     #A3BA00;
  --accent-blue:     #009AB1;
  --black-100:       #000000;

  --neutral-0:       #FFFFFF;
  --neutral-25:      #F7F9FA;
  --neutral-100:     #E3E7E9;
  --border-1:        #DDE3E6;
  --border-2:        #CFD6D9;

  --color-primary-text: var(--ppm-slate);
  --color-muted-text:   #667880;
  --color-on-dark:      var(--neutral-0);
  --color-page:         var(--neutral-100);
  --color-surface:      var(--neutral-0);

  --color-tlp-clear: var(--black-100);
  --color-tlp-green: var(--accent-lime);
  --color-tlp-amber: var(--accent-orange);
  --color-tlp-blue:  var(--accent-blue);
  --color-tlp-red:   var(--accent-red);

  --color-tlp-fg-clear: #000000;
  --color-tlp-fg-green: #6aa83a;
  --color-tlp-fg-amber: #c97a1a;
  --color-tlp-fg-blue:  #1f3a5f;
  --color-tlp-fg-red:   #b1303a;

  --color-shadow-rgb: 36, 62, 73;

  --doc-font-sans: "Source Sans 3", "Source Sans Pro", -apple-system, "Segoe UI", sans-serif;
  --doc-font-mark: "Exo 2", var(--doc-font-sans);
  --doc-w-medium: 500;
  --doc-w-bold:   700;
  --doc-fg-1: #1c1f22;
  --doc-fg-2: #3d434a;
  --doc-fg-3: #6b727b;

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  background: var(--color-page);
  padding: 32px 16px;
  box-sizing: border-box;
}
.doc-page * { box-sizing: border-box; }

/* ---------- A4 sheet ---------------------------------------------------- */
.doc {
  width: 794px;
  max-width: 100%;
  min-height: 1123px;
  background: var(--color-surface);
  box-shadow: 0 2px 4px rgba(var(--color-shadow-rgb), 0.06), 0 18px 36px rgba(var(--color-shadow-rgb), 0.10);
  position: relative;
  font-family: var(--doc-font-sans);
  font-weight: var(--doc-w-medium);
  color: var(--doc-fg-1);
  font-size: 11pt;
  line-height: 1.45;
  display: flex;
  flex-direction: column;
}

/* ---------- Classification bar (TLP) ------------------------------------ */
.doc-class-bar {
  background: var(--cls-bar, var(--ppm-slate));
  color: var(--cls-on, var(--neutral-0));
  font-size: 10px;
  letter-spacing: 0.16em;
  font-variant-caps: all-small-caps;
  padding: 6px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 700;
}
.doc-class-bar .class-tlp { opacity: 0.85; letter-spacing: 0.12em; font-weight: 600; }

.doc--unclassified, .doc--clear { --cls-bar: var(--color-tlp-clear); --cls-on: var(--color-on-dark); }
.doc--green  { --cls-bar: var(--color-tlp-green); --cls-on: var(--color-on-dark); }
.doc--amber  { --cls-bar: var(--color-tlp-amber); --cls-on: var(--color-on-dark); }
.doc--blue   { --cls-bar: var(--color-tlp-blue);  --cls-on: var(--color-on-dark); }
.doc--red    { --cls-bar: var(--color-tlp-red);   --cls-on: var(--color-on-dark); }

/* ---------- TLP text / badge classes (reused project-wide) -------------- */
.tlp-red   { color: var(--color-tlp-fg-red);   font-weight: bold; }
.tlp-amber { color: var(--color-tlp-fg-amber); font-weight: bold; }
.tlp-blue  { color: var(--color-tlp-fg-blue);  font-weight: bold; }
.tlp-green { color: var(--color-tlp-fg-green); font-weight: bold; }
.tlp-clear { color: var(--color-tlp-fg-clear); font-weight: bold; }

.tlp-red-bg   { background-color: var(--accent-red);    color: var(--neutral-0); font-weight: bold; }
.tlp-amber-bg { background-color: var(--accent-orange); color: var(--neutral-0); font-weight: bold; }
.tlp-blue-bg  { background-color: var(--accent-blue);   color: var(--neutral-0); font-weight: bold; }
.tlp-green-bg { background-color: var(--accent-lime);   color: var(--neutral-0); font-weight: bold; }
.tlp-clear-bg { background-color: var(--black-100);     color: var(--neutral-0); font-weight: bold; }

/* ---------- Doc head (title + PPM wordmark, drawn in CSS, no image) ----- */
.doc-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 30px 36px 18px;
  border-bottom: 1px solid var(--border-1);
  gap: 32px;
  flex-wrap: wrap;
}
.doc-head .head-meta { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1 1 260px; }
.doc-head .head-meta .eyebrow {
  font-size: 8.5pt;
  letter-spacing: 0.18em;
  font-variant-caps: all-small-caps;
  color: var(--ppm-grey);
  font-weight: 700;
}
.doc-head .head-meta h1 {
  font-family: var(--doc-font-sans);
  font-size: 22pt;
  font-weight: 700;
  line-height: 1.15;
  margin: 4px 0 6px;
  color: var(--ppm-blue);
  letter-spacing: -0.005em;
}
.doc-head .head-meta .subtitle { font-size: 11pt; color: var(--doc-fg-2); font-weight: 500; }

.doc-head .head-mark {
  display: inline-flex;
  align-items: center;
  font-family: var(--doc-font-mark);
  font-weight: 600;
  color: var(--ppm-blue);
  font-size: 56pt;
  line-height: 1;
  flex-shrink: 0;
}
.doc-head .head-mark .wordmark { font-size: 1em; line-height: 1; letter-spacing: 0.01em; }
.doc-head .head-mark .bar {
  display: inline-block;
  flex-shrink: 0;
  width: 0.054em;
  height: 0.696em;
  background: var(--ppm-grey);
  margin: 0 0.143em 0 0.161em;
  transform: translateY(-0.048em);
}
.doc-head .head-mark .tag {
  font-size: 0.223em;
  line-height: 1.05;
  color: var(--ppm-grey);
  font-weight: 600;
  transform: translateY(-0.037em);
}

/* ---------- Doc body ------------------------------------------------- */
.doc-body { flex: 1; padding: 24px 36px; }
.doc-body h1, .doc-body h2 {
  font-family: var(--doc-font-sans);
  font-size: 13pt;
  font-weight: 700;
  color: var(--ppm-blue);
  margin: 24px 0 8px;
}
.doc-body h1:first-child, .doc-body h2:first-child { margin-top: 0; }
.doc-body h3 { font-size: 11.5pt; font-weight: 700; color: var(--doc-fg-1); margin: 18px 0 6px; }
.doc-body h4 { font-size: 10.5pt; font-weight: 700; color: var(--doc-fg-2); margin: 14px 0 4px; }
.doc-body p, .doc-body ul, .doc-body ol { margin: 0 0 10px; line-height: 1.55; }
.doc-body li { margin-bottom: 4px; }
.doc-body a { color: var(--ppm-blue-bright); }
.doc-body code {
  font-family: "Source Code Pro", "Consolas", monospace;
  font-size: 0.92em;
  background: var(--neutral-25);
  border: 1px solid var(--border-1);
  border-radius: 3px;
  padding: 0.05em 0.35em;
}

.doc-body table {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
  font-size: 10pt;
}
.doc-body th, .doc-body td {
  padding: 8px 12px;
  border-bottom: 1px solid var(--border-1);
  text-align: left;
  vertical-align: top;
  line-height: 1.4;
}
.doc-body th {
  font-weight: 600;
  color: var(--ppm-blue);
  background: var(--neutral-25);
  border-bottom: 2px solid var(--border-2);
}
.wide-table { width: 100%; overflow-x: auto; display: block; margin: 20px 0; }
.doc-body hr { border: none; border-top: 1px solid var(--border-1); margin: 28px 0; }

.rev-history { margin: 0 0 20px; border-collapse: collapse; width: 100%; font-size: 9.5pt; }
.rev-history th, .rev-history td {
  padding: 5px 10px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--border-1);
  font-variant-numeric: tabular-nums;
}
.rev-history th {
  font-weight: 600;
  color: var(--ppm-blue);
  letter-spacing: 0.04em;
  font-variant-caps: all-small-caps;
  font-size: 8.5pt;
  background: var(--neutral-25);
  border-bottom: 1px solid var(--border-2);
}
.rev-history td.desc { color: var(--doc-fg-2); }

/* ---------- Doc foot — ISO 7200-style title block ----------------------- */
.doc-foot {
  border-top: 2px solid var(--cls-bar, var(--ppm-slate));
  margin-top: 24px;
  font-size: 9pt;
  font-weight: 300;
  color: var(--doc-fg-2);
  background: var(--neutral-25);
}
.doc-foot .grid { display: grid; grid-template-columns: max-content 1fr max-content 1fr; border-bottom: 1px solid var(--border-1); }
.doc-foot .cell { padding: 7px 14px; border-right: 1px solid var(--border-1); display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.doc-foot .cell--span2 { grid-column: span 2; }
.doc-foot .cell:nth-child(4n) { border-right: 0; }
.doc-foot .row + .row .cell { border-top: 1px solid var(--border-1); }
.doc-foot .row { display: contents; }
.doc-foot dt { font-size: 7.5pt; letter-spacing: 0.10em; font-variant-caps: all-small-caps; color: var(--ppm-grey); font-weight: 600; }
.doc-foot dd { margin: 0; font-size: 9.5pt; font-weight: 500; color: var(--doc-fg-1); font-variant-numeric: tabular-nums; }
.doc-foot .cell--label dd { color: var(--ppm-blue); font-weight: 600; }
.doc-foot .cell--cls { background: var(--cls-bar, var(--ppm-slate)); }
.doc-foot .cell--cls dt, .doc-foot .cell--cls dd { color: var(--cls-on, var(--neutral-0)); }

.doc-foot .ip-notice { padding: 10px 14px 4px; font-size: 7.5pt; line-height: 1.45; color: var(--doc-fg-3); font-weight: 300; border-bottom: 1px solid var(--border-1); }
.doc-foot .owner { padding: 8px 14px; font-size: 8.5pt; color: var(--doc-fg-3); font-weight: 300; }
.doc-foot .owner .legal { color: var(--ppm-blue); font-weight: 600; font-size: 9pt; }

/* ---------- Optional metadata card (internal drafts only — leave off ---- */
/* public-facing documents such as the Datenschutzerklärung).              */
.doc-meta-card {
  background-color: var(--neutral-25);
  border: 1px solid var(--neutral-100);
  border-radius: 6px;
  padding: 16px 24px;
  margin-top: 40px;
}
.doc-meta-card h2 {
  margin-top: 0;
  color: var(--ppm-slate);
  border-bottom: 1px solid var(--neutral-100);
  padding-bottom: 8px;
  font-size: 1.4em;
  font-weight: 600;
}
.doc-meta-card ul {
  list-style: none;
  padding-left: 0;
  margin: 0;
  font-size: 0.9em;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 8px 16px;
  color: var(--ppm-grey);
  line-height: 1.4;
}

/* ---------- Footnotes ---------------------------------------------------- */
.doc-body .footnote { border-top: 1px solid var(--border-1); margin-top: 40px; padding-top: 20px; font-size: 9.5pt; color: var(--color-muted-text); }
.doc-body .footnote hr { display: none; }
.doc-body .footnote ol { margin: 0; padding-left: 20px; }
.doc-body .footnote li { margin-bottom: 8px; }
.doc-body .footnote-backref, .doc-body .footnote-ref { color: var(--ppm-blue-bright); text-decoration: none; }
.doc-body .footnote-ref { font-weight: bold; font-size: 85%; margin-left: 2px; }

.doc-body .page-break, .doc-body .pagebreak { display: block; height: 0; margin: 0; border: none; }

/* ---------- Back-to-site / language-switch link below the sheet --------- */
.doc-page-links {
  width: 794px;
  max-width: 100%;
  margin-top: 24px;
  font-family: var(--doc-font-sans);
  font-size: 10pt;
  color: var(--doc-fg-2);
  text-align: center;
}
.doc-page-links a { color: var(--ppm-blue-bright); }

/* ---------- Responsive (phones / narrow viewports) ----------------------- */
@media (max-width: 860px) {
  .doc-page { padding: 16px 0; gap: 12px; }
  .doc { min-height: 0; }
  .doc-head { padding: 20px 20px 14px; }
  .doc-head .head-mark { font-size: 34pt; }
  .doc-head .head-meta h1 { font-size: 16pt; }
  .doc-body { padding: 18px 20px; }
  .doc-foot .grid { grid-template-columns: 1fr 1fr; }
  .doc-foot .cell:nth-child(4n) { border-right: 1px solid var(--border-1); }
  .doc-foot .cell:nth-child(2n) { border-right: 0; }
}

/* ---------- Print --------------------------------------------------------- */
@media print {
  .doc-page * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
  .doc-page { background: #ffffff !important; padding: 0 !important; }
  .doc { box-shadow: none !important; margin: 0 !important; border: none !important; width: 100% !important; max-width: 100% !important; position: static !important; }
  .doc-body { padding: 0 36px 36px !important; }
  .doc-body tr, .doc-body img, .doc-body table { page-break-inside: avoid !important; break-inside: avoid !important; }
  .doc-body h1, .doc-body h2, .doc-body h3, .doc-body h4 { page-break-after: avoid !important; break-after: avoid !important; }
  .doc-body .page-break, .doc-body .pagebreak { page-break-before: always !important; break-before: page !important; }
  .doc-body thead { display: table-header-group !important; }
}