/* styles-v4-mobile.css — site mobile layer (Phase 2)
   Single outer @media wrapper, zero !important.
   Spec: docs/ui-mobile-spec.md */

@media (max-width: 768px) {

/* --- Tokens override --- */
:root {
  --type-hero: 1.75rem;
  --type-h1: 1.25rem;
  --type-h2: 1rem;
}

/* --- German hyphens --- */
[lang="de"], :lang(de) { hyphens: auto; -webkit-hyphens: auto; }

/* --- Layout: grids to single column --- */
.grid-hero, .grid-2, .grid-3, .footer-grid { grid-template-columns: 1fr; }
.content-grid { display: flex; flex-direction: column; padding: 0; gap: 8px; }
.term-list { grid-template-columns: 1fr; }
.input-row { flex-direction: column; }
.competitor-grid { grid-template-columns: 1fr; }

/* --- Header: burger nav --- */
.header-nav { display: none; }
.burger-toggle { display: block; }

/* --- Mobile nav (slide-in) --- */
.site-nav {
  display: block; position: fixed; top: 0; right: -220px;
  width: 220px; height: 100vh; background: var(--c-bg);
  z-index: 1000; transition: right 0.3s;
  box-shadow: -4px 0 20px rgba(0,0,0,0.1);
  padding: 20px; overflow-y: auto;
}
.site-nav.open { right: 0; }
.site-nav-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; }
.site-nav-close { background: none; border: none; font-size: 28px; cursor: pointer; color: var(--c-text-3); min-height: 44px; }
.site-nav-links a {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 0; border-bottom: 1px solid var(--c-border);
  font-size: 16px; color: var(--c-text); text-decoration: none;
  min-height: 44px;
}
.site-nav-links a svg { width: 15px; height: 15px; flex-shrink: 0; }
.site-nav-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.3); z-index: 999; }
.site-nav-overlay.open { display: block; }
body.menu-open { overflow: hidden; }

/* --- Hero (index) --- */
.hero { padding: 10px 0 0; margin-bottom: 20px; }
.hero-body { margin-bottom: 8px; }
.hero-actions { margin-bottom: 0; }
.hero-link { margin-bottom: 0; min-height: 44px; display: inline-flex; align-items: center; }
.grid-hero { gap: 4px; }
.hero-preview { padding: 10px 12px; margin-top: 0; margin-bottom: 0; }
.hero-preview .label { margin-bottom: 2px; font-size: 11px; }
.hero-preview-item { padding: 4px 0; }

/* --- Proof-points (index) --- */
.proof { text-align: center; padding: 4px 0; border-bottom: 1px solid var(--c-border); }
.proof:last-child { border-bottom: none; }

/* --- Sections & spacing --- */
.section, .section--alt { padding: 20px 0; }
.cta-block { padding: 20px 0; }
.content-section { padding: 6px 0; }
.content-section + .content-section { margin-top: var(--space-md); }
.content-section:first-child { padding-top: 0; }
.content-section:first-child h2:first-child { margin-top: 0; }
.content-main h2 { margin-top: var(--space-lg); }
h2 { margin-bottom: 6px; }
.page-header { padding: 10px 0; }

/* --- TOC: static on mobile (methodology, article sidebar) --- */
.toc { position: static; border-left: none; border-bottom: none; padding: 10px 0 0; margin-bottom: 0; order: -1; }

/* --- Report score block --- */
.report-score { flex-direction: column; }
.score-main { border-right: none; border-bottom: 1px solid var(--c-border); }
.report-header { flex-direction: column; gap: var(--space-sm); }

/* --- Grids: 2-col compacts --- */
.scenario-grid { grid-template-columns: repeat(2, 1fr); }
.mode-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mode-grid > * { min-width: 0; }
.task-grid { grid-template-columns: repeat(2, 1fr); }
.scheme-grid { grid-template-columns: repeat(2, 1fr); }
.metric-grid { grid-template-columns: repeat(2, 1fr); }
.filter-row { flex-wrap: wrap; }

