/* Страницы Impressum / Datenschutz: общий файл для всех сайтов (без inline-стилей — CSP).
   Палитра по умолчанию нейтральная; body.site-qruemel — фирменные цвета Qrümel. */
:root {
  --ink:#1b1f24; --ink-2:#3b4149; --muted:#6b7280; --line:#e4e6ea; --line-2:#d6d9de;
  --bg:#f6f6f4; --surface:#ffffff; --accent:#0f766e; --accent-ink:#ffffff; --accent-soft:rgba(15,118,110,.10);
  --radius:16px; --font:system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
body.site-qruemel {
  --ink:#0E0F11; --ink-2:#2b2d31; --muted:#6f7277; --line:#DCD9D0; --line-2:#cfccc3;
  --bg:#F4F3EF; --surface:#ffffff; --accent:#FF6A2B; --accent-ink:#0E0F11; --accent-soft:rgba(255,106,43,.12);
}
@media (prefers-color-scheme: dark) {
  :root { --ink:#e8eaed; --ink-2:#c6cad0; --muted:#9aa3ad; --line:#2b3138; --line-2:#3a414a;
          --bg:#121417; --surface:#1a1d21; --accent:#5ec4b6; --accent-ink:#0f1a19; --accent-soft:rgba(94,196,182,.14); }
  body.site-qruemel { --ink:#F4F3EF; --ink-2:#d9d7cf; --muted:#9a9c9f; --line:#2a2c30; --line-2:#3a3d42;
          --bg:#0E0F11; --surface:#17181b; --accent:#FF6A2B; --accent-ink:#0E0F11; --accent-soft:rgba(255,106,43,.16); }
}

* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--bg); color:var(--ink); font:16px/1.65 var(--font); -webkit-font-smoothing:antialiased; }
a { color:var(--accent); text-decoration:none; }
a:hover { text-decoration:underline; }
.wrap { max-width:1040px; margin:0 auto; padding:0 20px; }

/* Шапка */
.hdr { background:var(--surface); border-bottom:1px solid var(--line); }
.hdr .wrap { display:flex; align-items:center; justify-content:space-between; gap:16px; height:60px; }
.brand { display:inline-flex; align-items:center; gap:10px; color:var(--ink); font-weight:700; font-size:17px; letter-spacing:-.2px; }
.brand:hover { text-decoration:none; }
.brand__dot { width:12px; height:12px; border-radius:3px; background:var(--accent); }
.hdr__nav { display:flex; align-items:center; gap:14px; font-size:14px; color:var(--muted); }
.hdr__nav a { color:var(--ink-2); }
.hdr__nav .sep { width:1px; height:18px; background:var(--line-2); }
.hdr__nav .lang { display:flex; gap:2px; font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size:11px; letter-spacing:.04em; }
.hdr__nav .lang a, .hdr__nav .lang span { padding:4px 6px; border-radius:6px; color:var(--muted); }
.hdr__nav .lang a:hover { color:var(--ink); text-decoration:none; background:var(--accent-soft); }
.hdr__nav .lang span[aria-current="true"] { color:var(--accent-ink); background:var(--accent); }

/* Заголовок документа */
.hero { padding:44px 0 28px; }
.eyebrow { margin:0 0 8px; font-size:12px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); }
.hero h1 { margin:0 0 10px; font-size:clamp(28px, 4.2vw, 40px); line-height:1.15; letter-spacing:-.5px; }
.meta { margin:0; color:var(--muted); font-size:14px; display:flex; flex-wrap:wrap; gap:6px 14px; }
.meta span::before { content:"·"; margin-right:14px; color:var(--line-2); }
.meta span:first-child::before { content:none; margin:0; }
.note { margin:18px 0 0; padding:12px 16px; border-radius:12px; background:var(--accent-soft); border:1px solid transparent; font-size:14px; color:var(--ink-2); max-width:720px; }

/* Оглавление + текст */
.layout { display:grid; grid-template-columns:240px minmax(0,1fr); gap:32px; align-items:start; padding-bottom:64px; }
.toc { position:sticky; top:24px; padding:18px 18px 12px; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); }
.toc__title { margin:0 0 8px; font-size:12px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.toc ol { margin:0; padding:0; list-style:none; counter-reset:toc; }
.toc li { counter-increment:toc; }
.toc a { display:flex; gap:10px; padding:6px 0; font-size:14px; color:var(--ink-2); border-top:1px solid var(--line); line-height:1.4; }
.toc li:first-child a { border-top:0; }
.toc a::before { content:counter(toc, decimal-leading-zero); color:var(--accent); font-variant-numeric:tabular-nums; font-weight:600; flex:0 0 24px; }
.toc a:hover { color:var(--ink); text-decoration:none; }

.doc { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:12px 40px 28px; counter-reset:sec; }
.doc section { padding:26px 0 8px; border-top:1px solid var(--line); scroll-margin-top:24px; counter-increment:sec; }
.doc section:first-child { border-top:0; }
.doc h2 { margin:0 0 12px; font-size:20px; line-height:1.3; letter-spacing:-.2px; display:flex; gap:12px; align-items:baseline; }
.doc h2::before { content:counter(sec, decimal-leading-zero); color:var(--accent); font-size:13px; font-weight:700; font-variant-numeric:tabular-nums; }
.doc p, .doc li { overflow-wrap:anywhere; color:var(--ink-2); }
.doc p { margin:0 0 12px; }
.doc strong { color:var(--ink); }
.doc ul { padding-left:20px; margin:0 0 12px; }
.doc li { margin:4px 0; }
.doc li::marker { color:var(--accent); }

.stand { margin:0; padding:22px 0 0; display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px 16px; color:var(--muted); font-size:14px; }
.btn { display:inline-flex; align-items:center; gap:8px; padding:9px 16px; border-radius:10px; background:var(--accent); color:var(--accent-ink); font-weight:600; font-size:14px; }
.btn:hover { text-decoration:none; filter:brightness(.95); }

/* Подвал */
.ftr { border-top:1px solid var(--line); padding:22px 0 36px; color:var(--muted); font-size:13px; }
.ftr .wrap { display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px 16px; }
.ftr a { color:var(--muted); }

@media (max-width: 880px) {
  .layout { grid-template-columns:1fr; gap:20px; }
  .toc { position:static; }
  .doc { padding:8px 22px 20px; }
  .hero { padding:32px 0 20px; }
}
@media (max-width: 520px) {
  .hdr .wrap { height:auto; padding-top:12px; padding-bottom:12px; flex-wrap:wrap; }
  /* три документа у qruemel.de: ссылки целиком, с переносом по строкам, а не узкими колонками */
  .hdr__nav { font-size:13px; gap:6px 12px; flex-wrap:wrap; }
  .hdr__nav a { white-space:nowrap; }
  .doc { padding:4px 16px 16px; }
  .doc h2 { font-size:18px; }
}