/* ============================================================================
   SPECHT LEGAL-UI Foundation v2.7 — Single Source of Truth (правовой слой)
   Extracted: 2026-08-10 from cc-jr/legal-layer/02_new_screens.html v.31
                                cc-jr/legal-layer/03_embed_screens.html v.43
   v2.0 (2026-08-10): полная переделка после owner-check «проверил на соответствие
                      макетам?» — v1.0 (изв. sandbox b2e61f80 · RETRACT'нута)
                      не совпадала с canon мокапами: бинарь-classы, primitive-обёртки,
                      имена модификаторов другие, компонент не хватает. v2.0 — canon 1:1.
   v2.1 (2026-08-11): .acc-delete.disabled + [aria-disabled=true] селектор
                      (К-25 hotfix1 disabled canon для div role=button).
   v2.2 (2026-08-11): .e7-strip position:fixed + --e7-strip-height token
                      (К-25 hotfix2 плеер +47px offset).
   v2.3 (2026-08-11): К-26 auto-collapse (§3.21.compact) + architectural pass:
                      + токены --transition-fast/-slide/-swap (§1 timings)
                      + --e7-strip-height-compact (парный к --e7-strip-height)
                      + --surface + --text-strong (canon для embed-context)
                      · magic 0.28s → var(--transition-slide) (line 1197)
                      · 7× color:#111 bare → var(--text-strong)
                      · 1× background:#fff bare → var(--surface)
                      · owner-directive «архитектурно, ноль magic» 2026-08-10.
   v2.4 (2026-08-12): К-29 двухъярусный DE+RU на CTA/doc-link + email-static
                      refactor (owner-directive Image #16/17/18 2026-08-11):
                      + токен --fg-on-strong-muted (color-mix для inverted-on-strong)
                      + .form-doc-link .fdl-txt/.fdl-ru (add-only двухъярусный
                        подпаттерн; .fdl-de alone остаётся валидным)
                      + .form-cta :has(.fct-de) flex-column + .fct-de/.fct-ru
                        (add-only; одноярусные .form-cta не тронуты)
                      · .email-static refactor: label ВЫШЕ рамки, значение
                        внутри — паттерн .form-field, не смешивать label с
                        полем (BREAKING визуально, HTML не меняется).
   v2.7 (2026-08-26): pv-context suppressor для .e7-strip (belt+suspenders,
                      mirror к style.css:7628 паттерну для .global-safe-bottom).
                      Owner-report iPhone 2026-08-25: полоса «VERTRAG WIDERRUFEN»
                      всплывала над PV panel «Мои словари», IntersectionObserver
                      возвращал card-view при .snap-card в viewport → race с
                      z-index. Контракт `df212840` от CC-UI. См. line 1415-1425.
                      Прыжок v2.5→v2.7: content-версии v2.6 не было —
                      cache-buster `?v=2.6` в app.html был выставлен в commit
                      `b6404b64` (И-01, path migration docs/interface → /) без
                      правки содержимого; текущий bump закрывает разрыв.
   v2.5 (2026-08-14): К-41 Consent Gate Н12 между Э10 и Stripe (add-only 3
                      модификатора + двухъярусный подпаттерн .pw-links):
                      + .legal-shell--overlay (fullscreen fixed z-index 10400)
                      + .paper-stamp--with-close (min-height 44px + padding-right
                        под встроенный крестик)
                      + .paper-stamp-close (ad-hoc close-cross (потенциальный кандидат в §3.29 canonical при появлении 2-го использования) close-cross 32×32
                        visible / 44×44 hit-target через absolute + translateY)
                      + .pw-links a .pl-txt/.pl-de/.pl-ru/.pl-arrow (двухъярусный
                        подпаттерн по образцу .form-doc-link .fdl-txt; одноярусный
                        .pw-links a > span:last-child остаётся валидным).
                      · Base .paper-stamp/.legal-shell/.pw-links НЕ тронуты
                        (обратная совместимость Н5-Н11 + K-23 checkout demo).

   VALIDITY (сверено 2026-08-10 с cc-jr/legal-layer/02_new_screens.html v.31 и
                                    cc-jr/legal-layer/03_embed_screens.html v.43):
   - ТОКЕНЫ §1 — производные Utopia scale + canonical fixed (44px tap, 22px checkbox,
     letter-spacing штампа 0.18em). Все fluid-значения — clamp() между 320↔1240px.
   - ОХВАТ: 12 paper-mode экранов Н1..Н12 + 10 встроек Э1..Э10 · ~140 canonical class.
     НЕ входят mockup-chrome (.newscreen, .frame*, .stbar, .head, .crumbs — только для
     мокапа-контейнера; в prod не переносить). Prod-host classы (.footer/.mob-shell/
     .auth-modal/.upgrade-modal/.settings-panel/.sec-bar/.st-head — уже живут в prod
     style.css) НЕ переопределяются — этот файл дополняет, не заменяет.

   WHO USES THIS:
   - CC-T (sandbox) — apply в prod HTML (8 paper-pages standalone + landing footers +
     app.html embeds), удалить дубли inline-стилей.
   - claude.ai — paste into <style> при разработке новых правовых прототипов.
   - CC-UI (mockup-studio) — reference при вырезке новых мокапов.

   RULES FOR CONSUMERS:
   1. Bare class names без primitive-обёрток. HTML из мокапа копируется как есть.
   2. Модификаторы через компаунд-селектор: .form-cta.outline / .doc-p.mute /
      .lang-switch .ls-on / .pw-consent-box.checked / .form-field.static / [disabled].
      НЕ .is-outline / НЕ .form-cta--outline.
   3. Twoязычные пары через отдельные span/div: .form-de/.form-ru / .pw-consent-de/-ru
      / .acc-lbl-de/-ru. НЕ через :lang() или data-lang псевдо-elem.
   4. Значения только из tokens §1 или fixed canonical (44/22/tracking). НЕ inline styles.
   5. Media strategy: viewport @media только для лендинг-footer column-stack на 320.
      Container queries пока не нужны — все встройки живут в fixed-width хостах.

   STRUCTURE:
   §1  Tokens (colors, fonts, spacing scale, fluid typography)
   §2  Typography Tiers (semantic naming reference)
   §3  Canonical Components (visual + layout, numbered 3.1..3.21)
   §4  Legacy / mockup-only (не переносить в prod)
   ============================================================================ */


/* ============================================================================
   §1  TOKENS
   ============================================================================ */

