.page{position:relative;z-index:1;max-width:860px;margin:0 auto;padding:60px 28px 100px}.hero{padding:60px 0 50px;text-align:center}.hero-title{font-family:var(--mono);font-size:clamp(1.8rem,4.5vw,2.8rem);font-weight:600;letter-spacing:-.04em;line-height:1.12;margin-bottom:22px}.hero-lead{font-size:1.02rem;color:var(--dim);line-height:1.72;max-width:56ch;margin:0 auto}.section{margin-top:64px}.section-label{font-family:var(--mono);font-size:.48rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-dim);margin-bottom:14px}.section-title{font-family:var(--mono);font-size:1.35rem;font-weight:600;letter-spacing:-.03em;margin-bottom:18px}.body-text{font-size:.93rem;line-height:1.8;color:var(--ink);margin-bottom:14px}.section-divider{border:none;border-top:1px solid var(--line);margin:56px 0 0}.color-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:24px}.color-card{border-radius:10px;padding:18px 16px;border:1px solid;text-align:center}.color-card--r{border-color:#ff557740;background:#ff557712}.color-card--g{border-color:#00e06a40;background:#00e06a12}.color-card--b{border-color:#4d8aff40;background:#4d8aff12}.color-card-dot{width:32px;height:32px;border-radius:50%;margin:0 auto 10px}.color-card--r .color-card-dot{background:#f57}.color-card--g .color-card-dot{background:#00e06a}.color-card--b .color-card-dot{background:#4d8aff}.color-card-name{font-family:var(--mono);font-size:.7rem;font-weight:600;margin-bottom:4px}.color-card--r .color-card-name{color:#f57}.color-card--g .color-card-name{color:#00e06a}.color-card--b .color-card-name{color:#4d8aff}.color-card-desc{font-size:.72rem;line-height:1.55;color:var(--dim)}.flux-visual{margin:28px 0;display:flex;align-items:center;justify-content:center;gap:0}.flux-quark{width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:.8rem;font-weight:600;flex-shrink:0}.flux-quark--q{background:#ff557740;border:2px solid #ff5577;color:#f57}.flux-quark--qbar{background:#4d8aff40;border:2px solid #4d8aff;color:#4d8aff}.flux-tube{flex:1;height:8px;background:linear-gradient(90deg,#f579,#ffb02eb3,#4d8aff99);border-radius:2px;min-width:60px;max-width:200px;position:relative}.flux-tube:after{content:"Farbflusskette";position:absolute;bottom:-22px;left:50%;transform:translate(-50%);font-family:var(--mono);font-size:.46rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-dim);white-space:nowrap}.hadron-row{display:flex;gap:12px;margin-top:24px;flex-wrap:wrap}.hadron-card{border-radius:10px;padding:18px 20px;border:1px solid;flex:1;min-width:200px}.hadron-card--baryon{border-color:#ffb02e33;background:#ffb02e0a}.hadron-card--meson{border-color:#00e06a33;background:#00e06a0a}.hadron-kw{font-family:var(--mono);font-size:.56rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;margin-bottom:8px}.hadron-card--baryon .hadron-kw{color:var(--h)}.hadron-card--meson .hadron-kw{color:var(--b)}.hadron-example{font-family:var(--mono);font-size:1.1rem;font-weight:600;margin-bottom:6px}.hadron-card--baryon .hadron-example{color:var(--h)}.hadron-card--meson .hadron-example{color:var(--b)}.hadron-desc{font-size:.78rem;line-height:1.6;color:var(--dim)}.callout{background:#ffb02e0d;border:1px solid rgba(255,176,46,.18);border-radius:10px;padding:20px 22px;margin-top:22px}.callout-label{font-family:var(--mono);font-size:.5rem;letter-spacing:.16em;text-transform:uppercase;color:var(--h);margin-bottom:8px}.callout p{font-size:.86rem;line-height:1.72;color:var(--ink)}.bottom-nav{margin-top:64px;display:flex;gap:12px;flex-wrap:wrap}.btn-link{font-family:var(--mono);font-size:.66rem;letter-spacing:.03em;padding:10px 18px;border-radius:6px;text-decoration:none;border:1px solid;transition:background .18s,border-color .18s,color .18s}.btn-link--primary{background:#4d8aff1f;border-color:#4d8aff66;color:var(--q)}.btn-link--primary:hover{background:#4d8aff38;border-color:var(--q)}.btn-link--secondary{border-color:var(--ink-dim);color:var(--ink-dim)}.btn-link--secondary:hover{border-color:var(--ink-dim);color:var(--ink)}@media (max-width:600px){.color-grid{grid-template-columns:1fr 1fr}}