/* PriceFox — стиль вечнозелёных статей-листиклов («Die 15 besten …»).
   Дизайн-система: docs/design-system.md, вариант A «Redaktion» (выбор Алекса 18.09.2026).
   Применяется ТОЛЬКО внутри .pf-listicle — лендинг и deal-страницы остаются на tokens.css.

   Шрифты self-hosted (латиница), как и остальные на сайте: Google Fonts с сервера
   не запрашиваются — это осознанное решение по GDPR для DACH. */

@font-face{
  font-family:'Newsreader'; src:url('/static/fonts/Newsreader-400.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Newsreader'; src:url('/static/fonts/Newsreader-600.woff2') format('woff2');
  font-weight:600; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Public Sans'; src:url('/static/fonts/PublicSans-400.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Public Sans'; src:url('/static/fonts/PublicSans-600.woff2') format('woff2');
  font-weight:600; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Public Sans'; src:url('/static/fonts/PublicSans-700.woff2') format('woff2');
  font-weight:700; font-style:normal; font-display:swap;
}

.pf-listicle{
  --l-ground:#FAF9F7; --l-surface:#FFFFFF; --l-ink:#1A1A18; --l-muted:#6E6C66;
  --l-line:#E4E1DA; --l-accent:#1F4A3C; --l-accent-ink:#FFFFFF; --l-tint:#EDF1EE;

  --ground:var(--l-ground); --surface:var(--l-surface); --ink:var(--l-ink);
  --muted:var(--l-muted); --line:var(--l-line); --accent:var(--l-accent);
  --accent-ink:var(--l-accent-ink); --tint:var(--l-tint);

  --measure:62ch; --gap:48px;
  --display:'Newsreader',Georgia,'Times New Roman',serif;
  --text:'Public Sans',system-ui,-apple-system,sans-serif;

  background:var(--ground); color:var(--ink);
  font-family:var(--text); font-size:17px; line-height:1.65;
  padding:40px 20px 96px;
}

/* ── Каркас статьи ─────────────────────────────────────────────── */
.pf-listicle__inner{ max-width:var(--measure); margin:0 auto; }
.pf-listicle__eyebrow{
  font-size:12px; letter-spacing:.11em; text-transform:uppercase;
  color:var(--accent); margin:0 0 10px;
}
.pf-listicle h1{
  font-family:var(--display); font-weight:600; letter-spacing:-.02em;
  font-size:clamp(30px,6vw,42px); line-height:1.12; text-wrap:balance; margin:0 0 14px;
}
.pf-listicle__byline{
  font-size:13px; color:var(--muted); display:flex; gap:10px; flex-wrap:wrap; margin:0 0 18px;
}
.pf-disclosure{
  font-size:13px; line-height:1.5; color:var(--muted);
  background:var(--tint); border-radius:8px; padding:10px 14px; margin:0 0 var(--gap);
}
.pf-listicle__body{ hyphens:auto; }
.pf-listicle__body > p{ margin:0 0 1em; }
.pf-listicle__body > p:first-of-type{ font-size:19px; }
.pf-listicle__body h2{
  font-family:var(--display); font-weight:600; letter-spacing:-.01em;
  font-size:clamp(22px,5vw,28px); line-height:1.2; text-wrap:balance;
  margin:calc(var(--gap) * 1.2) 0 14px;
}
.pf-listicle__body h3{
  font-family:var(--display); font-weight:600; font-size:clamp(19px,4.4vw,24px);
  line-height:1.22; text-wrap:balance; margin:var(--gap) 0 0;
}
.pf-listicle__body a{ color:var(--accent); text-decoration:underline; text-underline-offset:2px; }
.pf-listicle__body ul,.pf-listicle__body ol{ padding-left:20px; }
.pf-listicle__body li{ margin-bottom:8px; }
.pf-listicle__body li::marker{ color:var(--accent); }

/* ── Товарный блок ─────────────────────────────────────────────── */
.pf-pick{ display:grid; gap:14px; margin:18px 0 var(--gap); }
.pf-pick__shot{
  display:block; border:1px solid var(--line); border-radius:10px; background:var(--surface);
  aspect-ratio:4/3; overflow:hidden;
}
.pf-pick__shot img{ width:100%; height:100%; object-fit:contain; display:block; padding:14px; }
.pf-pick__meta{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; font-size:14px; color:var(--muted); }
.pf-tag{
  font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--accent);
  border:1px solid var(--accent); border-radius:999px; padding:3px 9px;
}
.pf-stars{ color:var(--accent); letter-spacing:.06em; }
.pf-cta{
  display:inline-flex; align-items:center; justify-content:center; min-height:48px;
  padding:0 22px; border-radius:8px; background:var(--accent); color:var(--accent-ink);
  font-weight:600; font-size:15px; text-decoration:none; width:fit-content;
}
.pf-cta:hover{ filter:brightness(1.1); }
.pf-cta:focus-visible{ outline:2px solid var(--ink); outline-offset:3px; }
.pf-pick--gone{
  border:1px dashed var(--line); border-radius:10px; padding:14px;
  color:var(--muted); font-size:14px;
}