:root {
  /* --- Fonts (alias к global style.css tokens где есть) --- */
  --font-ui:   'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --font-card: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text',
               'Helvetica Neue', Arial, sans-serif;

  /* --- Paper-mode palette (canon 8 самостоятельных правовых страниц) --- */
  --paper-bg:       #F4EFE3;   /* тёплый бежевый — «бумага письма» */
  --paper-line:     #D9D2BE;   /* мягкие линии-разделители */
  --paper-text:     #1A1A1A;   /* основной текст */
  --paper-muted:    #6B6459;   /* приглушённый текст, ярлыки */
  --paper-stamp-bg: #111111;   /* тёмная шапка-штамп */
  --paper-stamp-fg: #F4EFE3;   /* светлый текст на штампе в тон бумаги */
  --paper-accent:   #D42B2B;   /* акцент (warning, error, RU-note border) */

  /* Semantic backgrounds для warning/mute блоков */
  --paper-warn-bg:  rgba(212, 43, 43, .06);
  --paper-warn-br:  rgba(212, 43, 43, .15);
  --paper-mute-bg:  rgba(0, 0, 0, .04);

  /* --- Dark-context palette (лендинг-footer #111 фон + встройки app.html) --- */
  --dark-fg-strong: #FFFFFF;
  --dark-fg-muted:  rgba(255, 255, 255, .75);
  --dark-fg-ghost:  rgba(255, 255, 255, .35);
  --dark-fg-link-b: rgba(255, 255, 255, .40);
  --dark-bg:        #111111;

  /* --- Inverted-on-strong text (canonical CTA двухъярусный DE+RU) ---------
     Canvas: paper-text (#1A1A1A) фон · paper-bg (#F4EFE3 cream) foreground.
     RU-подстрочник читается с ~85% opacity — тише DE-lock, но не серый.
     color-mix даёт единство с --paper-bg (не белый — конфликтовал бы с cream). */
  --fg-on-strong-muted: color-mix(in srgb, var(--paper-bg) 85%, transparent);

  /* --- Spacing scale (Utopia formula, perfect-fourth 1.125, 320↔1240px) --- */
  --space-3xs: clamp(0.25rem, 0.24rem + 0.05vw, 0.3125rem);   /*  4→ 5px */
  --space-2xs: clamp(0.5rem,  0.48rem + 0.11vw, 0.625rem);    /*  8→10px */
  --space-xs:  clamp(0.75rem, 0.71rem + 0.22vw, 1rem);        /* 12→16px */
  --space-s:   clamp(1rem,    0.95rem + 0.27vw, 1.25rem);     /* 16→20px */
  --space-m:   clamp(1.25rem, 1.16rem + 0.43vw, 1.75rem);     /* 20→28px */
  --space-l:   clamp(1.75rem, 1.62rem + 0.65vw, 2.5rem);      /* 28→40px */

  /* --- Typography scale (fluid, semantic ярусы; floor 11px соблюдён) --- */
  --fs-stamp:  clamp(0.625rem,  0.61rem + 0.05vw, 0.6875rem);  /* 10→11 штамп UPPER */
  --fs-lbl:    clamp(0.625rem,  0.61rem + 0.05vw, 0.6875rem);  /* 10→11 form-lbl UPPER */
  --fs-tiny:   clamp(0.6875rem, 0.65rem + 0.16vw, 0.8125rem);  /* 11→13 foot-hint/RU */
  --fs-meta:   clamp(0.75rem,   0.71rem + 0.16vw, 0.875rem);   /* 12→14 muted meta */
  --fs-body:   clamp(0.8125rem, 0.78rem + 0.16vw, 0.9375rem);  /* 13→15 paper body */
  --fs-h2:     clamp(0.8125rem, 0.79rem + 0.16vw, 1rem);       /* 13→16 DE-title */
  --fs-h1:     clamp(1rem,      0.94rem + 0.33vw, 1.25rem);    /* 16→20 section H1 */

  /* Fixed canonical typography (не clamp'ить) */
  --fs-input:  16px;   /* iOS Safari zoom-lock: input ≥16px не даёт auto-zoom при focus */
  --fs-back:   16px;   /* form-back «‹» символ фиксирован */

  /* --- Line-heights (unitless) --- */
  --lh-tight:  1.25;   /* штампы, ярлыки UPPER */
  --lh-normal: 1.4;    /* body */
  --lh-doc:    1.6;    /* документные абзацы */

  /* --- Letter-spacing (canonical, tracking для UPPER-ярусов) --- */
  --tracking-stamp: 0.18em;   /* .paper-stamp — самый широкий, «наклейка» */
  --tracking-label: 0.14em;   /* .form-title .form-de, .form-cta, .doc-h — UPPER labels */
  --tracking-tab:   0.10em;   /* .lang-switch, .foot-note — компактнее */
  --tracking-warn:  0.16em;   /* .form-warn-h — акцентный warning */

  /* --- Font weights (canonical) --- */
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* --- Border widths --- */
  --bw-1:    1px;
  --bw-2:    1.5px;
  --bw-emph: 3px;   /* left border на .doc-kv, .cnf-details, .doc-form, .form-doc-link */
  --bw-warn: 4px;   /* left border на .form-warn (акцент) */

  /* --- Canonical fixed sizes (WCAG tap-area, checkbox visual) --- */
  --tap-min:      44px;   /* WCAG-минимум для tap-target · .form-field input, .form-back
                             (canonical, не масштабируем) */
  --back-visual:  32px;   /* form-back визуальный box внутри 44px tap-area (canon) */
  --box-check:    22px;   /* .pw-consent-box визуальный чекбокс (canonical checkout) */
  --cta-height:   52px;   /* .form-cta min-height (canonical CTA) */
  --pw-cta-h:     56px;   /* .pw-cta двухъярусный DE+RU выше стандартной формы */

  /* --- Cnf-badge (56×56 квадрат подтверждения) --- */
  --cnf-badge:  56px;

  /* --- E7 strip height (canonical для расчёта player bottom offset)
     Плеер в prod: bottom: calc(env(safe-area-inset-bottom) + var(--e7-strip-height))
     Значение = padding-top + text-height + padding-bottom + border-top:
       2 × var(--space-xs) + line-height + 1px ≈ 47px при maximum viewport
     Fixed 47px, не clamp — canon-invariant для расчёта player-offset.
     -compact парный invariant для body.e7-compact (К-26 auto-collapse 5s). */
  --e7-strip-height:         47px;
  --e7-strip-height-compact: 1.5rem;   /* 24px = --fs-lbl + --lh-tight + safe gap */

  /* --- Light-context surface/text (canon для встроек в app.html; отличается
     от paper-mode --paper-* и от global style.css --text-primary=#000).
     #111 — canonical «слегка-мягкий» чёрный для embed-context, не #000
     (менее агрессивен на белом фоне, унифицирован с .e7-strip и .acc-row). */
  --surface:     #FFFFFF;
  --text-strong: #111111;

  /* --- Transitions (canonical durations + easings) --- */
  --transition-fast:  180ms ease;         /* micro-interactions (hover, focus)   */
  --transition-slide: 280ms ease-out;     /* transform slide (шторки, панели)    */
  --transition-swap:  500ms ease;         /* state swap (bg/color/font при переходе) */
}


/* ============================================================================
   §2  TYPOGRAPHY TIERS — семантическая quick-reference таблица
   ============================================================================
   | Ярус             | Token         | Font        | Weight | Transform | Tracking     |
   |------------------|---------------|-------------|--------|-----------|--------------|
   | штамп            | --fs-stamp    | --font-ui   | 600    | UPPER     | --tracking-stamp |
   | ярлык (UPPER)    | --fs-lbl      | --font-ui   | 700    | UPPER     | --tracking-label |
   | мелкий/RU/hint   | --fs-tiny     | --font-card | 400    | sentence  | 0            |
   | meta muted       | --fs-meta     | --font-card | 400    | sentence  | 0            |
   | body документа   | --fs-body     | --font-card | 400    | sentence  | 0            |
   | H2 (form-de)     | --fs-h2       | --font-ui   | 700    | UPPER     | --tracking-label |
   | H1 (section)     | --fs-h1       | --font-ui   | 700    | UPPER     | --tracking-label |
   | input (iOS-safe) | --fs-input=16 | --font-card | 400    | sentence  | 0            |
   ============================================================================ */


/* ============================================================================
   §3  CANONICAL COMPONENTS
   ============================================================================
   Порядок: (§3.1-3.3) шапка + head + lang · (§3.4-3.6) документ · (§3.7-3.9)
   формы · (§3.10) CTA · (§3.11-3.13) экраны подтверждения · (§3.14) Widerruf
   правила · (§3.15) checkout · (§3.16-3.21) встройки в app/landing.
   ============================================================================ */


/* --- 3.0  legal-shell — root класса для standalone правовых страниц ------- */

.legal-shell {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--paper-bg);
  color: var(--paper-text);
  font-family: var(--font-card);
  overflow-x: hidden;
}


/* --- 3.0a  .legal-shell--overlay — fullscreen overlay модификатор (canon v2.5) --
   Для встраивания legal-shell поверх текущего экрана приложения (К-41 Н12 gate
   поверх Э10 upgrade modal, будущие модалки правового слоя внутри app).
   z-index 10400 — выше upgrade-modal (10000), ниже stripe-embedded (10500).
   [hidden] — стандартный HTML5-контроль отображения (совместим с JS
   `element.hidden = true/false`).                                          */
.legal-shell--overlay {
  position: fixed;
  inset: 0;
  z-index: 10400;
}
.legal-shell--overlay[hidden] { display: none; }


/* --- 3.1  .paper-stamp — тёмная шапка-«наклейка» ------------------------- */
/* HTML:
   <div class="paper-stamp">
     <span class="ps-org">SPECHT · Inhaberin: Mariia Kiseleva</span>
     <span class="ps-para">§ 5 DDG · Impressum</span>
   </div>                                                                   */
