/* ── Methodik & FAQ ───────────────────────────────────────────────────────────
   Gemeinsame Optik fuer info.html (DE) und info.en.html (EN). Bewusst eigene,
   schlanke Datei statt Wiederverwendung des App-CSS: die App-Styles sind auf das
   Panel-/Karten-Layout zugeschnitten, hier ist es eine Lesespalte. Farben, Theme-
   Mechanik (html[data-theme]) und Header-Optik bleiben identisch zur App. */
* { box-sizing: border-box; }
:root { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }
body { margin: 0; font-family: system-ui, sans-serif; color: #1a1a1a; background: #fff;
  line-height: 1.6; }

header { padding: 12px 16px; background: #0f3d2e; color: #fff; }
header .top-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
header h1 { font-size: 18px; margin: 0; font-weight: 700; }
header a.home { color: #cfe3d9; text-decoration: none; font-size: 13px; font-weight: 600; }
header a.home:hover { color: #fff; text-decoration: underline; }
.head-controls { display: flex; gap: 6px; flex: none; }
.head-btn { padding: 5px 9px; font-size: 12px; font-weight: 700; background: rgba(255,255,255,.14);
  color: #fff; border: 1px solid rgba(255,255,255,.28); border-radius: 8px; cursor: pointer;
  line-height: 1; min-height: 30px; text-decoration: none; display: inline-flex; align-items: center; }
.head-btn:hover { background: rgba(255,255,255,.24); }

main { max-width: 760px; margin: 0 auto; padding: 24px 16px 40px; }
.lead { font-size: 16px; color: #33443d; margin: 0 0 28px; }
h2 { font-size: 20px; color: #0f3d2e; margin: 34px 0 10px; padding-top: 14px;
  border-top: 1px solid #e3ece7; }
h2:first-of-type { border-top: none; padding-top: 0; }
h3 { font-size: 15px; color: #0f3d2e; margin: 22px 0 5px; }
p { margin: 0 0 12px; font-size: 15px; }
main p:last-child { margin-bottom: 0; }
.method p { margin-bottom: 16px; }
.method strong { color: #0f3d2e; }
/* Inhaltsverzeichnis der FAQ — auf einer langen Seite die schnellste Abkuerzung. */
.toc { margin: 0 0 8px; padding: 12px 16px; background: #f0f7f4; border: 1px solid #d6e2dc;
  border-radius: 10px; }
.toc ol { margin: 0; padding-left: 20px; font-size: 14px; line-height: 1.8; }
.toc a { color: #14532d; }
.note { margin: 18px 0 0; padding: 10px 14px; background: #f0f7f4; border: 1px solid #d6e2dc;
  border-radius: 10px; font-size: 14px; }
code { background: #f0f4f2; border: 1px solid #dde6e1; border-radius: 4px; padding: 0 4px;
  font-size: 13px; }
a { color: #0f3d2e; }

.site-foot { padding: 16px; background: #f4f7f5; color: #566; font-size: 12px; line-height: 1.6;
  border-top: 1px solid #dde6e1; }
.site-foot .inner { max-width: 760px; margin: 0 auto; }
.site-foot a { color: #0f3d2e; }
.site-foot strong { color: #0f3d2e; }
.site-foot p { margin: 5px 0; font-size: 12px; }

@media (max-width: 760px) {
  main { padding: 18px 14px 32px; }
  h2 { font-size: 18px; }
  header h1 { font-size: 16px; }
}

/* ── Dark Mode ── identische Mechanik wie die App: html[data-theme="dark"]. ── */
:root[data-theme="dark"] body { background: #14181c; color: #e6eae8; }
:root[data-theme="dark"] .lead { color: #b6c4bd; }
:root[data-theme="dark"] h2,
:root[data-theme="dark"] h3,
:root[data-theme="dark"] .method strong,
:root[data-theme="dark"] a,
:root[data-theme="dark"] .site-foot a,
:root[data-theme="dark"] .site-foot strong { color: #6bcf9c; }
:root[data-theme="dark"] h2 { border-top-color: #2c343a; }
:root[data-theme="dark"] .toc,
:root[data-theme="dark"] .note { background: #18231d; border-color: #2c3a33; }
:root[data-theme="dark"] .toc a { color: #7fd6a6; }
:root[data-theme="dark"] code { background: #232b30; border-color: #333d43; color: #cdd8d2; }
:root[data-theme="dark"] .site-foot { background: #101417; border-top-color: #262d31; color: #93a49c; }