/* Ритм: каждый 4-й товар — во всю ширину, чтобы лента не была монотонной */
.pf-pick--wide{ max-width:min(840px,100%); margin-inline:auto; }
.pf-pick--wide .pf-pick__shot{ aspect-ratio:16/9; }

/* ── Секция «Worauf achten» и хвост ────────────────────────────── */
.pf-criteria{
  background:var(--surface); border:1px solid var(--line); border-radius:12px;
  padding:22px; margin-top:var(--gap);
}
.pf-criteria h2{ font-family:var(--display); font-size:22px; margin:0 0 14px; font-weight:600; }
.pf-listicle__foot{
  max-width:var(--measure); margin:var(--gap) auto 0; padding-top:18px;
  border-top:1px solid var(--line); color:var(--muted); font-size:13px;
}
.pf-listicle__foot a{ color:var(--accent); }

@media (max-width:640px){
  .pf-listicle{ padding:28px 16px 72px; --gap:36px; }
}
@media (prefers-reduced-motion:reduce){ .pf-cta{ transition:none; } }

/* ── Быстрый выбор (удержание: ответ в первом экране) ──────────── */
.pf-quick{
  background:var(--surface); border:1px solid var(--line); border-radius:12px;
  padding:20px; margin:0 0 var(--gap);
}
.pf-quick__title{ font-family:var(--display); font-size:20px; font-weight:600; margin:0 0 16px; }
.pf-quick__grid{ display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); }
/* Компактная строка: фото слева, текст справа. Квадрат во всю ширину съедал экран
   целиком (скриншот Алекса 18.09) — а смысл блока в том, чтобы три позиции
   помещались в первый экран. */
.pf-quick__item{
  display:grid; grid-template-columns:88px 1fr; column-gap:12px; row-gap:6px;
  align-items:start; align-content:start;
}
.pf-quick__item > *{ grid-column:2; }
.pf-quick__shot{
  grid-column:1; grid-row:1 / span 4; align-self:center;
  width:88px; aspect-ratio:1; border:1px solid var(--line); border-radius:8px;
  background:var(--ground); display:block; overflow:hidden;
}
.pf-quick__shot img{ width:100%; height:100%; object-fit:contain; display:block; padding:6px; }
.pf-quick__name{ font-size:15px; line-height:1.35; font-weight:600; }
.pf-quick__meta{ font-size:13px; color:var(--muted); }
.pf-cta--sm{ min-height:40px; padding:0 16px; font-size:14px; }

/* ── Якорная навигация по группам (требование Тома, 18.09) ─────── */
.pf-jump{ margin:0 0 var(--gap); }
.pf-jump__label{
  display:block; font-size:11.5px; letter-spacing:.09em; text-transform:uppercase;
  color:var(--muted); margin-bottom:8px;
}
.pf-jump ul{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:6px; }
.pf-jump a{
  display:inline-block; font-size:13.5px; line-height:1.2; text-decoration:none; color:var(--accent);
  border:1px solid var(--line); border-radius:999px; padding:6px 11px; background:var(--surface);
}
.pf-jump a:hover{ border-color:var(--accent); }
.pf-listicle__body h2{ scroll-margin-top:16px; }

/* ============================================================
   Главная «Редакция» (.pf-home) — витрина блога.
   Те же токены варианта A, что и у листикла: главная и статья
   должны выглядеть одним изданием. Скоуп отдельный, чтобы не
   задеть старые deal-страницы, которые живут на tokens.css.
   ============================================================ */

.pf-home{
  --ground:#FAF9F7; --surface:#FFFFFF; --ink:#1A1A18; --muted:#6E6C66;
  --line:#E4E1DA; --accent:#1F4A3C; --accent-ink:#FFFFFF; --tint:#EDF1EE;
  --display:'Newsreader',Georgia,'Times New Roman',serif;
  --text:'Public Sans',system-ui,-apple-system,sans-serif;

  background:var(--ground); color:var(--ink);
  font-family:var(--text); font-size:17px; line-height:1.65;
  padding:0 20px 72px;
}
.pf-home a{color:inherit}
.pf-home img{max-width:100%; height:auto; display:block}

/* Шапка: марка, одна строка позиционирования, дата. Hero-баннера нет сознательно —
   его нет ни у одного разобранного конкурента в нише. */
.pf-home__masthead{
  max-width:1080px; margin:0 auto; padding:40px 0 28px;
  border-bottom:3px solid var(--ink); text-align:center;
}
.pf-home__wordmark{
  font-family:var(--display); font-weight:600; font-size:44px; letter-spacing:-.02em;
  text-decoration:none; display:inline-flex; align-items:center; gap:14px;
  color:var(--ink);
}
/* Знак — фокус-скобки. 19.09.2026, заменил лису PriceFox.
   Размер привязан к кеглю вордмарка (.72em ≈ 32px при 44px), чтобы знак и слово
   всегда меняли размер вместе. Цвет — акцент «Редакции», НЕ оранжевый --pf-accent. */