.paper-stamp {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-xs);
  padding: var(--space-2xs) var(--space-s);
  background: var(--paper-stamp-bg); color: var(--paper-stamp-fg);
  font-family: var(--font-ui);
  font-size: var(--fs-stamp);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-stamp);
  line-height: var(--lh-tight);
  text-transform: uppercase;
  flex-shrink: 0;
}
.paper-stamp .ps-org  { opacity: .7; min-inline-size: 0; overflow-wrap: anywhere; }
.paper-stamp .ps-para { font-weight: var(--fw-bold); }


/* --- 3.1a  .paper-stamp--with-close · .paper-stamp-close — canon v2.5 -----
   Модификатор шапки-«наклейки» для случаев с встроенным крестиком × выхода
   (К-41 Н12 checkout gate; будущие модалки правового слоя). Крестик —
   ad-hoc close-cross (потенциальный кандидат в §3.29 canonical при появлении 2-го использования) close-cross (32×32 visible + 44×44 hit-target через
   position:absolute + touch-target padding).
   Без модификатора .paper-stamp сохраняет исходные размеры (высота по контенту).
   HTML:
     <div class="paper-stamp paper-stamp--with-close">
       <span class="ps-org">SPECHT · Inhaberin: Mariia Kiseleva</span>
       <span class="ps-para">§ 312j Abs. 2, Abs. 3 · § 356 Abs. 5</span>
       <button class="paper-stamp-close" type="button" aria-label="Закрыть">×</button>
     </div>                                                                  */
.paper-stamp--with-close {
  position: relative;
  min-block-size: var(--tap-min);
  padding-inline-end: calc(var(--back-visual) + var(--space-s));
}
.paper-stamp-close {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-end: var(--space-2xs);
  transform: translateY(-50%);
  inline-size: var(--back-visual);
  block-size:  var(--back-visual);
  background: transparent;
  border: var(--bw-1) solid rgba(255, 255, 255, 0.55);
  color: rgba(255, 255, 255, 0.95);
  font-family: var(--font-ui);
  font-size: var(--fs-h1);
  line-height: 1;
  cursor: pointer;
  padding: 0;
  display: flex; align-items: center; justify-content: center;
}
.paper-stamp-close:hover,
.paper-stamp-close:active {
  border-color: rgba(255, 255, 255, 0.85);
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
}


/* --- 3.2  .form-head — заголовок + подзаголовок + переключатель ---------- */
/* HTML:
   <div class="form-head">
     <button class="form-back" aria-label="Назад">‹</button>
     <div class="form-title">
       <span class="form-de">Impressum</span>
       <span class="form-ru">Данные компании</span>
     </div>
     <div class="lang-switch">
       <span class="ls-on">DE</span><span class="ls-sep">|</span><span class="ls-off">RU</span>
     </div>
   </div>                                                                   */
.form-head {
  display: flex; align-items: center;
  gap: var(--space-xs);
  padding: var(--space-s) var(--space-s) var(--space-xs);
  border-bottom: var(--bw-1) solid var(--paper-line);
  flex-shrink: 0;
}
.form-back {
  inline-size: var(--tap-min); block-size: var(--tap-min);
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent;
  border: var(--bw-1) solid var(--paper-muted);
  cursor: pointer;
  font-family: var(--font-card);
  font-size: var(--fs-back);
  color: var(--paper-muted);
  flex-shrink: 0;
  /* 32×32 визуальный box внутри 44×44 tap-target достигается через max-inline-size
     обёртки, если нужно (canonical mockup: box совпадает с tap = 32×32). */
}
.form-title {
  display: flex; flex-direction: column;
  gap: var(--space-3xs);
  flex: 1; min-inline-size: 0;
}
.form-title .form-de {
  font-family: var(--font-ui);
  font-size: var(--fs-h2);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-label);
  line-height: var(--lh-tight);
  text-transform: uppercase;
  color: var(--paper-text);
  overflow-wrap: anywhere;
}
.form-title .form-ru {
  font-family: var(--font-card);
  font-size: var(--fs-tiny);
  line-height: var(--lh-tight);
  color: var(--paper-muted);
}


/* --- 3.3  .lang-switch — DE|RU переключатель ---------------------------- */
.lang-switch {
  display: flex; align-items: center;
  gap: var(--space-3xs);
  margin-inline-start: auto;
  padding-inline-start: var(--space-xs);
  font-family: var(--font-ui);
  font-size: var(--fs-tiny);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-tab);
  text-transform: uppercase;
  flex-shrink: 0;
}
.lang-switch .ls-on {
  color: var(--paper-text);
  border-bottom: var(--bw-2) solid var(--paper-text);
  padding-block-end: 1px;   /* baseline alignment под подчёркиванием (декоративно) */
  cursor: default;
}
.lang-switch .ls-off {
  color: var(--paper-muted);
  cursor: pointer;
}
.lang-switch .ls-sep {
  color: var(--paper-muted);
  opacity: .5;
  user-select: none;
}


/* --- 3.4  .ru-legal-note — предупреждение над RU-документом ------------- */
/* HTML: <div class="ru-legal-note">Перевод для удобства. …</div>          */
.ru-legal-note {
  padding: var(--space-2xs) var(--space-s);
  background: var(--paper-warn-bg);
  border-bottom: var(--bw-1) solid var(--paper-warn-br);
  font-family: var(--font-card);
  font-size: var(--fs-tiny);
  color: var(--paper-accent);
  font-style: italic;
  text-align: center;
  flex-shrink: 0;
}


/* --- 3.5  .ru-placeholder — рыба перевода (когда RU не готов) ---------- */
/* HTML:
   <div class="ru-placeholder">
     <span class="pending">Перевод ожидается</span>
     <span class="fish">Немецкая версия ниже…</span>
   </div>                                                                  */
.ru-placeholder {
  flex: 1; overflow-y: auto;
  padding: var(--space-l) var(--space-s);
  background: var(--paper-bg);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: var(--space-xs);
  text-align: center;
}
.ru-placeholder .pending {
  display: inline-block;
  padding: var(--space-3xs) var(--space-xs);
  background: transparent;
  border: var(--bw-1) solid var(--paper-muted);
  color: var(--paper-muted);
  font-family: var(--font-ui);
  font-size: var(--fs-stamp);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}
.ru-placeholder .fish {
  font-family: var(--font-card);
  font-size: var(--fs-meta);
  color: var(--paper-muted);
  font-style: italic;
  line-height: var(--lh-normal);
  max-inline-size: 32ch;
}


/* --- 3.6  .doc-body / .doc-h / .doc-p / .doc-frag / .doc-list / .doc-kv -- */
/* HTML:
   <div class="doc-body">
     <div class="doc-h">Anbieter</div>
     <p class="doc-p">Wir sind …</p>
     <p class="doc-p mute">Version: 23.07.2026</p>
     <p class="doc-frag">Дальше — полный текст…</p>
     <ul class="doc-list"><li>…</li></ul>
     <div class="doc-kv"><b>Anbieter</b>Mariia Kiseleva…</div>
   </div>                                                                  */
.doc-body {
  flex: 1; overflow-y: auto;
  padding: var(--space-s) var(--space-s) var(--space-m);
}
.doc-h {
  font-family: var(--font-ui);
  font-size: var(--fs-meta);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--paper-text);
  margin: var(--space-m) 0 var(--space-2xs);
}
.doc-h:first-child { margin-block-start: 0; }

.doc-p {
  font-family: var(--font-card);
  font-size: var(--fs-body);
  color: var(--paper-text);
  line-height: var(--lh-doc);
  margin: 0 0 var(--space-2xs);
  overflow-wrap: break-word;
}
.doc-p b { color: var(--paper-text); font-weight: var(--fw-bold); }
.doc-p.mute {
  color: var(--paper-muted);
  font-style: italic;
  font-size: var(--fs-meta);
}

.doc-frag {
  color: var(--paper-muted);
  font-style: italic;
  font-size: var(--fs-meta);
  font-family: var(--font-card);
  line-height: var(--lh-normal);
  margin: var(--space-xs) 0 var(--space-2xs);
}

