/* myfairbike.de – Layout für Hub-Seiten (Ratgeber-Übersicht, Über uns, Was ist Fair Value) */
/* Nutzt dieselben Designwerte wie die Rechner-Seiten; eingebunden nach style.css.        */

:root{
  --mfv-ink:#1C1B18;
  --mfv-ink-soft:#4A463E;
  --mfv-mute:#6B665C;
  --mfv-rule:#DDD7CA;
  --mfv-paper:#F4F1EA;
  --mfv-accent:#2043B5;
}
*{box-sizing:border-box}
body{margin:0;background:var(--mfv-paper);color:var(--mfv-ink);font-family:'Archivo','Helvetica Neue',Arial,sans-serif;font-size:1rem;line-height:1.6;-webkit-font-smoothing:antialiased;padding:0 1rem 3rem}
a{color:var(--mfv-accent);text-underline-offset:3px}
a:hover{color:var(--mfv-ink)}

.wrap{max-width:640px;margin:0 auto}
.breadcrumb{padding-top:1.5rem;font-size:.88rem;color:var(--mfv-mute)}
.breadcrumb a{color:var(--mfv-mute)}
.breadcrumb a:hover{color:var(--mfv-ink)}

.hero h1{font-weight:800;letter-spacing:-.025em;line-height:1.02;text-wrap:balance;margin:.4rem 0 1rem}
.lede{font-size:1.1rem;line-height:1.6;color:var(--mfv-ink-soft);max-width:34em;margin:0}
.eyebrow{display:block;font-size:.88rem;font-weight:600;color:var(--mfv-accent);margin-bottom:.35rem}

.section{padding:2.5rem 0}
.section-bordered{border-top:1px solid var(--mfv-rule)}
.section-alt{background:transparent}
.section h2{font-size:1.5rem;font-weight:800;letter-spacing:-.015em;line-height:1.2;margin:0 0 .75rem}
.section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:1rem;flex-wrap:wrap;margin-bottom:1.25rem}
.section-head h2{margin:0}
.cta-link{font-size:.95rem;font-weight:600;text-decoration:none;white-space:nowrap}
.cta-link .arrow{display:inline-block;transition:transform .15s}
.cta-link:hover .arrow{transform:translateX(3px)}

.prose h2{margin-top:2rem}
.prose h2:first-child{margin-top:0}
.prose p{color:var(--mfv-ink-soft);line-height:1.7;margin:0 0 1rem}

.article-grid{display:grid;grid-template-columns:1fr;gap:.75rem}
.article-card{display:block;background:#FFFFFF;border:1px solid var(--mfv-rule);border-radius:3px;padding:1.1rem 1.25rem;transition:border-color .15s}
.article-card:hover{border-color:var(--mfv-ink)}
.article-card .cat{display:block;font-size:.82rem;font-weight:600;color:var(--mfv-accent);margin-bottom:.25rem}
.article-card h3{font-size:1.1rem;font-weight:700;line-height:1.3;margin:0 0 .35rem;color:var(--mfv-ink)}
.article-card p{font-size:.95rem;line-height:1.55;color:var(--mfv-mute);margin:0}

@media(min-width:700px){
  .article-grid{grid-template-columns:1fr 1fr}
}