.pf-home__mark{
  width:.86em; height:.86em; flex-shrink:0; fill:var(--accent); display:block;
}
.pf-home__claim{margin:10px auto 0; max-width:52ch; color:var(--muted); font-size:17px}
.pf-home__date{
  margin:14px 0 0; font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted);
}

/* Две колонки: материалы и доверие. На мобильном — в один поток,
   боковая колонка уходит ПОД материалы (сначала контент, потом «о нас»). */
.pf-home__grid{
  max-width:1080px; margin:0 auto; display:grid; gap:56px;
  grid-template-columns:1fr; padding-top:40px;
}
@media (min-width:920px){
  .pf-home__grid{grid-template-columns:minmax(0,1fr) 300px; gap:64px}
}

/* --- Ведущий материал: фото → кикер → заголовок → изложение → одна кнопка. --- */
.pf-lead__shot{display:block; margin-bottom:22px}
.pf-lead__shot img{
  width:100%; aspect-ratio:16/9; object-fit:cover;
  border:1px solid var(--line); border-radius:14px; background:var(--surface);
}
.pf-lead__kicker{
  margin:0 0 8px; font-size:12px; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--accent);
}
.pf-lead__title{
  font-family:var(--display); font-weight:600; font-size:38px; line-height:1.14;
  letter-spacing:-.02em; margin:0 0 14px;
}
.pf-lead__title a{text-decoration:none}
.pf-lead__title a:hover{text-decoration:underline; text-underline-offset:4px}
.pf-lead__excerpt{margin:0 0 14px; max-width:62ch; hyphens:auto}
.pf-lead__meta{margin:0 0 22px; font-size:14px; color:var(--muted)}
@media (min-width:920px){ .pf-lead__title{font-size:46px} }

/* --- Остальные материалы: компактные строки, а не вторая крупная сетка.
       При одной статье раздела просто нет, при пятидесяти он не давит. --- */
.pf-more{margin-top:64px; padding-top:32px; border-top:1px solid var(--line)}
.pf-more__title,.pf-ressorts__title{
  font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted); margin:0 0 20px;
}
.pf-more__list{list-style:none; margin:0; padding:0; display:grid; gap:24px}
.pf-more__item{display:grid; grid-template-columns:120px 1fr; gap:16px; align-items:start}
.pf-more__shot img{
  width:120px; aspect-ratio:3/2; object-fit:cover;
  border:1px solid var(--line); border-radius:10px; background:var(--surface);
}
.pf-more__kicker{
  margin:0 0 4px; font-size:11px; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--accent);
}
.pf-more__body h3{
  font-family:var(--display); font-weight:600; font-size:20px; line-height:1.25;
  margin:0 0 6px;
}
.pf-more__body h3 a{text-decoration:none}
.pf-more__body h3 a:hover{text-decoration:underline; text-underline-offset:3px}
.pf-more__meta{margin:0; font-size:13px; color:var(--muted)}

/* --- Рубрики со счётчиками (приём diymakerszone). --- */
.pf-ressorts{margin-top:56px; padding-top:32px; border-top:1px solid var(--line)}
.pf-ressorts__list{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:10px}
.pf-ressorts__list a{
  display:inline-flex; align-items:center; gap:8px; text-decoration:none;
  border:1px solid var(--line); border-radius:999px; padding:9px 16px;
  background:var(--surface); font-size:15px;
}
.pf-ressorts__list a:hover{border-color:var(--accent); color:var(--accent)}
.pf-ressorts__list span{color:var(--muted); font-size:13px}

/* --- Колонка доверия. --- */
.pf-home__side{display:grid; gap:28px; align-content:start}
.pf-box{
  background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:22px;
}
.pf-box--tint{background:var(--tint); border-color:transparent}
.pf-box p{margin:0 0 10px; font-size:15px; line-height:1.6}
.pf-box p:last-child{margin-bottom:0}
.pf-box__title{
  font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted); margin:0 0 12px;
}
.pf-principles{list-style:none; margin:0; padding:0; display:grid; gap:16px}
.pf-principles li{font-size:15px; line-height:1.55}
.pf-principles__n{
  display:block; font-family:var(--display); font-size:15px; color:var(--accent);
  font-weight:600; margin-bottom:2px;
}
.pf-principles__d{display:block; color:var(--muted); margin-top:2px}

.pf-empty{padding:56px 0}
.pf-empty h1{font-family:var(--display); font-weight:600; font-size:38px; margin:0 0 12px}

.pf-home__foot{
  max-width:1080px; margin:72px auto 0; padding-top:24px;
  border-top:1px solid var(--line); display:flex; flex-wrap:wrap; gap:8px 24px;
  justify-content:space-between; font-size:14px; color:var(--muted);
}
.pf-home__foot p{margin:0}

@media (prefers-color-scheme:dark){
  .pf-home{
    --ground:#14150F; --surface:#1C1E17; --ink:#F2F1EC; --muted:#A3A198;
    --line:#2E3129; --accent:#7FB79F; --accent-ink:#11150F; --tint:#1E2A23;
  }
}