.doc-list {
  margin: var(--space-2xs) 0 var(--space-xs);
  padding-inline-start: var(--space-m);
  font-family: var(--font-card);
  font-size: var(--fs-body);
  color: var(--paper-text);
  line-height: var(--lh-normal);
}
.doc-list li { margin-block-end: var(--space-3xs); }
.doc-list a {
  color: var(--paper-text); text-decoration: none;
  border-bottom: var(--bw-1) dotted var(--paper-muted);
}

.doc-kv {
  margin: var(--space-2xs) 0 var(--space-s);
  padding: var(--space-xs) var(--space-s);
  background: transparent;
  border: var(--bw-1) solid var(--paper-line);
  border-inline-start: var(--bw-emph) solid var(--paper-text);
  font-family: var(--font-ui);
  font-size: var(--fs-meta);
  color: var(--paper-text);
  line-height: var(--lh-normal);
}
.doc-kv b {
  display: block;
  font-family: var(--font-ui);
  font-size: var(--fs-lbl);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--paper-muted);
  margin: var(--space-2xs) 0 2px;   /* 2px — декоративный tight-gap ярлык↔значение */
  overflow-wrap: anywhere;
}
.doc-kv b:first-child { margin-block-start: 0; }


/* --- 3.7  .doc-form — pre-mono блок формы отзыва ------------------------ */
/* HTML: <pre class="doc-form">Muster-Widerrufsformular / An SPECHT…</pre> */
.doc-form {
  font-family: var(--font-ui);
  font-size: var(--fs-tiny);
  line-height: var(--lh-doc);
  color: var(--paper-text);
  white-space: pre-wrap;
  overflow-x: auto;
  margin: var(--space-xs) 0;
  padding: var(--space-xs) var(--space-s);
  background: transparent;
  border: var(--bw-1) solid var(--paper-line);
  border-inline-start: var(--bw-emph) solid var(--paper-text);
  overflow-wrap: anywhere;
}


/* --- 3.8  .form-body / .form-field / .form-err — формы Kündigen/Widerruf */
/* HTML:
   <div class="form-body">
     <div class="form-field static">
       <span class="static-de">Kündigung wirksam zum:</span>
       <span class="static-ru">Момент прекращения:</span>
     </div>
     <div class="form-field">
       <label class="lbl">E-Mail</label>
       <input class="field" type="email" />
       <div class="form-err">Ungültige E-Mail</div>
     </div>
   </div>                                                                  */
.form-body {
  flex: 1; overflow-y: auto;
  padding: var(--space-s);
  display: flex; flex-direction: column;
  gap: var(--space-s);
}
.form-field {
  display: flex; flex-direction: column;
  gap: var(--space-3xs);
}
.form-field .lbl {
  font-family: var(--font-ui);
  font-size: var(--fs-lbl);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--paper-muted);
}
.form-field input.field,
.form-field textarea.field,
.form-field select.field {
  block-size: var(--tap-min);
  padding: 0 var(--space-s);
  box-sizing: border-box;
  background: transparent;
  border: var(--bw-1) solid var(--paper-muted);
  border-radius: 0;
  font-family: var(--font-card);
  font-size: var(--fs-input);           /* 16px canonical — iOS zoom-lock */
  color: var(--paper-text);
  outline: none;
}
.form-field input.field:focus,
.form-field textarea.field:focus,
.form-field select.field:focus {
  border-color: var(--paper-text);
}
.form-field input.field.err,
.form-field textarea.field.err {
  border-color: var(--paper-accent);
}

.form-field.static .static-de {
  font-family: var(--font-card);
  font-size: var(--fs-body);
  line-height: var(--lh-tight);
  color: var(--paper-text);
  margin: 0 0 2px;   /* декоративный tight-gap DE↔RU */
}
.form-field.static .static-ru {
  font-family: var(--font-card);
  font-size: var(--fs-meta);
  line-height: var(--lh-tight);
  color: var(--paper-muted);
  margin: 0;
}

.form-err {
  padding: var(--space-2xs) var(--space-xs);
  margin-block-start: var(--space-3xs);
  background: var(--paper-warn-bg);
  border-inline-start: var(--bw-2) solid var(--paper-accent);
  font-family: var(--font-card);
  font-size: var(--fs-meta);
  color: var(--paper-accent);
  line-height: var(--lh-normal);
}


/* --- 3.9  .form-hint — пояснение над формой ---------------------------- */
/* HTML: <div class="form-hint">DE-текст<span class="fh-ru">RU-текст</span></div> */
.form-hint {
  padding: var(--space-xs) var(--space-s);
  margin: 0;
  background: transparent;
  border-inline-start: var(--bw-2) solid var(--paper-muted);
  font-family: var(--font-card);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--paper-text);
}
.form-hint .fh-ru {
  display: block;
  margin-block-start: var(--space-3xs);
  color: var(--paper-muted);
  font-size: var(--fs-meta);
  line-height: var(--lh-normal);
  font-style: italic;
}


/* --- 3.10  .form-warn — блок предупреждения (например, право утрачено) - */
/* HTML:
   <div class="form-warn">
     <span class="form-warn-h">WICHTIG</span>
     <p class="form-warn-de">Widerrufsrecht ist erloschen…</p>
     <span class="form-warn-ru">Право отзыва утрачено…</span>
   </div>                                                                  */
.form-warn {
  padding: var(--space-xs) var(--space-s);
  background: var(--paper-warn-bg);
  border: var(--bw-1) solid var(--paper-accent);
  border-inline-start: var(--bw-warn) solid var(--paper-accent);
}
.form-warn-h {
  display: block;
  margin-block-end: var(--space-2xs);
  font-family: var(--font-ui);
  font-size: var(--fs-lbl);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-warn);
  text-transform: uppercase;
  color: var(--paper-accent);
}
.form-warn-de {
  font-family: var(--font-card);
  font-size: var(--fs-meta);
  line-height: var(--lh-normal);
  color: var(--paper-text);
  font-weight: var(--fw-medium);
  margin: 0;
}
.form-warn-de b { font-weight: var(--fw-bold); color: var(--paper-text); }
.form-warn-ru {
  display: block;
  margin-block-start: var(--space-2xs);
  padding-block-start: var(--space-2xs);
  border-block-start: var(--bw-1) dashed var(--paper-muted);
  font-family: var(--font-card);
  font-size: var(--fs-tiny);
  line-height: var(--lh-normal);
  color: var(--paper-muted);
  font-style: italic;
}


/* --- 3.11  .form-doc-link — ссылка на юр-документ из формы ------------- */
/* HTML одноярусный (DE-only ссылка · legacy pattern):
   <a class="form-doc-link" href="/widerrufsbelehrung">
     <span class="fdl-de">WIDERRUFSBELEHRUNG</span>
     <span class="fdl-arrow">›</span>
   </a>

   HTML двухъярусный (canon v2.4 · owner-directive 2026-08-11 Image #17/18):
   <a class="form-doc-link" href="/agb">
     <span class="fdl-txt">
       <span class="fdl-de">AGB</span>
       <span class="fdl-ru">условия использования</span>
     </span>
     <span class="fdl-arrow">›</span>
   </a>
   Обе формы валидны — .fdl-txt-обёртка нужна только для параллельных ярусов. */
.form-doc-link {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-s);
  text-decoration: none;
  background: transparent;
  border: var(--bw-1) solid var(--paper-line);
  border-inline-start: var(--bw-emph) solid var(--paper-text);
}
.form-doc-link .fdl-txt {
  display: flex; flex-direction: column;
  gap: var(--space-3xs);
  flex: 1; min-inline-size: 0;
}
.form-doc-link .fdl-de {
  font-family: var(--font-ui);
  font-size: var(--fs-tiny);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--paper-text);
  line-height: var(--lh-tight);
}
.form-doc-link .fdl-ru {
  font-family: var(--font-card);
  font-size: var(--fs-tiny);
  font-weight: var(--fw-regular);
  letter-spacing: 0;
  text-transform: none;
  color: var(--paper-muted);
  line-height: var(--lh-tight);
}
.form-doc-link .fdl-arrow {
  color: var(--paper-muted);
  font-family: var(--font-card);
  font-size: var(--fs-meta);
  flex-shrink: 0;
}