/* --- KB summaries hide --- */
.kb-summary { display: none; }

/* --- KB table: scroll wrapper + hide cols --- */
.kb-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.kb-table { min-width: 100%; }
.kb-table td:nth-child(2), .kb-table td:nth-child(3),
.kb-table th:nth-child(2), .kb-table th:nth-child(3) { display: none; }

/* --- Method-table: card layout --- */
.method-table { display: block; }
.method-table thead { display: none; }
.method-table tbody { display: block; }
.method-table tr { display: block; padding: 10px 0; border-bottom: 1px solid var(--c-border); }
.method-table td {
  display: block; padding: 2px 0; border: none;
  text-align: left; width: auto; max-width: none;
}
.method-table td:first-child {
  font-weight: 700; color: var(--c-text);
  font-size: var(--type-body); display: inline; width: auto; max-width: none;
}
.method-table td:first-child::after { content: '\00a0\00a0'; }

/* Glossary (KB): columns = Metric / Weight / Description */
#mode-ref .method-table td:nth-child(2) {
  font-size: var(--type-small); color: var(--c-cta);
  display: inline; font-weight: 600; width: auto;
}
#mode-ref .method-table td:last-child {
  font-size: var(--type-small); color: var(--c-text-2);
  font-weight: 400; text-align: left; width: auto;
}

/* Methodology: columns = Metric / Description / Weight — reorder */
.content-main .method-table tr { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; }
.content-main .method-table td:first-child { order: 1; display: block; }
.content-main .method-table td:first-child::after { content: none; }
.content-main .method-table td:nth-child(2) {
  order: 3; width: 100%; font-size: var(--type-small);
  color: var(--c-text-2); font-weight: 400;
}
.content-main .method-table td:last-child {
  order: 2; font-size: var(--type-small);
  color: var(--c-cta); font-weight: 600; width: auto;
}

/* Two-col tables (no weight column) */
.method-table.two-col td:first-child { display: block; }
.method-table.two-col td:first-child::after { content: none; }
.method-table.two-col td:nth-child(2) { display: block; color: var(--c-text-2); font-weight: 400; }

/* --- Text alignment --- */
body { text-align: left; }
.content-main p, .hero-body, .faq-a { text-align: left; }

/* --- Bar chart --- */
.bar-row { grid-template-columns: 1fr; gap: 4px; }
.bar-score { text-align: left; }

/* --- Article meta --- */
.article-meta-item { flex-direction: column; gap: 2px; }
.article-meta-item dt { min-width: auto; }

/* --- Run list --- */
.run-table-head { display: none; }
.run-row-wrap { flex-direction: column; align-items: stretch; padding: 8px 0; }
.run-list { width: 100%; }
.run-row { flex-direction: column; gap: 4px; padding: 12px 0; }
.run-delete-btn { opacity: 0.5; }
.run-meta { display: none; }

/* --- Formula scroll --- */
.formula-block { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.formula-block svg { min-width: 300px; }

/* --- Footer --- */
.site-footer { padding: 12px 0 8px; }
.site-footer .container { padding: 0 16px; }
.footer-grid { gap: 8px; }
.footer-title { margin-bottom: 2px; font-size: 14px; }
.footer-text { margin-bottom: 2px; font-size: 12px; line-height: 1.4; word-break: break-word; overflow-wrap: anywhere; }
.footer-legal { margin-top: 8px; padding-top: 8px; font-size: 11px; line-height: 1.3; word-break: break-word; overflow-wrap: anywhere; }
.footer-legal a { min-height: 32px; display: inline-flex; align-items: center; padding: 4px; }

/* --- Trust block --- */
.trust-block { padding: var(--space-md); margin: var(--space-lg) 0; }
.trust-block__list { grid-template-columns: 1fr; gap: var(--space-md); }

} /* end @media */