/* ============================================================
   Kenki – Ratgeber (/wissen/) article styles.
   Loads AFTER styles.css and reuses its tokens. German-only,
   static pages (no data-i18n), SEO-first: content visible
   immediately, no reveal animations.
   ============================================================ */

/* --- Article shell --- */
.art-main { padding-bottom: 40px; }
.art-hero { padding: clamp(48px, 8vh, 96px) 0 clamp(28px, 4vh, 44px); }
.art-hero .eyebrow { margin-bottom: 18px; }
.art-hero h1 { font-size: clamp(2.1rem, 4.6vw, 3.4rem); max-width: 22ch; }
.art-hero .lede { margin-top: 18px; }
.art-meta {
  display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 22px;
  font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--text-faint);
}

/* --- Body copy --- */
.art-body { font-size: 17px; line-height: 1.7; color: var(--text-dim); }
.art-body > * + * { margin-top: 18px; }
.art-body h2 {
  font-size: clamp(1.45rem, 2.4vw, 1.9rem); color: var(--text);
  margin-top: 52px; scroll-margin-top: calc(var(--nav-h) + 20px);
}
.art-body h3 { font-size: 1.15rem; color: var(--text); margin-top: 34px; font-family: var(--f-sans); font-weight: 600; }
.art-body p { max-width: 70ch; }
.art-body ul, .art-body ol { max-width: 70ch; padding-left: 22px; }
.art-body li { margin-bottom: 8px; }
.art-body li::marker { color: var(--sage); }
.art-body a { color: var(--sage); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.art-body strong { color: var(--text); }

/* --- TOC --- */
.art-toc {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 20px 24px; margin-top: 32px;
}
.art-toc b { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-faint); font-weight: 500; }
.art-toc ol { margin: 12px 0 0; padding-left: 20px; columns: 2; column-gap: 32px; }
.art-toc li { margin-bottom: 7px; break-inside: avoid; font-size: 14.5px; }
.art-toc a { color: var(--text-dim); text-decoration: none; }
.art-toc a:hover { color: var(--sage); }
@media (max-width: 620px) { .art-toc ol { columns: 1; } }

/* --- Tables --- */
.art-table-wrap { overflow-x: auto; margin-top: 22px; border: 1px solid var(--line); border-radius: var(--r-md); }
.art-body table { border-collapse: collapse; width: 100%; font-size: 14.5px; }
.art-body th, .art-body td { padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--line); }
.art-body th { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-faint); font-weight: 500; background: var(--surface); }
.art-body tr:last-child td { border-bottom: 0; }
.art-body td { color: var(--text-dim); font-variant-numeric: tabular-nums; }
.art-body td:first-child { color: var(--text); font-weight: 500; }

/* --- Callouts --- */
.art-note {
  background: var(--sage-wash); border-left: 3px solid var(--sage);
  border-radius: 8px; padding: 16px 20px; font-size: 15px; max-width: 70ch;
}
.art-note b { color: var(--sage); }

/* --- Inline conversion card --- */
.art-cta {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: clamp(24px, 4vw, 36px);
  margin: 44px 0; position: relative; overflow: hidden;
  display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: center;
}
.art-cta::before {
  content: ""; position: absolute; right: -20%; top: -60%; width: 55%; aspect-ratio: 1;
  background: radial-gradient(circle, color-mix(in srgb, var(--sage) 24%, transparent), transparent 65%);
  filter: blur(40px); pointer-events: none;
}
.art-cta img { width: 52px; height: 52px; border-radius: 13px; box-shadow: var(--shadow-rest); }
.art-cta-body { position: relative; }
.art-cta-body b { display: block; font-family: var(--f-display); font-weight: 700; font-size: 1.15rem; letter-spacing: -0.015em; color: var(--text); }
.art-cta-body p { font-size: 14.5px; margin-top: 6px; max-width: 52ch; }
.art-cta .btn { margin-top: 14px; }
@media (max-width: 560px) { .art-cta { grid-template-columns: 1fr; } .art-cta img { width: 44px; height: 44px; } }

/* --- End CTA (store badges) --- */
.art-cta-final { display: block; }
.art-cta-final .store-row { margin-top: 18px; position: relative; }

/* --- Author / trust box --- */
.art-author {
  display: flex; gap: 16px; align-items: flex-start; margin-top: 56px;
  padding-top: 28px; border-top: 1px solid var(--line); font-size: 14px;
}
.art-author img { width: 44px; height: 44px; border-radius: 12px; flex: none; }
.art-author b { color: var(--text); display: block; margin-bottom: 3px; }
.art-author p { color: var(--text-faint); max-width: 60ch; }

/* --- Sources --- */
.art-sources { margin-top: 34px; font-size: 13.5px; color: var(--text-faint); }
.art-sources b { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 500; }
.art-sources ul { padding-left: 20px; margin-top: 10px; }
.art-sources li { margin-bottom: 5px; }
.art-sources a { color: var(--text-dim); }

/* --- Related articles --- */
.art-related { margin-top: 56px; }
.art-related h2 { font-size: 1.3rem; color: var(--text); }
.art-related-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 18px; }
.art-related-grid a {
  display: flex; flex-direction: column; gap: 8px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 20px 22px; text-decoration: none; color: var(--text);
  transition: border-color 0.2s var(--ease), transform 0.3s var(--ease);
}
.art-related-grid a:hover { border-color: var(--sage); transform: translateY(-2px); }
.art-related-grid b { font-family: var(--f-display); font-weight: 700; font-size: 1.02rem; letter-spacing: -0.01em; }
.art-related-grid span { font-size: 13.5px; color: var(--text-dim); }
@media (max-width: 620px) { .art-related-grid { grid-template-columns: 1fr; } }

/* --- Sticky mobile CTA bar --- */
.art-stickybar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  display: none; align-items: center; justify-content: space-between; gap: 14px;
  padding: 12px clamp(16px, 4vw, 24px);
  padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-top: 1px solid var(--line);
  transform: translateY(110%); transition: transform 0.35s var(--ease);
}
.art-stickybar.is-in { transform: none; }
.art-stickybar span { font-size: 13.5px; color: var(--text-dim); line-height: 1.3; }
.art-stickybar .btn { flex: none; }
@media (max-width: 720px) { .art-stickybar { display: flex; } body.has-stickybar { padding-bottom: 84px; } }

/* --- Ratgeber index --- */
.wissen-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin-top: clamp(30px, 5vw, 48px); }
.wissen-card {
  display: flex; flex-direction: column; gap: 12px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: clamp(24px, 3vw, 34px); text-decoration: none; color: var(--text);
  transition: border-color 0.2s var(--ease), transform 0.3s var(--ease);
}
.wissen-card:hover { border-color: var(--sage); transform: translateY(-3px); }
.wissen-card h2 { font-size: clamp(1.2rem, 2vw, 1.5rem); }
.wissen-card p { font-size: 14.5px; color: var(--text-dim); }
.wissen-card .wc-more { margin-top: auto; padding-top: 10px; color: var(--sage); font-size: 14px; font-weight: 600; }
.wissen-card .wc-more::after { content: " \2192"; }
@media (max-width: 720px) { .wissen-grid { grid-template-columns: 1fr; } }