/* --- 3.12  .email-static — статичный адрес аккаунта (Н8) --------------- */
/* HTML (canon v2.4 · owner-directive 2026-08-11 Image #16 «зачем ты сунул
   название поля в поле почты?»): label ВЫШЕ рамки, значение внутри рамки —
   тот же паттерн что .form-field (label над input.field). НЕ смешивать.
   <div class="email-static">
     <span class="es-lbl">E-Mail аккаунта</span>
     <span class="es-val">anna@example.de</span>
   </div>                                                                  */
.email-static {
  display: flex; flex-direction: column;
  gap: var(--space-3xs);
}
.email-static .es-lbl {
  font-family: var(--font-ui);
  font-size: var(--fs-lbl);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--paper-muted);
}
.email-static .es-val {
  min-block-size: var(--tap-min);
  padding-inline: var(--space-s);
  display: flex; align-items: center;
  background: transparent;
  border: var(--bw-1) solid var(--paper-muted);
  font-family: var(--font-card);
  font-size: var(--fs-input);
  color: var(--paper-text);
  overflow-wrap: anywhere;
}


/* --- 3.13  .form-cta-zone / .form-cta (+outline) — main CTA ------------ */
/* HTML одноярусный (DE-only · legacy):
   <button class="form-cta">SENDEN</button>
   <button class="form-cta outline">На главную</button>

   HTML двухъярусный (canon v2.4 · owner-directive 2026-08-11 Image #17):
   <button class="form-cta">
     <span class="fct-de">WIDERRUF BESTÄTIGEN</span>
     <span class="fct-ru">подтвердить отзыв</span>
   </button>
   :has()-селектор переводит .form-cta во flex-column только при наличии
   .fct-de внутри — одноярусные экземпляры не тронуты (add-only контракт).  */
.form-cta-zone {
  padding: var(--space-s);
  border-block-start: var(--bw-1) solid var(--paper-line);
  background: var(--paper-bg);
  flex-shrink: 0;
}
.form-cta {
  display: block;
  inline-size: 100%;
  min-block-size: var(--cta-height);
  background: var(--paper-text); color: var(--paper-bg);
  border: none;
  cursor: pointer;
  font-family: var(--font-ui);
  font-size: var(--fs-body);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}
.form-cta:has(.fct-de) {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: var(--space-3xs);
  min-block-size: var(--pw-cta-h);   /* 56px — двухъярусный требует высоты */
  line-height: var(--lh-tight);
}
.form-cta .fct-de {
  font-family: var(--font-ui);
  font-size: var(--fs-body);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}
.form-cta .fct-ru {
  font-family: var(--font-card);
  font-size: var(--fs-tiny);
  font-weight: var(--fw-regular);
  letter-spacing: 0;
  text-transform: none;
  color: var(--fg-on-strong-muted);
}
.form-cta.outline {
  background: transparent; color: var(--paper-text);
  border: var(--bw-1) solid var(--paper-text);
}
.form-cta.outline .fct-ru { color: var(--paper-muted); }
.form-cta:disabled { opacity: .5; cursor: not-allowed; }


/* --- 3.14  .cnf-* — экраны подтверждения (Н6, Н9, Н10, Н11) ------------ */
/* HTML:
   <div class="cnf-body">
     <div class="cnf-badge">✓</div>
     <div class="cnf-h">Kündigung ist eingegangen</div>
     <div class="cnf-t">Eingegangen am <b>04.07.2026</b>.</div>
     <div class="cnf-details">
       <b>Eingegangen</b>04.07.2026, 09:41:12 MESZ
       <b>Inhalt der Kündigung</b>
         <span class="cnf-hint">содержание</span>
         <span class="quote">«Ich kündige…»</span>
         <span class="quote-ru">«Настоящим…»</span>
     </div>
     <div class="cnf-copy">Копия отправлена на <b>anna@example.de</b></div>
   </div>                                                                  */
.cnf-body {
  flex: 1; overflow-y: auto;
  padding: var(--space-m) var(--space-s);
  display: flex; flex-direction: column;
  align-items: center;
  gap: var(--space-xs);
}
.cnf-badge {
  inline-size: var(--cnf-badge); block-size: var(--cnf-badge);
  display: inline-flex; align-items: center; justify-content: center;
  border: var(--bw-2) solid var(--paper-text);
  font-family: var(--font-ui);
  font-size: var(--fs-h1);
  font-weight: var(--fw-bold);
  color: var(--paper-text);
  margin-block-end: var(--space-3xs);
}
.cnf-h {
  font-family: var(--font-ui);
  font-size: var(--fs-h2);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-tab);
  text-transform: uppercase;
  color: var(--paper-text);
  text-align: center;
  margin: 0;
}
.cnf-t {
  font-family: var(--font-card);
  font-size: var(--fs-body);
  color: var(--paper-text);
  line-height: var(--lh-normal);
  text-align: center;
  margin: 0;
}
.cnf-details {
  inline-size: 100%;
  margin-block-start: var(--space-xs);
  padding: var(--space-xs) var(--space-s);
  background: transparent;
  border: var(--bw-1) solid var(--paper-line);
  border-inline-start: var(--bw-emph) solid var(--paper-text);
  font-family: var(--font-ui);
  font-size: var(--fs-tiny);
  color: var(--paper-text);
  line-height: var(--lh-normal);
}
.cnf-details b {
  display: block;
  font-family: var(--font-ui);
  font-size: var(--fs-lbl);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--paper-muted);
  margin: var(--space-2xs) 0 2px;   /* 2px — canonical tight-gap ярлык↔значение */
  overflow-wrap: anywhere;
}
.cnf-details b:first-child { margin-block-start: 0; }
.cnf-details .cnf-hint {
  display: block;
  margin: -4px 0 var(--space-3xs);   /* -4px компенсирует margin ярлыка сверху */
  font-family: var(--font-card);
  font-size: var(--fs-tiny);
  font-weight: var(--fw-regular);
  color: var(--paper-muted);
  letter-spacing: 0;
  text-transform: none;
}
.cnf-details .quote {
  display: block;
  font-family: var(--font-card);
  font-size: var(--fs-meta);
  font-style: italic;
}
.cnf-details .quote-ru {
  display: block;
  margin-block-start: var(--space-3xs);
  font-family: var(--font-card);
  font-size: var(--fs-tiny);
  font-style: italic;
  color: var(--paper-muted);
  line-height: var(--lh-normal);
}
.cnf-copy {
  inline-size: 100%;
  margin-block-start: var(--space-s);
  font-family: var(--font-card);
  font-size: var(--fs-meta);
  color: var(--paper-muted);
  line-height: var(--lh-normal);
  text-align: start;
}
.cnf-copy b { color: var(--paper-text); }


/* --- 3.15  .rule-block / .rule-title — блок правила Widerruf ----------- */
/* HTML:
   <div class="rule-block">
     <b class="rule-title">Widerrufsrecht</b>
     Sie haben das Recht, binnen vierzehn Tagen…
   </div>                                                                  */
.rule-block {
  margin: 0 0 var(--space-m);
  padding: var(--space-xs) var(--space-s);
  background: transparent;
  border-inline-start: var(--bw-emph) solid var(--paper-text);
  font-family: var(--font-ui);
  font-size: var(--fs-tiny);
  line-height: var(--lh-doc);
  color: var(--paper-text);
}
.rule-block b.rule-title {
  display: block;
  font-size: var(--fs-lbl);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--paper-muted);
  margin-block-end: var(--space-3xs);
  font-weight: var(--fw-bold);
}


/* --- 3.16  .pw-* — checkout Н12 (§ 312j) ------------------------------- */
/* HTML: см. cc-jr/legal-layer/02_new_screens.html #n12                    */
.pw {
  flex: 1; overflow-y: auto;
  display: flex; flex-direction: column;
}
.pw-head {
  padding: var(--space-s) var(--space-s) var(--space-xs);
  border-block-end: var(--bw-1) solid var(--paper-line);
}
.pw-h {
  font-family: var(--font-ui);
  font-size: var(--fs-h1);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--paper-text);
  margin: 0;
}
.pw-sub {
  margin: var(--space-3xs) 0 0;
  font-family: var(--font-card);
  font-size: var(--fs-body);
  color: var(--paper-muted);
  line-height: var(--lh-normal);
}

.pw-tarif {
  padding: var(--space-xs) var(--space-s);
  border-block-end: var(--bw-1) solid var(--paper-line);
}
.pw-tarif-h {
  font-family: var(--font-ui);
  font-size: var(--fs-tiny);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-tab);
  text-transform: uppercase;
  color: var(--paper-text);
  margin: 0 0 var(--space-2xs);
}
.pw-tarif-h .sub {
  font-family: var(--font-card);
  font-weight: var(--fw-regular);
  font-size: var(--fs-tiny);
  color: var(--paper-muted);
  text-transform: none;
  letter-spacing: 0;
}
.pw-tarif-list {
  display: flex; flex-direction: column;
  gap: var(--space-2xs);
}
.pw-tarif-row {
  display: flex; align-items: baseline;
  gap: var(--space-xs);
}
.pw-tarif-row .k {
  /* 7rem — декоративная ширина колонки ярлыка checkout К-В сетки.
     Canon К-23 v5.2 (VERTRAGSDAUER — самый длинный label). Fixed by design. */
  flex-shrink: 0; inline-size: 7rem;
  font-family: var(--font-ui);
  font-size: var(--fs-lbl);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-tab);
  text-transform: uppercase;
  color: var(--paper-muted);
}
.pw-tarif-row .v {
  flex: 1; min-inline-size: 0;
  font-family: var(--font-card);
  font-size: var(--fs-meta);
  color: var(--paper-text);
  line-height: var(--lh-normal);
  overflow-wrap: anywhere;
}
.pw-tarif-row .v b { font-weight: var(--fw-bold); color: var(--paper-text); }
.pw-tarif-row .frist {
  background: var(--paper-mute-bg);
  padding: 0 var(--space-3xs);
}
.pw-tarif-row .v .v-de { display: block; }
.pw-tarif-row .v .v-sub {
  display: block;
  margin-block-start: var(--space-3xs);
  font-family: var(--font-card);
  font-size: var(--fs-tiny);
  line-height: var(--lh-normal);
  color: var(--paper-muted);
  font-style: italic;
}
.pw-tarif-row .v .v-ru {
  display: block;
  margin-block-start: var(--space-3xs);
  padding-block-start: var(--space-3xs);
  border-block-start: var(--bw-1) dashed var(--paper-line);
  font-family: var(--font-card);
  font-size: var(--fs-tiny);
  line-height: var(--lh-normal);
  color: var(--paper-muted);
  font-style: italic;
}

.pw-consent {
  padding: var(--space-xs) var(--space-s);
  border-block-end: var(--bw-1) solid var(--paper-line);
}
.pw-consent-row {
  display: flex; align-items: flex-start;
  gap: var(--space-xs);
}
.pw-consent-box {
  /* 22px — декоративный визуал чекбокса (§ 312j checkout). Canon-invariant:
     platform-uniform. Tap-target 44px обеспечивает родитель .pw-consent-row. */
  flex-shrink: 0;
  inline-size: var(--box-check); block-size: var(--box-check);
  display: inline-flex; align-items: center; justify-content: center;
  border: var(--bw-2) solid var(--paper-text);
  background: transparent;
  margin-block-start: 2px;   /* 2px — baseline align с .pw-consent-de (декоративный) */
  font-family: var(--font-ui);
  font-size: var(--fs-meta);
  font-weight: var(--fw-bold);
  color: var(--paper-text);
  user-select: none;
}
.pw-consent-box.checked {
  background: var(--paper-text); color: var(--paper-bg);
}
.pw-consent-txt {
  flex: 1;
  display: flex; flex-direction: column;
  gap: var(--space-2xs);
}
.pw-consent-de {
  font-family: var(--font-card);
  font-size: var(--fs-meta);
  line-height: var(--lh-normal);
  font-weight: var(--fw-medium);
  color: var(--paper-text);
}
.pw-consent-de b { font-weight: var(--fw-bold); }
.pw-consent-ru {
  padding-block-start: var(--space-2xs);
  border-block-start: var(--bw-1) dashed var(--paper-line);
  font-family: var(--font-card);
  font-size: var(--fs-tiny);
  line-height: var(--lh-normal);
  color: var(--paper-muted);
  font-style: italic;
}
.pw-consent-legalref {
  font-family: var(--font-ui);
  font-size: var(--fs-lbl);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--paper-muted);
}

.pw-links {
  padding: var(--space-2xs) var(--space-s);
  border-block-end: var(--bw-1) solid var(--paper-line);
  display: flex; flex-direction: column;
  gap: var(--space-3xs);
}
.pw-links a {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-xs);
  padding-block: var(--space-2xs);
  text-decoration: none;
  font-family: var(--font-ui);
  font-size: var(--fs-tiny);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-tab);
  text-transform: uppercase;
  color: var(--paper-text);
}
.pw-links a > span:last-child { color: var(--paper-muted); }

/* --- 3.16a  .pw-links — двухъярусный подпаттерн (canon v2.5) -------------
   Owner-directive 2026-08-11 (Image #18, Н12 · 1100): доки одной строкой с
   общим text-transform:uppercase — русский подстрочник превращался в КАПС
   и сливался с немецким. Приведено к паттерну .form-doc-link .fdl-txt/-de/-ru.

   HTML одноярусный (legacy · валиден):
     <a href="/agb"><span>AGB</span><span>›</span></a>

   HTML двухъярусный (canon v2.5):
     <a href="/agb">
       <span class="pl-txt">
         <span class="pl-de">AGB</span>
         <span class="pl-ru">условия использования</span>
       </span>
       <span class="pl-arrow">›</span>
     </a>                                                                    */
.pw-links a .pl-txt {
  display: flex; flex-direction: column;
  gap: var(--space-3xs);
  flex: 1; min-inline-size: 0;
}
.pw-links a .pl-de {
  font-family: var(--font-ui);
  font-size: var(--fs-tiny);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--paper-text);
  line-height: var(--lh-tight);
}
.pw-links a .pl-ru {
  font-family: var(--font-card);
  font-size: var(--fs-tiny);
  font-weight: var(--fw-regular);
  letter-spacing: 0;
  text-transform: none;
  color: var(--paper-muted);
  line-height: var(--lh-tight);
}
.pw-links a .pl-arrow {
  color: var(--paper-muted);
  font-family: var(--font-card);
  font-size: var(--fs-meta);
  flex-shrink: 0;
}

.pw-cta-zone {
  padding: var(--space-xs) var(--space-s) var(--space-s);
  background: var(--paper-bg);
  flex-shrink: 0;
}
.pw-cta {
  /* 56px — canonical checkout CTA (выше стандартной .form-cta 52px, чтобы
     вместить двухъярусный DE + RU текст в одной кнопке). */
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 2px;   /* 2px — canonical tight gap DE↔RU внутри кнопки */
  inline-size: 100%;
  min-block-size: var(--pw-cta-h);
  padding: var(--space-2xs) var(--space-xs);
  background: var(--paper-text); color: var(--paper-bg);
  border: none;
  cursor: pointer;
}
.pw-cta[disabled] {
  background: #d0cbc0; color: #7a7469;   /* disabled palette — canonical, не в scale */
  cursor: not-allowed;
}
.pw-cta .pw-cta-de {
  font-family: var(--font-ui);
  font-size: var(--fs-body);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}
.pw-cta .pw-cta-ru {
  font-family: var(--font-card);
  font-size: var(--fs-tiny);
  font-weight: var(--fw-regular);
  font-style: italic;
  opacity: .85;
}


/* ============================================================================
   §3.17-3.21  ВСТРОЙКИ Э1..Э10 — legal-add / legal-footer / foot-hint /
                                    legal-strip / e7-strip / acc-row-legal /
                                    legal-action / legal-note / nav-row.kuendigen /
                                    s-block-cta / plan-kuendigung / tax-note /
                                    mob-tag
   ============================================================================
   ⚠ Prod-host classes (.footer / .mob-shell / .auth-modal / .settings-panel /
   .sec-bar / .st-head / .upgrade-modal / .onboarding-overlay) НЕ переопределяются
   — этот файл только добавляет legal-специфичные слои поверх существующих.
   ============================================================================ */


/* --- 3.17  .legal-footer — правовой подвал лендингов (Э5 index, Э6 install) */
/* HTML:
   <nav class="legal-footer">
     <a href="/impressum">Impressum</a><span class="lg-sep">·</span>
     <a href="/agb">AGB</a><span class="lg-sep">·</span>
     <a href="/datenschutz">Datenschutz</a><span class="lg-sep">·</span>
     <a href="/kuendigen">VERTRÄGE HIER KÜNDIGEN</a><span class="lg-sep">·</span>
     <a href="/widerruf">VERTRAG WIDERRUFEN</a>
   </nav>                                                                  */
.legal-footer {
  display: flex; flex-wrap: wrap;
  align-items: center; justify-content: center;
  gap: var(--space-3xs) var(--space-xs);
  padding: var(--space-xs) var(--space-s);
  max-inline-size: 37.5rem;   /* 600px — canonical footer width */
  margin-inline: auto;
  font-family: var(--font-card);
  font-size: var(--fs-tiny);
  color: var(--dark-fg-muted);
  text-align: center;
}
.legal-footer a {
  color: var(--dark-fg-muted); text-decoration: none;
  border-bottom: var(--bw-1) dotted var(--dark-fg-link-b);
  white-space: nowrap;   /* canonical: ссылки не разрываются по слову */
}
.legal-footer a:hover { color: var(--dark-fg-strong); }
/* Canonical emphasis: акцентная ссылка (VERTRÄGE HIER KÜNDIGEN) — solid + bold.
   Прод: <a href="/kuendigen" class="emph">…</a> */
.legal-footer a.emph {
  color: var(--dark-fg-strong);
  border-bottom: var(--bw-1) solid var(--dark-fg-strong);
  font-weight: var(--fw-bold);
}
.legal-footer .lg-sep {
  color: var(--dark-fg-ghost);
  user-select: none;
}

/* Э6 · install-footer column-stack на 320 (opt D, sandbox 3cae034e).
   Viewport @media вместо container query — тут единственный сценарий, где
   footer живёт в fixed-width host'е (.mob-shell), а не в flexible контейнере. */
@media (max-width: 400px) {
  .legal-footer--stack {
    flex-direction: column;
    align-items: center;
    gap: var(--space-2xs);
    padding-inline: 0;
    max-inline-size: none;
  }
  .legal-footer--stack .lg-sep { display: none; }
}


/* --- 3.18  .foot-hint — юр-hint в auth-footer (Э2) --------------------- */
/* HTML: <div class="foot-hint">Продолжая, вы соглашаетесь с <a>AGB</a>…</div> */
.foot-hint {
  padding: var(--space-xs) var(--space-s);
  font-family: var(--font-card);
  font-size: var(--fs-tiny);
  line-height: var(--lh-normal);
  color: var(--text-tertiary, #999);
  text-align: center;
}
.foot-hint a {
  color: var(--text-tertiary, #999);
  text-decoration: underline;
  text-underline-offset: 2px;   /* 2px — canonical baseline offset (декоративный) */
}


/* --- 3.19  .legal-strip — полоса settings/panel (Э3) ------------------- */
/* HTML: <div class="legal-strip legal-add">Rechtliches · Impressum · AGB · …</div> */
.legal-strip {
  padding: var(--space-xs) var(--space-s);
  font-family: var(--font-card);
  font-size: var(--fs-tiny);
  color: var(--text-secondary, #555);
  line-height: var(--lh-normal);
}


/* --- 3.20  .legal-action / .legal-note — settings row + explanation (Э3) */
/* HTML:
   <div class="legal-action">VERTRÄGE HIER KÜNDIGEN</div>
   <div class="legal-note">Расторжение договора Premium…</div>              */
.legal-action {
  color: var(--paper-accent);
  font-family: var(--font-ui);
  font-size: var(--fs-tiny);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-tab);
  text-transform: uppercase;
}
.legal-note {
  font-family: var(--font-card);
  font-size: var(--fs-tiny);
  color: var(--text-secondary, #555);
  line-height: var(--lh-normal);
}


/* --- 3.21  .e7-strip / .e7-strip-l/-t/-s/-c — под-плеерная полоса (Э7) - */
/* HTML:
   <div class="e7-strip legal-add">
     <span class="e7-strip-l">
       <span>
         <div class="e7-strip-t">VERTRAG WIDERRUFEN</div>
         <div class="e7-strip-s">отозвать договор · один тап → форма</div>
       </span>
     </span>
     <span class="e7-strip-c">›</span>
   </div>                                                                  */
.e7-strip {
  /* Fixed positioning: сидит на одном «этаже» с плеером внизу viewport'а,
     но НИЖЕ плеера визуально (между плеером и safe-area-floor). Иначе в
     нормальном потоке fixed-плеер накрывает её.
     Плеер в prod:  bottom: env(safe-area-inset-bottom) → должен подняться
                    на --e7-strip-height, чтобы освободить место (изменение
                    в prod style.css — см. handoff §2.2).
     Синхрон видимости с плеером через body.card-view / body.sv-sheet-open. */
  position: fixed;
  bottom: env(safe-area-inset-bottom);
  left: 0; right: 0;
  z-index: 999;   /* ниже player z-index:1000, чтобы player wins при overlap */
  transform: translateY(calc(100% + env(safe-area-inset-bottom)));
  transition: transform var(--transition-slide);

  flex-shrink: 0;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-s);
  background: var(--surface);
  color: var(--text-strong);
  border-top: var(--bw-1) solid var(--border-light, #EBEBEB);
  font-family: var(--font-card);
  cursor: pointer;
}
body.card-view .e7-strip { transform: translateY(0); }
body.sv-sheet-open .e7-strip {
  transform: translateY(calc(100% + env(safe-area-inset-bottom)));
}
/* v2.7 (2026-08-27): belt+suspenders suppressor для body.pv-context — mirror
   к style.css:7628 паттерну для .global-safe-bottom. JS в
   PersonalVocabController снимает card-view при показе PV panel, но
   IntersectionObserver на scroll может вернуть card-view → transform:translateY(0)
   → полоса всплывает над PV panel (owner-report iPhone 2026-08-25). Одно
   правило накрывает PV panel + все её подэкраны (word-list-sub-screen,
   pvFormBand create/rename, moveOverlay, deleteConfirmDim) — все живут в
   body.pv-context. */
body.pv-context .e7-strip {
  transform: translateY(calc(100% + env(safe-area-inset-bottom)));
}
.e7-strip-l { display: inline-flex; align-items: center; min-inline-size: 0; }
.e7-strip-t {
  font-family: var(--font-card);
  font-size: var(--fs-h2);
  font-weight: var(--fw-semibold);
  color: var(--text-strong);
  line-height: 12px;   /* 12px — canonical baseline-basis (feedback_typography_leading_basis) */
}
.e7-strip-s {
  font-family: var(--font-card);
  font-size: var(--fs-meta);
  color: var(--text-secondary, #555);
  line-height: 12px;
}
.e7-strip-c {
  font-family: var(--font-card);
  font-size: var(--fs-h1);
  color: var(--text-tertiary, #999);
}


/* --- 3.21.compact  Компактное состояние Э7 (К-26 · auto-collapse 5s) ---- */
/* Триггер: body.e7-compact (JS ставит после 5000ms при первом входе в
   card-view за session, sessionStorage.e7CompactSeen='1'). Persistence:
   sessionStorage — сброс на page reload. Каскад: пересчёт --e7-strip-height
   через body-scope переопределяет root default → плеер (style.css:7387)
   автоматически опускается на дельту (47→24 = 23px ближе к safe-area).      */

body.e7-compact { --e7-strip-height: var(--e7-strip-height-compact); }

body.e7-compact .e7-strip {
  background: var(--dark-bg);
  color:      var(--dark-fg-strong);
  padding:    var(--space-3xs) var(--space-s) 0;
  border-top-color: var(--dark-bg);
  transition:
    background       var(--transition-swap),
    color            var(--transition-swap),
    padding          var(--transition-swap),
    border-top-color var(--transition-swap),
    transform        var(--transition-slide);
}

/* Обёртка e7-strip-l inline — DE + RU в одну строку через ellipsis */
body.e7-compact .e7-strip-l > span { display: inline; min-inline-size: 0; }

/* DE в компакте: canon ярус --fs-lbl (11px UPPER label) */
body.e7-compact .e7-strip-t {
  display:        inline;
  font-family:    var(--font-ui);
  font-size:      var(--fs-lbl);
  font-weight:    var(--fw-bold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color:          var(--dark-fg-strong);
  line-height:    var(--lh-tight);
  transition:
    font-size       var(--transition-swap),
    font-weight     var(--transition-swap),
    letter-spacing  var(--transition-swap),
    color           var(--transition-swap);
}

/* RU в компакте: canon ярус --fs-tiny sentence на --dark-fg-muted */
body.e7-compact .e7-strip-s {
  display:     inline;
  font-family: var(--font-card);
  font-size:   var(--fs-tiny);
  color:       var(--dark-fg-muted);
  line-height: var(--lh-tight);
  transition:
    font-size var(--transition-swap),
    color     var(--transition-swap);
}
/* Разделитель " · " через ::before — HTML не трогаем */
body.e7-compact .e7-strip-s::before {
  content: ' · ';
  color:   var(--dark-fg-ghost);
  padding: 0 var(--space-3xs);
}

/* Chevron компакт: canon --dark-fg-muted, --fs-meta */
body.e7-compact .e7-strip-c {
  color:     var(--dark-fg-muted);
  font-size: var(--fs-meta);
  transition:
    color     var(--transition-swap),
    font-size var(--transition-swap);
}


/* --- 3.22  .acc-row-* — legal rows в профиле (Э8) ---------------------- */
/* HTML:
   <div class="acc-row acc-row--kuendigen legal-add">
     <span class="acc-lbl-stack">
       <span class="acc-lbl-de">VERTRÄGE HIER KÜNDIGEN</span>
       <span class="acc-lbl-ru">расторгнуть договор</span>
     </span>
     <span class="acc-row-chev">›</span>
   </div>                                                                  */
.acc-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-s);
}
.acc-row--kuendigen  { align-items: center; }
.acc-row--tariff,
.acc-row--status     { align-items: baseline; }
.acc-lbl-stack {
  display: flex; flex-direction: column;
  gap: var(--space-3xs);
  flex: 1; min-inline-size: 0;
}
.acc-lbl-de {
  font-family: var(--font-ui);
  font-size: var(--fs-meta);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-tab);
  color: var(--text-strong);
  line-height: 1;
}
.acc-row--kuendigen .acc-lbl-de { text-transform: uppercase; }
/* Canonical: KÜNDIGEN в профиле идёт стандартным цветом текста --text-strong;
   красный акцент — только в settings .legal-action и в prod-варианте
   .nav-row.kuendigen для sec-Subscription (Э9). Профильная строка (Э8)
   без цвет-акцента — она просто UPPER метка с обычной силой веса. */
.acc-lbl-ru {
  font-family: var(--font-card);
  font-size: var(--fs-meta);
  font-weight: var(--fw-regular);
  color: var(--text-secondary, #555);
  line-height: 1;
}
.acc-row-chev {
  color: var(--text-tertiary, #999);
  font-family: var(--font-card);
  font-size: var(--fs-h1);
  flex-shrink: 0;
}
.acc-delete {
  color: var(--paper-accent);
  font-family: var(--font-ui);
  font-size: var(--fs-tiny);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-tab);
  text-transform: uppercase;
}
/* Disabled state · #profileDeleteBtn — это <div role="button">, не <button>,
   поэтому HTML-атрибут [disabled] на нём не работает (browser ignore).
   JS в MyAccountController.js:212-217 ставит одновременно:
     - aria-disabled="true" (accessibility-canonical)
     - .disabled class (visual-canonical, покрывает старые браузеры)
   CSS покрывает оба selector'а. */
.acc-delete.disabled,
.acc-delete[aria-disabled="true"] {
  color: var(--text-tertiary, #999);
  opacity: 0.55;
  cursor: not-allowed;
  /* К-39: pointer-events разрешены — клик доходит до JS, реализующего
     reveal-hint паттерн (аналог К-26 sessionStorage.e7CompactSeen).
     _handleDelete проверяет aria-disabled и ветвит: hint reveal +
     session-persist вместо delete flow. */
  pointer-events: auto;
}
.acc-delete-note {
  padding: var(--space-2xs) var(--space-s);
  font-family: var(--font-card);
  font-size: var(--fs-tiny);
  color: var(--text-secondary, #555);
  line-height: var(--lh-normal);
  font-style: italic;
}


/* --- 3.23  .nav-row.kuendigen / .s-block-cta — settings subscription (Э9) */
.nav-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-s);
  text-decoration: none;
}
.nav-row.kuendigen .lbl-de { color: var(--paper-accent); }
.lbl-stack {
  display: flex; flex-direction: column;
  gap: var(--space-3xs);
  flex: 1; min-inline-size: 0;
}
.lbl-de {
  font-family: var(--font-ui);
  font-size: var(--fs-tiny);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-tab);
  text-transform: uppercase;
  color: var(--text-strong);
}
.lbl-ru {
  font-family: var(--font-card);
  font-size: var(--fs-tiny);
  color: var(--text-secondary, #555);
}

.s-block-title {
  font-family: var(--font-ui);
  font-size: var(--fs-lbl);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-strong);
}
.s-block-subtitle {
  font-family: var(--font-card);
  font-size: var(--fs-tiny);
  color: var(--text-secondary, #555);
}
.s-block-cta {
  display: block;
  inline-size: 100%;
  min-block-size: var(--cta-height);
  padding: var(--space-xs) var(--space-s);
  background: var(--paper-text); color: var(--paper-bg);
  border: none;
  cursor: pointer;
  font-family: var(--font-ui);
  font-size: var(--fs-body);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
}
.s-block-cta--muted {
  background: transparent; color: var(--text-strong);
  border: var(--bw-1) solid var(--text-strong);
}


/* --- 3.24  .plan-kuendigung / .tax-note — правовые примечания (Э10 pricing) */
.plan-kuendigung {
  font-family: var(--font-card);
  font-size: var(--fs-tiny);
  color: var(--text-secondary, #555);
  line-height: var(--lh-normal);
}
.tax-note {
  font-family: var(--font-card);
  font-size: var(--fs-tiny);
  color: var(--text-tertiary, #999);
  font-style: italic;
}


/* --- 3.25  .mob-tag — тег install-page под скриншотами (Э6) ----------- */
.mob-tag {
  margin-block-start: var(--space-m);
  font-family: var(--font-ui);
  font-size: var(--fs-tiny);
  letter-spacing: var(--tracking-tab);
  text-transform: uppercase;
  color: var(--dark-fg-muted);
  text-align: center;
}


/* --- 3.26  .btn-cta / .footer-logo / .footer-slogan — landing footer (Э5) */
.footer-logo {
  font-family: var(--font-ui);
  font-size: var(--fs-h1);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--dark-fg-strong);
}
.footer-slogan {
  font-family: var(--font-card);
  font-size: var(--fs-tiny);
  color: var(--dark-fg-muted);
  font-style: italic;
}


/* ============================================================================
   §4  LEGACY / MOCKUP-ONLY — НЕ переносить в prod HTML
   ============================================================================
   Эти классы живут ТОЛЬКО в файлах-мокапах cc-jr/legal-layer/*.html как
   контейнер-обвязка (телефонная рамка, статус-бар, паспорт-блок, crumbs).
   В prod app / standalone правовых страницах их НЕТ и не должно быть.

   MOCKUP-only:
     .newscreen       — <article> обёртка одного экрана в мокапе
     .frame-pair      — flex-контейнер двух рамок DE + RU в мокапе
     .frame-outer     — обёртка рамки в мокапе
     .frame           — «телефонная рамка» 375px в мокапе
     .frame-inner     — внутренний контейнер рамки в мокапе
     .frame.desktop   — десктопная 1100px рамка в мокапе
     .frame-label     — помета над рамкой (MOCKUP · метка)
     .frame-note      — примечание между рамками (MOCKUP)
     .stbar / .bars / .batt — iPhone статус-бар (MOCKUP)
     .head / .lbl / .added  — паспорт-блок экрана (MOCKUP · спецификация)
     nav.crumbs             — хлебные крошки мокап-навигации
     h1.pg / .lead          — заголовок и подпись страницы мокапа
     body.page              — тело мокап-контейнера

   Если один из этих классов появляется в prod HTML — это баг переноса.
   ============================================================================ */